Route SKU actions to focused editors

src/pages/Cutting.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Link, useOutletContext } from 'react-router-dom';
+import { Link, useOutletContext, useSearchParams } from 'react-router-dom';
 import { AlertTriangle, ArrowLeft, ClipboardList, Download, Eye, Layers3, Palette, 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 { buildSkuEditPath } from '../catalogLinks';
+import { buildCuttingSkuConfigPath } from '../catalogLinks';
 import { CUT_FAMILY_RULES, buildCutPlan, buildOpenProductionByProductId, type CutFamilyKey, type CutIssue, type CutPlanSkuRow, type CutProductOverride } from '../analytics/cutting';
 import { exportToCSV, fetchCuttingSettings, fetchProductAnalytics, fetchProductionOrders, saveCuttingSettings } from '../dataService';
 import type { CuttingSettings, DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
@@ -117,6 +117,7 @@ const Cutting = () => {
     dateRange: DateRange,
     setDateRange: (range: DateRange) => void
   }>();
+  const [searchParams] = useSearchParams();
   const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
   const [productionOrders, setProductionOrders] = useState<ProductionOrderItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -134,6 +135,8 @@ const Cutting = () => {
   const [correctionPage, setCorrectionPage] = useState(1);
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
+  const cutConfigSection = searchParams.get('config');
+  const targetCorrectionSku = (searchParams.get('sku') || '').trim();
 
   useEffect(() => {
     let isMounted = true;
@@ -249,13 +252,20 @@ const Cutting = () => {
       (correctionIssueFilter === 'all' || row.issues.includes(correctionIssueFilter))
     ));
 
-    return [...rows].sort((a, b) => {
+    const sortedRows = [...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]);
+
+    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);
@@ -264,6 +274,20 @@ const Cutting = () => {
   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) return undefined;
 
@@ -586,8 +610,12 @@ const Cutting = () => {
                       <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">
+                            <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>
@@ -948,10 +976,10 @@ const Cutting = () => {
                     <td className="px-4 py-2.5 text-right">
                       <div className="flex justify-end gap-2">
                         <Link
-                          to={buildSkuEditPath({ sku: row.id, name: row.name, color: row.color, size: row.size })}
+                          to={buildCuttingSkuConfigPath({ sku: row.id })}
                           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"
-                          title={`Editar SKU ${row.id}`}
-                          aria-label={`Editar SKU ${row.id}`}
+                          title={`Configurar corte do SKU ${row.id}`}
+                          aria-label={`Configurar corte do SKU ${row.id}`}
                         >
                           <Pencil className="h-3.5 w-3.5" />
                         </Link>