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