Improved booking panel

apps/frontend/package.json

@@ -13,6 +13,7 @@
     "@fontsource-variable/geist": "^5.2.8",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.2.4",
     "@repo/api-contract": "workspace:*",
     "@supabase/supabase-js": "^2.101.1",
@@ -23,10 +24,12 @@
     "axios": "^1.14.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^1.7.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
+    "react-day-picker": "^8.10.0",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.72.0",
     "shadcn": "^4.1.2",

apps/frontend/src/components/ui/calendar.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { DayPicker } from "react-day-picker"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex items-center justify-center pt-1 relative",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-0 top-0",
+        nav_button_next: "absolute right-0 top-0",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        IconRight: () => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

apps/frontend/src/components/ui/date-picker.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { es } from "date-fns/locale"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+interface DatePickerProps {
+  value?: Date
+  onChange?: (date: Date | undefined) => void
+  disabled?: (date: Date) => boolean
+  className?: string
+  placeholder?: string
+  minDate?: Date
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  disabled,
+  className,
+  placeholder = "Selecciona una fecha",
+  minDate,
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const isDateDisabled = React.useCallback(
+    (date: Date) => {
+      if (minDate && date < minDate) return true
+      if (disabled) return disabled(date)
+      return false
+    },
+    [minDate, disabled]
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !value && "text-muted-foreground",
+            className
+          )}
+          data-empty={!value}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {value ? (
+            format(value, "PPP", { locale: es })
+          ) : (
+            <span>{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={value}
+          onSelect={(date) => {
+            onChange?.(date)
+            setOpen(false)
+          }}
+          disabled={isDateDisabled}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/frontend/src/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

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
+            <DatePicker
-              id="fromDate"
+              value={fromIsoDateLocal(fromDate)}
-              type="date"
+              onChange={(date) => {
-              value={fromDate}
+                const isoDate = date ? toIsoDateLocal(date) : todayIso
-              min={todayIso}
+                setFromDate(isoDate)
-              onChange={(event) => {
-                setFromDate(event.target.value)
               }}
+              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
+            <DatePicker
-              id="manualDate"
+              value={fromIsoDateLocal(manualDate)}
-              type="date"
+              onChange={(date) => {
-              min={todayIso}
+                const isoDate = date ? toIsoDateLocal(date) : todayIso
-              value={manualDate}
+                setManualDate(isoDate)
-              onChange={(event) => {
-                setManualDate(event.target.value)
                 setSelectedCourtId('')
                 setSelectedStartTime('')
               }}
+              minDate={new Date()}
+              placeholder="Selecciona una fecha"
             />
           </Field>