Improved booking panel

apps/frontend/src/features/home/home-page.tsx

@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import type { AdminBooking } from '@repo/api-contract'
 import { Button } from '@/components/ui/button'
+import { DatePicker } from '@/components/ui/date-picker'
 import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import {
@@ -42,6 +43,12 @@ function toIsoDateLocal(date: Date) {
   return `${year}-${month}-${day}`
 }
 
+function fromIsoDateLocal(dateIso: string): Date | undefined {
+  const [year, month, day] = dateIso.split('-').map(Number)
+  if (!year || !month || !day) return undefined
+  return new Date(year, month - 1, day)
+}
+
 function extractMessage(error: unknown, fallback: string) {
   if (error instanceof ApiClientError) {
     return error.message || fallback
@@ -317,14 +324,20 @@ export function HomePage() {
         <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
           <Field>
             <FieldLabel htmlFor="fromDate">Mostrar desde</FieldLabel>
-            <Input
-              id="fromDate"
-              type="date"
-              value={fromDate}
-              min={todayIso}
-              onChange={(event) => {
-                setFromDate(event.target.value)
+            <DatePicker
+              value={fromIsoDateLocal(fromDate)}
+              onChange={(date) => {
+                const isoDate = date ? toIsoDateLocal(date) : todayIso
+                setFromDate(isoDate)
               }}
+              disabled={(date) => {
+                const today = new Date()
+                today.setHours(0, 0, 0, 0)
+                const checkDate = new Date(date)
+                checkDate.setHours(0, 0, 0, 0)
+                return checkDate < today
+              }}
+              placeholder="Selecciona una fecha"
             />
           </Field>
         </div>
@@ -435,16 +448,16 @@ export function HomePage() {
         <div className="mt-4 grid gap-3 md:grid-cols-3">
           <Field>
             <FieldLabel htmlFor="manualDate">Fecha</FieldLabel>
-            <Input
-              id="manualDate"
-              type="date"
-              min={todayIso}
-              value={manualDate}
-              onChange={(event) => {
-                setManualDate(event.target.value)
+            <DatePicker
+              value={fromIsoDateLocal(manualDate)}
+              onChange={(date) => {
+                const isoDate = date ? toIsoDateLocal(date) : todayIso
+                setManualDate(isoDate)
                 setSelectedCourtId('')
                 setSelectedStartTime('')
               }}
+              minDate={new Date()}
+              placeholder="Selecciona una fecha"
             />
           </Field>