first commit

components/ui/datepicker.tsx

@@ -0,0 +1,129 @@
+import { eachMonthOfInterval, endOfYear, format, startOfYear } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+interface DatePickerProps {
+  date: Date | undefined
+  setDate: (date: Date | undefined) => void
+}
+
+export function DatePicker({ date, setDate }: DatePickerProps) {
+  const [month, setMonth] = React.useState<number>(date ? date.getMonth() : new Date().getMonth())
+  const [year, setYear] = React.useState<number>(date ? date.getFullYear() : new Date().getFullYear())
+
+  const years = React.useMemo(() => {
+    const currentYear = new Date().getFullYear()
+    return Array.from({ length: currentYear - 1900 + 1 }, (_, i) => currentYear - i)
+  }, [])
+
+  const months = React.useMemo(() => {
+    if (year) {
+      return eachMonthOfInterval({
+        start: startOfYear(new Date(year, 0, 1)),
+        end: endOfYear(new Date(year, 0, 1))
+      })
+    }
+    return []
+  }, [year])
+
+  React.useEffect(() => {
+    if (date) {
+      setMonth(date.getMonth())
+      setYear(date.getFullYear())
+    }
+  }, [date])
+
+  const handleYearChange = (selectedYear: string) => {
+    const newYear = Number.parseInt(selectedYear, 10)
+    setYear(newYear)
+    if (date) {
+      const newDate = new Date(date)
+      newDate.setFullYear(newYear)
+      setDate(newDate)
+    }
+  }
+
+  const handleMonthChange = (selectedMonth: string) => {
+    const newMonth = Number.parseInt(selectedMonth, 10)
+    setMonth(newMonth)
+    if (date) {
+      const newDate = new Date(date)
+      newDate.setMonth(newMonth)
+      setDate(newDate)
+    } else {
+      setDate(new Date(year, newMonth, 1))
+    }
+  }
+
+  return (
+    <Popover>
+      <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") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex justify-between p-2 space-x-1">
+          <Select onValueChange={handleYearChange} value={year.toString()}>
+            <SelectTrigger className="w-[120px]">
+              <SelectValue placeholder="Year" />
+            </SelectTrigger>
+            <SelectContent>
+              {years.map((y) => (
+                <SelectItem key={y} value={y.toString()}>
+                  {y}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select onValueChange={handleMonthChange} value={month.toString()}>
+            <SelectTrigger className="w-[120px]">
+              <SelectValue placeholder="Month" />
+            </SelectTrigger>
+            <SelectContent>
+              {months.map((m, index) => (
+                <SelectItem key={`${index + 1}`} value={index.toString()}>
+                  {format(m, "MMMM")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          month={new Date(year, month)}
+          onMonthChange={(newMonth) => {
+            setMonth(newMonth.getMonth())
+            setYear(newMonth.getFullYear())
+          }}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}