1476 lines
79 KiB
TypeScript
1476 lines
79 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Link, useOutletContext, useSearchParams } from 'react-router-dom';
|
|
import { AlertTriangle, ArrowLeft, ClipboardList, Download, Eye, Layers3, Pencil, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2, X } from 'lucide-react';
|
|
import DateRangePicker from '../components/DateRangePicker';
|
|
import PaginationControls from '../components/PaginationControls';
|
|
import ProductColorBadge from '../components/ProductColorBadge';
|
|
import RefreshStatus from '../components/RefreshStatus';
|
|
import { CUT_FAMILY_RULES, buildCutPlan, buildOpenProductionByProductId, type CutFamilyKey, type CutIssue, type CutPlanSkuRow, type CutProductOverride } from '../analytics/cutting';
|
|
import { createProductionOrders, exportToCSV, fetchCuttingSettings, fetchProductAnalytics, fetchProductCompositions, fetchProductionOrders, fetchStock, saveCuttingSettings } from '../dataService';
|
|
import type { CuttingSettings, DateRange, ProductAnalyticsItem, ProductComposition, ProductionOrderItem, StockData } from '../types';
|
|
import { getPlanningStock } from '../planningStock';
|
|
|
|
type CutFilter = 'need' | 'all' | 'issues' | 'covered';
|
|
type ExecutionFilter = 'all' | 'ready' | 'blocked' | 'data';
|
|
type CutSort = 'need_desc' | 'need_asc' | 'demand_desc' | 'stock_asc' | 'sold_desc' | 'name_asc';
|
|
type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
|
|
type CutProductIssue = Exclude<CutIssue, 'missing_yield_rule'>;
|
|
type CorrectionIssueFilter = CutProductIssue | 'all';
|
|
type SettingsSection = 'rules' | 'corrections';
|
|
type CuttingView = 'plan' | 'families' | 'issues';
|
|
type MaterialReadiness = { status: 'ready' | 'material_ready' | 'blocked' | 'missing'; blockers: string[] };
|
|
|
|
const SETTINGS_STORAGE_KEY = 'nexstar_cutting_settings';
|
|
const coverageTargetOptions = [7, 15, 30, 60];
|
|
const familyOptions: Array<{ value: CutFamilyKey | 'all'; label: string }> = [
|
|
{ value: 'all', label: 'Todas famílias' },
|
|
...CUT_FAMILY_RULES.map(rule => ({ value: rule.key, label: `${rule.materialLabel} · ${rule.label}` })),
|
|
{ value: 'OUTROS', label: 'Sem regra' }
|
|
];
|
|
|
|
const filterOptions: Array<{ value: CutFilter; label: string }> = [
|
|
{ value: 'need', label: 'Com necessidade' },
|
|
{ value: 'all', label: 'Todos' },
|
|
{ value: 'issues', label: 'Dados pendentes' },
|
|
{ value: 'covered', label: 'Sem necessidade' }
|
|
];
|
|
|
|
const issueLabels: Record<CutIssue, string> = {
|
|
missing_family_rule: 'Sem família',
|
|
missing_color: 'Sem cor',
|
|
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 correctionFilterOptions: Array<{ value: CorrectionIssueFilter; label: string }> = [
|
|
{ value: 'all', label: 'Todos os dados pendentes' },
|
|
{ value: 'missing_family_rule', label: issueLabels.missing_family_rule },
|
|
{ value: 'missing_color', label: issueLabels.missing_color },
|
|
{ value: 'missing_size', label: issueLabels.missing_size }
|
|
];
|
|
|
|
const familyStyles: Record<CutFamilyKey, string> = {
|
|
BLCS: 'border-fuchsia-400/30 bg-fuchsia-400/10 text-fuchsia-300',
|
|
BLOS: 'border-sky-400/30 bg-sky-400/10 text-sky-300',
|
|
BLMC: 'border-amber-400/30 bg-amber-400/10 text-amber-300',
|
|
BLPM: 'border-purple-400/30 bg-purple-400/10 text-purple-300',
|
|
OUTROS: 'border-zinc-500/30 bg-zinc-500/10 text-zinc-300'
|
|
};
|
|
|
|
const formatNumber = (value: number, maximumFractionDigits = 0) => (
|
|
new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
|
|
);
|
|
|
|
const normalizeMaterialKey = (value: string) => value
|
|
.normalize('NFD')
|
|
.replace(/[\u0300-\u036f]/g, '')
|
|
.replace(/\s+/g, ' ')
|
|
.trim()
|
|
.toUpperCase();
|
|
|
|
const isServiceComponent = (value: string) => /\b(?:SERVI[CÇ]O|FRETE|TINTURARIA|TECELAGEM|COSTURA|ESTAMPARIA|LAVANDERIA)\b/i.test(value);
|
|
|
|
const formatDateKey = (date: Date) => {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
const formatDays = (value: number | null) => {
|
|
if (value === null) return '-';
|
|
if (value > 999) return '999+ dias';
|
|
return `${formatNumber(value, value < 10 ? 1 : 0)} dias`;
|
|
};
|
|
|
|
const allProductionOrdersRange = {
|
|
start: new Date(2000, 0, 1),
|
|
end: new Date(2100, 11, 31)
|
|
};
|
|
|
|
const loadCuttingSettings = (): CuttingSettings => {
|
|
try {
|
|
const rawSettings = localStorage.getItem(SETTINGS_STORAGE_KEY);
|
|
if (!rawSettings) return { familyYields: {}, productOverrides: {} };
|
|
const parsed = JSON.parse(rawSettings) as Partial<CuttingSettings>;
|
|
return {
|
|
familyYields: parsed.familyYields || {},
|
|
productOverrides: parsed.productOverrides || {}
|
|
};
|
|
} catch {
|
|
return { familyYields: {}, productOverrides: {} };
|
|
}
|
|
};
|
|
|
|
const hasCuttingSettings = (settings: CuttingSettings) => (
|
|
Object.keys(settings.familyYields).length > 0 ||
|
|
Object.keys(settings.productOverrides).length > 0
|
|
);
|
|
|
|
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">
|
|
<div className="grid grid-cols-[120px_1.4fr_130px_110px_110px_120px_130px_130px_110px] gap-6">
|
|
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map(item => <div key={item} className="skeleton h-3" />)}
|
|
</div>
|
|
</div>
|
|
<div className="divide-y divide-dark-border">
|
|
{[0, 1, 2, 3, 4, 5, 6, 7].map(row => (
|
|
<div key={row} className="grid grid-cols-[120px_1.4fr_130px_110px_110px_120px_130px_130px_110px] gap-6 px-6 py-4">
|
|
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map(item => <div key={item} className="skeleton h-4" />)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const Cutting = () => {
|
|
const { dateRange, setDateRange } = useOutletContext<{
|
|
dateRange: DateRange,
|
|
setDateRange: (range: DateRange) => void
|
|
}>();
|
|
const [searchParams] = useSearchParams();
|
|
const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
|
|
const [productionOrders, setProductionOrders] = useState<ProductionOrderItem[]>([]);
|
|
const [compositions, setCompositions] = useState<ProductComposition[]>([]);
|
|
const [materialStock, setMaterialStock] = useState<StockData[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [targetCoverageDays, setTargetCoverageDays] = useState(30);
|
|
const [familyFilter, setFamilyFilter] = useState<CutFamilyKey | 'all'>('all');
|
|
const [cutFilter, setCutFilter] = useState<CutFilter>('need');
|
|
const [executionFilter, setExecutionFilter] = useState<ExecutionFilter>('all');
|
|
const [sortBy, setSortBy] = useState<CutSort>('need_desc');
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
const [settingsSection, setSettingsSection] = useState<SettingsSection>('rules');
|
|
const [cuttingSettings, setCuttingSettings] = useState<CuttingSettings>(loadCuttingSettings);
|
|
const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle');
|
|
const [hasUnsavedSettings, setHasUnsavedSettings] = useState(false);
|
|
const [correctionIssueFilter, setCorrectionIssueFilter] = useState<CorrectionIssueFilter>('all');
|
|
const [correctionPage, setCorrectionPage] = useState(1);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
const [isGeneratingOrders, setIsGeneratingOrders] = useState(false);
|
|
const [isOrderPreviewOpen, setIsOrderPreviewOpen] = useState(false);
|
|
const [previewPage, setPreviewPage] = useState(1);
|
|
const [previewItemsPerPage, setPreviewItemsPerPage] = useState(10);
|
|
const [editingCutRow, setEditingCutRow] = useState<CutPlanSkuRow | null>(null);
|
|
const [quickCutEdit, setQuickCutEdit] = useState<CutProductOverride>({});
|
|
const [isQuickCutEditSaving, setIsQuickCutEditSaving] = useState(false);
|
|
const [activeCuttingView, setActiveCuttingView] = useState<CuttingView>('plan');
|
|
const [generationMessage, setGenerationMessage] = useState('');
|
|
const cutConfigSection = searchParams.get('config');
|
|
const targetCorrectionSku = (searchParams.get('sku') || '').trim();
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
const loadSettings = async () => {
|
|
const settings = await fetchCuttingSettings();
|
|
if (!isMounted) return;
|
|
|
|
if (hasCuttingSettings(settings)) {
|
|
setCuttingSettings(settings);
|
|
localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
|
|
setHasUnsavedSettings(false);
|
|
} else {
|
|
const localSettings = loadCuttingSettings();
|
|
setCuttingSettings(localSettings);
|
|
setHasUnsavedSettings(hasCuttingSettings(localSettings));
|
|
}
|
|
setSaveStatus('idle');
|
|
};
|
|
|
|
void loadSettings();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
const loadProducts = async () => {
|
|
setIsLoading(true);
|
|
const [productData, productionOrderData, compositionData, stockData] = await Promise.all([
|
|
fetchProductAnalytics(dateRange),
|
|
fetchProductionOrders(allProductionOrdersRange),
|
|
fetchProductCompositions(),
|
|
fetchStock()
|
|
]);
|
|
if (isMounted) {
|
|
setProducts(productData);
|
|
setProductionOrders(productionOrderData.orders);
|
|
setCompositions(compositionData);
|
|
setMaterialStock(stockData);
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
void loadProducts();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, [dateRange]);
|
|
|
|
const openProductionByProductId = useMemo(
|
|
() => buildOpenProductionByProductId(products, productionOrders),
|
|
[products, productionOrders]
|
|
);
|
|
|
|
const cutPlan = useMemo(
|
|
() => buildCutPlan(products, dateRange, targetCoverageDays, openProductionByProductId, cuttingSettings),
|
|
[cuttingSettings, dateRange, openProductionByProductId, products, targetCoverageDays]
|
|
);
|
|
|
|
const materialReadinessByProductId = useMemo(() => {
|
|
const compositionsById = new Map<string, ProductComposition>();
|
|
compositions.forEach(composition => {
|
|
[composition.finishedTinyProductId, composition.finishedProductSku]
|
|
.map(normalizeMaterialKey)
|
|
.filter(Boolean)
|
|
.forEach(key => compositionsById.set(key, composition));
|
|
});
|
|
const stockIndexByKey = new Map<string, number>();
|
|
materialStock.forEach((stock, index) => {
|
|
[stock.produto_id, stock.nome].map(normalizeMaterialKey).filter(Boolean).forEach(key => stockIndexByKey.set(key, index));
|
|
});
|
|
const remainingStock = materialStock.map(stock => getPlanningStock(stock.saldo));
|
|
const readinessByProductId = new Map<string, MaterialReadiness>();
|
|
// Shared stock is allocated to the largest current requirement first. This
|
|
// prevents every SKU from claiming the same material balance independently.
|
|
[...cutPlan.rows].sort((a, b) => b.suggestedCutQuantity - a.suggestedCutQuantity || a.name.localeCompare(b.name, 'pt-BR')).forEach(row => {
|
|
const composition = compositionsById.get(normalizeMaterialKey(row.id));
|
|
if (!composition?.components.length) {
|
|
// Products without an imported composition remain eligible for cutting.
|
|
// They are excluded from material-demand calculations instead of
|
|
// blocking the rest of the production queue.
|
|
readinessByProductId.set(row.id, { status: 'ready', blockers: [] });
|
|
return;
|
|
}
|
|
const componentPlans = composition.components
|
|
.filter(component => !isServiceComponent(component.componentName))
|
|
.map(component => {
|
|
const stockKeys = [component.componentTinyId, component.componentSku, component.productId || '', component.componentName].map(normalizeMaterialKey).filter(Boolean);
|
|
const stockIndex = stockKeys.map(key => stockIndexByKey.get(key)).find(index => index !== undefined);
|
|
const available = stockIndex === undefined ? null : remainingStock[stockIndex];
|
|
const required = row.suggestedCutQuantity * component.quantityPerUnit;
|
|
return { component, stockIndex, available, required };
|
|
});
|
|
if (!componentPlans.length) {
|
|
readinessByProductId.set(row.id, { status: 'ready', blockers: [] });
|
|
return;
|
|
}
|
|
const blockers = componentPlans.flatMap(({ component, available, required }) => {
|
|
if (!Number.isFinite(component.quantityPerUnit) || component.quantityPerUnit <= 0) return [`${component.componentName} (quantidade inválida)`];
|
|
return available === null || available < required
|
|
? [`${component.componentName}${available === null ? ' (sem estoque vinculado)' : ` (${formatNumber(available)} / ${formatNumber(required)} ${component.unit || ''})`}`]
|
|
: [];
|
|
});
|
|
if (blockers.length) {
|
|
readinessByProductId.set(row.id, { status: 'blocked', blockers });
|
|
return;
|
|
}
|
|
componentPlans.forEach(({ stockIndex, required }) => {
|
|
if (stockIndex !== undefined) remainingStock[stockIndex] -= required;
|
|
});
|
|
readinessByProductId.set(row.id, { status: 'ready', blockers: [] });
|
|
});
|
|
return readinessByProductId;
|
|
}, [compositions, cutPlan.rows, materialStock]);
|
|
|
|
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();
|
|
const searchedRows = normalizedSearch
|
|
? cutPlan.rows.filter(row => (
|
|
row.name.toLowerCase().includes(normalizedSearch) ||
|
|
row.id.toLowerCase().includes(normalizedSearch) ||
|
|
row.baseName.toLowerCase().includes(normalizedSearch) ||
|
|
row.color.toLowerCase().includes(normalizedSearch)
|
|
))
|
|
: cutPlan.rows;
|
|
|
|
const familyRows = familyFilter === 'all'
|
|
? searchedRows
|
|
: searchedRows.filter(row => row.family.key === familyFilter);
|
|
|
|
const statusRows = familyRows.filter(row => {
|
|
if (cutFilter === 'all') return true;
|
|
if (cutFilter === 'need') return row.suggestedCutQuantity > 0;
|
|
if (cutFilter === 'issues') return row.issues.length > 0;
|
|
return row.suggestedCutQuantity === 0;
|
|
});
|
|
|
|
const executionRows = statusRows.filter(row => {
|
|
if (executionFilter === 'all') return true;
|
|
const status = materialReadinessByProductId.get(row.id)?.status;
|
|
if (executionFilter === 'ready') return row.suggestedCutQuantity > 0 && status === 'ready';
|
|
if (executionFilter === 'blocked') return row.suggestedCutQuantity > 0 && (status === 'blocked' || status === 'missing');
|
|
return row.suggestedCutQuantity > 0 && status === 'material_ready';
|
|
});
|
|
|
|
return [...executionRows].sort((a, b) => {
|
|
switch (sortBy) {
|
|
case 'need_asc': return a.suggestedCutQuantity - b.suggestedCutQuantity;
|
|
case 'demand_desc': return b.projectedDemand - a.projectedDemand;
|
|
case 'stock_asc': return a.stock - b.stock;
|
|
case 'sold_desc': return b.quantitySold - a.quantitySold;
|
|
case 'name_asc': return a.name.localeCompare(b.name, 'pt-BR');
|
|
case 'need_desc':
|
|
default:
|
|
return b.suggestedCutQuantity - a.suggestedCutQuantity;
|
|
}
|
|
});
|
|
}, [cutFilter, cutPlan.rows, executionFilter, familyFilter, materialReadinessByProductId, searchTerm, sortBy]);
|
|
|
|
const rowsAvailableForOrder = useMemo(() => (
|
|
filteredRows.filter(row => row.suggestedCutQuantity > 0 && materialReadinessByProductId.get(row.id)?.status === 'ready')
|
|
), [filteredRows, materialReadinessByProductId]);
|
|
|
|
const cutExecutionSummary = useMemo(() => {
|
|
const rowsWithNeed = cutPlan.needRows.filter(row => row.suggestedCutQuantity > 0);
|
|
const readyRows = rowsWithNeed.filter(row => materialReadinessByProductId.get(row.id)?.status === 'ready');
|
|
const blockedByMaterial = rowsWithNeed.filter(row => {
|
|
const status = materialReadinessByProductId.get(row.id)?.status;
|
|
return status === 'blocked' || status === 'missing';
|
|
});
|
|
const blockedByData = rowsWithNeed.filter(row => materialReadinessByProductId.get(row.id)?.status === 'material_ready');
|
|
return {
|
|
rawUnits: rowsWithNeed.reduce((total, row) => total + row.suggestedCutQuantity, 0),
|
|
readyUnits: readyRows.reduce((total, row) => total + row.suggestedCutQuantity, 0),
|
|
readyRows: readyRows.length,
|
|
blockedRows: blockedByMaterial.length + blockedByData.length,
|
|
blockedByMaterial: blockedByMaterial.length,
|
|
blockedByData: blockedByData.length,
|
|
};
|
|
}, [cutPlan.needRows, materialReadinessByProductId]);
|
|
|
|
const orderPreviewTotalUnits = useMemo(() => (
|
|
rowsAvailableForOrder.reduce((total, row) => total + row.suggestedCutQuantity, 0)
|
|
), [rowsAvailableForOrder]);
|
|
|
|
const previewRowsWithIssues = useMemo(() => (
|
|
rowsAvailableForOrder.filter(row => row.issues.length).length
|
|
), [rowsAvailableForOrder]);
|
|
const previewTotalPages = Math.ceil(rowsAvailableForOrder.length / previewItemsPerPage);
|
|
const safePreviewPage = Math.min(previewPage, previewTotalPages || 1);
|
|
const previewStartIndex = (safePreviewPage - 1) * previewItemsPerPage;
|
|
const paginatedPreviewRows = rowsAvailableForOrder.slice(previewStartIndex, previewStartIndex + previewItemsPerPage);
|
|
|
|
const totalPages = Math.ceil(filteredRows.length / itemsPerPage);
|
|
const safeCurrentPage = Math.min(currentPage, totalPages || 1);
|
|
const startIndex = (safeCurrentPage - 1) * itemsPerPage;
|
|
const paginatedRows = filteredRows.slice(startIndex, startIndex + itemsPerPage);
|
|
const isRefreshing = isLoading && products.length > 0;
|
|
const correctionRows = useMemo(() => {
|
|
const rows = cutPlan.rows.filter(row => (
|
|
row.issues.some(issue => issue !== 'missing_yield_rule') &&
|
|
(correctionIssueFilter === 'all' || row.issues.includes(correctionIssueFilter))
|
|
));
|
|
|
|
const sortedRows = [...rows].sort((a, b) => {
|
|
if (b.suggestedCutQuantity !== a.suggestedCutQuantity) {
|
|
return b.suggestedCutQuantity - a.suggestedCutQuantity;
|
|
}
|
|
return a.name.localeCompare(b.name, 'pt-BR');
|
|
});
|
|
|
|
if (!targetCorrectionSku) return sortedRows;
|
|
|
|
const targetRow = cutPlan.rows.find(row => row.id.toLowerCase() === targetCorrectionSku.toLowerCase());
|
|
if (!targetRow) return sortedRows;
|
|
|
|
return [targetRow, ...sortedRows.filter(row => row.id !== targetRow.id)];
|
|
}, [correctionIssueFilter, cutPlan.rows, targetCorrectionSku]);
|
|
const correctionItemsPerPage = 12;
|
|
const correctionTotalPages = Math.ceil(correctionRows.length / correctionItemsPerPage);
|
|
const safeCorrectionPage = Math.min(correctionPage, correctionTotalPages || 1);
|
|
const correctionStartIndex = (safeCorrectionPage - 1) * correctionItemsPerPage;
|
|
const paginatedCorrectionRows = correctionRows.slice(correctionStartIndex, correctionStartIndex + correctionItemsPerPage);
|
|
const configuredYieldCount = CUT_FAMILY_RULES.filter(rule => cuttingSettings.familyYields[rule.key]).length;
|
|
const productOverrideCount = Object.keys(cuttingSettings.productOverrides).length;
|
|
|
|
useEffect(() => {
|
|
if (cutConfigSection !== 'corrections' || !targetCorrectionSku) return;
|
|
|
|
const correctionIndex = correctionRows.findIndex(row => row.id.toLowerCase() === targetCorrectionSku.toLowerCase());
|
|
queueMicrotask(() => {
|
|
setIsSettingsOpen(true);
|
|
setSettingsSection('corrections');
|
|
setCorrectionIssueFilter('all');
|
|
if (correctionIndex >= 0) {
|
|
setCorrectionPage(Math.floor(correctionIndex / correctionItemsPerPage) + 1);
|
|
}
|
|
});
|
|
}, [correctionItemsPerPage, correctionRows, cutConfigSection, targetCorrectionSku]);
|
|
|
|
useEffect(() => {
|
|
if (!isSettingsOpen && !isOrderPreviewOpen && !editingCutRow) return undefined;
|
|
|
|
const closeOnEscape = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
if (isOrderPreviewOpen) {
|
|
setIsOrderPreviewOpen(false);
|
|
} else if (editingCutRow) {
|
|
setEditingCutRow(null);
|
|
} else {
|
|
setIsSettingsOpen(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
const previousOverflow = document.body.style.overflow;
|
|
document.body.style.overflow = 'hidden';
|
|
document.addEventListener('keydown', closeOnEscape);
|
|
return () => {
|
|
document.body.style.overflow = previousOverflow;
|
|
document.removeEventListener('keydown', closeOnEscape);
|
|
};
|
|
}, [editingCutRow, isOrderPreviewOpen, isSettingsOpen]);
|
|
|
|
const updateFamilyYield = (familyKey: CutFamilyKey, value: string) => {
|
|
const parsedValue = Number(value);
|
|
setCuttingSettings(current => {
|
|
const familyYields = { ...current.familyYields };
|
|
if (Number.isFinite(parsedValue) && parsedValue > 0) {
|
|
familyYields[familyKey] = parsedValue;
|
|
} else {
|
|
delete familyYields[familyKey];
|
|
}
|
|
return { ...current, familyYields };
|
|
});
|
|
setHasUnsavedSettings(true);
|
|
setSaveStatus('idle');
|
|
};
|
|
|
|
const updateProductOverride = (productId: string, patch: CutProductOverride) => {
|
|
setCuttingSettings(current => {
|
|
const currentOverride = current.productOverrides[productId] || {};
|
|
const nextOverride = { ...currentOverride, ...patch };
|
|
const normalizedOverride: CutProductOverride = {
|
|
familyKey: nextOverride.familyKey || '',
|
|
color: nextOverride.color || '',
|
|
size: nextOverride.size || ''
|
|
};
|
|
const productOverrides = { ...current.productOverrides };
|
|
if (!normalizedOverride.familyKey && !normalizedOverride.color && !normalizedOverride.size) {
|
|
delete productOverrides[productId];
|
|
} else {
|
|
productOverrides[productId] = normalizedOverride;
|
|
}
|
|
return { ...current, productOverrides };
|
|
});
|
|
setHasUnsavedSettings(true);
|
|
setSaveStatus('idle');
|
|
};
|
|
|
|
const clearProductOverride = (productId: string) => {
|
|
setCuttingSettings(current => {
|
|
const productOverrides = { ...current.productOverrides };
|
|
delete productOverrides[productId];
|
|
return { ...current, productOverrides };
|
|
});
|
|
setHasUnsavedSettings(true);
|
|
setSaveStatus('idle');
|
|
};
|
|
|
|
const persistSettings = async (settings = cuttingSettings) => {
|
|
setSaveStatus('saving');
|
|
try {
|
|
const savedSettings = await saveCuttingSettings(settings);
|
|
setCuttingSettings(savedSettings);
|
|
localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(savedSettings));
|
|
setHasUnsavedSettings(false);
|
|
setSaveStatus('saved');
|
|
} catch (error) {
|
|
console.error('Save cutting settings failed', error);
|
|
setSaveStatus('error');
|
|
}
|
|
};
|
|
|
|
const clearSettings = () => {
|
|
const emptySettings = { familyYields: {}, productOverrides: {} };
|
|
setCuttingSettings(emptySettings);
|
|
setHasUnsavedSettings(true);
|
|
setSaveStatus('idle');
|
|
};
|
|
|
|
const openSettingsSection = (section: SettingsSection) => {
|
|
setSettingsSection(section);
|
|
setIsSettingsOpen(true);
|
|
};
|
|
|
|
const openQuickCutEdit = (row: CutPlanSkuRow) => {
|
|
const override = cuttingSettings.productOverrides[row.id] || {};
|
|
setEditingCutRow(row);
|
|
setQuickCutEdit({
|
|
familyKey: override.familyKey || '',
|
|
color: override.color || '',
|
|
size: override.size || ''
|
|
});
|
|
};
|
|
|
|
const saveQuickCutEdit = async () => {
|
|
if (!editingCutRow) return;
|
|
const normalizedOverride: CutProductOverride = {
|
|
familyKey: quickCutEdit.familyKey || '',
|
|
color: quickCutEdit.color || '',
|
|
size: quickCutEdit.size || ''
|
|
};
|
|
const productOverrides = { ...cuttingSettings.productOverrides };
|
|
if (!normalizedOverride.familyKey && !normalizedOverride.color && !normalizedOverride.size) {
|
|
delete productOverrides[editingCutRow.id];
|
|
} else {
|
|
productOverrides[editingCutRow.id] = normalizedOverride;
|
|
}
|
|
const nextSettings = { ...cuttingSettings, productOverrides };
|
|
setIsQuickCutEditSaving(true);
|
|
try {
|
|
const savedSettings = await saveCuttingSettings(nextSettings);
|
|
setCuttingSettings(savedSettings);
|
|
localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(savedSettings));
|
|
setHasUnsavedSettings(false);
|
|
setSaveStatus('saved');
|
|
setEditingCutRow(null);
|
|
} catch (error) {
|
|
console.error('Save quick cut edit failed', error);
|
|
setSaveStatus('error');
|
|
} finally {
|
|
setIsQuickCutEditSaving(false);
|
|
}
|
|
};
|
|
|
|
const openBulkCorrectionForRow = (row: CutPlanSkuRow) => {
|
|
const correctionIndex = correctionRows.findIndex(item => item.id === row.id);
|
|
setEditingCutRow(null);
|
|
setSettingsSection('corrections');
|
|
setCorrectionIssueFilter('all');
|
|
if (correctionIndex >= 0) setCorrectionPage(Math.floor(correctionIndex / correctionItemsPerPage) + 1);
|
|
setIsSettingsOpen(true);
|
|
};
|
|
|
|
const exportRows = () => {
|
|
exportToCSV(filteredRows.map(row => ({
|
|
'ID Produto': row.id,
|
|
'Descrição': row.name,
|
|
'Família': row.family.label,
|
|
'Material': row.family.materialLabel,
|
|
'Cor': row.color,
|
|
'Tamanho': row.size,
|
|
'Vendido no período': row.quantitySold,
|
|
'Média diária': row.dailySales.toFixed(2).replace('.', ','),
|
|
'Demanda projetada': row.projectedDemand.toFixed(2).replace('.', ','),
|
|
'Estoque': row.stock,
|
|
'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('.', ','),
|
|
'Pronto para cortar': materialReadinessByProductId.get(row.id)?.status === 'ready' ? 'Sim' : materialReadinessByProductId.get(row.id)?.status === 'blocked' ? 'Não - falta material' : 'Sem composição',
|
|
'Materiais bloqueando': materialReadinessByProductId.get(row.id)?.blockers.join(' | ') || '',
|
|
'Dados pendentes': row.issues.map(issue => issueLabels[issue]).join(' | ')
|
|
})), `plano_corte_${new Date().toISOString().split('T')[0]}.csv`);
|
|
};
|
|
|
|
const openProductionOrderPreview = () => {
|
|
if (!rowsAvailableForOrder.length) {
|
|
setGenerationMessage('Não há SKU com necessidade e materiais disponíveis no filtro atual.');
|
|
return;
|
|
}
|
|
|
|
setGenerationMessage('');
|
|
setPreviewPage(1);
|
|
setIsOrderPreviewOpen(true);
|
|
};
|
|
|
|
const generateProductionOrders = async () => {
|
|
if (!rowsAvailableForOrder.length) {
|
|
setGenerationMessage('Não há SKU com necessidade e materiais disponíveis no filtro atual.');
|
|
return;
|
|
}
|
|
|
|
setIsGeneratingOrders(true);
|
|
setGenerationMessage('');
|
|
|
|
const issueDate = formatDateKey(new Date());
|
|
const orderReference = `Plano de corte ${formatDateKey(dateRange.start)} a ${formatDateKey(dateRange.end)} · ${targetCoverageDays} dias`;
|
|
|
|
try {
|
|
const result = await createProductionOrders(rowsAvailableForOrder.map(row => ({
|
|
status: 'open',
|
|
orderReference,
|
|
issueDate,
|
|
productSku: row.id,
|
|
productDescription: row.name,
|
|
quantity: row.suggestedCutQuantity,
|
|
unit: 'UN',
|
|
integrationStatus: 'Local',
|
|
markers: [
|
|
{ label: row.family.materialLabel, color: '#38bdf8' },
|
|
...(row.color ? [{ label: row.color, color: '#52DFA0' }] : []),
|
|
{ label: 'Material confirmado', color: '#52DFA0' },
|
|
...(row.issues.length ? [{ label: 'Dados pendentes', color: '#f59e0b' }] : [])
|
|
],
|
|
metadata: {
|
|
source: 'cut_plan',
|
|
familyKey: row.family.key,
|
|
familyLabel: row.family.label,
|
|
materialLabel: row.family.materialLabel,
|
|
color: row.color,
|
|
size: row.size,
|
|
targetCoverageDays,
|
|
projectedDemand: row.projectedDemand,
|
|
stock: row.stock,
|
|
openProductionQuantity: row.openProductionQuantity,
|
|
availableQuantity: row.availableQuantity,
|
|
issues: row.issues
|
|
}
|
|
})));
|
|
|
|
const refreshedOrders = await fetchProductionOrders(allProductionOrdersRange, undefined, { force: true });
|
|
setProductionOrders(refreshedOrders.orders);
|
|
setGenerationMessage(`${result.created.length} OPs criadas${result.skipped.length ? ` · ${result.skipped.length} já existiam abertas` : ''}.`);
|
|
setIsOrderPreviewOpen(false);
|
|
} catch (error) {
|
|
setGenerationMessage(error instanceof Error ? error.message : 'Não foi possível gerar as ordens de produção.');
|
|
} finally {
|
|
setIsGeneratingOrders(false);
|
|
}
|
|
};
|
|
|
|
const renderIssueBadge = (row: CutPlanSkuRow) => {
|
|
if (!row.issues.length) {
|
|
return <span className="text-xs font-bold text-emerald-300">OK</span>;
|
|
}
|
|
|
|
const issueSummary = row.issues.map(issue => issueLabels[issue]).join(', ');
|
|
|
|
return (
|
|
<span
|
|
className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300"
|
|
title={issueSummary}
|
|
>
|
|
<AlertTriangle className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="truncate">
|
|
{row.issues.length === 1 ? issueLabels[row.issues[0]] : `${row.issues.length} dados`}
|
|
</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const renderCutStatus = (row: CutPlanSkuRow) => {
|
|
const readiness = materialReadinessByProductId.get(row.id);
|
|
if (readiness?.status === 'ready') {
|
|
return <span className="inline-flex h-2.5 w-2.5 rounded-full bg-emerald-400 shadow-[0_0_0_4px_rgba(52,211,153,0.10)]" title="Pronto para cortar" aria-label="Pronto para cortar" />;
|
|
}
|
|
if (readiness?.status === 'material_ready') {
|
|
return <span className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300" title={row.issues.map(issue => issueLabels[issue]).join(', ')}><AlertTriangle className="h-3.5 w-3.5 shrink-0" /><span className="truncate">Dados pendentes</span></span>;
|
|
}
|
|
if (readiness?.status === 'missing') {
|
|
return <span className="inline-flex rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300">Sem composição</span>;
|
|
}
|
|
return <span className="inline-flex max-w-full rounded-full border border-red-400/30 bg-red-400/10 px-2.5 py-1 text-xs font-bold text-red-300" title={readiness?.blockers.join(' · ')}><span className="truncate">Falta: {readiness?.blockers[0] || 'material'}</span></span>;
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 gap-4 2xl:grid-cols-[minmax(520px,1fr)_auto] 2xl:items-start">
|
|
<div>
|
|
<Link to="/supplies" className="mb-3 inline-flex items-center gap-2 text-sm font-bold text-zinc-500 transition-colors hover:text-zinc-900 dark:text-dark-muted dark:hover:text-dark-text">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Suprimentos
|
|
</Link>
|
|
<h1 className="mb-2 text-2xl font-bold text-zinc-900 dark:text-dark-text">Plano de Corte</h1>
|
|
<p className="font-medium text-zinc-500 dark:text-dark-muted">
|
|
Necessidade por família, cor e tamanho calculada com vendas, estoque e cobertura alvo.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
|
|
<DateRangePicker
|
|
dateRange={dateRange}
|
|
onChange={(range) => {
|
|
setDateRange(range);
|
|
setCurrentPage(1);
|
|
setCorrectionPage(1);
|
|
}}
|
|
/>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={openProductionOrderPreview}
|
|
disabled={isGeneratingOrders || !rowsAvailableForOrder.length}
|
|
className="flex items-center justify-center gap-2 rounded-xl border border-brand-primary/30 bg-brand-primary/15 px-4 py-2.5 text-sm font-medium text-brand-primary shadow-sm transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
|
title="Revisar ordens locais antes de gerar"
|
|
>
|
|
<ClipboardList size={16} />
|
|
<span className="hidden sm:inline">{isGeneratingOrders ? 'Gerando' : 'Prévia OPs'}</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={exportRows}
|
|
className="flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 py-2.5 text-sm font-medium text-dark-text shadow-sm transition-colors hover:border-brand-primary cursor-pointer"
|
|
title="Exportar para CSV"
|
|
>
|
|
<Download size={16} className="text-brand-primary" />
|
|
<span className="hidden sm:inline">Exportar</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => openSettingsSection('rules')}
|
|
className="flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-card px-4 py-2.5 text-sm font-medium text-dark-text shadow-sm transition-colors hover:border-brand-primary cursor-pointer"
|
|
title="Configurar rendimentos por família"
|
|
>
|
|
<Settings2 size={16} className="text-brand-primary" />
|
|
<span className="hidden sm:inline">Regras</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{generationMessage && (
|
|
<div className="rounded-xl border border-dark-border bg-dark-card px-4 py-3 text-sm font-bold text-dark-muted">
|
|
{generationMessage}
|
|
</div>
|
|
)}
|
|
|
|
<RefreshStatus isRefreshing={isRefreshing} />
|
|
|
|
{isOrderPreviewOpen && (
|
|
<div
|
|
className="fixed inset-0 z-50 flex h-dvh items-center justify-center overflow-hidden bg-zinc-950/80 p-4 backdrop-blur-md dark:bg-black/75"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Prévia de ordens de produção"
|
|
onClick={() => {
|
|
if (!isGeneratingOrders) setIsOrderPreviewOpen(false);
|
|
}}
|
|
>
|
|
<div
|
|
className="flex max-h-[90dvh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-2xl"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="flex flex-col gap-4 border-b border-dark-border p-5 md:flex-row md:items-start md:justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-dark-text">Prévia das OPs</h2>
|
|
<p className="mt-1 text-sm font-semibold text-dark-muted">
|
|
Serão criadas ordens locais para as necessidades do filtro atual.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsOrderPreviewOpen(false)}
|
|
disabled={isGeneratingOrders}
|
|
className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
|
title="Fechar"
|
|
aria-label="Fechar prévia"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 divide-x divide-y divide-dark-border border-b border-dark-border md:grid-cols-4 md:divide-y-0">
|
|
{[
|
|
['OPs a criar', formatNumber(rowsAvailableForOrder.length), 'text-dark-text'],
|
|
['Unidades para cortar', `${formatNumber(orderPreviewTotalUnits)} un.`, 'text-brand-primary'],
|
|
['Cobertura alvo', `${formatNumber(targetCoverageDays)} dias`, 'text-dark-text'],
|
|
['Revisar dados', formatNumber(previewRowsWithIssues), previewRowsWithIssues ? 'text-amber-300' : 'text-dark-text']
|
|
].map(([label, value, tone]) => <div key={label} className="p-4"><p className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">{label}</p><p className={`mt-1 text-xl font-bold ${tone}`}>{value}</p></div>)}
|
|
</div>
|
|
|
|
<div className="overflow-auto">
|
|
<table className="w-full min-w-[900px] table-fixed text-left text-sm">
|
|
<colgroup>
|
|
<col className="w-[44%]" />
|
|
<col className="w-[16%]" />
|
|
<col className="w-[14%]" />
|
|
<col className="w-[14%]" />
|
|
<col className="w-[12%]" />
|
|
</colgroup>
|
|
<thead className="border-b border-dark-border bg-dark-header text-dark-muted">
|
|
<tr>
|
|
<th className="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">Produto</th>
|
|
<th className="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">Cortar agora</th>
|
|
<th className="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">Demanda</th>
|
|
<th className="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">Disponível</th>
|
|
<th className="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">Revisar</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-dark-border">
|
|
{paginatedPreviewRows.map(row => (
|
|
<tr key={row.id} className="hover:bg-dark-input/50">
|
|
<td className="max-w-0 px-4 py-3">
|
|
<div className="truncate font-bold text-dark-text" title={row.name}>{row.name}</div>
|
|
<div className="mt-1 flex flex-wrap items-center gap-1.5">
|
|
<span className="font-mono text-[10px] font-medium text-dark-muted">#{row.id}</span>
|
|
<span className={`inline-flex whitespace-nowrap rounded-full border px-2 py-0.5 text-[10px] font-bold ${familyStyles[row.family.key]}`}>{row.family.materialLabel}</span>
|
|
<ProductColorBadge label={row.color} className="max-w-[110px] px-2" />
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-bold text-emerald-300">
|
|
<Ruler className="h-3 w-3" />
|
|
{row.size || '-'}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 font-bold whitespace-nowrap text-brand-primary">{formatNumber(row.suggestedCutQuantity)} un.</td>
|
|
<td className="px-4 py-3 font-bold whitespace-nowrap text-dark-text">{formatNumber(row.projectedDemand, 1)} un.</td>
|
|
<td className="px-4 py-3 whitespace-nowrap"><div className="font-bold text-dark-text">{formatNumber(row.availableQuantity)} un.</div>{row.openProductionQuantity ? <div className="mt-1 text-[10px] font-semibold text-dark-muted">{formatNumber(row.openProductionQuantity)} em OP</div> : null}</td>
|
|
<td className="px-4 py-3">{renderIssueBadge(row)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<PaginationControls
|
|
totalItems={rowsAvailableForOrder.length}
|
|
currentPage={safePreviewPage}
|
|
totalPages={previewTotalPages}
|
|
pageSize={previewItemsPerPage}
|
|
pageSizeOptions={[10, 20, 50]}
|
|
itemLabel="OPs"
|
|
pageSizeLabel="por página"
|
|
startIndex={previewStartIndex}
|
|
endIndex={Math.min(previewStartIndex + previewItemsPerPage, rowsAvailableForOrder.length)}
|
|
onPageChange={setPreviewPage}
|
|
onPageSizeChange={(pageSize) => { setPreviewItemsPerPage(pageSize); setPreviewPage(1); }}
|
|
className="border-t border-dark-border px-4 py-3"
|
|
/>
|
|
|
|
<div className="flex flex-col gap-3 border-t border-dark-border p-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<p className="text-xs font-semibold text-dark-muted">
|
|
OPs abertas já existentes para o mesmo plano e SKU serão ignoradas.
|
|
</p>
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsOrderPreviewOpen(false)}
|
|
disabled={isGeneratingOrders}
|
|
className="inline-flex items-center justify-center rounded-xl border border-dark-border bg-dark-input px-4 py-2 text-sm font-bold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => void generateProductionOrders()}
|
|
disabled={isGeneratingOrders}
|
|
className="inline-flex items-center justify-center gap-2 rounded-xl border border-brand-primary/30 bg-brand-primary/15 px-4 py-2 text-sm font-bold text-brand-primary transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
|
>
|
|
<ClipboardList className="h-4 w-4" />
|
|
{isGeneratingOrders ? 'Gerando OPs' : 'Confirmar geração'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{editingCutRow && (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm" role="dialog" aria-modal="true" aria-label="Editar dados de corte" onClick={() => !isQuickCutEditSaving && setEditingCutRow(null)}>
|
|
<div className="w-full max-w-md rounded-2xl border border-dark-border bg-dark-card shadow-2xl" onClick={(event) => event.stopPropagation()}>
|
|
<div className="flex items-start justify-between gap-4 border-b border-dark-border p-5">
|
|
<div className="min-w-0">
|
|
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Editar dados de corte</p>
|
|
<h2 className="mt-1 truncate text-base font-bold text-dark-text" title={editingCutRow.name}>{editingCutRow.name}</h2>
|
|
<p className="mt-1 font-mono text-xs font-semibold text-brand-primary">#{editingCutRow.id}</p>
|
|
</div>
|
|
<button type="button" onClick={() => setEditingCutRow(null)} disabled={isQuickCutEditSaving} title="Fechar" aria-label="Fechar" className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"><X className="h-4 w-4" /></button>
|
|
</div>
|
|
<div className="space-y-4 p-5">
|
|
<div className="flex flex-wrap gap-2 text-xs font-bold text-dark-muted">
|
|
<span className={`rounded-full border px-2.5 py-1 ${familyStyles[editingCutRow.family.key]}`}>{editingCutRow.family.materialLabel}</span>
|
|
<ProductColorBadge label={editingCutRow.color} className="px-2.5 py-1 text-xs" />
|
|
<span className="rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2.5 py-1 text-emerald-300">{editingCutRow.size || 'Sem tamanho'}</span>
|
|
</div>
|
|
<p className="text-xs font-semibold leading-relaxed text-dark-muted">Altere apenas quando a leitura automática do SKU estiver incorreta. Salvar atualiza este SKU imediatamente.</p>
|
|
<label className="block text-xs font-bold text-dark-muted">Família<select value={quickCutEdit.familyKey || ''} onChange={(event) => setQuickCutEdit(current => ({ ...current, familyKey: event.target.value as CutFamilyKey | '' }))} className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary cursor-pointer"><option value="">Automática ({editingCutRow.family.materialLabel})</option>{familyOptions.filter(option => option.value !== 'all').map(option => <option key={option.value} value={option.value}>{option.label}</option>)}</select></label>
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<label className="text-xs font-bold text-dark-muted">Cor<input value={quickCutEdit.color || ''} onChange={(event) => setQuickCutEdit(current => ({ ...current, color: event.target.value }))} placeholder={editingCutRow.color || 'Informar cor'} className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary" /></label>
|
|
<label className="text-xs font-bold text-dark-muted">Tamanho<input value={quickCutEdit.size || ''} onChange={(event) => setQuickCutEdit(current => ({ ...current, size: event.target.value }))} placeholder={editingCutRow.size || 'Informar tamanho'} className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary" /></label>
|
|
</div>
|
|
<button type="button" onClick={() => setQuickCutEdit({})} className="inline-flex items-center gap-2 text-xs font-bold text-dark-muted transition-colors hover:text-dark-text cursor-pointer"><RotateCcw className="h-3.5 w-3.5" /> Usar leitura automática</button>
|
|
</div>
|
|
<div className="flex flex-col gap-2 border-t border-dark-border p-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<button type="button" onClick={() => openBulkCorrectionForRow(editingCutRow)} disabled={isQuickCutEditSaving} className="text-left text-xs font-bold text-brand-primary transition-colors hover:text-brand-primary/80 disabled:opacity-50 cursor-pointer">Abrir correções em lote</button>
|
|
<div className="flex gap-2 sm:justify-end"><button type="button" onClick={() => setEditingCutRow(null)} disabled={isQuickCutEditSaving} className="h-10 rounded-xl border border-dark-border bg-dark-input px-3 text-xs font-bold text-dark-text transition-colors hover:border-brand-primary disabled:opacity-50 cursor-pointer">Cancelar</button><button type="button" onClick={() => void saveQuickCutEdit()} disabled={isQuickCutEditSaving} className="inline-flex h-10 items-center gap-2 rounded-xl bg-brand-primary px-3 text-xs font-bold text-brand-contrast transition-colors hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"><SaveIcon className="h-4 w-4" />{isQuickCutEditSaving ? 'Salvando' : 'Salvar'}</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isSettingsOpen && (
|
|
<div
|
|
className="fixed inset-0 z-50 flex h-dvh justify-end overflow-hidden bg-zinc-950/80 backdrop-blur-md dark:bg-black/75"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Regras de corte"
|
|
onClick={() => setIsSettingsOpen(false)}
|
|
>
|
|
<div
|
|
className="h-dvh w-full max-w-6xl space-y-4 overflow-y-auto border-l border-dark-border bg-dark-card p-5 shadow-2xl"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h2 className="text-sm font-bold text-dark-text">Configuração de Corte</h2>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
|
{configuredYieldCount} rendimentos configurados · {productOverrideCount} correções de produto
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={clearSettings}
|
|
className="inline-flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-input px-3 py-2 text-xs font-bold text-dark-muted transition-colors hover:border-red-400/40 hover:text-red-300 cursor-pointer"
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
Limpar tudo
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => void persistSettings()}
|
|
disabled={saveStatus === 'saving' || !hasUnsavedSettings}
|
|
className="inline-flex items-center justify-center gap-2 rounded-xl border border-brand-primary/30 bg-brand-primary/15 px-3 py-2 text-xs font-bold text-brand-primary transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
|
>
|
|
<SaveIcon className="h-4 w-4" />
|
|
{saveStatus === 'saving' ? 'Salvando' : 'Salvar'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsSettingsOpen(false)}
|
|
className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-dark-text cursor-pointer"
|
|
title="Fechar"
|
|
aria-label="Fechar regras"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{saveStatus === 'saved' && (
|
|
<p className="text-xs font-semibold text-emerald-300">Regras salvas no banco de dados.</p>
|
|
)}
|
|
{saveStatus === 'error' && (
|
|
<p className="text-xs font-semibold text-red-300">Não foi possível salvar as regras. Tente novamente.</p>
|
|
)}
|
|
{hasUnsavedSettings && saveStatus !== 'saving' && (
|
|
<p className="text-xs font-semibold text-amber-300">Existem alterações ainda não salvas.</p>
|
|
)}
|
|
|
|
<div className="inline-flex rounded-xl border border-dark-border bg-dark-input p-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSettingsSection('rules')}
|
|
aria-pressed={settingsSection === 'rules'}
|
|
className={`rounded-lg px-3 py-2 text-xs font-bold transition-colors cursor-pointer ${settingsSection === 'rules' ? 'bg-brand-primary/15 text-brand-primary' : 'text-dark-muted hover:text-dark-text'}`}
|
|
>
|
|
Rendimentos
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSettingsSection('corrections')}
|
|
aria-pressed={settingsSection === 'corrections'}
|
|
className={`rounded-lg px-3 py-2 text-xs font-bold transition-colors cursor-pointer ${settingsSection === 'corrections' ? 'bg-brand-primary/15 text-brand-primary' : 'text-dark-muted hover:text-dark-text'}`}
|
|
>
|
|
Correções
|
|
</button>
|
|
</div>
|
|
|
|
{settingsSection === 'rules' && (
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
|
|
{CUT_FAMILY_RULES.map(rule => (
|
|
<label key={rule.key} className="rounded-xl border border-dark-border bg-dark-input p-3">
|
|
<span className="mb-2 flex items-center justify-between gap-2">
|
|
<span className="text-xs font-bold text-dark-text">{rule.materialLabel}</span>
|
|
<span className="text-[11px] font-semibold text-dark-muted">{rule.label}</span>
|
|
</span>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
step="1"
|
|
value={cuttingSettings.familyYields[rule.key] || ''}
|
|
onChange={(event) => updateFamilyYield(rule.key, event.target.value)}
|
|
placeholder="un./rolo"
|
|
className="h-10 w-full rounded-lg border border-dark-border bg-dark-card px-3 text-sm font-bold text-dark-text outline-none transition-colors focus:border-brand-primary"
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{settingsSection === 'corrections' && (
|
|
<div className="rounded-xl border border-dark-border">
|
|
<div className="flex flex-col gap-3 border-b border-dark-border bg-dark-header p-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Correções de produto</h3>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">
|
|
Use quando o nome do SKU não deixa claro família, cor ou tamanho para montar o corte.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
|
<span className="text-xs font-bold text-dark-muted">
|
|
{formatNumber(correctionRows.length)} produtos
|
|
</span>
|
|
<select
|
|
value={correctionIssueFilter}
|
|
onChange={(event) => {
|
|
setCorrectionIssueFilter(event.target.value as CorrectionIssueFilter);
|
|
setCorrectionPage(1);
|
|
}}
|
|
className="h-9 rounded-lg border border-dark-border bg-dark-input px-3 text-xs font-bold text-dark-text outline-none focus:border-brand-primary cursor-pointer"
|
|
>
|
|
{correctionFilterOptions.map(option => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{correctionRows.length ? (
|
|
<>
|
|
<div className="overflow-x-auto">
|
|
<div className="min-w-[760px]">
|
|
<div className="grid grid-cols-[120px_1.4fr_150px_150px_120px_80px] gap-3 border-b border-dark-border px-4 py-3 text-[10px] font-bold uppercase tracking-wider text-dark-muted">
|
|
<span>ID</span>
|
|
<span>Produto</span>
|
|
<span>Família</span>
|
|
<span>Cor</span>
|
|
<span>Tamanho</span>
|
|
<span className="text-right">Ações</span>
|
|
</div>
|
|
<div className="divide-y divide-dark-border">
|
|
{paginatedCorrectionRows.map(row => {
|
|
const override = cuttingSettings.productOverrides[row.id] || {};
|
|
const isTargetRow = targetCorrectionSku.toLowerCase() === row.id.toLowerCase();
|
|
return (
|
|
<div
|
|
key={row.id}
|
|
className={`grid grid-cols-[120px_1.4fr_150px_150px_120px_80px] items-center gap-3 px-4 py-3 ${isTargetRow ? 'bg-brand-primary/10 ring-1 ring-inset ring-brand-primary/35' : ''}`}
|
|
>
|
|
<span className="font-mono text-[11px] text-dark-muted">#{row.id}</span>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-xs font-bold text-dark-text" title={row.name}>{row.name}</div>
|
|
<div className="mt-1 flex flex-wrap gap-1.5">
|
|
{row.issues.filter(issue => issue !== 'missing_yield_rule').map(issue => (
|
|
<span key={issue} className="rounded-full border border-amber-400/25 bg-amber-400/10 px-2 py-0.5 text-[10px] font-bold text-amber-300">
|
|
{issueLabels[issue]}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<select
|
|
value={override.familyKey || ''}
|
|
onChange={(event) => updateProductOverride(row.id, { familyKey: event.target.value as CutFamilyKey | '' })}
|
|
className="h-9 rounded-lg border border-dark-border bg-dark-input px-2 text-xs font-bold text-dark-text outline-none focus:border-brand-primary cursor-pointer"
|
|
>
|
|
<option value="">Auto</option>
|
|
{familyOptions.filter(option => option.value !== 'all').map(option => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
<input
|
|
type="text"
|
|
value={override.color || ''}
|
|
onChange={(event) => updateProductOverride(row.id, { color: event.target.value })}
|
|
placeholder={row.color || 'Cor'}
|
|
className="h-9 rounded-lg border border-dark-border bg-dark-input px-2 text-xs font-bold text-dark-text outline-none focus:border-brand-primary"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={override.size || ''}
|
|
onChange={(event) => updateProductOverride(row.id, { size: event.target.value })}
|
|
placeholder={row.size || 'Tam.'}
|
|
className="h-9 rounded-lg border border-dark-border bg-dark-input px-2 text-xs font-bold text-dark-text outline-none focus:border-brand-primary"
|
|
/>
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => clearProductOverride(row.id)}
|
|
className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary cursor-pointer"
|
|
title="Limpar correção"
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<PaginationControls
|
|
totalItems={correctionRows.length}
|
|
currentPage={safeCorrectionPage}
|
|
totalPages={correctionTotalPages}
|
|
pageSize={correctionItemsPerPage}
|
|
pageSizeOptions={[12]}
|
|
itemLabel="produtos"
|
|
pageSizeLabel="por página"
|
|
startIndex={correctionStartIndex}
|
|
endIndex={Math.min(correctionStartIndex + correctionItemsPerPage, correctionRows.length)}
|
|
onPageChange={setCorrectionPage}
|
|
onPageSizeChange={() => setCorrectionPage(1)}
|
|
className="border-t border-dark-border px-4 py-3"
|
|
/>
|
|
</>
|
|
) : (
|
|
<div className="px-4 py-8 text-center">
|
|
<p className="text-sm font-bold text-dark-text">Nenhuma correção de produto pendente.</p>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">Os dados restantes, se existirem, são de rendimento por família.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="rounded-2xl border border-dark-border bg-dark-card p-1.5 shadow-sm">
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<button type="button" onClick={() => setActiveCuttingView('plan')} aria-pressed={activeCuttingView === 'plan'} className={`inline-flex h-10 items-center gap-2 rounded-xl px-3 text-sm font-bold transition-colors cursor-pointer ${activeCuttingView === 'plan' ? 'bg-brand-primary/15 text-brand-primary' : 'text-dark-muted hover:bg-dark-input hover:text-dark-text'}`}>
|
|
<Scissors className="h-4 w-4" /> Necessidades <span className="text-xs opacity-80">{formatNumber(cutPlan.summary.skuCount)}</span>
|
|
</button>
|
|
<button type="button" onClick={() => setActiveCuttingView('families')} aria-pressed={activeCuttingView === 'families'} className={`inline-flex h-10 items-center gap-2 rounded-xl px-3 text-sm font-bold transition-colors cursor-pointer ${activeCuttingView === 'families' ? 'bg-brand-primary/15 text-brand-primary' : 'text-dark-muted hover:bg-dark-input hover:text-dark-text'}`}>
|
|
<Layers3 className="h-4 w-4" /> Famílias <span className="text-xs opacity-80">{formatNumber(cutPlan.familySummaries.length)}</span>
|
|
</button>
|
|
<button type="button" onClick={() => setActiveCuttingView('issues')} aria-pressed={activeCuttingView === 'issues'} className={`inline-flex h-10 items-center gap-2 rounded-xl px-3 text-sm font-bold transition-colors cursor-pointer ${activeCuttingView === 'issues' ? 'bg-amber-400/10 text-amber-300' : 'text-dark-muted hover:bg-dark-input hover:text-dark-text'}`}>
|
|
<AlertTriangle className="h-4 w-4" /> Pendências <span className="text-xs opacity-80">{formatNumber(cutPlan.summary.rowsWithIssues)}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 divide-x divide-y divide-dark-border overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm lg:grid-cols-4 lg:divide-y-0">
|
|
{[
|
|
{ id: 'all', label: 'Necessidade', value: `${formatNumber(cutExecutionSummary.rawUnits)} un.`, detail: `${formatNumber(cutPlan.summary.skuCount)} SKUs`, tone: 'text-dark-text' },
|
|
{ id: 'ready', label: 'Pronto para corte', value: `${formatNumber(cutExecutionSummary.readyUnits)} un.`, detail: `${formatNumber(cutExecutionSummary.readyRows)} SKUs liberados`, tone: 'text-emerald-300' },
|
|
{ id: 'blocked', label: 'Bloqueados', value: formatNumber(cutExecutionSummary.blockedRows), detail: `${formatNumber(cutExecutionSummary.blockedByMaterial)} material · ${formatNumber(cutExecutionSummary.blockedByData)} dados`, tone: cutExecutionSummary.blockedRows ? 'text-amber-300' : 'text-dark-text' },
|
|
{ id: 'families', label: 'Famílias', value: formatNumber(cutPlan.summary.familiesWithNeed), detail: cutPlan.summary.estimatedRolls === null ? 'Rendimento a configurar' : `${formatNumber(cutPlan.summary.estimatedRolls)} rolos estimados`, tone: 'text-dark-text' }
|
|
].map(metric => (
|
|
<button
|
|
key={metric.id}
|
|
type="button"
|
|
onClick={() => {
|
|
if (metric.id === 'families') {
|
|
setActiveCuttingView('families');
|
|
return;
|
|
}
|
|
setActiveCuttingView('plan');
|
|
setExecutionFilter(metric.id as ExecutionFilter);
|
|
setCutFilter('need');
|
|
setCurrentPage(1);
|
|
}}
|
|
className={`p-4 text-left transition-colors hover:bg-dark-input/60 cursor-pointer sm:px-5 ${metric.id === 'families' ? activeCuttingView === 'families' ? 'bg-brand-primary/[0.07]' : '' : activeCuttingView === 'plan' && executionFilter === metric.id ? 'bg-brand-primary/[0.07]' : ''}`}
|
|
>
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-dark-muted">{metric.label}</p>
|
|
<p className={`mt-1 text-xl font-bold ${metric.tone}`}>{metric.value}</p>
|
|
<p className="mt-1 truncate text-xs font-semibold text-dark-muted">{metric.detail}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{cutExecutionSummary.rawUnits > 0 && cutExecutionSummary.readyUnits === 0 && (
|
|
<div className="flex flex-col gap-3 rounded-2xl border border-amber-400/30 bg-amber-400/10 p-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<p className="text-sm font-bold text-amber-300">Há demanda, mas nenhum SKU está liberado para corte.</p>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">Corrija materiais bloqueados e rendimentos antes de gerar ordens de produção.</p>
|
|
</div>
|
|
<button type="button" onClick={() => setActiveCuttingView('issues')} className="h-9 rounded-lg border border-amber-400/30 bg-dark-card px-3 text-xs font-bold text-amber-300 hover:border-amber-400 cursor-pointer">Ver pendências</button>
|
|
</div>
|
|
)}
|
|
|
|
{activeCuttingView === 'issues' && (
|
|
<div className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
|
|
<div className="mb-3 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h2 className="text-sm font-bold text-dark-text">Dados pendentes do plano</h2>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">Dados que bloqueiam o cálculo completo: família, cor, tamanho ou rendimento.</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<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>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setCorrectionIssueFilter('all');
|
|
setCorrectionPage(1);
|
|
openSettingsSection('corrections');
|
|
}}
|
|
className="inline-flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-input px-3 py-2 text-xs font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer"
|
|
>
|
|
<Settings2 className="h-4 w-4 text-brand-primary" />
|
|
Corrigir
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setCutFilter('issues');
|
|
setCurrentPage(1);
|
|
setActiveCuttingView('plan');
|
|
}}
|
|
className="inline-flex items-center justify-center gap-2 rounded-xl border border-dark-border bg-dark-input px-3 py-2 text-xs font-bold text-dark-text transition-colors hover:border-brand-primary cursor-pointer"
|
|
>
|
|
<Search className="h-4 w-4 text-brand-primary" />
|
|
Ver SKUs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{issueSummaries.length ? (
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-4">
|
|
{issueSummaries.map(summary => (
|
|
<div
|
|
key={summary.issue}
|
|
className="rounded-xl border border-dark-border bg-dark-input/60 p-3"
|
|
>
|
|
<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-1 line-clamp-2 text-[11px] font-medium leading-relaxed text-dark-muted">{issueHelp[summary.issue]}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-xl border border-dark-border bg-dark-input/60 px-4 py-8 text-center">
|
|
<p className="text-sm font-bold text-dark-text">Nenhuma pendência no plano atual.</p>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">Os SKUs com necessidade já têm os dados mínimos para o cálculo.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeCuttingView === 'families' && (
|
|
<div className="rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
|
|
<div className="mb-3 flex items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-sm font-bold text-dark-text">Corte por família</h2>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">Volume agrupado para orientar compra e corte.</p>
|
|
</div>
|
|
<Scissors className="h-5 w-5 text-dark-muted" />
|
|
</div>
|
|
{cutPlan.familySummaries.length ? (
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-5">
|
|
{cutPlan.familySummaries.map(summary => (
|
|
<div
|
|
key={summary.family.key}
|
|
className="rounded-xl border border-dark-border bg-dark-input/50 p-3"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<span className={`inline-flex rounded-full border px-2.5 py-1 text-[11px] font-bold ${familyStyles[summary.family.key]}`}>
|
|
{summary.family.materialLabel}
|
|
</span>
|
|
<h3 className="mt-2 truncate text-sm font-bold text-dark-text">{summary.family.label}</h3>
|
|
</div>
|
|
<span className="text-[11px] font-bold text-dark-muted">{formatNumber(summary.skuCount)} SKUs</span>
|
|
</div>
|
|
<p className="mt-3 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.colorCount)} cores · {summary.estimatedRolls === null ? 'sem rendimento' : `${formatNumber(summary.estimatedRolls)} rolos`}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-xl border border-dark-border bg-dark-input/60 px-4 py-8 text-center">
|
|
<p className="text-sm font-bold text-dark-text">Nenhuma família com necessidade no período.</p>
|
|
<p className="mt-1 text-xs font-semibold text-dark-muted">Ajuste o período ou a cobertura alvo para revisar outro cenário.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeCuttingView === 'plan' && (
|
|
<>
|
|
<div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[1fr_170px_170px_170px_190px]">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-400 dark:text-dark-muted" />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar por nome, ID, grupo ou cor..."
|
|
value={searchTerm}
|
|
onChange={(event) => {
|
|
setSearchTerm(event.target.value);
|
|
setCurrentPage(1);
|
|
}}
|
|
className="w-full rounded-xl border border-dark-border bg-dark-input py-2.5 pl-10 pr-4 text-dark-text transition-colors hover:border-brand-primary focus:border-brand-primary focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<select
|
|
value={targetCoverageDays}
|
|
onChange={(event) => {
|
|
setTargetCoverageDays(Number(event.target.value));
|
|
setCurrentPage(1);
|
|
setCorrectionPage(1);
|
|
}}
|
|
className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:border-brand-primary focus:outline-none cursor-pointer"
|
|
aria-label="Dias de cobertura alvo"
|
|
>
|
|
{coverageTargetOptions.map(days => <option key={days} value={days}>Cobrir {days} dias</option>)}
|
|
</select>
|
|
|
|
<select
|
|
value={familyFilter}
|
|
onChange={(event) => {
|
|
setFamilyFilter(event.target.value as CutFamilyKey | 'all');
|
|
setCurrentPage(1);
|
|
}}
|
|
className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:border-brand-primary focus:outline-none cursor-pointer"
|
|
>
|
|
{familyOptions.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
|
|
</select>
|
|
|
|
<select
|
|
value={cutFilter}
|
|
onChange={(event) => {
|
|
setCutFilter(event.target.value as CutFilter);
|
|
setCurrentPage(1);
|
|
}}
|
|
className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:border-brand-primary focus:outline-none cursor-pointer"
|
|
>
|
|
{filterOptions.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
|
|
</select>
|
|
|
|
<select
|
|
value={sortBy}
|
|
onChange={(event) => {
|
|
setSortBy(event.target.value as CutSort);
|
|
setCurrentPage(1);
|
|
}}
|
|
className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:border-brand-primary focus:outline-none cursor-pointer"
|
|
>
|
|
<option value="need_desc">Maior necessidade</option>
|
|
<option value="need_asc">Menor necessidade</option>
|
|
<option value="demand_desc">Maior demanda projetada</option>
|
|
<option value="stock_asc">Menor estoque</option>
|
|
<option value="sold_desc">Mais vendidos</option>
|
|
<option value="name_asc">Nome A-Z</option>
|
|
</select>
|
|
</div>
|
|
|
|
{isLoading && products.length === 0 ? (
|
|
<CuttingSkeleton />
|
|
) : (
|
|
<div className={`overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-dark-border dark:bg-dark-card ${isRefreshing ? 'refreshing-content' : ''}`} aria-busy={isRefreshing}>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[980px] table-fixed text-left text-sm">
|
|
<colgroup>
|
|
<col className="w-[36%]" />
|
|
<col className="w-[16%]" />
|
|
<col className="w-[14%]" />
|
|
<col className="w-[14%]" />
|
|
<col className="w-[12%]" />
|
|
<col className="w-[8%]" />
|
|
</colgroup>
|
|
<thead className="sticky top-0 z-10 border-b border-zinc-100 bg-zinc-50 text-zinc-500 dark:border-dark-border dark:bg-dark-header dark:text-dark-muted">
|
|
<tr>
|
|
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Produto</th>
|
|
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Cortar agora</th>
|
|
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Demanda</th>
|
|
<th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Disponível</th>
|
|
<th className="px-4 py-4 text-center text-[10px] font-bold uppercase tracking-wider">Status</th>
|
|
<th className="px-4 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
|
|
{paginatedRows.map(row => {
|
|
const readiness = materialReadinessByProductId.get(row.id);
|
|
const needsAttention = readiness?.status !== 'ready';
|
|
return (
|
|
<tr key={row.id} className={`transition-colors hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 ${needsAttention ? 'border-l-2 border-amber-400/70' : ''}`}>
|
|
<td className="max-w-0 px-4 py-2.5">
|
|
<Link to={`/products/${row.id}`} className="block truncate font-semibold text-zinc-900 transition-colors hover:text-brand-primary dark:text-dark-text" title={`Ver ${row.name}`}>{row.name}</Link>
|
|
<div className="mt-1 flex flex-wrap items-center gap-1.5">
|
|
<span className="font-mono text-[10px] font-medium text-zinc-400 dark:text-dark-muted">#{row.id}</span>
|
|
<span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-bold ${familyStyles[row.family.key]}`}>{row.family.materialLabel}</span>
|
|
<ProductColorBadge label={row.color} className="max-w-[92px] px-2 py-0.5 text-[10px]" />
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-bold text-emerald-300"><Ruler className="h-3 w-3" />{row.size || '-'}</span>
|
|
</div>
|
|
<div className="mt-1 text-[10px] font-medium text-zinc-400 dark:text-dark-muted">Média: {formatNumber(row.dailySales, 2)} un./dia · Cobertura: {formatDays(row.daysOfCover)}</div>
|
|
</td>
|
|
<td className="px-4 py-2.5 whitespace-nowrap">
|
|
<div className="text-lg font-bold text-brand-primary">{formatNumber(row.suggestedCutQuantity)} un.</div>
|
|
</td>
|
|
<td className="px-4 py-2.5 whitespace-nowrap font-bold text-dark-text">{formatNumber(row.projectedDemand, 1)} un.</td>
|
|
<td className="px-4 py-2.5 whitespace-nowrap"><div className="font-bold text-dark-text">{formatNumber(row.availableQuantity)} un.</div>{row.openProductionQuantity ? <div className="mt-1 text-[10px] font-semibold text-dark-muted">{formatNumber(row.openProductionQuantity)} em OP</div> : null}</td>
|
|
<td className="px-4 py-2.5 text-center align-middle">{renderCutStatus(row)}</td>
|
|
<td className="px-4 py-2.5 text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => openQuickCutEdit(row)}
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-dark-input text-dark-text transition-colors hover:bg-dark-border cursor-pointer"
|
|
title={`Editar dados de corte do SKU ${row.id}`}
|
|
aria-label={`Editar dados de corte do SKU ${row.id}`}
|
|
>
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</button>
|
|
<Link
|
|
to={`/products/${row.id}`}
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary transition-opacity hover:opacity-80"
|
|
title={`Ver SKU ${row.id}`}
|
|
aria-label={`Ver SKU ${row.id}`}
|
|
>
|
|
<Eye className="h-3.5 w-3.5" />
|
|
</Link>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{!filteredRows.length && (
|
|
<div className="px-6 py-12 text-center">
|
|
<Scissors className="mx-auto h-10 w-10 text-dark-muted" />
|
|
<p className="mt-4 text-sm font-bold text-dark-text">Nenhum item encontrado.</p>
|
|
<p className="mt-1 text-sm text-dark-muted">Ajuste a busca, família, status ou período selecionado.</p>
|
|
</div>
|
|
)}
|
|
|
|
<PaginationControls
|
|
totalItems={filteredRows.length}
|
|
currentPage={safeCurrentPage}
|
|
totalPages={totalPages}
|
|
pageSize={itemsPerPage}
|
|
pageSizeOptions={[10, 20, 50, 100]}
|
|
itemLabel="SKUs"
|
|
pageSizeLabel="itens por página"
|
|
startIndex={startIndex}
|
|
endIndex={Math.min(startIndex + itemsPerPage, filteredRows.length)}
|
|
onPageChange={setCurrentPage}
|
|
onPageSizeChange={(pageSize) => {
|
|
setItemsPerPage(pageSize);
|
|
setCurrentPage(1);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Cutting;
|