Improve cutting correction workflow

src/pages/Cutting.tsx

@@ -11,6 +11,8 @@ import type { CuttingSettings, DateRange, ProductAnalyticsItem, ProductionOrderI
 type CutFilter = 'need' | 'all' | 'issues' | 'covered';
 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';
 
 const SETTINGS_STORAGE_KEY = 'nexstar_cutting_settings';
 const coverageTargetOptions = [7, 15, 30, 60];
@@ -41,6 +43,13 @@ const issueHelp: Record<CutIssue, string> = {
   missing_yield_rule: 'Família reconhecida, mas ainda falta cadastrar unidades por rolo.'
 };
 
+const correctionFilterOptions: Array<{ value: CorrectionIssueFilter; label: string }> = [
+  { value: 'all', label: 'Todas pendências' },
+  { 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-emerald-400/30 bg-emerald-400/10 text-emerald-300',
   BLOS: 'border-sky-400/30 bg-sky-400/10 text-sky-300',
@@ -117,6 +126,8 @@ const Cutting = () => {
   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);
 
@@ -228,12 +239,31 @@ const Cutting = () => {
   const startIndex = (safeCurrentPage - 1) * itemsPerPage;
   const paginatedRows = filteredRows.slice(startIndex, startIndex + itemsPerPage);
   const isRefreshing = isLoading && products.length > 0;
-  const correctionRows = cutPlan.rows.filter(row => (
+  const correctionRows = useMemo(() => {
-    row.issues.some(issue => issue !== 'missing_yield_rule')
+    const rows = cutPlan.rows.filter(row => (
-  )).slice(0, 12);
+      row.issues.some(issue => issue !== 'missing_yield_rule') &&
+      (correctionIssueFilter === 'all' || row.issues.includes(correctionIssueFilter))
+    ));
+
+    return [...rows].sort((a, b) => {
+      if (b.suggestedCutQuantity !== a.suggestedCutQuantity) {
+        return b.suggestedCutQuantity - a.suggestedCutQuantity;
+      }
+      return a.name.localeCompare(b.name, 'pt-BR');
+    });
+  }, [correctionIssueFilter, cutPlan.rows]);
+  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(() => {
+    setCorrectionPage(1);
+  }, [correctionIssueFilter, dateRange, targetCoverageDays]);
+
   const updateFamilyYield = (familyKey: CutFamilyKey, value: string) => {
     const parsedValue = Number(value);
     setCuttingSettings(current => {
@@ -436,9 +466,38 @@ const Cutting = () => {
             ))}
           </div>
 
-          {!!correctionRows.length && (
+          <div className="rounded-xl border border-dark-border">
-            <div className="overflow-x-auto 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 className="grid grid-cols-[120px_1.4fr_150px_150px_120px_80px] gap-3 border-b border-dark-border bg-dark-header px-4 py-3 text-[10px] font-bold uppercase tracking-wider text-dark-muted">
+              <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>
@@ -447,15 +506,19 @@ const Cutting = () => {
                       <span className="text-right">Ações</span>
                     </div>
                     <div className="divide-y divide-dark-border">
-                {correctionRows.map(row => {
+                      {paginatedCorrectionRows.map(row => {
                         const override = cuttingSettings.productOverrides[row.id] || {};
                         return (
                           <div key={row.id} className="grid grid-cols-[120px_1.4fr_150px_150px_120px_80px] items-center gap-3 px-4 py-3">
                             <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 text-[10px] font-semibold text-amber-300">
+                              <div className="mt-1 flex flex-wrap gap-1.5">
-                          {row.issues.map(issue => issueLabels[issue]).join(', ')}
+                                {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
@@ -497,8 +560,31 @@ const Cutting = () => {
                       })}
                     </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">As pendências restantes, se existirem, são de rendimento por família.</p>
+              </div>
             )}
           </div>
+        </div>
       )}
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
@@ -579,7 +665,12 @@ const Cutting = () => {
                 type="button"
                 onClick={() => {
                   setCutFilter('issues');
+                  setIsSettingsOpen(true);
+                  if (summary.issue !== 'missing_yield_rule') {
+                    setCorrectionIssueFilter(summary.issue);
+                  }
                   setCurrentPage(1);
+                  setCorrectionPage(1);
                 }}
                 className="rounded-xl border border-dark-border bg-dark-card p-3 text-left transition-colors hover:border-amber-400/50 cursor-pointer"
               >