matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix BF dashboard showing new year too early

Browse Source
This commit is contained in:
Matt
2026-01-08 12:10:15 -05:00
parent f5b2b4e421
commit 738ed94ad5
1 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
inventory/src/pages/BlackFridayDashboard.tsx
View File

@@ -513,6 +513,9 @@ function LoadingBlock() {
export function BlackFridayDashboard() { export function BlackFridayDashboard() {
const currentYear = new Date().getUTCFullYear(); const currentYear = new Date().getUTCFullYear();
const currentMonth = new Date().getUTCMonth() + 1; // getUTCMonth() returns 0-11, so add 1
// Show previous year until November of current year
const displayYear = currentMonth < 11 ? currentYear - 1 : currentYear;
const availableYears = useMemo( const availableYears = useMemo(
() => () =>
Array.from({ length: 6 }, (_, index) => currentYear - index).filter( Array.from({ length: 6 }, (_, index) => currentYear - index).filter(
@@ -686,9 +689,14 @@ export function BlackFridayDashboard() {
[selectedYears] [selectedYears]
); );
const chartYears = useMemo(
() => sortedYears.filter(y => y <= displayYear),
[sortedYears, displayYear]
);
const previousYears = useMemo( const previousYears = useMemo(
() => sortedYears.filter(y => y !== currentYear), () => sortedYears.filter(y => y !== displayYear),
[sortedYears, currentYear] [sortedYears, displayYear]
); );
const yoyByYear = useMemo(() => { const yoyByYear = useMemo(() => {
@@ -712,11 +720,11 @@ export function BlackFridayDashboard() {
}, [dataByYear, sortedYears]); }, [dataByYear, sortedYears]);
const chartData = useMemo(() => { const chartData = useMemo(() => {
if (!sortedYears.length) return []; if (!chartYears.length) return [];
return DAY_LABELS.map((label, index) => { return DAY_LABELS.map((label, index) => {
const point: Record<string, string | number | null> = { day: label }; const point: Record<string, string | number | null> = { day: label };
sortedYears.forEach((year, colorIndex) => { chartYears.forEach((year, colorIndex) => {
const day = dataByYear[year]?.days[index]; const day = dataByYear[year]?.days[index];
point[`${year}-revenue`] = day?.revenue ?? 0; point[`${year}-revenue`] = day?.revenue ?? 0;
point[`${year}-orders`] = day?.orders ?? 0; point[`${year}-orders`] = day?.orders ?? 0;
@@ -728,7 +736,7 @@ export function BlackFridayDashboard() {
}); });
return point; return point;
}); });
}, [dataByYear, sortedYears]); }, [dataByYear, chartYears]);
const debugOverlay = useMemo(() => { const debugOverlay = useMemo(() => {
if (!bucketDebug.length) return []; if (!bucketDebug.length) return [];
@@ -736,18 +744,18 @@ export function BlackFridayDashboard() {
}, [bucketDebug]); }, [bucketDebug]);
const getStrokeForYear = (year: number) => { const getStrokeForYear = (year: number) => {
const index = sortedYears.indexOf(year); const index = chartYears.indexOf(year);
return COLOR_PALETTE[index % COLOR_PALETTE.length]; return COLOR_PALETTE[index % COLOR_PALETTE.length];
}; };
const currentYearData = dataByYear[currentYear]; const currentYearData = dataByYear[displayYear];
const lastYearData = dataByYear[currentYear - 1]; const lastYearData = dataByYear[displayYear - 1];
// Live status indicator // Live status indicator
const renderLiveHeader = () => ( const renderLiveHeader = () => (
<div className="flex items-center justify-between gap-4 flex-wrap"> <div className="flex items-center justify-between gap-4 flex-wrap">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h1 className="text-xl font-bold tracking-tight">Black Friday {currentYear}</h1> <h1 className="text-xl font-bold tracking-tight">Black Friday {displayYear}</h1>
<span className="text-sm text-muted-foreground">{currentYearData?.range.label}</span> <span className="text-sm text-muted-foreground">{currentYearData?.range.label}</span>
</div> </div>
</div> </div>
@@ -781,7 +789,7 @@ export function BlackFridayDashboard() {
const renderCurrentYearHero = () => { const renderCurrentYearHero = () => {
if (!currentYearData) return null; if (!currentYearData) return null;
const yoy = yoyByYear[currentYear]; const yoy = yoyByYear[displayYear];
return ( return (
<div className="rounded-xl bg-gradient-to-br from-emerald-500/5 via-emerald-500/[0.02] to-transparent border border-emerald-500/20 p-4"> <div className="rounded-xl bg-gradient-to-br from-emerald-500/5 via-emerald-500/[0.02] to-transparent border border-emerald-500/20 p-4">
@@ -1000,16 +1008,16 @@ export function BlackFridayDashboard() {
width={45} width={45}
/> />
<RechartsTooltip content={<CustomTooltip />} /> <RechartsTooltip content={<CustomTooltip />} />
{sortedYears.map((year) => ( {chartYears.map((year) => (
<Line <Line
key={year} key={year}
type="monotone" type="monotone"
name={`${year}`} name={`${year}`}
dataKey={`${year}-revenue`} dataKey={`${year}-revenue`}
stroke={getStrokeForYear(year)} stroke={getStrokeForYear(year)}
strokeWidth={year === currentYear ? 2.5 : 1.5} strokeWidth={year === displayYear ? 2.5 : 1.5}
strokeOpacity={year === currentYear ? 1 : 0.6} strokeOpacity={year === displayYear ? 1 : 0.6}
dot={year === currentYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false} dot={year === displayYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false}
activeDot={{ r: 4, strokeWidth: 0 }} activeDot={{ r: 4, strokeWidth: 0 }}
/> />
))} ))}
@@ -1047,16 +1055,16 @@ export function BlackFridayDashboard() {
width={45} width={45}
/> />
<RechartsTooltip content={<CustomTooltip />} /> <RechartsTooltip content={<CustomTooltip />} />
{sortedYears.map((year) => ( {chartYears.map((year) => (
<Line <Line
key={year} key={year}
type="monotone" type="monotone"
name={`${year}`} name={`${year}`}
dataKey={`${year}-profit`} dataKey={`${year}-profit`}
stroke={getStrokeForYear(year)} stroke={getStrokeForYear(year)}
strokeWidth={year === currentYear ? 2.5 : 1.5} strokeWidth={year === displayYear ? 2.5 : 1.5}
strokeOpacity={year === currentYear ? 1 : 0.6} strokeOpacity={year === displayYear ? 1 : 0.6}
dot={year === currentYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false} dot={year === displayYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false}
activeDot={{ r: 4, strokeWidth: 0 }} activeDot={{ r: 4, strokeWidth: 0 }}
/> />
))} ))}
@@ -1094,16 +1102,16 @@ export function BlackFridayDashboard() {
width={45} width={45}
/> />
<RechartsTooltip content={<CustomTooltip />} /> <RechartsTooltip content={<CustomTooltip />} />
{sortedYears.map((year) => ( {chartYears.map((year) => (
<Line <Line
key={year} key={year}
type="monotone" type="monotone"
name={`${year}`} name={`${year}`}
dataKey={`${year}-cogs`} dataKey={`${year}-cogs`}
stroke={getStrokeForYear(year)} stroke={getStrokeForYear(year)}
strokeWidth={year === currentYear ? 2.5 : 1.5} strokeWidth={year === displayYear ? 2.5 : 1.5}
strokeOpacity={year === currentYear ? 1 : 0.6} strokeOpacity={year === displayYear ? 1 : 0.6}
dot={year === currentYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false} dot={year === displayYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false}
activeDot={{ r: 4, strokeWidth: 0 }} activeDot={{ r: 4, strokeWidth: 0 }}
/> />
))} ))}
@@ -1141,16 +1149,16 @@ export function BlackFridayDashboard() {
width={35} width={35}
/> />
<RechartsTooltip content={<CustomTooltip />} /> <RechartsTooltip content={<CustomTooltip />} />
{sortedYears.map((year) => ( {chartYears.map((year) => (
<Line <Line
key={year} key={year}
type="monotone" type="monotone"
name={`${year}`} name={`${year}`}
dataKey={`${year}-margin`} dataKey={`${year}-margin`}
stroke={getStrokeForYear(year)} stroke={getStrokeForYear(year)}
strokeWidth={year === currentYear ? 2.5 : 1.5} strokeWidth={year === displayYear ? 2.5 : 1.5}
strokeOpacity={year === currentYear ? 1 : 0.6} strokeOpacity={year === displayYear ? 1 : 0.6}
dot={year === currentYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false} dot={year === displayYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false}
activeDot={{ r: 4, strokeWidth: 0 }} activeDot={{ r: 4, strokeWidth: 0 }}
/> />
))} ))}
@@ -1188,16 +1196,16 @@ export function BlackFridayDashboard() {
width={40} width={40}
/> />
<RechartsTooltip content={<CustomTooltip />} /> <RechartsTooltip content={<CustomTooltip />} />
{sortedYears.map((year) => ( {chartYears.map((year) => (
<Line <Line
key={year} key={year}
type="monotone" type="monotone"
name={`${year}`} name={`${year}`}
dataKey={`${year}-orders`} dataKey={`${year}-orders`}
stroke={getStrokeForYear(year)} stroke={getStrokeForYear(year)}
strokeWidth={year === currentYear ? 2.5 : 1.5} strokeWidth={year === displayYear ? 2.5 : 1.5}
strokeOpacity={year === currentYear ? 1 : 0.6} strokeOpacity={year === displayYear ? 1 : 0.6}
dot={year === currentYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false} dot={year === displayYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false}
activeDot={{ r: 4, strokeWidth: 0 }} activeDot={{ r: 4, strokeWidth: 0 }}
/> />
))} ))}
@@ -1235,16 +1243,16 @@ export function BlackFridayDashboard() {
width={40} width={40}
/> />
<RechartsTooltip content={<CustomTooltip />} /> <RechartsTooltip content={<CustomTooltip />} />
{sortedYears.map((year) => ( {chartYears.map((year) => (
<Line <Line
key={year} key={year}
type="monotone" type="monotone"
name={`${year}`} name={`${year}`}
dataKey={`${year}-aov`} dataKey={`${year}-aov`}
stroke={getStrokeForYear(year)} stroke={getStrokeForYear(year)}
strokeWidth={year === currentYear ? 2.5 : 1.5} strokeWidth={year === displayYear ? 2.5 : 1.5}
strokeOpacity={year === currentYear ? 1 : 0.6} strokeOpacity={year === displayYear ? 1 : 0.6}
dot={year === currentYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false} dot={year === displayYear ? { r: 3, strokeWidth: 2, fill: "hsl(var(--background))" } : false}
activeDot={{ r: 4, strokeWidth: 0 }} activeDot={{ r: 4, strokeWidth: 0 }}
/> />
))} ))}
@@ -1276,11 +1284,11 @@ export function BlackFridayDashboard() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{sortedYears.map((year) => { {sortedYears.filter(year => year <= displayYear).map((year) => {
const entry = dataByYear[year]; const entry = dataByYear[year];
if (!entry) return null; if (!entry) return null;
const isCurrentYear = year === currentYear; const isCurrentYear = year === displayYear;
return ( return (
<TableRow <TableRow
@@ -1362,7 +1370,7 @@ export function BlackFridayDashboard() {
// Chart legend // Chart legend
const renderLegend = () => ( const renderLegend = () => (
<div className="flex items-center gap-4 text-xs"> <div className="flex items-center gap-4 text-xs">
{sortedYears.map((year) => ( {chartYears.map((year) => (
<div key={year} className="flex items-center gap-1.5"> <div key={year} className="flex items-center gap-1.5">
<div <div
className="h-2.5 w-2.5 rounded-full" className="h-2.5 w-2.5 rounded-full"
@@ -1370,7 +1378,7 @@ export function BlackFridayDashboard() {
/> />
<span className={cn( <span className={cn(
"font-medium", "font-medium",
year === currentYear ? "text-foreground" : "text-muted-foreground" year === displayYear ? "text-foreground" : "text-muted-foreground"
)}> )}>
{year} {year}
</span> </span>