Add OP-aware cutting planning

src/pages/Cutting.tsx

@@ -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