feat: reschedule calendar modal on inbox

apps/frontend/src/components/Inbox/InboxItems.tsx

@@ -2,15 +2,10 @@
 
 import React, { useEffect, useCallback, useState } from "react"
 
-import {
-  CalendarIcon,
-  MoveIcon,
-  GithubIcon,
-  MailsIcon,
-  XIcon,
-} from "lucide-react"
+import { CalendarIcon, MoveIcon, GithubIcon, MailsIcon } from "lucide-react"
 import Image from "next/image"
 
+import { RescheduleCalendar } from "./RescheduleCalendar/RescheduleCalendar"
 import BoxIcon from "@/public/icons/box.svg"
 import LinearIcon from "@/public/icons/linear.svg"
 import { useAuth } from "@/src/contexts/AuthContext"
@@ -23,6 +18,12 @@ export const InboxItems: React.FC = () => {
   const { session } = useAuth()
 
   const [isControlHeld, setIsControlHeld] = useState(false)
+  const [dateChanged, setDateChanged] = useState(false)
+  const [updateInbox, setUpdateInbox] = useState(false)
+  const [reschedulingItemId, setReschedulingItemId] = useState<string | null>(
+    null
+  )
+  const [date, setDate] = React.useState<Date | string | null>(new Date())
   const { inbox, currentItem, setCurrentItem, fetchInbox, updateItem, error } =
     useCycleItemStore()
 
@@ -54,6 +55,19 @@ export const InboxItems: React.FC = () => {
     }
   }, [])
 
