Merge pull request #36 from jasonMPM/pr2

Add files via upload

frontend/src/components/Calendar/HeatmapDayPanel.jsx

@@ -9,7 +9,12 @@ import DeliverableModal from '../Deliverables/DeliverableModal'
 const STATUS_KEYS  = ['overdue', 'in_progress', 'upcoming', 'completed']
 const STATUS_LABEL = { upcoming: 'Upcoming', in_progress: 'In Progress', completed: 'Completed', overdue: 'Overdue' }
 const STATUS_COLOR = { upcoming: 'text-blue-400', in_progress: 'text-amber-400', completed: 'text-green-400', overdue: 'text-red-400' }
-const STATUS_BG       = { upcoming: 'bg-blue-400/10 border-blue-400/30 hover:bg-blue-400/20', in_progress: 'bg-amber-400/10 border-amber-400/30 hover:bg-amber-400/20', completed: 'bg-green-400/10 border-green-400/30 hover:bg-green-400/20', overdue: 'bg-red-400/10 border-red-400/30 hover:bg-red-400/20' }
+const STATUS_BG    = {
+  upcoming:    'bg-blue-400/10 border-blue-400/30 hover:bg-blue-400/20',
+  in_progress: 'bg-amber-400/10 border-amber-400/30 hover:bg-amber-400/20',
+  completed:   'bg-green-400/10 border-green-400/30 hover:bg-green-400/20',
+  overdue:     'bg-red-400/10 border-red-400/30 hover:bg-red-400/20',
+}
 const STATUS_CYCLE = { upcoming: 'in_progress', in_progress: 'completed', completed: 'upcoming', overdue: 'in_progress' }
 
 export default function HeatmapDayPanel({ date, onClose }) {
@@ -23,7 +28,7 @@ export default function HeatmapDayPanel({ date, onClose }) {
 
   const dateStr = format(date, 'yyyy-MM-dd')
 
-  // Derive items live from store so status cycles update instantly
+  // Derive live from store so status cycles re-render instantly
   const items = projects.flatMap(p =>
     (p.deliverables || [])
       .filter(d => d.due_date === dateStr)
@@ -48,27 +53,19 @@ export default function HeatmapDayPanel({ date, onClose }) {
     }
   }
 
-  const handleJumpToCalendar = () => {
-    jumpToCalendarDate(dateStr)
-    onClose()
-  }
-
   return (
     <>
       {/* Backdrop */}
-      <div
+      <div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]" onClick={onClose} />
-        className="fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]"
-        onClick={onClose}
-      />
 
       {/* Slide-in panel */}
-      <div className="fixed right-0 top-0 h-full w-80 z-50 bg-surface-elevated border-l border-surface-border flex flex-col shadow-2xl animate-[slide-up_0.2s_ease-out]">
+      <div className="fixed right-0 top-0 h-full w-80 z-50 bg-surface-elevated border-l border-surface-border flex flex-col shadow-2xl">
 
         {/* Header */}
         <div className="flex items-start justify-between px-4 pt-4 pb-3 border-b border-surface-border flex-shrink-0">
           <div>
             <p className={`text-sm font-bold leading-snug ${isToday(date) ? 'text-gold' : 'text-text-primary'}`}>
-              {isToday(date) ? '\u2605 Today' : format(date, 'EEEE')}
+              {isToday(date) ? '★ Today' : format(date, 'EEEE')}
             </p>
             <p className="text-text-muted text-xs">{format(date, 'MMMM d, yyyy')}</p>
             <p className="text-text-muted/50 text-[10px] mt-0.5">
@@ -77,17 +74,18 @@ export default function HeatmapDayPanel({ date, onClose }) {
           </div>
           <div className="flex items-center gap-1.5 mt-0.5">
             <button
-              onClick={handleJumpToCalendar}
+              onClick={() => { jumpToCalendarDate(dateStr); onClose() }}
               className="text-[10px] px-2 py-1.5 rounded-lg border border-surface-border bg-surface text-text-muted hover:text-gold hover:border-gold/40 transition-all"
               title="Switch to calendar and jump to this date"
             >
-              \u2192 Calendar
+              &rarr; Calendar
             </button>
             <button
               onClick={onClose}
               className="text-text-muted hover:text-text-primary transition-colors text-base w-7 h-7 flex items-center justify-center rounded hover:bg-surface-border/40"
+              title="Close"
             >
-              \u2715
+              &times;
             </button>
           </div>
         </div>
@@ -106,14 +104,13 @@ export default function HeatmapDayPanel({ date, onClose }) {
         <div className="flex-1 overflow-y-auto px-3 py-3 space-y-4">
           {items.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-10 text-center">
-              <div className="text-3xl mb-3 opacity-20">\u25a1</div>
+              <div className="text-3xl mb-3 opacity-20">&#9633;</div>
               <p className="text-text-muted/60 text-sm">Nothing scheduled</p>
               <p className="text-text-muted/30 text-xs mt-1">Click + Schedule above to add one</p>
             </div>
           ) : (
             STATUS_KEYS.filter(k => grouped[k].length > 0).map(statusKey => (
               <div key={statusKey}>
-                {/* Status group header */}
                 <div className="flex items-center gap-2 mb-1.5 px-0.5">
                   <span className={`text-[10px] font-bold uppercase tracking-widest ${STATUS_COLOR[statusKey]}`}>
                     {STATUS_LABEL[statusKey]}
@@ -129,19 +126,11 @@ export default function HeatmapDayPanel({ date, onClose }) {
                       key={deliverable.id}
                       className="flex items-center gap-2 bg-surface rounded-lg px-2.5 py-2 border border-surface-border hover:border-gold/20 transition-colors group"
                     >
-                      {/* Project color dot */}
+                      <div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
-                      <div
-                        className="w-2 h-2 rounded-full flex-shrink-0"
-                        style={{ backgroundColor: project.color }}
-                      />
-
-                      {/* Title + project */}
                       <div className="flex-1 min-w-0">
                         <p className="text-xs text-text-primary truncate leading-snug">{deliverable.title}</p>
                         <p className="text-[10px] text-text-muted/50 truncate">{project.name}</p>
                       </div>
-
-                      {/* Actions */}
                       <div className="flex items-center gap-1 flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity">
                         {/* Cycle status */}
                         <button
@@ -150,7 +139,7 @@ export default function HeatmapDayPanel({ date, onClose }) {
                           className={`text-[10px] w-6 h-6 flex items-center justify-center rounded border transition-all ${STATUS_COLOR[statusKey]} border-current/30 hover:border-current hover:bg-current/10 disabled:opacity-30`}
                           title={`Mark as ${STATUS_LABEL[STATUS_CYCLE[deliverable.status]]}`}
                         >
-                          {cycling === deliverable.id ? '\u2026' : '\u27f3'}
+                          {cycling === deliverable.id ? '…' : '⟳'}
                         </button>
                         {/* Open Focus View */}
                         <button
@@ -158,7 +147,7 @@ export default function HeatmapDayPanel({ date, onClose }) {
                           className="text-[10px] w-6 h-6 flex items-center justify-center rounded border border-surface-border text-text-muted hover:text-gold hover:border-gold/40 transition-all"
                           title="Open Focus View"
                         >
-                          \u25ce
+                          ◎
                         </button>
                       </div>
                     </div>
@@ -169,10 +158,10 @@ export default function HeatmapDayPanel({ date, onClose }) {
           )}
         </div>
 
-        {/* Footer: cycle legend */}
+        {/* Footer legend */}
         <div className="flex-shrink-0 px-4 py-2.5 border-t border-surface-border/50">
           <p className="text-[9px] text-text-muted/30 text-center">
-            \u27f3 cycles status &nbsp;\u00b7&nbsp; \u25ce opens Focus View &nbsp;\u00b7&nbsp; \u2192 Calendar jumps to date
+            ⟳ cycles status &nbsp;&middot;&nbsp; ◎ opens Focus View &nbsp;&middot;&nbsp; &rarr; Calendar jumps to date
           </p>
         </div>
       </div>

frontend/src/components/Calendar/MainCalendar.jsx

@@ -69,7 +69,6 @@ export default function MainCalendar({ onCalendarReady }) {
     openFocus(projectId, deliverableId)
   }, [openFocus])
 
-  // Drag-and-drop with 30-second undo toast
   const handleEventDrop = useCallback(async ({ event, oldEvent }) => {
     const { deliverableId } = event.extendedProps
     const newDate = event.startStr.substring(0, 10)
@@ -117,11 +116,11 @@ export default function MainCalendar({ onCalendarReady }) {
       setContextMenu({
         x: e.clientX, y: e.clientY,
         items: [
-          { icon: '\u2714\ufe0e', label: 'Edit Deliverable', action: () => setModal({ open: true, deliverable, defaultDate: '' }) },
+          { icon: '✔︎', label: 'Edit Deliverable', action: () => setModal({ open: true, deliverable, defaultDate: '' }) },
-          { icon: '\u2756',        label: 'Open Focus View',  action: () => openFocus(projectId, deliverableId) },
+          { icon: '❖',       label: 'Open Focus View',  action: () => openFocus(projectId, deliverableId) },
-          ...(project?.drive_url ? [{ icon: '\u2b21', label: 'Open Drive Folder', action: () => window.open(project.drive_url, '_blank') }] : []),
+          ...(project?.drive_url ? [{ icon: '⬡', label: 'Open Drive Folder', action: () => window.open(project.drive_url, '_blank') }] : []),
           { separator: true },
-          { icon: '\u2715', label: 'Delete Deliverable', danger: true,
+          { icon: '✕', label: 'Delete Deliverable', danger: true,
             action: async () => {
               if (window.confirm(`Delete "${deliverable.title}"?`)) {
                 await deleteDeliverable(deliverableId)
@@ -147,7 +146,7 @@ export default function MainCalendar({ onCalendarReady }) {
               : 'bg-surface-elevated border-surface-border text-text-muted hover:border-gold/40 hover:text-gold'
             }`}
         >
-          {showHeatmap ? '\u2190 Calendar' : '\u2b21 Heatmap'}
+          {showHeatmap ? '← Calendar' : '⬡ Heatmap'}
         </button>
       </div>
 

frontend/src/components/Calendar/WorkloadHeatmap.jsx

@@ -49,7 +49,6 @@ function getDominantStatus(statusCounts) {
   return { dominant, total: Object.values(statusCounts).reduce((a, b) => a + b, 0) }
 }
 
-// 4-cell density legend strip
 function DensityLegend({ statusKey }) {
   const c = STATUS_CELL_COLORS[statusKey]
   return (
@@ -67,8 +66,8 @@ function DensityLegend({ statusKey }) {
 export default function WorkloadHeatmap() {
   const projects = useProjectStore(s => s.projects)
   const [tooltip,     setTooltip]     = useState(null)
-  const [selectedDay, setSelectedDay] = useState(null) // Date | null
+  const [selectedDay, setSelectedDay] = useState(null)
-  const [weekOffset,  setWeekOffset]  = useState(0)    // shifts window in weeks
+  const [weekOffset,  setWeekOffset]  = useState(0)
 
   const { weeks, stats } = useMemo(() => {
     const start = startOfWeek(addWeeks(new Date(), -10 + weekOffset), { weekStartsOn: 1 })
@@ -107,7 +106,7 @@ export default function WorkloadHeatmap() {
   const windowStart = weeks[0]?.[0]?.date
   const windowEnd   = weeks[WEEKS - 1]?.[6]?.date
   const windowLabel = windowStart && windowEnd
-    ? `${format(windowStart, 'MMM d')} \u2013 ${format(windowEnd, 'MMM d, yyyy')}`
+    ? `${format(windowStart, 'MMM d')} – ${format(windowEnd, 'MMM d, yyyy')}`
     : ''
 
   const monthLabels = useMemo(() => {
@@ -131,20 +130,18 @@ export default function WorkloadHeatmap() {
   return (
     <div className="flex flex-col h-full bg-surface overflow-auto">
 
-      {/* Header */}
+      {/* Header + window navigation */}
       <div className="flex items-center justify-between pl-24 pr-8 pt-6 pb-3">
         <div>
           <h2 className="text-gold font-bold text-lg tracking-wide">Workload Heatmap</h2>
           <p className="text-text-muted text-xs mt-0.5">20 weeks of deliverable density by status</p>
         </div>
-
-        {/* Window navigation */}
         <div className="flex items-center gap-2">
           <button
             onClick={() => setWeekOffset(o => o - 4)}
             className="text-xs px-2.5 py-1.5 rounded-lg border border-surface-border bg-surface-elevated text-text-muted hover:text-gold hover:border-gold/40 transition-all"
             title="Shift window back 4 weeks"
-          >\u2190 4 wks</button>
+          >&larr; 4 wks</button>
 
           <button
             onClick={() => setWeekOffset(0)}
@@ -160,7 +157,7 @@ export default function WorkloadHeatmap() {
             onClick={() => setWeekOffset(o => o + 4)}
             className="text-xs px-2.5 py-1.5 rounded-lg border border-surface-border bg-surface-elevated text-text-muted hover:text-gold hover:border-gold/40 transition-all"
             title="Shift window forward 4 weeks"
-          >4 wks \u2192</button>
+          >4 wks &rarr;</button>
 
           <span className="text-[10px] text-text-muted/40 font-mono ml-1 hidden xl:block">{windowLabel}</span>
         </div>
@@ -170,27 +167,21 @@ export default function WorkloadHeatmap() {
       <div className="grid grid-cols-4 gap-4 px-8 pb-4">
         {STATUS_KEYS.map((statusKey) => (
           <div key={statusKey} className="flex flex-col gap-3">
-
-            {/* Stat card */}
             <div className="bg-surface-elevated border border-surface-border rounded-xl p-4 text-center">
               <p className={`text-2xl font-bold ${STATUS_COLOR[statusKey]}`}>{stats[statusKey]}</p>
               <p className="text-text-muted text-xs mt-1">{STATUS_LABEL[statusKey]}</p>
             </div>
-
-            {/* Mini heatmap */}
             <div className="bg-surface-elevated/40 border border-surface-border rounded-xl p-3 flex-1 min-h-[160px] flex flex-col gap-2">
               <div className="flex justify-end">
                 <DensityLegend statusKey={statusKey} />
               </div>
               <div className="flex items-center justify-center flex-1">
                 <div className="flex gap-2 overflow-x-auto pb-1 justify-center">
-                  {/* Day initials */}
                   <div className="flex flex-col flex-shrink-0 pt-6" style={{ gap: GAP }}>
                     {DAY_INIT.map((d, i) => (
                       <div key={i} style={{ height: CELL }} className="flex items-center text-[9px] text-text-muted/50 font-mono w-3">{d}</div>
                     ))}
                   </div>
-                  {/* Grid */}
                   <div className="flex flex-col flex-shrink-0">
                     <div className="relative h-4 mb-1">
                       {monthLabels.map(({ wi, label }) => (
@@ -247,10 +238,9 @@ export default function WorkloadHeatmap() {
                   <span className={STATUS_COLOR[sk]}>{STATUS_LABEL[sk]}</span>
                 </div>
               ))}
-              <span className="ml-1 text-text-muted/40">\u00b7 color = highest priority</span>
+              <span className="ml-1 text-text-muted/40">&middot; color = highest priority</span>
             </div>
           </div>
-
           <div className="flex gap-3 overflow-x-auto pb-2 justify-center">
             <div className="flex flex-col flex-shrink-0 pt-6" style={{ gap: GAP }}>
               {DAY_INIT.map((d, i) => (
@@ -301,7 +291,7 @@ export default function WorkloadHeatmap() {
           style={{ left: Math.min(tooltip.x + 14, window.innerWidth - 330), top: Math.max(tooltip.y - 100, 8) }}
         >
           <p className={`text-xs font-bold mb-1.5 ${isToday(tooltip.date) ? 'text-gold' : 'text-text-primary'}`}>
-            {isToday(tooltip.date) ? 'Today \u2014 ' : ''}{format(tooltip.date, 'EEE, MMM d, yyyy')}
+            {isToday(tooltip.date) ? 'Today — ' : ''}{format(tooltip.date, 'EEE, MMM d, yyyy')}
           </p>
           {tooltip.combined && tooltip.statusCounts ? (
             <div className="space-y-1 mb-2">
@@ -314,7 +304,7 @@ export default function WorkloadHeatmap() {
             </div>
           ) : (
             <p className={`text-[10px] mb-1.5 ${tooltip.statusKey ? STATUS_COLOR[tooltip.statusKey] : 'text-text-muted/60'}`}>
-              {tooltip.statusKey ? STATUS_LABEL[tooltip.statusKey] : ''} \u00b7 {tooltip.items.length} task{tooltip.items.length !== 1 ? 's' : ''}
+              {tooltip.statusKey ? STATUS_LABEL[tooltip.statusKey] : ''} &middot; {tooltip.items.length} task{tooltip.items.length !== 1 ? 's' : ''}
             </p>
           )}
           <div className="space-y-1.5">