Improved booking panel

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>
+  )
+}