christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 12:45:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: move Week Coverage to its own dedicated sticky column per SKU and clean up totals row

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-17 12:41:05 +02:00
parent 59c4b3a204
commit c1cf79cb6b
1 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+24 -17
View File
@@ -246,7 +246,7 @@ const WeeklyRow: React.FC<{
return ( return (
<tr className="hover:bg-white/[0.02] transition-colors group relative hover:z-50"> <tr className="hover:bg-white/[0.02] transition-colors group relative hover:z-50">
<td className="p-3 py-2 sticky left-0 z-10 bg-slate-900 group-hover:bg-slate-800 border-r border-white/10"> <td className="p-3 py-2 sticky left-0 z-10 bg-slate-900 group-hover:bg-slate-800 border-r border-white/10 min-w-[240px]">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex items-center gap-2 mb-0.5"> <div className="flex items-center gap-2 mb-0.5">
{ranks.map((r, i) => ( {ranks.map((r, i) => (
@@ -267,12 +267,6 @@ const WeeklyRow: React.FC<{
{stockMap && ( {stockMap && (
<StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} /> <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
)} )}
<VendorStockBadge
asin={asin}
vendorStockMap={vendorStockMap}
mode={top50Mode}
avgWeeklySales={velocityMap?.get(asin)}
/>
<BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} /> <BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
{experimentMap && ( {experimentMap && (
<ExperimentBadge <ExperimentBadge
@@ -284,6 +278,17 @@ const WeeklyRow: React.FC<{
<span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span> <span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span>
</div> </div>
</td> </td>
{/* Coverage Column (Dedicated) */}
<td className="p-3 py-2 sticky left-[240px] z-10 bg-slate-900 group-hover:bg-slate-800 border-r border-white/10 min-w-[100px]">
<div className="flex justify-center">
<VendorStockBadge
asin={asin}
vendorStockMap={vendorStockMap}
mode={top50Mode}
avgWeeklySales={velocityMap?.get(asin)}
/>
</div>
</td>
{weeks.map((week, idx) => { {weeks.map((week, idx) => {
const val = row.unitsByWeek[week] || 0; const val = row.unitsByWeek[week] || 0;
const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0; const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0;
@@ -1056,6 +1061,15 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
</div> </div>
</div> </div>
</th> </th>
{/* COVERAGE Header Column */}
<th
className="p-3 text-[11px] font-black text-emerald-400 uppercase tracking-widest sticky left-[240px] z-40 bg-slate-900 border-r border-white/10 min-w-[100px]"
>
<div className="flex flex-col items-center gap-1">
<span>Coverage</span>
<span className="text-[8px] text-slate-500">(WOC)</span>
</div>
</th>
{weeks.map(week => ( {weeks.map(week => (
<th <th
key={week} key={week}
@@ -1134,17 +1148,10 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
</tr> </tr>
<tr className="bg-indigo-950 border-b border-white/10 relative z-20"> <tr className="bg-indigo-950 border-b border-white/10 relative z-20">
<th className="p-3 text-sm font-black text-white sticky left-0 z-40 bg-indigo-950 border-r border-white/10"> <th className="p-3 text-sm font-black text-white sticky left-0 z-40 bg-indigo-950 border-r border-white/10">
<div className="flex flex-col">
<span>TOTALS</span> <span>TOTALS</span>
{aggregateWoc !== null && ( </th>
<div className="mt-1 flex flex-col items-center"> {/* COVERAGE Totals Column */}
<span className="text-[9px] text-indigo-300 uppercase font-black leading-none">Week Coverage (Avg)</span> <th className="p-3 text-sm font-black text-white sticky left-[240px] z-40 bg-indigo-950 border-r border-white/10">
<span className={`text-xs font-black ${aggregateWoc < 4 ? 'text-rose-400' : 'text-emerald-400'}`}>
{aggregateWoc === 999 ? '> 52 Weeks' : `${aggregateWoc.toFixed(1)} Weeks`}
</span>
</div>
)}
</div>
</th> </th>
{weeks.map((week, idx) => ( {weeks.map((week, idx) => (
<th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10"> <th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10">