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

---
 .../components/Calendar/WorkloadHeatmap.jsx   | 221 +++++++++---------
 1 file changed, 111 insertions(+), 110 deletions(-)

diff --git a/frontend/src/components/Calendar/WorkloadHeatmap.jsx b/frontend/src/components/Calendar/WorkloadHeatmap.jsx
index 1a6f279..bf1ae8a 100644
--- a/frontend/src/components/Calendar/WorkloadHeatmap.jsx
+++ b/frontend/src/components/Calendar/WorkloadHeatmap.jsx
@@ -56,7 +56,7 @@ export default function WorkloadHeatmap() {
       })
     )
 
-    const all = projects.flatMap(p => p.deliverables || [])
+    const all  = projects.flatMap(p => p.deliverables || [])
     const stats = {
       total:       all.length,
       upcoming:    all.filter(d => d.status === 'upcoming').length,
@@ -92,127 +92,128 @@ export default function WorkloadHeatmap() {
         </div>
       </div>
 
-      {/* Status heatmaps */}
-      <div className="flex flex-col gap-6 px-8 pb-8">
+      {/* 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="bg-surface-elevated/40 border border-surface-border rounded-xl p-4">
-            <div className="flex items-center justify-between mb-3">
-              <div className="flex items-baseline gap-2">
-                <h3 className="text-xs font-semibold tracking-widest uppercase text-text-muted/70">
-                  {STATUS_LABEL[statusKey]}
-                </h3>
-                <span className={`${STATUS_COLOR[statusKey]} text-[10px] font-mono`}>
-                  {stats[statusKey]} tasks
-                </span>
-              </div>
-              <div className="flex items-center gap-2 text-[9px] text-text-muted/60">
-                <span>Less</span>
-                {['bg-surface border-surface-border','bg-gold/25 border-gold/40','bg-gold/55 border-gold/70','bg-gold border-gold'].map((c,i) => (
-                  <div key={i} className={`w-3 h-3 rounded-sm border ${c}`} />
-                ))}
-                <span>More</span>
-              </div>
+          <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>
 
-            <div className="flex gap-3 overflow-x-auto pb-2">
-              {/* 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-[10px] text-text-muted/50 font-mono w-4">
-                    {d}
-                  </div>
-                ))}
-              </div>
-
-              {/* Grid */}
-              <div className="flex flex-col flex-shrink-0">
-                {/* Month labels */}
-                <div className="relative h-5 mb-1">
-                  {monthLabels.map(({ wi, label }) => (
-                    <span
-                      key={label+wi}
-                      className="absolute text-[10px] text-text-muted/60 font-medium"
-                      style={{ left: wi * (CELL + GAP) }}
-                    >
-                      {label}
-                    </span>
+            {/* 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>
 
-                <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
-                        return (
-                          <div
-                            key={key + statusKey}
-                            style={{ width: CELL, height: CELL }}
-                            className={`rounded-sm border cursor-pointer transition-all hover:scale-125 hover:z-10 relative
-                              ${getCellClass(baseDensity, statusCounts || {})}
-                              ${isToday(date) ? 'ring-1 ring-white/40' : ''}
-                            `}
-                            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>
-                  ))}
+                {/* 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>
         ))}
-
-        {tooltip && (
-          <div
-            className="fixed z-[200] pointer-events-none bg-surface-elevated border border-surface-border rounded-xl shadow-2xl px-3.5 py-3 min-w-[220px] max-w-[320px]"
-            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 — ' : ''}{format(tooltip.date, 'EEE, MMM d, yyyy')}
-            </p>
-            <p className="text-[10px] text-text-muted/60 mb-1.5">
-              {STATUS_LABEL[tooltip.statusKey]} · {tooltip.items.length} task{tooltip.items.length !== 1 ? 's' : ''}
-            </p>
-            {tooltip.items.length === 0 ? (
-              <p className="text-text-muted/50 text-xs">No deliverables</p>
-            ) : (
-              <div className="space-y-1.5">
-                {tooltip.items.slice(0, 5).map(({ deliverable, project }) => (
-                  <div key={deliverable.id} className="flex items-start gap-1.5">
-                    <div className="w-1.5 h-1.5 rounded-full mt-1 flex-shrink-0" style={{ backgroundColor: project.color }} />
-                    <div className="min-w-0 flex-1">
-                      <p className="text-[11px] text-text-primary truncate">{deliverable.title}</p>
-                      <p className="text-[10px] text-text-muted/60">{project.name}</p>
-                    </div>
-                  </div>
-                ))}
-                {tooltip.items.length > 5 && (
-                  <p className="text-[10px] text-text-muted/50 pl-3">+{tooltip.items.length - 5} more</p>
-                )}
-              </div>
-            )}
-          </div>
-        )}
       </div>
+
+      {/* Tooltip */}
+      {tooltip && (
+        <div
+          className="fixed z-[200] pointer-events-none bg-surface-elevated border border-surface-border rounded-xl shadow-2xl px-3.5 py-3 min-w-[220px] max-w-[320px]"
+          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')}
+          </p>
+          <p className="text-[10px] text-text-muted/60 mb-1.5">
+            {STATUS_LABEL[tooltip.statusKey]} \u00b7 {tooltip.items.length} task{tooltip.items.length !== 1 ? 's' : ''}
+          </p>
+          {tooltip.items.length === 0 ? (
+            <p className="text-text-muted/50 text-xs">No deliverables</p>
+          ) : (
+            <div className="space-y-1.5">
+              {tooltip.items.slice(0, 5).map(({ deliverable, project }) => (
+                <div key={deliverable.id} className="flex items-start gap-1.5">
+                  <div className="w-1.5 h-1.5 rounded-full mt-1 flex-shrink-0" style={{ backgroundColor: project.color }} />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-[11px] text-text-primary truncate">{deliverable.title}</p>
+                    <p className="text-[10px] text-text-muted/60">{project.name}</p>
+                  </div>
+                </div>
+              ))}
+              {tooltip.items.length > 5 && (
+                <p className="text-[10px] text-text-muted/50 pl-3">+{tooltip.items.length - 5} more</p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }