Added Ability to add Due Dates to Cards

components/ui/calendar.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+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 sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        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-1",
+        nav_button_next: "absolute right-1",
+        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: "h-9 w-9 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: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

components/ui/date-picker.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import * as React from 'react';
+import { toast } from 'sonner';
+import { format } from 'date-fns';
+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';
+import { updateCard } from '@/actions/update-card';
+import { useAction } from '@/hooks/use-action';
+import { CardWithList } from '@/types';
+
+interface DatePickerProps {
+  variant?:
+    | 'outline'
+    | 'default'
+    | 'gray'
+    | 'destructive'
+    | 'secondary'
+    | 'ghost'
+    | 'link'
+    | 'primary'
+    | 'transparent';
+  className?: string;
+  size?: 'default' | 'sm' | 'lg' | 'icon' | 'inline';
+  placeholder?: string;
+  afterSelectText?: string;
+  boardId?: string;
+  card?: CardWithList;
+}
+
+export function DatePicker({
+  variant,
+  className,
+  size,
+  placeholder,
+  afterSelectText,
+  boardId,
+  card,
+}: DatePickerProps) {
+  const [date, setDate] = React.useState<Date>();
+
+  const { execute, isLoading } = useAction(updateCard, {
+    onSuccess: () => {
+      toast.success('Due date updated');
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  React.useEffect(() => {
+    if (card?.dueDate) {
+      setDate(card.dueDate);
+    }
+  }, [card?.dueDate]);
+
+  const onBlur = () => {
+    if (!date || !boardId || !card) return;
+
+    execute({
+      id: card.id,
+      boardId,
+      dueDate: date,
+    })
+
+    setDate(date);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={variant ?? 'outline'}
+          className={cn(
+            'w-[280px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground',
+            className
+          )}
+          size={size}
+          disabled={isLoading}
+        >
+          <CalendarIcon className='mr-2 h-4 w-4' />
+          {date ? (
+            afterSelectText + format(date, 'PP')
+          ) : (
+            <span>{placeholder ? placeholder : 'Pick a date'}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-auto p-0' onBlur={onBlur}>
+        <Calendar
+          mode='single'
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}