Simplify cut planning decision queue

src/pages/Cutting.tsx

@@ -12,6 +12,7 @@ import type { CuttingSettings, DateRange, ProductAnalyticsItem, ProductCompositi
 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'>;
@@ -146,6 +147,7 @@ const Cutting = () => {
   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');
@@ -309,7 +311,15 @@ const Cutting = () => {
       return row.suggestedCutQuantity === 0;
     });
 
-    return [...statusRows].sort((a, b) => {
+    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;
@@ -321,7 +331,7 @@ const Cutting = () => {
           return b.suggestedCutQuantity - a.suggestedCutQuantity;
       }
     });
-  }, [cutFilter, cutPlan.rows, familyFilter, searchTerm, sortBy]);
+  }, [cutFilter, cutPlan.rows, executionFilter, familyFilter, materialReadinessByProductId, searchTerm, sortBy]);
 
   const rowsAvailableForOrder = useMemo(() => (
     filteredRows.filter(row => row.suggestedCutQuantity > 0 && materialReadinessByProductId.get(row.id)?.status === 'ready')
@@ -599,12 +609,18 @@ const Cutting = () => {
     );
   };
 
-  const renderMaterialReadiness = (row: CutPlanSkuRow) => {
+  const renderCutStatus = (row: CutPlanSkuRow) => {
     const readiness = materialReadinessByProductId.get(row.id);
-    if (readiness?.status === 'ready') return <span className="text-xs font-bold text-emerald-300">Pode cortar</span>;
+    if (readiness?.status === 'ready') {
-    if (readiness?.status === 'material_ready') return <span className="text-xs font-bold text-sky-300">Material OK · revisar dados</span>;
+      return <span className="inline-flex rounded-full border border-emerald-400/30 bg-emerald-400/10 px-2.5 py-1 text-xs font-bold text-emerald-300">Pronto para cortar</span>;
-    if (readiness?.status === 'missing') return <span className="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 py-1 text-xs font-bold text-red-300" title={readiness?.blockers.join(' · ')}><span className="truncate">Falta: {readiness?.blockers[0] || 'material'}</span></span>;
+    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 (
@@ -1241,6 +1257,29 @@ const Cutting = () => {
 
       {activeCuttingView === 'plan' && (
         <>
+      <div className="grid grid-cols-2 gap-3 xl:grid-cols-4">
+        {[
+          { id: 'all' as const, label: 'Fila de corte', detail: `${formatNumber(cutPlan.summary.skuCount)} SKUs com necessidade`, value: cutExecutionSummary.rawUnits, tone: 'default' },
+          { id: 'ready' as const, label: 'Pronto para cortar', detail: `${formatNumber(cutExecutionSummary.readyRows)} SKUs liberados`, value: cutExecutionSummary.readyUnits, tone: 'ready' },
+          { id: 'blocked' as const, label: 'Falta material', detail: `${formatNumber(cutExecutionSummary.blockedByMaterial)} SKUs bloqueados`, value: cutExecutionSummary.blockedByMaterial, tone: 'blocked' },
+          { id: 'data' as const, label: 'Dados pendentes', detail: 'Material disponível, cadastro incompleto', value: cutExecutionSummary.blockedByData, tone: 'data' },
+        ].map(option => (
+          <button
+            key={option.id}
+            type="button"
+            onClick={() => {
+              setExecutionFilter(option.id);
+              setCutFilter('need');
+              setCurrentPage(1);
+            }}
+            className={`rounded-2xl border p-4 text-left shadow-sm transition-colors cursor-pointer ${executionFilter === option.id ? option.tone === 'ready' ? 'border-emerald-400/45 bg-emerald-400/[0.07]' : option.tone === 'blocked' ? 'border-red-400/45 bg-red-400/[0.07]' : option.tone === 'data' ? 'border-amber-400/45 bg-amber-400/[0.07]' : 'border-brand-primary/45 bg-brand-primary/[0.07]' : 'border-dark-border bg-dark-card hover:border-brand-primary/35'}`}
+          >
+            <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">{option.label}</p>
+            <p className={`mt-2 text-2xl font-bold ${option.tone === 'ready' ? 'text-emerald-300' : option.tone === 'blocked' ? 'text-red-300' : option.tone === 'data' ? 'text-amber-300' : 'text-dark-text'}`}>{formatNumber(option.value)}{option.id === 'all' || option.id === 'ready' ? ' un.' : ''}</p>
+            <p className="mt-1 truncate text-xs font-semibold text-dark-muted">{option.detail}</p>
+          </button>
+        ))}
+      </div>
       <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" />
@@ -1313,63 +1352,37 @@ const Cutting = () => {
       ) : (
         <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-[1450px] table-fixed text-left text-sm">
+            <table className="w-full min-w-[940px] table-fixed text-left text-sm">
               <colgroup>
-                <col className="w-[105px]" />
+                <col className="w-[380px]" />
-                <col className="w-[320px]" />
+                <col className="w-[120px]" />
-                <col className="w-[110px]" />
+                <col className="w-[120px]" />
-                <col className="w-[145px]" />
-                <col className="w-[115px]" />
-                <col className="w-[125px]" />
                 <col className="w-[140px]" />
-                <col className="w-[80px]" />
+                <col className="w-[220px]" />
-                <col className="w-[230px]" />
-                <col className="w-[160px]" />
                 <col className="w-[100px]" />
               </colgroup>
               <thead className="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">ID Produto</th>
+                  <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">Descrição</th>
-                  <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Família</th>
-                  <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Variação</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">Estoque</th>
                   <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Necessidade</th>
-                  <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Rolos</th>
+                  <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Situação para corte</th>
-                  <th className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider">Materiais</th>
-                  <th
-                    className="px-4 py-4 text-[10px] font-bold uppercase tracking-wider"
-                    title="Dados que ainda faltam para fechar o plano de corte do SKU."
-                  >
-                    Dados pendentes
-                  </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 => (
                   <tr key={row.id} className="transition-colors hover:bg-zinc-50/80 dark:hover:bg-dark-input/50">
-                    <td className="px-4 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{row.id}</td>
                     <td className="max-w-0 px-4 py-2.5">
                       <div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={row.name}>{row.name}</div>
-                      <div className="text-[10px] font-medium text-zinc-400 dark:text-dark-muted">
+                      <div className="mt-1 flex flex-wrap items-center gap-1.5">
-                        Média: {formatNumber(row.dailySales, 2)} un./dia · Cobertura: {formatDays(row.daysOfCover)}
+                        <span className="font-mono text-[10px] font-medium text-zinc-400 dark:text-dark-muted">#{row.id}</span>
-                      </div>
+                        <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-bold ${familyStyles[row.family.key]}`}>{row.family.materialLabel}</span>
-                    </td>
+                        <ProductColorBadge label={row.color} className="max-w-[92px] px-2 py-0.5 text-[10px]" />
-                    <td className="px-4 py-2.5">
+                        <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>
-                      <span className={`inline-flex whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-bold ${familyStyles[row.family.key]}`}>
-                        {row.family.materialLabel}
-                      </span>
-                    </td>
-                    <td className="px-4 py-2.5">
-                      <div className="flex min-w-0 items-center gap-1.5">
-                        <ProductColorBadge label={row.color} className="max-w-[92px] px-2" />
-                        <span className="inline-flex items-center gap-1 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2 py-1 text-xs 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 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">{formatNumber(row.projectedDemand, 1)} un.</td>
                     <td className="px-4 py-2.5 whitespace-nowrap">
@@ -1383,11 +1396,7 @@ const Cutting = () => {
                         {formatNumber(row.suggestedCutQuantity)} un.
                       </span>
                     </td>
-                    <td className="px-4 py-2.5 font-bold whitespace-nowrap text-zinc-900 dark:text-dark-text">
+                    <td className="px-4 py-2.5 align-middle">{renderCutStatus(row)}</td>
-                      {row.estimatedRolls === null ? '-' : formatNumber(row.estimatedRolls)}
-                    </td>
-                    <td className="px-4 py-2.5 align-middle">{renderMaterialReadiness(row)}</td>
-                    <td className="px-4 py-2.5 align-middle">{renderIssueBadge(row)}</td>
                     <td className="px-4 py-2.5 text-right">
                       <div className="flex justify-end gap-2">
                         <Link