Add files via upload

frontend/src/components/Calendar/MainCalendar.jsx

@@ -0,0 +1,70 @@
+import { useRef, useState, useCallback } from 'react'
+import FullCalendar from '@fullcalendar/react'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import useProjectStore from '../../store/useProjectStore'
+import useFocusStore from '../../store/useFocusStore'
+import { updateDeliverable } from '../../api/deliverables'
+import DeliverableModal from '../Deliverables/DeliverableModal'
+
+export default function MainCalendar() {
+  const calRef = useRef(null)
+  const { projects, updateDeliverable: storeUpdate } = useProjectStore()
+  const openFocus = useFocusStore(s => s.openFocus)
+  const [modal, setModal] = useState({ open: false, deliverable: null, defaultDate: '' })
+
+  const events = projects.flatMap(p =>
+    (p.deliverables || []).map(d => ({
+      id:              String(d.id),
+      title:           `${p.name}: ${d.title}`,
+      start:           d.due_date,
+      allDay:          true,
+      backgroundColor: p.color,
+      borderColor:     p.color,
+      extendedProps:   { deliverableId: d.id, projectId: p.id },
+    }))
+  )
+
+  const handleEventDrop  = useCallback(async ({ event }) => {
+    const { deliverableId } = event.extendedProps
+    storeUpdate(await updateDeliverable(deliverableId, { due_date: event.startStr.substring(0,10) }))
+  }, [storeUpdate])
+
+  const handleEventClick = useCallback(({ event }) => {
+    const { deliverableId, projectId } = event.extendedProps
+    openFocus(projectId, deliverableId)
+  }, [openFocus])
+
+  const handleDateClick  = useCallback(({ dateStr }) => {
+    setModal({ open: true, deliverable: null, defaultDate: dateStr.substring(0,10) })
+  }, [])
+
+  return (
+    <div className="h-full flex flex-col bg-surface p-4">
+      <div className="flex-1 overflow-hidden">
+        <FullCalendar
+          ref={calRef}
+          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+          initialView="dayGridMonth"
+          headerToolbar={{ left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }}
+          events={events}
+          editable={true}
+          eventDrop={handleEventDrop}
+          eventClick={handleEventClick}
+          dateClick={handleDateClick}
+          height="100%"
+          dayMaxEvents={4}
+          eventDisplay="block"
+          displayEventTime={false}
+        />
+      </div>
+      <DeliverableModal
+        isOpen={modal.open}
+        onClose={() => setModal({ open: false, deliverable: null, defaultDate: '' })}
+        deliverable={modal.deliverable}
+        defaultDate={modal.defaultDate}
+      />
+    </div>
+  )
+}