From 6a83109e1c844cc2316b497a04a14c3f15edb5f2 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Sat, 31 Jan 2026 12:51:47 +0100
Subject: [PATCH] Add metric tooltips showing comparison details (vs previous
 week)

---
 components/WeeklyGrid.tsx | 142 +++++++++++++++++++++++++++++++++-----
 1 file changed, 123 insertions(+), 19 deletions(-)

diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 7b3cf38..209c546 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -50,6 +50,71 @@ const useDebounce = (value: string, delay: number) => {
     return debouncedValue;
 };
 
+// Tooltip component to show comparison details on hover
+const MetricDetailTooltip: React.FC<{
+    children: React.ReactNode;
+    currentValue: number;
+    previousValue: number;
+    currentWeekLabel: string;
+    previousWeekLabel: string;
+    metricName: string;
+    metricColor: string;
+    formatValue?: (val: number) => string;
+}> = ({ children, currentValue, previousValue, currentWeekLabel, previousWeekLabel, metricName, metricColor, formatValue }) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const growth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0);
+    const isPositive = growth >= 0;
+    const format = formatValue || ((v: number) => v.toLocaleString('de-DE'));
+
+    return (
+        <div
+            className="relative inline-flex items-center"
+            onMouseEnter={() => setIsVisible(true)}
+            onMouseLeave={() => setIsVisible(false)}
+        >
+            <div className="cursor-help">{children}</div>
+            {isVisible && (
+                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 border border-white/20 rounded-xl shadow-2xl z-[200] p-3 pointer-events-none animate-in fade-in zoom-in-95 duration-150">
+                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 pb-2 border-b border-white/10">
+                        📊 {metricName} Comparison
+                    </div>
+
+                    <div className="space-y-2">
+                        {/* Current Week */}
+                        <div className="flex justify-between items-center">
+                            <span className="text-[10px] text-slate-500 font-bold">{currentWeekLabel}</span>
+                            <span className={`text-xs font-black ${metricColor}`}>{format(currentValue)}</span>
+                        </div>
+
+                        {/* Previous Week */}
+                        <div className="flex justify-between items-center">
+                            <span className="text-[10px] text-slate-500 font-bold">{previousWeekLabel}</span>
+                            <span className="text-xs font-bold text-slate-400">{format(previousValue)}</span>
+                        </div>
+
+                        {/* Divider */}
+                        <div className="border-t border-white/10 pt-2">
+                            <div className="flex justify-between items-center">
+                                <span className="text-[10px] text-slate-500 font-bold">vs Semana Anterior</span>
+                                <span className={`text-xs font-black ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}>
+                                    {isPositive ? '▲' : '▼'} {Math.abs(growth).toFixed(1)}%
+                                </span>
+                            </div>
+                            <div className="text-[9px] text-slate-600 mt-1.5 text-center italic">
+                                Comparado con la semana inmediatamente anterior
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Arrow */}
+                    <div className="absolute bottom-[-6px] left-1/2 -translate-x-1/2 w-3 h-3 bg-slate-950 border-r border-b border-white/20 rotate-45"></div>
+                </div>
+            )}
+        </div>
+    );
+};
+
 const WeeklyRow: React.FC<{
     row: WeeklyPivotRow;
     weeks: string[];
@@ -116,31 +181,70 @@ const WeeklyRow: React.FC<{
                 const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0;
                 const spend = row.spendByWeek[week] || 0;
                 const prevSpend = row.spendByWeek[weeks[idx + 1]] || 0;
+                const gv = row.gvByWeek?.[week] || 0;
+                const prevGv = row.gvByWeek?.[weeks[idx + 1]] || 0;
+
+                const weekNum = week.split('-')[1];
+                const prevWeekNum = weeks[idx + 1]?.split('-')[1] || '-';
+
                 return (
                     <td key={week} className={`p-3 py-2 text-center border-r border-white/5 align-middle ${sortConfig?.key === week ? 'bg-white/[0.01]' : ''}`}>
                         <div className="flex flex-col items-center justify-center gap-0.5">
-                            <div className="flex items-center gap-1">
-                                <span className={`text-sm font-bold ${val > 0 ? (sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-400' : 'text-white') : 'text-slate-700'}`}>
-                                    {val > 0 ? val.toLocaleString('de-DE') : '-'}
-                                </span>
-                                {val > 0 && renderGrowth(val, prevVal)}
-                            </div>
+                            {/* Units with tooltip */}
+                            <MetricDetailTooltip
+                                currentValue={val}
+                                previousValue={prevVal}
+                                currentWeekLabel={`Semana ${weekNum}`}
+                                previousWeekLabel={`Semana ${prevWeekNum}`}
+                                metricName="Units"
+                                metricColor="text-white"
+                            >
+                                <div className="flex items-center gap-1">
+                                    <span className={`text-sm font-bold ${val > 0 ? (sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-400' : 'text-white') : 'text-slate-700'}`}>
+                                        {val > 0 ? val.toLocaleString('de-DE') : '-'}
+                                    </span>
+                                    {val > 0 && renderGrowth(val, prevVal)}
+                                </div>
+                            </MetricDetailTooltip>
+
                             <div className="flex flex-col items-center">
+                                {/* Spend with tooltip */}
                                 {spend > 0 && (
-                                    <div className="flex items-center gap-1">
-                                        <span className={`text-[11px] font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
-                                            €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
-                                        </span>
-                                        {renderGrowth(spend, prevSpend)}
-                                    </div>
+                                    <MetricDetailTooltip
+                                        currentValue={spend}
+                                        previousValue={prevSpend}
+                                        currentWeekLabel={`Semana ${weekNum}`}
+                                        previousWeekLabel={`Semana ${prevWeekNum}`}
+                                        metricName="Spend"
+                                        metricColor="text-indigo-400"
+                                        formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
+                                    >
+                                        <div className="flex items-center gap-1">
+                                            <span className={`text-[11px] font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
+                                                €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
+                                            </span>
+                                            {renderGrowth(spend, prevSpend)}
+                                        </div>
+                                    </MetricDetailTooltip>
                                 )}
-                                {row.gvByWeek?.[week] > 0 && (
-                                    <div className="flex items-center gap-1">
-                                        <span className={`text-[9px] font-black tracking-tighter ${sortConfig?.key === week && sortConfig.metric === 'gv' ? 'text-teal-300' : 'text-teal-500/70'}`}>
-                                            GV: {row.gvByWeek[week].toLocaleString('de-DE')}
-                                        </span>
-                                        {renderGrowth(row.gvByWeek[week], row.gvByWeek?.[weeks[idx + 1]] || 0)}
-                                    </div>
+
+                                {/* GV with tooltip */}
+                                {gv > 0 && (
+                                    <MetricDetailTooltip
+                                        currentValue={gv}
+                                        previousValue={prevGv}
+                                        currentWeekLabel={`Semana ${weekNum}`}
+                                        previousWeekLabel={`Semana ${prevWeekNum}`}
+                                        metricName="GV (Glance View)"
+                                        metricColor="text-teal-400"
+                                    >
+                                        <div className="flex items-center gap-1">
+                                            <span className={`text-[9px] font-black tracking-tighter ${sortConfig?.key === week && sortConfig.metric === 'gv' ? 'text-teal-300' : 'text-teal-500/70'}`}>
+                                                GV: {gv.toLocaleString('de-DE')}
+                                            </span>
+                                            {renderGrowth(gv, prevGv)}
+                                        </div>
+                                    </MetricDetailTooltip>
                                 )}
                             </div>
                         </div>