working with corrent date entry

vitallink/frontend/kiosk/src/App.jsx

@@ -14,6 +14,7 @@ function App() {
     symptoms: [],
     severity: 'moderate'
   });
+  const [dobDisplay, setDobDisplay] = useState('');
   const [assignedBand, setAssignedBand] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
@@ -28,6 +29,8 @@ function App() {
     'Dizziness', 'Injury/Trauma', 'Other'
   ];
 
+  const fieldOrder = ['firstName', 'lastName', 'dob'];
+
   const handleSymptomToggle = (symptom) => {
     setFormData(prev => ({
       ...prev,
@@ -37,8 +40,62 @@ function App() {
     }));
   };
 
+  const formatDateUS = (digits) => {
+    // Only keep digits, max 8
+    const cleaned = digits.replace(/\D/g, '').slice(0, 8);
+    
+    let formatted = '';
+    
+    // Add slashes as user types: MM/DD/YYYY
+    if (cleaned.length >= 1) {
+      formatted = cleaned.slice(0, 2); // MM
+    }
+    if (cleaned.length >= 3) {
+      formatted += '/' + cleaned.slice(2, 4); // DD
+    }
+    if (cleaned.length >= 5) {
+      formatted += '/' + cleaned.slice(4, 8); // YYYY
+    }
+    
+    return formatted;
+  };
+
+  const convertToISODate = (usDate) => {
+    // Convert MM/DD/YYYY to YYYY-MM-DD for backend
+    const match = usDate.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+    if (match) {
+      const [_, month, day, year] = match;
+      return `${year}-${month}-${day}`;
+    }
+    return '';
+  };
+
+  const getDatePreview = (usDate) => {
+    const match = usDate.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+    if (match) {
+      const [_, month, day, year] = match;
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+      const monthIdx = parseInt(month) - 1;
+      if (monthIdx >= 0 && monthIdx < 12) {
+        const monthName = months[monthIdx];
+        return `${monthName} ${parseInt(day)}, ${year}`;
+      }
+    }
+    return '';
+  };
+
   const onKeyboardChange = (input) => {
-    if (activeField) {
+    if (activeField === 'dob') {
+      // Keep only the raw digits the user types
+      const digitsOnly = input.replace(/\D/g, '');
+      const formatted = formatDateUS(digitsOnly);
+      
+      setDobDisplay(formatted);
+      setFormData(prev => ({
+        ...prev,
+        dob: convertToISODate(formatted)
+      }));
+    } else if (activeField) {
       setFormData(prev => ({
         ...prev,
         [activeField]: input
@@ -50,7 +107,24 @@ function App() {
     if (button === "{shift}" || button === "{lock}") {
       setLayoutName(layoutName === "default" ? "shift" : "default");
     }
-    if (button === "{enter}" || button === "{close}") {
+    
+    if (button === "{tab}") {
+      const currentIndex = fieldOrder.indexOf(activeField);
+      const nextIndex = (currentIndex + 1) % fieldOrder.length;
+      const nextField = fieldOrder[nextIndex];
+      
+      setActiveField(nextField);
+      setLayoutName(nextField === 'dob' ? 'numbers' : 'default');
+      
+      setTimeout(() => {
+        if (keyboard.current) {
+          const value = nextField === 'dob' ? dobDisplay.replace(/\//g, '') : formData[nextField] || '';
+          keyboard.current.setInput(value);
+        }
+      }, 100);
+    }
+    
+    if (button === "{enter}") {
       setShowKeyboard(false);
       setActiveField(null);
     }
@@ -59,9 +133,13 @@ function App() {
   const handleInputFocus = (fieldName) => {
     setActiveField(fieldName);
     setShowKeyboard(true);
+    setLayoutName(fieldName === 'dob' ? 'numbers' : 'default');
+    
     setTimeout(() => {
       if (keyboard.current) {
-        keyboard.current.setInput(formData[fieldName] || '');
+        // For date field, show only digits (no slashes) in keyboard input
+        const value = fieldName === 'dob' ? dobDisplay.replace(/\//g, '') : formData[fieldName] || '';
+        keyboard.current.setInput(value);
       }
     }, 100);
   };
@@ -141,8 +219,10 @@ function App() {
   }
 
   if (step === 'form') {
+    const datePreview = getDatePreview(dobDisplay);
+    
     return (
-      <div className={`min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-4 transition-all ${showKeyboard ? 'pb-[400px]' : ''}`}>
+      <div className={`min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-4 transition-all ${showKeyboard ? 'pb-[550px]' : ''}`}>
         <div className="max-w-3xl mx-auto pt-8">
           <div className="bg-white rounded-2xl shadow-2xl p-8">
             <h2 className="text-3xl font-bold text-gray-800 mb-6">Patient Information</h2>
@@ -188,16 +268,22 @@ function App() {
 
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Date of Birth * (YYYY-MM-DD)
+                  Date of Birth *
                 </label>
                 <input
                   type="text"
-                  value={formData.dob}
+                  value={dobDisplay}
                   onFocus={() => handleInputFocus('dob')}
-                  onChange={(e) => setFormData({...formData, dob: e.target.value})}
+                  readOnly
                   className="w-full px-6 py-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-xl font-semibold cursor-pointer"
-                  placeholder="Tap to enter date"
+                  placeholder="MM/DD/YYYY"
                 />
+                {datePreview && (
+                  <p className="mt-2 text-green-600 font-semibold text-lg flex items-center gap-2">
+                    <CheckCircle className="w-5 h-5" />
+                    {datePreview}
+                  </p>
+                )}
               </div>
 
               <div>
@@ -269,42 +355,61 @@ function App() {
           </div>
         </div>
 
-        {/* Simple Keyboard */}
+        {/* Large Touchscreen Keyboard */}
         {showKeyboard && (
-          <div className="fixed bottom-0 left-0 right-0 bg-white border-t-4 border-blue-500 shadow-2xl p-4 z-50">
+          <div className="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-800 to-gray-700 border-t-4 border-blue-500 shadow-2xl p-6 z-50">
-            <div className="max-w-6xl mx-auto">
+            <div className="max-w-7xl mx-auto">
+              <div className="text-center mb-4">
+                <p className="text-white text-2xl font-bold mb-2">
+                  {activeField === 'firstName' ? '👤 First Name' : 
+                   activeField === 'lastName' ? '👤 Last Name' : 
+                   '📅 Date of Birth'}
+                </p>
+                {activeField === 'dob' && (
+                  <div className="bg-blue-600 text-white px-6 py-3 rounded-lg inline-block">
+                    <p className="text-lg">
+                      Type: <span className="font-mono text-2xl">{dobDisplay || 'MM/DD/YYYY'}</span>
+                    </p>
+                    {datePreview && (
+                      <p className="text-sm text-blue-200 mt-1">= {datePreview}</p>
+                    )}
+                  </div>
+                )}
+              </div>
+
               <Keyboard
                 keyboardRef={r => (keyboard.current = r)}
                 layoutName={activeField === 'dob' ? 'numbers' : layoutName}
                 onChange={onKeyboardChange}
                 onKeyPress={onKeyPress}
-                theme="hg-theme-default hg-layout-default vitallink-keyboard"
+                theme="hg-theme-default hg-layout-default kiosk-keyboard"
                 display={{
-                  '{bksp}': '⌫',
+                  '{bksp}': '⌫ Delete',
                   '{enter}': '✓ Done',
+                  '{tab}': '→ Next',
                   '{shift}': '⬆',
-                  '{space}': '___________',
+                  '{space}': '_____ Space _____',
                 }}
                 layout={activeField === 'dob' ? {
                   numbers: [
                     "1 2 3",
                     "4 5 6",
                     "7 8 9",
-                    "0 - {bksp}",
+                    "{bksp} 0 {tab}",
                     "{enter}"
                   ]
                 } : {
                   default: [
                     "Q W E R T Y U I O P {bksp}",
-                    "A S D F G H J K L {enter}",
+                    "A S D F G H J K L",
                     "{shift} Z X C V B N M {shift}",
-                    "{space}"
+                    "{tab} {space} {enter}"
                   ],
                   shift: [
                     "Q W E R T Y U I O P {bksp}",
-                    "A S D F G H J K L {enter}",
+                    "A S D F G H J K L",
                     "{shift} Z X C V B N M {shift}",
-                    "{space}"
+                    "{tab} {space} {enter}"
                   ]
                 }}
               />
@@ -367,6 +472,7 @@ function App() {
             onClick={() => {
               setStep('welcome');
               setFormData({ firstName: '', lastName: '', dob: '', symptoms: [], severity: 'moderate' });
+              setDobDisplay('');
               setAssignedBand(null);
               setError(null);
             }}

vitallink/logs/all_pids.txt

@@ -1,4 +1,4 @@
-49707
+52899
-49720
+52915
-49854
+52934
-50116
+52970

vitallink/logs/backend.pid

@@ -1 +1 @@
-49707
+52899

vitallink/logs/dashboard.log

@@ -3,7 +3,7 @@
 > vite
 
 
-  VITE v7.1.10  ready in 357 ms
+  VITE v7.1.10  ready in 231 ms
 
   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose

vitallink/logs/dashboard.pid

@@ -1 +1 @@
-49854
+52934

vitallink/logs/kiosk.log

@@ -4,7 +4,135 @@
 
 Port 5173 is in use, trying another one...
 
-  VITE v7.1.10  ready in 339 ms
+  VITE v7.1.10  ready in 233 ms
 
   ➜  Local:   http://localhost:5174/
   ➜  Network: use --host to expose
+10:36:25 AM [vite] (client) Pre-transform error: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):
+
+> 1 | @import "tailwindcss";
+    | ^
+  2 |
+  3 | /* Extra large touchscreen keyboard */
+  4 | .kiosk-keyboard .hg-button {
+
+Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
+If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
+
+If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
+
+  Plugin: vite:react-babel
+  File: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx:1:0
+  1  |  @import "tailwindcss";
+     |  ^
+  2  |  
+  3  |  /* Extra large touchscreen keyboard */
+10:36:25 AM [vite] Internal server error: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):
+
+> 1 | @import "tailwindcss";
+    | ^
+  2 |
+  3 | /* Extra large touchscreen keyboard */
+  4 | .kiosk-keyboard .hg-button {
+
+Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
+If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
+
+If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
+
+  Plugin: vite:react-babel
+  File: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx:1:0
+  1  |  @import "tailwindcss";
+     |  ^
+  2  |  
+  3  |  /* Extra large touchscreen keyboard */
+      at constructor (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:367:19)
+      at JSXParserMixin.raise (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6630:19)
+      at JSXParserMixin.expectOnePlugin (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6664:18)
+      at JSXParserMixin.parseDecorator (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12957:10)
+      at JSXParserMixin.parseDecorators (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12942:28)
+      at JSXParserMixin.parseStatementLike (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12774:25)
+      at JSXParserMixin.parseModuleItem (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12753:17)
+      at JSXParserMixin.parseBlockOrModuleBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13325:36)
+      at JSXParserMixin.parseBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13318:10)
+      at JSXParserMixin.parseProgram (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12634:10)
+      at JSXParserMixin.parseTopLevel (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12624:25)
+      at JSXParserMixin.parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14501:10)
+      at parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14535:38)
+      at parser (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/parser/index.js:41:34)
+      at parser.next (<anonymous>)
+      at normalizeFile (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37)
+      at normalizeFile.next (<anonymous>)
+      at run (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/index.js:22:50)
+      at run.next (<anonymous>)
+      at transform (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transform.js:22:33)
+      at transform.next (<anonymous>)
+      at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:261:32)
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
+      at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:189:28
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:113:33
+      at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:287:14)
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
+      at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
+10:36:28 AM [vite] Internal server error: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):
+
+> 1 | @import "tailwindcss";
+    | ^
+  2 |
+  3 | /* Extra large touchscreen keyboard */
+  4 | .kiosk-keyboard .hg-button {
+
+Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
+If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
+
+If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
+
+  Plugin: vite:react-babel
+  File: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx:1:0
+  1  |  @import "tailwindcss";
+     |  ^
+  2  |  
+  3  |  /* Extra large touchscreen keyboard */
+      at constructor (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:367:19)
+      at JSXParserMixin.raise (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6630:19)
+      at JSXParserMixin.expectOnePlugin (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6664:18)
+      at JSXParserMixin.parseDecorator (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12957:10)
+      at JSXParserMixin.parseDecorators (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12942:28)
+      at JSXParserMixin.parseStatementLike (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12774:25)
+      at JSXParserMixin.parseModuleItem (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12753:17)
+      at JSXParserMixin.parseBlockOrModuleBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13325:36)
+      at JSXParserMixin.parseBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13318:10)
+      at JSXParserMixin.parseProgram (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12634:10)
+      at JSXParserMixin.parseTopLevel (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12624:25)
+      at JSXParserMixin.parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14501:10)
+      at parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14535:38)
+      at parser (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/parser/index.js:41:34)
+      at parser.next (<anonymous>)
+      at normalizeFile (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37)
+      at normalizeFile.next (<anonymous>)
+      at run (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/index.js:22:50)
+      at run.next (<anonymous>)
+      at transform (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transform.js:22:33)
+      at transform.next (<anonymous>)
+      at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:261:32)
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
+      at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:189:28
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:113:33
+      at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:287:14)
+      at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
+      at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
+10:38:52 AM [vite] (client) hmr update /src/index.css
+10:43:47 AM [vite] (client) hmr update /src/App.jsx, /src/index.css

vitallink/logs/kiosk.pid

@@ -1 +1 @@
-50116
+52970

vitallink/logs/wristbands.pid

@@ -1 +1 @@
-49720
+52915