Merge pull request #7 from jasonMPM/fix4

Add files via upload

frontend/src/components/Calendar/MainCalendar.jsx

@@ -5,14 +5,17 @@ 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 { updateDeliverable, deleteDeliverable } from '../../api/deliverables'
 import DeliverableModal from '../Deliverables/DeliverableModal'
+import ContextMenu from '../UI/ContextMenu'
 
 export default function MainCalendar() {
   const calRef = useRef(null)
-  const { projects, updateDeliverable: storeUpdate } = useProjectStore()
+  const { projects, updateDeliverable: storeUpdate, removeDeliverable } = useProjectStore()
   const openFocus = useFocusStore(s => s.openFocus)
+
   const [modal,       setModal]       = useState({ open: false, deliverable: null, defaultDate: '' })
+  const [contextMenu, setContextMenu] = useState(null)
 
   const events = projects.flatMap(p =>
     (p.deliverables || []).map(d => ({
@@ -26,22 +29,78 @@ export default function MainCalendar() {
     }))
   )
 
-  const handleEventDrop  = useCallback(async ({ event }) => {
-    const { deliverableId } = event.extendedProps
-    storeUpdate(await updateDeliverable(deliverableId, { due_date: event.startStr.substring(0,10) }))
-  }, [storeUpdate])
+  const getDeliverable = (projectId, deliverableId) => {
+    const p = projects.find(p => p.id === projectId)
+    return { project: p, deliverable: p?.deliverables.find(d => d.id === deliverableId) }
+  }
 
+  // Single click → Focus View
   const handleEventClick = useCallback(({ event }) => {
     const { deliverableId, projectId } = event.extendedProps
     openFocus(projectId, deliverableId)
   }, [openFocus])
 
+  // Drag-and-drop → patch date
+  const handleEventDrop = useCallback(async ({ event }) => {
+    const { deliverableId } = event.extendedProps
+    storeUpdate(await updateDeliverable(deliverableId, { due_date: event.startStr.substring(0, 10) }))
+  }, [storeUpdate])
+
+  // Click empty date → add deliverable
   const handleDateClick = useCallback(({ dateStr }) => {
     setModal({ open: true, deliverable: null, defaultDate: dateStr.substring(0, 10) })
   }, [])
 
+  // Attach dblclick + contextmenu to each event element after mount
+  const handleEventDidMount = useCallback(({ event, el }) => {
+    const { deliverableId, projectId } = event.extendedProps
+
+    // Double-click → open edit modal directly
+    el.addEventListener('dblclick', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const { deliverable } = getDeliverable(projectId, deliverableId)
+      if (deliverable) setModal({ open: true, deliverable, defaultDate: '' })
+    })
+
+    // Right-click → context menu
+    el.addEventListener('contextmenu', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const { project, deliverable } = getDeliverable(projectId, deliverableId)
+      if (!deliverable) return
+      setContextMenu({
+        x: e.clientX, y: e.clientY,
+        items: [
+          {
+            icon: '✎', label: 'Edit Deliverable',
+            action: () => setModal({ open: true, deliverable, defaultDate: '' }),
+          },
+          {
+            icon: '◎', label: 'Open Focus View',
+            action: () => openFocus(projectId, deliverableId),
+          },
+          ...(project?.drive_url ? [{
+            icon: '⬡', label: 'Open Drive Folder',
+            action: () => window.open(project.drive_url, '_blank'),
+          }] : []),
+          { separator: true },
+          {
+            icon: '✕', label: 'Delete Deliverable', danger: true,
+            action: async () => {
+              if (window.confirm(`Delete "${deliverable.title}"?`)) {
+                await deleteDeliverable(deliverableId)
+                removeDeliverable(deliverableId)
+              }
+            },
+          },
+        ],
+      })
+    })
+  }, [projects, openFocus])
+
   return (
-    <div className="h-full flex flex-col bg-surface p-4">
+    <div className="h-full flex flex-col bg-surface p-4" onContextMenu={e => e.preventDefault()}>
       <div className="flex-1 overflow-hidden">
         <FullCalendar
           ref={calRef}
@@ -53,18 +112,29 @@ export default function MainCalendar() {
           eventDrop={handleEventDrop}
           eventClick={handleEventClick}
           dateClick={handleDateClick}
+          eventDidMount={handleEventDidMount}
           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}
       />
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          items={contextMenu.items}
+          onClose={() => setContextMenu(null)}
+        />
+      )}
     </div>
   )
 }

frontend/src/components/FocusView/DeliverableCard.jsx

@@ -1,10 +1,51 @@
+import { useState } from 'react'
 import Badge from '../UI/Badge'
 import { formatDate } from '../../utils/dateHelpers'
