From c5cb3ebe4a881bce879b4c4036ea8a496c6fec9c Mon Sep 17 00:00:00 2001
From: jasonMPM <jason@messagepoint.tv>
Date: Thu, 5 Mar 2026 17:10:30 -0600
Subject: [PATCH] Add files via upload

---
 .../components/Calendar/WorkloadHeatmap.jsx   | 103 +++++++++++++++---
 frontend/src/styles/globals.css               |   2 +-
 2 files changed, 89 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Calendar/WorkloadHeatmap.jsx b/frontend/src/components/Calendar/WorkloadHeatmap.jsx
index 27226fa..437f161 100644
--- a/frontend/src/components/Calendar/WorkloadHeatmap.jsx
+++ b/frontend/src/components/Calendar/WorkloadHeatmap.jsx
@@ -76,8 +76,8 @@ export default function WorkloadHeatmap() {
     return labels
   }, [weeks])
 
-  const CELL = 18
-  const GAP  = 3
+  const CELL = 16
+  const GAP  = 2
 
   return (
     <div className="flex flex-col h-full bg-surface overflow-auto">
@@ -92,22 +92,95 @@ export default function WorkloadHeatmap() {
         </div>
       </div>
 
-      {/* Stat cards by status */}
-      <div className="grid grid-cols-5 gap-3 px-8 mb-4">
-        {[
-          { key: 'total',       label: 'Total',       color: 'text-text-primary' },
-          { key: 'upcoming',    label: 'Upcoming',    color: 'text-blue-400'     },
-          { key: 'in_progress', label: 'In Progress', color: 'text-amber-400'    },
-          { key: 'completed',   label: 'Completed',   color: 'text-green-400'    },
-          { key: 'overdue',     label: 'Overdue',     color: 'text-red-400'      },
-        ].map(({ key, label, color }) => (
-          <div key={key} className="bg-surface-elevated border border-surface-border rounded-xl p-4 text-center">
-            <p className={`text-2xl font-bold ${color}`}>{stats[key]}</p>
-            <p className="text-text-muted text-xs mt-1">{label}</p>
+      {/* Stat cards + aligned status heatmaps */}
+      <div className="grid grid-cols-4 gap-4 px-8 pb-8">
+        {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>
+
+            {/* Heatmap for this status */}
+            <div className="bg-surface-elevated/40 border border-surface-border rounded-xl p-3 flex-1 min-h-[160px]">
+              <div className="flex gap-2 overflow-x-auto pb-1">
+                {/* Day labels */}
+                <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">
+                  {/* Month labels */}
+                  <div className="relative h-4 mb-1">
+                    {monthLabels.map(({ wi, label }) => (
+                      <span
+                        key={label+wi}
+                        className="absolute text-[9px] text-text-muted/60 font-medium"
+                        style={{ left: wi * (CELL + GAP) }}
+                      >
+                        {label}
+                      </span>
+                    ))}
+                  </div>
+
+                  <div className="flex" style={{ gap: GAP }}>
+                    {weeks.map((week, wi) => (
+                      <div key={wi} className="flex flex-col flex-shrink-0" style={{ gap: GAP }}>
+                        {week.map(({ date, key, items, statusCounts }) => {
+                          const countForStatus = (statusCounts || {})[statusKey] || 0
+                          const baseDensity    = countForStatus
+                          const hoverRing      =
+                            statusKey === 'upcoming'    ? 'hover:ring-blue-300/80 hover:shadow-[0_0_0_1px_rgba(147,197,253,0.8)]' :
+                            statusKey === 'in_progress' ? 'hover:ring-amber-300/80 hover:shadow-[0_0_0_1px_rgba(252,211,77,0.8)]' :
+                            statusKey === 'completed'   ? 'hover:ring-green-300/80 hover:shadow-[0_0_0_1px_rgba(74,222,128,0.8)]' :
+                            statusKey === 'overdue'     ? 'hover:ring-red-400/90 hover:shadow-[0_0_0_1px_rgba(248,113,113,0.9)]' :
+                                                            'hover:ring-white/60';
+                          return (
+                            <div
+                              key={key + statusKey}
+                              style={{ width: CELL, height: CELL }}
+                              className={`rounded-sm border cursor-pointer transition-transform duration-100 hover:scale-125 hover:z-10 relative
+                                ${getCellClass(baseDensity, statusCounts || {})}
+                                ${isToday(date) ? 'ring-1 ring-white/60' : ''}
+                                ${hoverRing}
+                              `}
+                              onClick={() => {
+                                if (!items || !items.length) return
+                                const match = items.find(({ deliverable }) => deliverable.status === statusKey) || items[0]
+                                if (match) openFocus(match.project.id, match.deliverable.id)
+                              }}
+                              onMouseEnter={(e) => {
+                                const filtered = (items || []).filter(({ deliverable }) => deliverable.status === statusKey)
+                                const showItems = filtered.length ? filtered : items || []
+                                setTooltip({
+                                  x: e.clientX,
+                                  y: e.clientY,
+                                  date,
+                                  statusKey,
+                                  items: showItems,
+                                })
+                              }}
+                              onMouseLeave={() => setTooltip(null)}
+                            />
+                          )
+                        })}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         ))}
       </div>
-
       {/* Multi-row heatmaps by status */}
       <div className="flex flex-col gap-6 px-8 pb-8">
         {STATUS_KEYS.map((statusKey) => (
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index fbd4f04..6fbb5c2 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -19,7 +19,7 @@ body {
 .animate-slide-up { animation: slide-up 0.2s ease-out forwards; }
 
 /* ── FullCalendar dark theme ── */
-.fc-toolbar.fc-header-toolbar { padding-left: 4.5rem !important; }
+.fc-toolbar.fc-header-toolbar { padding-left: 6rem !important; }
 
 .fc {
   --fc-border-color: #2E2E2E;