Final working solution: shadcn date picker with timezone fix

- Implemented shadcn/ui date picker with Czech localization
- Added month/year dropdown navigation for easy date selection
- Fixed critical timezone bug causing "No valid days found" error
  - Changed from toISOString() to local date formatting
  - Dates now correctly sent as 2025-01-01 instead of 2024-12-31
- Calendar auto-closes after date selection
- All features tested and working:
  - Journey calculation with correct date ranges
  - "Vyplnit na web" button visible and functional
  - Excel export working
  - Backend successfully processes January 2025 data

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

backend/api/main.py

@@ -91,12 +91,14 @@ async def scrape_journeybook(request: ScrapeRequest):
 async def calculate_kilometers(request: CalculateRequest):
     """Scrape data, filter sick days, and recalculate kilometers"""
     try:
+        logger.info(f"Calculate request: start_date={request.start_date}, end_date={request.end_date}")
         attendance_scraper = AttendanceScraper(request.username, request.password)
         journeybook_scraper = JourneybookScraper(request.username, request.password, request.vehicle_registration)
 
         # Get all months in the date range
         start = datetime.strptime(request.start_date, "%Y-%m-%d")
         end = datetime.strptime(request.end_date, "%Y-%m-%d")
+        logger.info(f"Parsed dates: start={start}, end={end}")
 
         # Collect data from all months
         all_attendance_dates = []

frontend/app/components/DataPreview.tsx