+import ContextMenu from '../UI/ContextMenu'
+import { updateDeliverable, deleteDeliverable } from '../../api/deliverables'
+import useProjectStore from '../../store/useProjectStore'
+import { STATUS_OPTIONS } from '../../utils/statusHelpers'
 
 export default function DeliverableCard({ deliverable, isActive, index, projectColor, onSelect, onEdit }) {
+  const { updateDeliverable: storeUpdate, removeDeliverable } = useProjectStore()
+  const [ctxMenu, setCtxMenu] = useState(null)
+
+  const handleContextMenu = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setCtxMenu({
+      x: e.clientX, y: e.clientY,
+      items: [
+        { icon: '✎', label: 'Edit Deliverable', highlight: true, action: () => onEdit(deliverable) },
+        { separator: true },
+        ...STATUS_OPTIONS.map(s => ({
+          icon: s.value === deliverable.status ? '●' : '○',
+          label: `Mark ${s.label}`,
+          action: async () => {
+            storeUpdate(await updateDeliverable(deliverable.id, { status: s.value }))
+          },
+        })),
+        { separator: true },
+        {
+          icon: '✕', label: 'Delete Deliverable', danger: true,
+          action: async () => {
+            if (window.confirm(`Delete "${deliverable.title}"?`)) {
+              await deleteDeliverable(deliverable.id)
+              removeDeliverable(deliverable.id)
+            }
+          },
+        },
+      ],
+    })
+  }
+
   return (
+    <>
       <div
         onClick={() => onSelect(deliverable.id)}
+        onDoubleClick={(e) => { e.stopPropagation(); onEdit(deliverable) }}
+        onContextMenu={handleContextMenu}
+        title="Click: Select · Double-click: Edit · Right-click: Menu"
         className={`relative flex flex-col gap-2 rounded-xl border p-4 min-w-[190px] max-w-[230px] flex-shrink-0 cursor-pointer
           transition-all duration-200 select-none mt-4
           ${isActive
@@ -39,5 +80,10 @@ export default function DeliverableCard({ deliverable, isActive, index, projectC
           </button>
         )}
       </div>
+
+      {ctxMenu && (
+        <ContextMenu x={ctxMenu.x} y={ctxMenu.y} items={ctxMenu.items} onClose={() => setCtxMenu(null)} />
+      )}
+    </>
   )
 }

frontend/src/components/Projects/ProjectCard.jsx

@@ -1,6 +1,11 @@
+import { useState } from 'react'
 import Badge from '../UI/Badge'
 import { formatDate } from '../../utils/dateHelpers'
 import useFocusStore from '../../store/useFocusStore'
+import useProjectStore from '../../store/useProjectStore'
+import { deleteDeliverable } from '../../api/deliverables'
+import DeliverableModal from '../Deliverables/DeliverableModal'
+import ContextMenu from '../UI/ContextMenu'
 
 function DriveIcon() {
   return (
@@ -17,34 +22,73 @@ function DriveIcon() {
 
 export default function ProjectCard({ project, onEdit, onDelete }) {
   const openFocus        = useFocusStore(s => s.openFocus)
+  const { removeDeliverable } = useProjectStore()
+  const [delModal,  setDelModal]  = useState({ open: false, deliverable: null })
+  const [ctxMenu,   setCtxMenu]   = useState(null)
+
+  const openDelEdit = (d) => setDelModal({ open: true, deliverable: d })
+
+  const handleRowCtx = (e, d) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setCtxMenu({
+      x: e.clientX, y: e.clientY,
+      items: [
+        { icon: '✎', label: 'Edit Deliverable',  action: () => openDelEdit(d) },
+        { icon: '◎', label: 'Open Focus View',   action: () => openFocus(project.id, d.id) },
+        { separator: true },
+        {
+          icon: '✕', label: 'Delete Deliverable', danger: true,
+          action: async () => {
+            if (window.confirm(`Delete "${d.title}"?`)) {
+              await deleteDeliverable(d.id)
+              removeDeliverable(d.id)
+            }
+          },
+        },
+      ],
+    })
+  }
+
+  const handleHeaderCtx = (e) => {
+    e.preventDefault()
+    setCtxMenu({
+      x: e.clientX, y: e.clientY,
+      items: [
+        { icon: '✎', label: 'Edit Project',  action: () => onEdit(project) },
+        ...(project.drive_url ? [{ icon: '⬡', label: 'Open Drive', action: () => window.open(project.drive_url, '_blank') }] : []),
+        { separator: true },
+        { icon: '✕', label: 'Delete Project', danger: true, action: () => onDelete(project) },
+      ],
+    })
+  }
 
   return (
     <div className="bg-surface-elevated border border-surface-border rounded-lg overflow-hidden transition-all hover:border-gold/20">
       <div className="h-1 w-full" style={{ backgroundColor: project.color }} />
       <div className="p-3">
 
-        {/* Header row */}
-        <div className="flex items-start justify-between mb-1.5">
+        {/* Header — double-click to edit, right-click for menu */}
+        <div
+          className="flex items-start justify-between mb-1.5 cursor-default"
+          onDoubleClick={() => onEdit(project)}
+          onContextMenu={handleHeaderCtx}
+          title="Double-click to edit project"
+        >
           <div className="flex items-center gap-2 min-w-0">
             <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
             <span className="text-sm font-semibold text-text-primary truncate">{project.name}</span>
           </div>
           <div className="flex items-center gap-0.5 flex-shrink-0 ml-1">
             {project.drive_url && (
-              <a
-                href={project.drive_url}
-                target="_blank"
-                rel="noopener noreferrer"
-                title="Open Google Drive folder"
-                onClick={e => e.stopPropagation()}
-                className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary bg-surface hover:bg-surface-border/40 border border-surface-border hover:border-gold/30 rounded px-1.5 py-1 transition-all mr-1"
-              >
-                <DriveIcon />
-                <span>Drive</span>
+              <a href={project.drive_url} target="_blank" rel="noopener noreferrer"
+                title="Open Google Drive folder" onClick={e => e.stopPropagation()}
+                className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary bg-surface hover:bg-surface-border/40 border border-surface-border hover:border-gold/30 rounded px-1.5 py-1 transition-all mr-1">
+                <DriveIcon /><span>Drive</span>
               </a>
             )}
-            <button onClick={() => onEdit(project)} className="text-text-muted hover:text-gold p-1 transition-colors text-sm">✎</button>
-            <button onClick={() => onDelete(project)} className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm">✕</button>
+            <button onClick={() => onEdit(project)}   className="text-text-muted hover:text-gold p-1 transition-colors text-sm" title="Edit project">✎</button>
+            <button onClick={() => onDelete(project)} className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm" title="Delete project">✕</button>
           </div>
         </div>
 
@@ -55,8 +99,14 @@ export default function ProjectCard({ project, onEdit, onDelete }) {
         {/* Deliverable rows */}
         <div className="space-y-1">
           {(project.deliverables || []).map(d => (
-            <button key={d.id} onClick={() => openFocus(project.id, d.id)}
-              className="w-full flex items-center justify-between text-xs bg-surface rounded px-2 py-1.5 border border-transparent hover:border-gold/20 hover:bg-surface-border/20 transition-all text-left group">
+            <button
+              key={d.id}
+              onClick={() => openFocus(project.id, d.id)}
+              onDoubleClick={(e) => { e.stopPropagation(); openDelEdit(d) }}
+              onContextMenu={(e) => handleRowCtx(e, d)}
+              title="Click: Focus View · Double-click: Edit · Right-click: Menu"
+              className="w-full flex items-center justify-between text-xs bg-surface rounded px-2 py-1.5 border border-transparent hover:border-gold/20 hover:bg-surface-border/20 transition-all text-left group"
+            >
               <span className="text-text-muted group-hover:text-text-primary truncate flex-1 pr-2">{d.title}</span>
               <div className="flex items-center gap-1.5 flex-shrink-0">
                 <span className="text-text-muted/60 font-mono text-[9px]">{formatDate(d.due_date)}</span>
@@ -70,6 +120,18 @@ export default function ProjectCard({ project, onEdit, onDelete }) {
         </div>
 
       </div>
+
+      {/* Local deliverable edit modal */}
+      <DeliverableModal
+        isOpen={delModal.open}
+        onClose={() => setDelModal({ open: false, deliverable: null })}
+        deliverable={delModal.deliverable}
+        projectId={project.id}
+      />
+
+      {ctxMenu && (
+        <ContextMenu x={ctxMenu.x} y={ctxMenu.y} items={ctxMenu.items} onClose={() => setCtxMenu(null)} />
+      )}
     </div>
   )
 }

frontend/src/components/UI/ContextMenu.jsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react'
+
+export default function ContextMenu({ x, y, items, onClose }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const onMouseDown = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose() }
+    const onKey       = (e) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('mousedown', onMouseDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [onClose])
+
+  // Keep menu inside viewport
+  const W = 192
+  const H = items.length * 34
+  const adjX = Math.min(x, window.innerWidth  - W - 8)
+  const adjY = Math.min(y, window.innerHeight - H - 8)
+
+  return (
+    <div
+      ref={ref}
+      style={{ left: adjX, top: adjY }}
+      className="fixed z-[200] min-w-[192px] bg-surface-elevated border border-surface-border rounded-xl shadow-2xl py-1.5 overflow-hidden"
+    >
+      {items.map((item, i) =>
+        item.separator ? (
+          <div key={i} className="h-px bg-surface-border my-1 mx-2" />
+        ) : (
+          <button
+            key={i}
+            disabled={item.disabled}
+            onClick={() => { item.action(); onClose() }}
+            className={`w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left transition-colors disabled:opacity-40 disabled:cursor-not-allowed
+              ${item.danger
+                ? 'text-red-400 hover:bg-red-500/10'
+                : item.highlight
+                  ? 'text-gold hover:bg-gold/10'
+                  : 'text-text-primary hover:bg-surface-border/40'
+              }`}
+          >
+            <span className="text-sm w-4 text-center leading-none flex-shrink-0">{item.icon}</span>
+            <span>{item.label}</span>
+            {item.shortcut && (
+              <span className="ml-auto text-text-muted/50 text-[10px]">{item.shortcut}</span>
+            )}
+          </button>
+        )
+      )}
+    </div>
+  )
+}