+  useEffect(() => {
+    if (dateChanged && reschedulingItemId && date) {
+      updateItem(session, { dueDate: date }, reschedulingItemId)
+      setReschedulingItemId(null)
+      setDateChanged(false)
+      setUpdateInbox(!updateInbox)
+    }
+  }, [date, updateItem, session, reschedulingItemId, dateChanged, updateInbox])
+
+  useEffect(() => {
+    fetchInbox(session)
+  }, [updateInbox, fetchInbox, session])
+
   const handleExpand = useCallback(
     (item: CycleItem) => {
       if (isControlHeld && item.type === "link") {
@@ -121,6 +135,17 @@ export const InboxItems: React.FC = () => {
 
   const filteredItems = items.filter((item) => item.status !== "done")
 
+  const handleRescheduleCalendar = (
+    e: React.MouseEvent,
+    id: string,
+    dueDate: Date | string | null
+  ) => {
+    e.stopPropagation()
+
+    setReschedulingItemId(id)
+    setDate(dueDate)
+  }
+
   return (
     <div className="no-scrollbar flex h-full flex-col gap-2 overflow-y-auto">
       {filteredItems.length === 0 ? (
@@ -172,7 +197,9 @@ export const InboxItems: React.FC = () => {
                   <CalendarIcon
                     size={14}
                     className="hover-text"
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={(e) =>
+                      handleRescheduleCalendar(e, item._id, item.dueDate)
+                    }
                   />
                   <MoveIcon
                     size={14}
@@ -185,6 +212,30 @@ export const InboxItems: React.FC = () => {
           </div>
         </div>
       )}
+
+      {reschedulingItemId !== null && (
+        <div>
+          <div
+            className="fixed inset-0 z-50 cursor-default bg-black/80"
+            role="button"
+            onClick={() => setReschedulingItemId(null)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape" || e.key === "Esc") {
+                setReschedulingItemId(null)
+              }
+            }}
+            tabIndex={0}
+          ></div>
+          <div className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-md bg-background shadow-lg">
+            <RescheduleCalendar
+              date={date}
+              setDate={setDate}
+              dateChanged={dateChanged}
+              setDateChanged={setDateChanged}
+            />
+          </div>
+        </div>
+      )}
     </div>
   )
 }

apps/frontend/src/components/Inbox/RescheduleCalendar/Calendar.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import React from "react"
+import { DayPicker } from "react-day-picker"
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+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 text-primary-foreground",
+        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(
+          "h-7 w-7 text-center bg-transparent p-1 text-secondary-foreground hover-text"
+        ),
+        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-secondary-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100 text-secondary-foreground hover-bg hover-text rounded-lg"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-background-hover border border-border !text-foreground",
+        day_today: "bg-background-hover text-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 }) => <ChevronLeftIcon className="size-4" />,
+        IconRight: ({ ...props }) => <ChevronRightIcon className="size-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

apps/frontend/src/components/Inbox/RescheduleCalendar/DateSelectionButton.tsx

@@ -0,0 +1,23 @@
+export default function DateSelectionButton({
+  label,
+  icon: Icon,
+  formattedDate,
+  onClick,
+}: {
+  label: string
+  icon: React.ElementType
+  formattedDate: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      className="hover-bg hover-text flex w-full cursor-pointer items-center justify-between gap-4 rounded-lg p-2"
+      onClick={onClick}
+    >
+      <span className="flex items-center gap-2">
+        <Icon size={24} /> {label}
+      </span>
+      <span className="text-sm">{formattedDate}</span>
+    </button>
+  )
+}

apps/frontend/src/components/Inbox/RescheduleCalendar/RescheduleCalendar.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+
+import { CalendarDot, CalendarDots, CalendarX } from "@phosphor-icons/react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon, SquareChevronRightIcon } from "lucide-react"
+
+import { Calendar } from "@/src/components/Inbox/RescheduleCalendar/Calendar"
+import DateSelectionButton from "@/src/components/Inbox/RescheduleCalendar/DateSelectionButton"
+
+interface RescheduleCalendarProps {
+  date: Date | null
+  setDate: (date: Date | null) => void
+  dateChanged: boolean
+  setDateChanged: (state: boolean) => void
+  icon?: React.ReactNode
+  [key: string]: any
+}
+
+export function RescheduleCalendar({
+  date,
+  setDate,
+  dateChanged,
+  setDateChanged,
+  ...props
+}: RescheduleCalendarProps) {
+  const [noDate, setNoDateFlag] = React.useState<boolean>(false)
+
+  const setToday = () => {
+    setNoDateFlag(false)
+    setDate(new Date())
+    setDateChanged(true)
+  }
+  const setTomorrow = () => {
+    setNoDateFlag(false)
+    setDate(addDays(new Date(), 1))
+    setDateChanged(true)
+  }
+  const setNextWeek = () => {
+    setNoDateFlag(false)
+    setDate(addDays(new Date(), 7))
+    setDateChanged(true)
+  }
+  const setNoDate = () => {
+    setNoDateFlag(true)
+    setDate(null)
+    setDateChanged(true)
+  }
+
+  const todayFormatted = format(new Date(), "eee")
+  const tomorrowFormatted = format(addDays(new Date(), 1), "eee")
+  const nextWeekFormatted = format(addDays(new Date(), 7), "eee MMM dd")
+
+  const dueDateFormatted = noDate
+    ? "No Date Assigned"
+    : date
+      ? format(date, "eee MMM dd")
+      : "No Date Assigned"
+
+  return (
+    <div
+      className="flex flex-row-reverse overflow-hidden rounded-lg bg-background text-secondary-foreground"
+      {...props}
+    >
+      <div className="p-4 text-sm">
+        <div className="mb-2 text-primary-foreground">
+          Due Date:{" "}
+          <strong className="text-foreground">{dueDateFormatted}</strong>
+        </div>
+        <div>
+          <DateSelectionButton
+            label="Today"
+            icon={CalendarDot}
+            formattedDate={todayFormatted}
+            onClick={setToday}
+          />
+          <DateSelectionButton
+            label="Tomorrow"
+            icon={SquareChevronRightIcon}
+            formattedDate={tomorrowFormatted}
+            onClick={setTomorrow}
+          />
+          <DateSelectionButton
+            label="Next Week"
+            icon={CalendarDots}
+            formattedDate={nextWeekFormatted}
+            onClick={setNextWeek}
+          />
+          <DateSelectionButton
+            label="No Date"
+            icon={CalendarX}
+            formattedDate={""}
+            onClick={setNoDate}
+          />
+        </div>
+      </div>
+      <Calendar
+        mode="single"
+        selected={date || undefined}
+        onSelect={(selectedDate) => {
+          setNoDateFlag(false)
+          setDate(selectedDate || null)
+          setDateChanged(true)
+        }}
+        initialFocus
+      />
+    </div>
+  )
+}

apps/frontend/src/lib/@types/Items/Cycle.ts

@@ -8,7 +8,7 @@ export interface CycleItem {
   type: string
   source: string
   description: string
-  dueDate: string | null
+  dueDate: Date | string | null
   status: string
   spaces: string[]
   blocks: string[]