Add grouped replenishment analysis
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m1s

This commit is contained in:
Cauê Faleiros
2026-07-07 09:59:07 -03:00
parent e0c71de3eb
commit 56cff262ab
4 changed files with 199 additions and 30 deletions

View File

@@ -6,6 +6,7 @@ import DateRangePicker from '../components/DateRangePicker';
import RefreshStatus from '../components/RefreshStatus';
import type { DateRange, ProductDetailsAnalytics } from '../types';
import { fetchProductDetailsAnalytics } from '../dataService';
import { parseProductName } from '../productParsing';
const CHART_GRID_COLOR = 'var(--chart-grid)';
const CHART_AXIS_COLOR = 'var(--chart-axis)';
@@ -351,13 +352,26 @@ const ProductDetails = () => {
<div className="space-y-3">
{variantBreakdown.map(variant => {
const width = maxVariantQuantity ? Math.max(4, (variant.quantitySold / maxVariantQuantity) * 100) : 0;
const metadata = parseProductName(variant.name);
return (
<div key={variant.id} className="rounded-xl border border-dark-border bg-dark-input/45 p-4">
<div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
<div className="min-w-0">
<div className="truncate text-sm font-bold text-dark-text">{variant.name}</div>
<div className="mt-1 text-[11px] font-medium text-dark-muted">#{variant.id}</div>
<div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] font-medium text-dark-muted">
<span>#{variant.id}</span>
{metadata.color && (
<span className="rounded-full border border-sky-400/25 bg-sky-400/10 px-2 py-0.5 font-bold text-sky-300">
{metadata.color}
</span>
)}
{metadata.size && (
<span className="rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2 py-0.5 font-bold text-emerald-300">
Tam. {metadata.size}
</span>
)}
</div>
</div>
<div className="flex shrink-0 gap-5 text-right text-xs">
<div>