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

feat: restore ads spend visibility in Weekly Sales and refine layout

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-02-19 16:26:47 +01:00
parent 2b9399e7e0
commit 635850bc5a
3 changed files with 76 additions and 256366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Sales_Data_check.csv
-256326
View File
File diff suppressed because it is too large Load Diff
Traffic_Weekly_check.xlsx
BIN
View File
Binary file not shown.
components/WeeklyGrid.tsx
+40 -4
View File
@@ -266,8 +266,9 @@ const WeeklyRow: React.FC<{
</MetricDetailTooltip> </MetricDetailTooltip>
)} )}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center gap-0.5">
{/* Secondary Metric (the one not selected) */} {/* Secondary Metrics & Ads Spend */}
<div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5">
{primaryMetric === 'units' ? ( {primaryMetric === 'units' ? (
revenue > 0 && ( revenue > 0 && (
<MetricDetailTooltip <MetricDetailTooltip
@@ -311,6 +312,29 @@ const WeeklyRow: React.FC<{
) )
)} )}
{/* Always show Ads Spend (if > 0) */}
{spend > 0 && (
<MetricDetailTooltip
currentValue={spend}
previousValue={prevSpend}
yoyValue={yoySpend}
currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="Ads Spend"
metricColor="text-rose-400/80"
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
>
<div className="flex items-center gap-1 text-[10px]">
<span className="font-bold text-rose-400/70 italic">
Ads: €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
</span>
{renderGrowth(spend, prevSpend)}
</div>
</MetricDetailTooltip>
)}
</div>
{/* GV with tooltip - Always small/bottom */} {/* GV with tooltip - Always small/bottom */}
{gv > 0 && ( {gv > 0 && (
<MetricDetailTooltip <MetricDetailTooltip
@@ -984,10 +1008,16 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
<span>{weekTotals[week]?.units.toLocaleString('de-DE') || 0}</span> <span>{weekTotals[week]?.units.toLocaleString('de-DE') || 0}</span>
{renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)} {renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
</div> </div>
<div className="flex items-center justify-center gap-1 text-[10px] text-indigo-400 font-bold"> <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0 text-[10px]">
<div className="flex items-center gap-0.5 text-indigo-300 font-bold">
<span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span> <span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)} {renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
</div> </div>
<div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold">
<span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
</div>
</div>
</> </>
) : ( ) : (
<> <>
@@ -995,10 +1025,16 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
<span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span> <span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)} {renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
</div> </div>
<div className="flex items-center justify-center gap-1 text-[10px] text-indigo-400 font-bold"> <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0 text-[10px]">
<div className="flex items-center gap-0.5 text-indigo-300 font-bold">
<span>{(weekTotals[week]?.units || 0).toLocaleString('de-DE')} Units</span> <span>{(weekTotals[week]?.units || 0).toLocaleString('de-DE')} Units</span>
{renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)} {renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
</div> </div>
<div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold">
<span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
</div>
</div>
</> </>
)} )}
<div className="flex items-center justify-center gap-1 text-[9px] text-teal-400 font-black tracking-tight mt-0.5"> <div className="flex items-center justify-center gap-1 text-[9px] text-teal-400 font-black tracking-tight mt-0.5">