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

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.