@@ -23,6 +23,14 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
     setFillResult(null)
 
     try {
+      // Format dates as YYYY-MM-DD in local timezone
+      const formatLocalDate = (date: Date) => {
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        return `${year}-${month}-${day}`
+      }
+
       const response = await fetch(`${API_URL}/api/fill/journeybook`, {
         method: 'POST',
         headers: {
@@ -31,8 +39,8 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
         body: JSON.stringify({
           username: formData.username,
           password: formData.password,
-          start_date: formData.startDate,
+          start_date: formatLocalDate(formData.startDate),
-          end_date: formData.endDate,
+          end_date: formatLocalDate(formData.endDate),
           start_km: parseInt(formData.startKm),
           end_km: parseInt(formData.endKm),
           vehicle_registration: formData.vehicleRegistration,
@@ -142,7 +150,7 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
         </table>
       </div>
 
-      {formData && formData.startDate === '2025-01-01' && (
+      {formData && (
         <div className="mt-4">
           <Button
             onClick={handleFillToWebsite}

frontend/app/components/JourneyForm.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { DatePicker } from '@/components/ui/date-picker'
 import { Calculator, Download } from 'lucide-react'
 
 interface JourneyFormProps {
@@ -18,8 +19,8 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
   const [formData, setFormData] = useState({
     username: '',
     password: '',
-    startDate: new Date().toISOString().slice(0, 10),
+    startDate: new Date(),
-    endDate: new Date().toISOString().slice(0, 10),
+    endDate: new Date(),
     startKm: '',
     endKm: '',
     vehicleRegistration: '4SH1148',
@@ -31,9 +32,24 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
+
+    // Validate date range
+    if (formData.startDate > formData.endDate) {
+      setError('Datum od musí být před nebo stejný jako Datum do')
+      return
+    }
+
     setLoading(true)
 
     try {
+      // Format dates as YYYY-MM-DD in local timezone
+      const formatLocalDate = (date: Date) => {
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        return `${year}-${month}-${day}`
+      }
+
       const response = await fetch(`${API_URL}/api/calculate`, {
         method: 'POST',
         headers: {
@@ -42,8 +58,8 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
         body: JSON.stringify({
           username: formData.username,
           password: formData.password,
-          start_date: formData.startDate,
+          start_date: formatLocalDate(formData.startDate),
-          end_date: formData.endDate,
+          end_date: formatLocalDate(formData.endDate),
           start_km: parseInt(formData.startKm),
           end_km: parseInt(formData.endKm),
           vehicle_registration: formData.vehicleRegistration,
@@ -71,6 +87,14 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
   const handleExport = async () => {
     setLoading(true)
     try {
+      // Format dates as YYYY-MM-DD in local timezone
+      const formatLocalDate = (date: Date) => {
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        return `${year}-${month}-${day}`
+      }
+
       const response = await fetch(`${API_URL}/api/export/excel`, {
         method: 'POST',
         headers: {
@@ -79,8 +103,8 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
         body: JSON.stringify({
           username: formData.username,
           password: formData.password,
-          start_date: formData.startDate,
+          start_date: formatLocalDate(formData.startDate),
-          end_date: formData.endDate,
+          end_date: formatLocalDate(formData.endDate),
           start_km: parseInt(formData.startKm),
           end_km: parseInt(formData.endKm),
           vehicle_registration: formData.vehicleRegistration,
@@ -94,7 +118,7 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
       const url = window.URL.createObjectURL(blob)
       const a = document.createElement('a')
       a.href = url
-      a.download = `journeybook_${formData.startDate}_${formData.endDate}.xlsx`
+      a.download = `journeybook_${formData.startDate.toISOString().slice(0, 10)}_${formData.endDate.toISOString().slice(0, 10)}.xlsx`
       a.click()
     } catch (err: any) {
       setError(err.message)
@@ -138,23 +162,19 @@ export default function JourneyForm({ onDataCalculated, setLoading, onFormDataCh
         <div className="grid grid-cols-2 gap-4">
           <div className="space-y-2">
             <Label htmlFor="startDate">Datum od</Label>
-            <Input
+            <DatePicker
-              id="startDate"
-              type="date"
-              required
               value={formData.startDate}
-              onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
+              onChange={(date) => date && setFormData({ ...formData, startDate: date })}
+              placeholder="Vyberte datum od"
             />
           </div>
 
           <div className="space-y-2">
             <Label htmlFor="endDate">Datum do</Label>
-            <Input
+            <DatePicker
-              id="endDate"
-              type="date"
-              required
               value={formData.endDate}
-              onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
+              onChange={(date) => date && setFormData({ ...formData, endDate: date })}
+              placeholder="Vyberte datum do"
             />
           </div>
         </div>

frontend/app/globals.css

@@ -1,38 +1,62 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@theme {
+@layer base {
-  --color-background: 0 0% 100%;
+  :root {
-  --color-foreground: 222.2 84% 4.9%;
+    --background: 0 0% 100%;
-  --color-card: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
-  --color-card-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
-  --color-popover: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
-  --color-popover-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
-  --color-primary: 221.2 83.2% 53.3%;
+    --popover-foreground: 222.2 84% 4.9%;
-  --color-primary-foreground: 210 40% 98%;
+    --primary: 221.2 83.2% 53.3%;
-  --color-secondary: 210 40% 96.1%;
+    --primary-foreground: 210 40% 98%;
-  --color-secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%;
-  --color-muted: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
-  --color-muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%;
-  --color-accent: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
-  --color-accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
-  --color-destructive: 0 84.2% 60.2%;
+    --accent-foreground: 222.2 47.4% 11.2%;
-  --color-destructive-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
-  --color-border: 214.3 31.8% 91.4%;
+    --destructive-foreground: 210 40% 98%;
-  --color-input: 214.3 31.8% 91.4%;
+    --border: 214.3 31.8% 91.4%;
-  --color-ring: 221.2 83.2% 53.3%;
+    --input: 214.3 31.8% 91.4%;
-  --radius: 0.5rem;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
 }
 
-* {
+@layer base {
-  box-sizing: border-box;
+  * {
-  margin: 0;
+    border-color: hsl(var(--border));
-  padding: 0;
+  }
-}
 
-body {
+  body {
-  background: hsl(var(--color-background));
+    background-color: hsl(var(--background));
-  min-height: 100vh;
+    color: hsl(var(--foreground));
-  color: hsl(var(--color-foreground));
+    font-feature-settings: "rlig" 1, "calt" 1;
-  -webkit-font-smoothing: antialiased;
+  }
-  -moz-osx-font-smoothing: grayscale;
 }

frontend/components/ui/calendar.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: "ghost" | "outline"
+}
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  ...props
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem]",
+        className
+      )}
+      captionLayout={captionLayout}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size] text-sm font-medium",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex items-center gap-1",
+          defaultClassNames.dropdowns
+        ),
+        dropdown: cn(
+          "flex h-[--cell-size] items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          defaultClassNames.dropdown
+        ),
+        dropdown_icon: cn("ml-2 h-4 w-4", defaultClassNames.dropdown_icon),
+        weekdays: cn(
+          "mt-2 flex w-full flex-row",
+          defaultClassNames.weekdays
+        ),
+        weekday: cn(
+          "flex h-[--cell-size] w-[--cell-size] items-center justify-center text-xs font-normal text-muted-foreground",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-0.5 flex w-full flex-row", defaultClassNames.week),
+        day: cn(
+          "flex h-[--cell-size] w-[--cell-size] items-center justify-center rounded-md p-0 text-sm",
+          defaultClassNames.day
+        ),
+        day_button: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 font-normal hover:bg-accent hover:text-accent-foreground focus-visible:z-10 aria-selected:opacity-100",
+          defaultClassNames.day_button
+        ),
+        range_start: cn("day-range-start", defaultClassNames.range_start),
+        range_end: cn("day-range-end", defaultClassNames.range_end),
+        selected: cn(
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          defaultClassNames.selected
+        ),
+        today: cn(
+          "bg-accent text-accent-foreground",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        range_middle: cn(
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+          defaultClassNames.range_middle
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? ChevronLeft : ChevronRight
+          return <Icon className="h-4 w-4" />
+        },
+        Dropdown: (props) => {
+          const { value, onChange, options } = props
+          const selected = options?.find((option) => option.value === value)
+          const handleChange = (newValue: string) => {
+            const changeEvent = {
+              target: { value: newValue },
+            } as React.ChangeEvent<HTMLSelectElement>
+            onChange?.(changeEvent)
+          }
+
+          return (
+            <Select value={value?.toString()} onValueChange={handleChange}>
+              <SelectTrigger className="h-7 w-fit gap-1 border-none px-2 py-1 font-medium shadow-none hover:bg-accent focus:ring-0">
+                <SelectValue>{selected?.label}</SelectValue>
+              </SelectTrigger>
+              <SelectContent position="popper" className="min-w-[var(--radix-popper-anchor-width)]">
+                {options?.map((option) => (
+                  <SelectItem
+                    key={option.value}
+                    value={option.value?.toString() ?? ""}
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+Calendar.displayName = "Calendar"
+
+export { Calendar }

frontend/components/ui/date-picker.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { cs } from "date-fns/locale"
+import { 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
+  placeholder?: string
+}
+
+export function DatePicker({ value, onChange, placeholder = "Pick a date" }: DatePickerProps) {
+  const [date, setDate] = React.useState<Date | undefined>(value)
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    setDate(value)
+  }, [value])
+
+  const handleSelect = (selectedDate: Date | undefined) => {
+    setDate(selectedDate)
+    onChange?.(selectedDate)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP", { locale: cs }) : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={handleSelect}
+          captionLayout="dropdown"
+          startMonth={new Date(1900, 0)}
+          endMonth={new Date()}
+          locale={cs}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

frontend/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+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 }

frontend/components/ui/select.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

frontend/package.json

@@ -14,20 +14,26 @@
   "description": "",
   "dependencies": {
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
-    "@tailwindcss/postcss": "^4.1.14",
     "@types/node": "^24.7.1",
     "@types/react": "^19.2.2",
-    "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.545.0",
     "next": "^15.5.4",
-    "postcss": "^8.5.6",
     "react": "^19.2.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "^19.2.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
+    "tailwindcss-animate": "^1.0.7"
   }
 }

frontend/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
+    autoprefixer: {},
   },
 }

frontend/tailwind.config.js

@@ -1,45 +1,55 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ["class"],
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{ts,tsx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{ts,tsx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
   ],
+  prefix: "",
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
       colors: {
-        border: "hsl(var(--color-border))",
+        border: "hsl(var(--border))",
-        input: "hsl(var(--color-input))",
+        input: "hsl(var(--input))",
-        ring: "hsl(var(--color-ring))",
+        ring: "hsl(var(--ring))",
-        background: "hsl(var(--color-background))",
+        background: "hsl(var(--background))",
-        foreground: "hsl(var(--color-foreground))",
+        foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(var(--color-primary))",
+          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--color-primary-foreground))",
+          foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
-          DEFAULT: "hsl(var(--color-secondary))",
+          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--color-secondary-foreground))",
+          foreground: "hsl(var(--secondary-foreground))",
         },
         destructive: {
-          DEFAULT: "hsl(var(--color-destructive))",
+          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--color-destructive-foreground))",
+          foreground: "hsl(var(--destructive-foreground))",
         },
         muted: {
-          DEFAULT: "hsl(var(--color-muted))",
+          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--color-muted-foreground))",
+          foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
-          DEFAULT: "hsl(var(--color-accent))",
+          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--color-accent-foreground))",
+          foreground: "hsl(var(--accent-foreground))",
         },
         popover: {
-          DEFAULT: "hsl(var(--color-popover))",
+          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--color-popover-foreground))",
+          foreground: "hsl(var(--popover-foreground))",
         },
         card: {
-          DEFAULT: "hsl(var(--color-card))",
+          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--color-card-foreground))",
+          foreground: "hsl(var(--card-foreground))",
         },
       },
       borderRadius: {
@@ -47,7 +57,21 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
     },
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 }