current working build

vitallink/frontend/kiosk/src/App.jsx

@@ -50,7 +50,7 @@ function App() {
     if (button === "{shift}" || button === "{lock}") {
       setLayoutName(layoutName === "default" ? "shift" : "default");
     }
-    if (button === "{close}") {
+    if (button === "{enter}" || button === "{close}") {
       setShowKeyboard(false);
       setActiveField(null);
     }
@@ -59,9 +59,11 @@ function App() {
   const handleInputFocus = (fieldName) => {
     setActiveField(fieldName);
     setShowKeyboard(true);
-    if (keyboard.current) {
-      keyboard.current.setInput(formData[fieldName]);
-    }
+    setTimeout(() => {
+      if (keyboard.current) {
+        keyboard.current.setInput(formData[fieldName] || '');
+      }
+    }, 100);
   };
 
   const handleSubmit = async () => {
@@ -140,7 +142,7 @@ function App() {
 
   if (step === 'form') {
     return (
-      <div className={`min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-4 transition-all ${showKeyboard ? 'pb-[450px]' : ''}`}>
+      <div className={`min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-4 transition-all ${showKeyboard ? 'pb-[400px]' : ''}`}>
         <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>
@@ -186,13 +188,15 @@ function App() {
 
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Date of Birth *
+                  Date of Birth * (YYYY-MM-DD)
                 </label>
                 <input
-                  type="date"
+                  type="text"
                   value={formData.dob}
+                  onFocus={() => handleInputFocus('dob')}
                   onChange={(e) => setFormData({...formData, dob: e.target.value})}
-                  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"
+                  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"
                 />
               </div>
 
@@ -265,68 +269,42 @@ function App() {
           </div>
         </div>
 
-        {/* react-simple-keyboard */}
+        {/* Simple Keyboard */}
         {showKeyboard && (
-          <div className="fixed bottom-0 left-0 right-0 bg-white border-t-4 border-blue-500 shadow-2xl p-6 z-50">
+          <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="max-w-6xl mx-auto">
-              <div className="flex justify-between items-center mb-4">
-                <div>
-                  <p className="text-sm text-gray-600">Currently typing:</p>
-                  <p className="font-bold text-2xl text-gray-800">
-                    {activeField === 'firstName' ? 'First Name' : 'Last Name'}
-                  </p>
-                </div>
-                <button 
-                  onClick={() => {
-                    setShowKeyboard(false);
-                    setActiveField(null);
-                  }}
-                  className="bg-red-500 text-white px-6 py-3 rounded-lg text-xl font-bold hover:bg-red-600 active:scale-95"
-                >
-                  ✕ Close
-                </button>
-              </div>
-              
-              <div className="bg-gray-100 p-4 rounded-lg mb-4">
-                <p className="text-gray-600 text-sm mb-1">Preview:</p>
-                <p className="text-2xl font-mono font-bold text-gray-800">
-                  {formData[activeField] || '(empty)'}
-                </p>
-              </div>
-
               <Keyboard
                 keyboardRef={r => (keyboard.current = r)}
-                layoutName={layoutName}
+                layoutName={activeField === 'dob' ? 'numbers' : layoutName}
                 onChange={onKeyboardChange}
                 onKeyPress={onKeyPress}
                 theme="hg-theme-default hg-layout-default vitallink-keyboard"
                 display={{
-                  '{bksp}': '⌫ backspace',
-                  '{enter}': 'enter',
-                  '{shift}': '⬆ shift',
-                  '{lock}': 'caps',
-                  '{tab}': 'tab',
-                  '{space}': 'space',
-                  '{close}': '✓ Done'
+                  '{bksp}': '⌫',
+                  '{enter}': '✓ Done',
+                  '{shift}': '⬆',
+                  '{space}': '___________',
                 }}
-                buttonTheme={[
-                  {
-                    class: "hg-close-button",
-                    buttons: "{close}"
-                  }
-                ]}
-                layout={{
+                layout={activeField === 'dob' ? {
+                  numbers: [
+                    "1 2 3",
+                    "4 5 6",
+                    "7 8 9",
+                    "0 - {bksp}",
+                    "{enter}"
+                  ]
+                } : {
                   default: [
                     "Q W E R T Y U I O P {bksp}",
-                    "A S D F G H J K L",
+                    "A S D F G H J K L {enter}",
                     "{shift} Z X C V B N M {shift}",
-                    "{space} {close}"
+                    "{space}"
                   ],
                   shift: [
                     "Q W E R T Y U I O P {bksp}",
-                    "A S D F G H J K L",
+                    "A S D F G H J K L {enter}",
                     "{shift} Z X C V B N M {shift}",
-                    "{space} {close}"
+                    "{space}"
                   ]
                 }}
               />
@@ -400,6 +378,8 @@ function App() {
       </div>
     );
   }
+
+  return null;
 }
 
 export default App;