Refactor date picker components for improved accessibility and usability

- Add `showPicker` event to trigger native date picker overlays.
- Adjust z-index and positioning for hidden `input` elements to improve interaction.
- Reorganize markup for consistent focus and selection behavior across components.

apps/web/src/lib/components/BookingModal.svelte

@@ -254,16 +254,17 @@
               {$t('booking.bookingDate')}
             </label>
             <div class="relative">
-              <div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl font-medium text-gray-700 flex justify-between items-center shadow-sm">
-                <span>{format(new Date(bookingDate + 'T00:00:00'), dateFormat, { locale: dateLocale })}</span>
-                <Calendar size={18} class="text-indigo-600" />
-              </div>
               <input 
                 type="date" 
                 bind:value={bookingDate}
                 min={new Date().toISOString().split('T')[0]}
-                class="absolute inset-0 opacity-0 cursor-pointer w-full" 
+                class="absolute inset-0 opacity-0 cursor-pointer w-full z-10" 
+                on:click={(e) => e.currentTarget.showPicker()}
               />
+              <div class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl font-medium text-gray-700 flex justify-between items-center shadow-sm">
+                <span>{format(new Date(bookingDate + 'T00:00:00'), dateFormat, { locale: dateLocale })}</span>
+                <Calendar size={18} class="text-indigo-600" />
+              </div>
             </div>
           </div>
 

apps/web/src/routes/dashboard/building/[id]/+page.svelte

@@ -104,16 +104,17 @@
       <div class="flex items-center gap-3 w-full lg:w-auto">
         <div class="relative flex-1 lg:flex-none min-w-[200px]">
           <span class="absolute -top-2 left-3 px-1 bg-gray-50 text-[10px] font-bold text-indigo-600 uppercase tracking-wider">{$t('building.selectDate')}</span>
-          <div class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl font-medium text-gray-700 shadow-sm flex items-center justify-between">
-             <span class="capitalize">{format(selectedDate, dateFormat, { locale: dateLocale })}</span>
-             <Calendar size={18} class="text-indigo-600" />
-          </div>
           <input
             id="date-select"
             type="date"
             bind:value={selectedDateString}
-            class="absolute inset-0 opacity-0 cursor-pointer"
+            class="absolute inset-0 opacity-0 cursor-pointer z-10 w-full h-full"
+            on:click={(e) => e.currentTarget.showPicker()}
           />
+          <div class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl font-medium text-gray-700 shadow-sm flex items-center justify-between">
+             <span class="capitalize">{format(selectedDate, dateFormat, { locale: dateLocale })}</span>
+             <Calendar size={18} class="text-indigo-600" />
+          </div>
         </div>
 
         <div class="relative flex-1 lg:flex-none min-w-[200px]">

apps/web/src/routes/dashboard/floor/[id]/+page.svelte

@@ -63,14 +63,19 @@
       </div>
 
       <div class="flex items-center gap-3">
-        <div class="relative min-w-[180px]">
+        <div class="relative min-w-[200px]">
-          <label for="date-select" class="absolute -top-2 left-3 px-1 bg-white text-[10px] font-bold text-indigo-600 uppercase tracking-wider">Select Date</label>
+          <span class="absolute -top-2 left-3 px-1 bg-white text-[10px] font-bold text-indigo-600 uppercase tracking-wider">Select Date</span>
           <input
             id="date-select"
             type="date"
             bind:value={selectedDateString}
-            class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent font-medium text-gray-700 shadow-sm"
+            class="absolute inset-0 opacity-0 cursor-pointer z-10 w-full h-full"
+            on:click={(e) => e.currentTarget.showPicker()}
           />
+          <div class="w-full pl-3 pr-4 py-3 bg-white border border-gray-300 rounded-xl font-medium text-gray-700 shadow-sm flex items-center justify-between">
+             <span>{selectedDate.toLocaleDateString('en-CA', { weekday: 'long', month: 'long', day: 'numeric' })}</span>
+             <Calendar size={18} class="text-indigo-600" />
+          </div>
         </div>
       </div>
     </div>

apps/web/src/routes/dashboard/my-bookings/+page.svelte

@@ -265,15 +265,16 @@
           <div class="col-span-2">
             <label class="block text-sm font-medium text-gray-700 mb-1">{$t('booking.date')}</label>
             <div class="relative">
+               <input 
+                 type="date" 
+                 bind:value={editStartTimeDate}
+                 class="absolute inset-0 opacity-0 cursor-pointer w-full z-10"
+                 on:click={(e) => e.currentTarget.showPicker()}
+               />
                <div class="w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-700 flex justify-between items-center">
                   <span>{format(new Date(editStartTimeDate + 'T00:00:00'), dateFormat, { locale: dateLocale })}</span>
                   <Calendar size={16} class="text-gray-400" />
                </div>
-               <input 
-                 type="date" 
-                 bind:value={editStartTimeDate}
-                 class="absolute inset-0 opacity-0 cursor-pointer w-full"
-               />
             </div>
           </div>