mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 13:45:23 +02:00
feat: restore ads spend visibility in Weekly Sales and refine layout
This commit is contained in:
Christian Vidal Wolf
-256326
File diff suppressed because it is too large
Load Diff
Binary file not shown.
+76
-40
@@ -266,50 +266,74 @@ 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 */}
|
||||||
{primaryMetric === 'units' ? (
|
<div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5">
|
||||||
revenue > 0 && (
|
{primaryMetric === 'units' ? (
|
||||||
|
revenue > 0 && (
|
||||||
|
<MetricDetailTooltip
|
||||||
|
currentValue={revenue}
|
||||||
|
previousValue={prevRevenue}
|
||||||
|
yoyValue={yoyRevenue}
|
||||||
|
currentWeekLabel={`Week ${weekNum} (${year})`}
|
||||||
|
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
|
||||||
|
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
|
||||||
|
metricName="Revenue"
|
||||||
|
metricColor="text-indigo-400/80"
|
||||||
|
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-1 text-[10px]">
|
||||||
|
<span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
|
||||||
|
€{revenue.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
|
||||||
|
</span>
|
||||||
|
{renderGrowth(revenue, prevRevenue)}
|
||||||
|
</div>
|
||||||
|
</MetricDetailTooltip>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
val > 0 && (
|
||||||
|
<MetricDetailTooltip
|
||||||
|
currentValue={val}
|
||||||
|
previousValue={prevVal}
|
||||||
|
yoyValue={yoyUnits}
|
||||||
|
currentWeekLabel={`Week ${weekNum} (${year})`}
|
||||||
|
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
|
||||||
|
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
|
||||||
|
metricName="Units"
|
||||||
|
metricColor="text-indigo-400/80"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-1 text-[10px]">
|
||||||
|
<span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-300' : 'text-indigo-400/80'}`}>
|
||||||
|
{val.toLocaleString('de-DE')}
|
||||||
|
</span>
|
||||||
|
{renderGrowth(val, prevVal)}
|
||||||
|
</div>
|
||||||
|
</MetricDetailTooltip>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Always show Ads Spend (if > 0) */}
|
||||||
|
{spend > 0 && (
|
||||||
<MetricDetailTooltip
|
<MetricDetailTooltip
|
||||||
currentValue={revenue}
|
currentValue={spend}
|
||||||
previousValue={prevRevenue}
|
previousValue={prevSpend}
|
||||||
yoyValue={yoyRevenue}
|
yoyValue={yoySpend}
|
||||||
currentWeekLabel={`Week ${weekNum} (${year})`}
|
currentWeekLabel={`Week ${weekNum} (${year})`}
|
||||||
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
|
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
|
||||||
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
|
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
|
||||||
metricName="Revenue"
|
metricName="Ads Spend"
|
||||||
metricColor="text-indigo-400/80"
|
metricColor="text-rose-400/80"
|
||||||
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
|
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-1 text-[10px]">
|
<div className="flex items-center gap-1 text-[10px]">
|
||||||
<span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
|
<span className="font-bold text-rose-400/70 italic">
|
||||||
€{revenue.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
|
Ads: €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
|
||||||
</span>
|
</span>
|
||||||
{renderGrowth(revenue, prevRevenue)}
|
{renderGrowth(spend, prevSpend)}
|
||||||
</div>
|
</div>
|
||||||
</MetricDetailTooltip>
|
</MetricDetailTooltip>
|
||||||
)
|
)}
|
||||||
) : (
|
</div>
|
||||||
val > 0 && (
|
|
||||||
<MetricDetailTooltip
|
|
||||||
currentValue={val}
|
|
||||||
previousValue={prevVal}
|
|
||||||
yoyValue={yoyUnits}
|
|
||||||
currentWeekLabel={`Week ${weekNum} (${year})`}
|
|
||||||
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
|
|
||||||
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
|
|
||||||
metricName="Units"
|
|
||||||
metricColor="text-indigo-400/80"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-1 text-[10px]">
|
|
||||||
<span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-300' : 'text-indigo-400/80'}`}>
|
|
||||||
{val.toLocaleString('de-DE')}
|
|
||||||
</span>
|
|
||||||
{renderGrowth(val, prevVal)}
|
|
||||||
</div>
|
|
||||||
</MetricDetailTooltip>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* GV with tooltip - Always small/bottom */}
|
{/* GV with tooltip - Always small/bottom */}
|
||||||
{gv > 0 && (
|
{gv > 0 && (
|
||||||
@@ -984,9 +1008,15 @@ 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]">
|
||||||
<span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
|
<div className="flex items-center gap-0.5 text-indigo-300 font-bold">
|
||||||
{renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
|
<span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
|
||||||
|
{renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
|
||||||
|
</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>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
@@ -995,9 +1025,15 @@ 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]">
|
||||||
<span>{(weekTotals[week]?.units || 0).toLocaleString('de-DE')} Units</span>
|
<div className="flex items-center gap-0.5 text-indigo-300 font-bold">
|
||||||
{renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
|
<span>{(weekTotals[week]?.units || 0).toLocaleString('de-DE')} Units</span>
|
||||||
|
{renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
|
||||||
|
</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>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user