blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add OP-aware cutting planning

Browse Source
This commit is contained in:
Cauê Faleiros
2026-07-07 15:11:42 -03:00
parent f451c3df63
commit d1220fdd3f
4 changed files with 261 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/pages/Cutting.tsx
View File

@@ -1,12 +1,12 @@
import { useEffect, useMemo, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { AlertTriangle, Download, Layers3, Package, Palette, Ruler, Scissors, Search } from 'lucide-react';
import { AlertTriangle, ClipboardList, Download, Layers3, Package, Palette, Ruler, Scissors, Search } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import PaginationControls from '../components/PaginationControls';
import RefreshStatus from '../components/RefreshStatus';
import { CUT_FAMILY_RULES, buildCutPlan, type CutFamilyKey, type CutIssue, type CutPlanSkuRow } from '../analytics/cutting';
import { exportToCSV, fetchProductAnalytics } from '../dataService';
import type { DateRange, ProductAnalyticsItem } from '../types';
import { CUT_FAMILY_RULES, buildCutPlan, buildOpenProductionByProductId, type CutFamilyKey, type CutIssue, type CutPlanSkuRow } from '../analytics/cutting';
import { exportToCSV, fetchProductAnalytics, fetchProductionOrders } from '../dataService';
import type { DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
type CutFilter = 'need' | 'all' | 'issues' | 'covered';
type CutSort = 'need_desc' | 'need_asc' | 'demand_desc' | 'stock_asc' | 'sold_desc' | 'name_asc';
@@ -28,7 +28,15 @@ const filterOptions: Array<{ value: CutFilter; label: string }> = [
const issueLabels: Record<CutIssue, string> = {
missing_family_rule: 'Sem família',
missing_color: 'Sem cor',
missing_size: 'Sem tamanho'
missing_size: 'Sem tamanho',
missing_yield_rule: 'Sem rendimento'
};
const issueHelp: Record<CutIssue, string> = {
missing_family_rule: 'Produto não caiu em BLCS, BLOS, BLMC ou BLPM.',
missing_color: 'Nome do produto não tem uma cor clara para montar matriz de corte.',
missing_size: 'Nome do produto não tem tamanho claro para montar matriz de corte.',
missing_yield_rule: 'Família reconhecida, mas ainda falta cadastrar unidades por rolo.'
};
const familyStyles: Record<CutFamilyKey, string> = {
@@ -49,6 +57,11 @@ const formatDays = (value: number | null) => {
return `${formatNumber(value, value < 10 ? 1 : 0)} dias`;
};
const allProductionOrdersRange = {
start: new Date(2000, 0, 1),
end: new Date(2100, 11, 31)
};
const CuttingSkeleton = () => (
<div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm" aria-label="Carregando plano de corte">
<div className="border-b border-dark-border p-4">
@@ -72,6 +85,7 @@ const Cutting = () => {
setDateRange: (range: DateRange) => void
}>();
const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
const [productionOrders, setProductionOrders] = useState<ProductionOrderItem[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [searchTerm, setSearchTerm] = useState('');
const [targetCoverageDays, setTargetCoverageDays] = useState(30);
@@ -86,9 +100,13 @@ const Cutting = () => {
const loadProducts = async () => {
setIsLoading(true);
const data = await fetchProductAnalytics(dateRange);
const [productData, productionOrderData] = await Promise.all([
fetchProductAnalytics(dateRange),
fetchProductionOrders(allProductionOrdersRange)
]);
if (isMounted) {
setProducts(data);
setProducts(productData);
setProductionOrders(productionOrderData.orders);
setIsLoading(false);
}
};
@@ -100,7 +118,23 @@ const Cutting = () => {
};
}, [dateRange]);
const cutPlan = useMemo(() => buildCutPlan(products, dateRange, targetCoverageDays), [dateRange, products, targetCoverageDays]);
const openProductionByProductId = useMemo(
() => buildOpenProductionByProductId(products, productionOrders),
[products, productionOrders]
);
const cutPlan = useMemo(
() => buildCutPlan(products, dateRange, targetCoverageDays, openProductionByProductId),
[dateRange, openProductionByProductId, products, targetCoverageDays]
);
const issueSummaries = useMemo(() => {
const counts = new Map<CutIssue, number>();
cutPlan.needRows.forEach(row => {
row.issues.forEach(issue => counts.set(issue, (counts.get(issue) || 0) + 1));
});
return Array.from(counts.entries()).map(([issue, count]) => ({ issue, count }));
}, [cutPlan.needRows]);
const filteredRows = useMemo(() => {
const normalizedSearch = searchTerm.trim().toLowerCase();
@@ -159,6 +193,8 @@ const Cutting = () => {
'OP aberta': row.openProductionQuantity,
'Disponível': row.availableQuantity,
'Necessidade corte': row.suggestedCutQuantity,
'Rendimento un/rolo': row.family.unitsPerRoll || '',
'Rolos estimados': row.estimatedRolls || '',
'Cobertura': row.daysOfCover === null ? '' : row.daysOfCover.toFixed(1).replace('.', ','),
'Pendências': row.issues.map(issue => issueLabels[issue]).join(' | ')
})), `plano_corte_${new Date().toISOString().split('T')[0]}.csv`);
@@ -229,7 +265,9 @@ const Cutting = () => {
<div>
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Famílias</p>
<p className="mt-2 text-3xl font-bold text-dark-text">{formatNumber(cutPlan.summary.familiesWithNeed)}</p>
<p className="mt-1 text-xs font-semibold text-dark-muted">Com necessidade no período</p>
<p className="mt-1 text-xs font-semibold text-dark-muted">
{cutPlan.summary.estimatedRolls === null ? 'Rolos pendentes de rendimento' : `${formatNumber(cutPlan.summary.estimatedRolls)} rolos estimados`}
</p>
</div>
<div className="rounded-xl border border-brand-primary/25 bg-brand-primary/10 p-3 text-brand-primary">
<Layers3 className="h-5 w-5" />
@@ -255,17 +293,52 @@ const Cutting = () => {
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Pendências</p>
<p className="mt-2 text-3xl font-bold text-amber-300">{formatNumber(cutPlan.summary.rowsWithIssues)}</p>
<p className="mt-1 text-xs font-semibold text-dark-muted">Sem família, cor ou tamanho</p>
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">OP aberta</p>
<p className="mt-2 text-3xl font-bold text-amber-300">{formatNumber(cutPlan.summary.openProductionQuantity)}</p>
<p className="mt-1 text-xs font-semibold text-dark-muted">Unidades abatidas quando há match</p>
</div>
<div className="rounded-xl border border-amber-400/25 bg-amber-400/10 p-3 text-amber-300">
<AlertTriangle className="h-5 w-5" />
<ClipboardList className="h-5 w-5" />
</div>
</div>
</div>
</div>
{!!issueSummaries.length && (
<div className="rounded-2xl border border-amber-400/20 bg-amber-400/5 p-4 shadow-sm">
<div className="mb-4 flex items-start justify-between gap-4">
<div>
<h2 className="text-sm font-bold text-amber-200">Pendências para fechar o Corte</h2>
<p className="mt-1 text-xs font-semibold text-dark-muted">
Estes pontos substituem as correções manuais que antes ficavam espalhadas no Excel.
</p>
</div>
<span className="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-xs font-bold text-amber-300">
{formatNumber(cutPlan.summary.rowsWithIssues)} SKUs
</span>
</div>
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
{issueSummaries.map(summary => (
<button
key={summary.issue}
type="button"
onClick={() => {
setCutFilter('issues');
setCurrentPage(1);
}}
className="rounded-xl border border-dark-border bg-dark-card p-3 text-left transition-colors hover:border-amber-400/50 cursor-pointer"
>
<div className="flex items-center justify-between gap-3">
<span className="text-xs font-bold text-dark-text">{issueLabels[summary.issue]}</span>
<span className="text-sm font-bold text-amber-300">{formatNumber(summary.count)}</span>
</div>
<p className="mt-2 text-[11px] font-medium leading-relaxed text-dark-muted">{issueHelp[summary.issue]}</p>
</button>
))}
</div>
</div>
)}
{!!cutPlan.familySummaries.length && (
<div className="grid grid-cols-1 gap-4 xl:grid-cols-4">
{cutPlan.familySummaries.map(summary => (
@@ -281,7 +354,7 @@ const Cutting = () => {
</div>
<p className="mt-4 text-2xl font-bold text-dark-text">{formatNumber(summary.suggestedCutQuantity)} un.</p>
<p className="mt-1 text-xs font-semibold text-dark-muted">
{formatNumber(summary.skuCount)} SKUs · {formatNumber(summary.colorCount)} cores · {formatNumber(summary.sizeCount)} tamanhos
{formatNumber(summary.skuCount)} SKUs · {formatNumber(summary.colorCount)} cores · {summary.estimatedRolls === null ? 'sem rendimento' : `${formatNumber(summary.estimatedRolls)} rolos`}
</p>
</div>
))}
@@ -370,6 +443,7 @@ const Cutting = () => {
<col className="w-[110px]" />
<col className="w-[130px]" />
<col className="w-[140px]" />
<col className="w-[120px]" />
<col className="w-[150px]" />
<col className="w-[110px]" />
</colgroup>
@@ -384,6 +458,7 @@ const Cutting = () => {
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Estoque</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Disponível</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Necessidade</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Rolos</th>
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Pendências</th>
<th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
</tr>
@@ -426,6 +501,9 @@ const Cutting = () => {
{formatNumber(row.suggestedCutQuantity)} un.
</span>
</td>
<td className="px-6 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">
{row.estimatedRolls === null ? '-' : formatNumber(row.estimatedRolls)}
</td>
<td className="px-6 py-2.5">{renderIssueBadge(row)}</td>
<td className="px-4 py-2.5 text-right">
<Link

56
src/pages/Replenishment.tsx
View File

@@ -4,8 +4,9 @@ import { AlertTriangle, CheckCircle2, Download, Package, Search, TrendingUp } fr
import DateRangePicker from '../components/DateRangePicker';
import PaginationControls from '../components/PaginationControls';
import RefreshStatus from '../components/RefreshStatus';
import type { DateRange, ProductAnalyticsItem } from '../types';
import { exportToCSV, fetchProductAnalytics } from '../dataService';
import { buildOpenProductionByProductId } from '../analytics/cutting';
import type { DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
import { exportToCSV, fetchProductAnalytics, fetchProductionOrders } from '../dataService';
import { parseProductName, sortProductSizes } from '../productParsing';
type ReplenishmentStatus = 'need' | 'covered' | 'no_sales' | 'no_stock';
@@ -17,6 +18,8 @@ type ReplenishmentRow = ProductAnalyticsItem & {
dailySales: number;
projectedDemand: number;
suggestedQuantity: number;
openProductionQuantity: number;
availableQuantity: number;
daysOfCover: number | null;
status: ReplenishmentStatus;
statusLabel: string;
@@ -79,6 +82,11 @@ const getRangeDays = (range: DateRange) => {
return Math.max(1, Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1);
};
const allProductionOrdersRange = {
start: new Date(2000, 0, 1),
end: new Date(2100, 11, 31)
};
const ReplenishmentSkeleton = () => (
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm" aria-label="Carregando necessidade de reposicao">
<div className="border-b border-zinc-100 p-4 dark:border-dark-border">
@@ -115,6 +123,7 @@ const Replenishment = () => {
}>();
const [searchParams] = useSearchParams();
const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
const [productionOrders, setProductionOrders] = useState<ProductionOrderItem[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState<ReplenishmentFilter>(() => {
@@ -132,10 +141,14 @@ const Replenishment = () => {
const loadProducts = async () => {
setIsLoading(true);
const data = await fetchProductAnalytics(dateRange);
const [productData, productionOrderData] = await Promise.all([
fetchProductAnalytics(dateRange),
fetchProductionOrders(allProductionOrdersRange)
]);
if (isMounted) {
setProducts(data);
setProducts(productData);
setProductionOrders(productionOrderData.orders);
setIsLoading(false);
}
};
@@ -147,16 +160,23 @@ const Replenishment = () => {
};
}, [dateRange]);
const openProductionByProductId = useMemo(
() => buildOpenProductionByProductId(products, productionOrders),
[products, productionOrders]
);
const allRows = useMemo<ReplenishmentRow[]>(() => {
const rangeDays = getRangeDays(dateRange);
return products.map(product => {
const dailySales = product.quantitySold / rangeDays;
const projectedDemand = dailySales * targetCoverageDays;
const rawNeed = projectedDemand - product.stock;
const openProductionQuantity = openProductionByProductId[product.id] || 0;
const availableQuantity = product.stock + openProductionQuantity;
const rawNeed = projectedDemand - availableQuantity;
const suggestedQuantity = Math.max(0, Math.ceil(rawNeed));
const daysOfCover = dailySales > 0 ? product.stock / dailySales : null;
const status: ReplenishmentStatus = product.stock <= 0
const daysOfCover = dailySales > 0 ? availableQuantity / dailySales : null;
const status: ReplenishmentStatus = availableQuantity <= 0
? 'no_stock'
: dailySales <= 0
? 'no_sales'
@@ -171,6 +191,8 @@ const Replenishment = () => {
dailySales,
projectedDemand,
suggestedQuantity,
openProductionQuantity,
availableQuantity,
daysOfCover,
status,
statusLabel: statusStyles[status].label,
@@ -182,7 +204,7 @@ const Replenishment = () => {
sizes: metadata.size ? [metadata.size] : []
};
});
}, [dateRange, products, targetCoverageDays]);
}, [dateRange, openProductionByProductId, products, targetCoverageDays]);
const groupedRows = useMemo<ReplenishmentRow[]>(() => {
const groups = new Map<string, ReplenishmentRow[]>();
@@ -199,12 +221,14 @@ const Replenishment = () => {
const quantitySold = group.reduce((total, row) => total + row.quantitySold, 0);
const revenue = group.reduce((total, row) => total + row.revenue, 0);
const stock = group.reduce((total, row) => total + row.stock, 0);
const openProductionQuantity = group.reduce((total, row) => total + row.openProductionQuantity, 0);
const availableQuantity = group.reduce((total, row) => total + row.availableQuantity, 0);
const dailySales = group.reduce((total, row) => total + row.dailySales, 0);
const projectedDemand = group.reduce((total, row) => total + row.projectedDemand, 0);
const suggestedQuantity = group.reduce((total, row) => total + row.suggestedQuantity, 0);
const orderLineCount = group.reduce((total, row) => total + row.orderLineCount, 0);
const daysOfCover = dailySales > 0 ? stock / dailySales : null;
const status: ReplenishmentStatus = stock <= 0
const daysOfCover = dailySales > 0 ? availableQuantity / dailySales : null;
const status: ReplenishmentStatus = availableQuantity <= 0
? 'no_stock'
: dailySales <= 0
? 'no_sales'
@@ -222,6 +246,8 @@ const Replenishment = () => {
quantitySold,
revenue,
stock,
openProductionQuantity,
availableQuantity,
orderLineCount,
dailySales,
projectedDemand,
@@ -317,6 +343,8 @@ const Replenishment = () => {
'Media Diaria': row.dailySales.toFixed(2).replace('.', ','),
'Demanda Projetada': row.projectedDemand.toFixed(2).replace('.', ','),
'Estoque Atual': row.stock,
'OP Aberta': row.openProductionQuantity,
'Disponivel': row.availableQuantity,
'Cobertura Atual': row.daysOfCover === null ? '' : row.daysOfCover.toFixed(1).replace('.', ','),
'Sugestao Reposicao': row.suggestedQuantity
}));
@@ -481,6 +509,7 @@ const Replenishment = () => {
<colgroup>
<col className="w-[120px]" />
<col className="w-[390px]" />
<col className="w-[120px]" />
<col className="w-[130px]" />
<col className="w-[140px]" />
<col className="w-[120px]" />
@@ -495,6 +524,7 @@ const Replenishment = () => {
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Status</th>
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Demanda proj.</th>
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Estoque</th>
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Disponível</th>
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Sugestão reposição</th>
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Cobertura</th>
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px] text-right">Ações</th>
@@ -524,6 +554,12 @@ const Replenishment = () => {
</td>
<td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatNumber(row.projectedDemand, 1)} un.</td>
<td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatNumber(row.stock)} un.</td>
<td className="px-6 py-2.5 whitespace-nowrap">
<span className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.availableQuantity)} un.</span>
{!!row.openProductionQuantity && (
<span className="ml-1 text-xs font-semibold text-dark-muted">OP {formatNumber(row.openProductionQuantity)}</span>
)}
</td>
<td className="px-6 py-2.5 whitespace-nowrap">
<span className={row.suggestedQuantity > 0 ? 'font-bold text-red-300' : 'font-bold text-emerald-300'}>
{formatNumber(row.suggestedQuantity)} un.