Add manual SKU planning overrides

src/pages/Products.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { Download, Eye, Filter, Package, PackageCheck, Pencil, Search, TrendingDown, X } from 'lucide-react';
-import { buildSkuEditPath } from '../catalogLinks';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
+import SkuPlanningModal from '../components/SkuPlanningModal';
 import ProductTypeBadge from '../components/ProductTypeBadge';
 import RefreshStatus from '../components/RefreshStatus';
-import type { DateRange, ProductAnalyticsItem } from '../types';
-import { exportToCSV, fetchProductAnalytics } from '../dataService';
+import type { CutProductOverride, CuttingSettings, DateRange, ProductAnalyticsItem } from '../types';
+import { exportToCSV, fetchCuttingSettings, fetchProductAnalytics, saveCuttingSettings } from '../dataService';
 import { encodeProductGroupKey, parseProductName, sortProductSizes } from '../productParsing';
 import { formatColorLabel } from '../displayFormatters';
-import { classifyProductType, getDominantProductType, getProductTypeConfig, productTypeOptions, type ProductTypeKey } from '../productClassification';
+import { getDominantProductType, getProductTypeConfig, productTypeOptions, resolveProductType, type ProductTypeKey } from '../productClassification';
 
 type StockRisk = 'rupture' | 'critical' | 'attention' | 'monitor' | 'healthy' | 'no_sales';
 type StockStatusFilter = 'all' | StockRisk;
@@ -173,10 +173,28 @@ const Products = () => {
   const filterMenuRef = useRef<HTMLDivElement>(null);
   const [productAnalytics, setProductAnalytics] = useState<ProductAnalyticsItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [planningSettings, setPlanningSettings] = useState<CuttingSettings>({ familyYields: {}, productOverrides: {} });
+  const [editingProduct, setEditingProduct] = useState<ProductRow | null>(null);
+  const [isSavingPlanning, setIsSavingPlanning] = useState(false);
 
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
 
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadPlanningSettings = async () => {
+      const settings = await fetchCuttingSettings();
+      if (isMounted) setPlanningSettings(settings);
+    };
+
+    void loadPlanningSettings();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   useEffect(() => {
     let isMounted = true;
 
@@ -197,6 +215,25 @@ const Products = () => {
     };
   }, [dateRange]);
 
+  const saveProductOverride = async (productId: string, override: CutProductOverride | null) => {
+    const productOverrides = { ...planningSettings.productOverrides };
+    if (override) {
+      productOverrides[productId] = override;
+    } else {
+      delete productOverrides[productId];
+    }
+
+    const nextSettings = { ...planningSettings, productOverrides };
+    setIsSavingPlanning(true);
+    try {
+      const savedSettings = await saveCuttingSettings(nextSettings);
+      setPlanningSettings(savedSettings);
+      setEditingProduct(null);
+    } finally {
+      setIsSavingPlanning(false);
+    }
+  };
+
   useEffect(() => {
     if (!isFilterMenuOpen) return;
 
@@ -228,7 +265,7 @@ const Products = () => {
       const risk = classifyStockRisk(product.stock, dailySales);
       const style = riskStyles[risk];
       const metadata = parseProductName(product.name);
-      const productType = classifyProductType(product.name);
+      const productType = resolveProductType(product.name, planningSettings.productOverrides[product.id]);
 
       return {
         ...product,
@@ -367,7 +404,7 @@ const Products = () => {
           return b.quantitySold - a.quantitySold;
       }
     });
-  }, [coverageFilter, dateRange, productAnalytics, productTypeFilter, salesFilter, searchTerm, sortBy, stockQuantityFilter, stockStatusFilter, viewMode]);
+  }, [coverageFilter, dateRange, planningSettings.productOverrides, productAnalytics, productTypeFilter, salesFilter, searchTerm, sortBy, stockQuantityFilter, stockStatusFilter, viewMode]);
 
   const activeFilterCount =
     (stockStatusFilter === 'all' ? 0 : 1) +
@@ -721,14 +758,15 @@ const Products = () => {
                       <td className="px-4 py-2.5 text-right">
                         <div className="flex justify-end gap-2">
                           {viewMode === 'sku' && (
-                            <Link
-                              to={buildSkuEditPath({ sku: product.id, name: product.name, color: product.color, size: product.size })}
+                            <button
+                              type="button"
+                              onClick={() => setEditingProduct(product)}
                               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 SKU ${product.id}`}
-                              aria-label={`Editar SKU ${product.id}`}
+                              title={`Editar planejamento do SKU ${product.id}`}
+                              aria-label={`Editar planejamento do SKU ${product.id}`}
                             >
                               <Pencil className="h-3.5 w-3.5" />
-                            </Link>
+                            </button>
                           )}
                           <Link
                             to={viewMode === 'group' ? `/products/groups/${product.groupKey}` : `/products/${product.id}`}
@@ -773,6 +811,16 @@ const Products = () => {
           />
         </div>
       )}
+
+      {editingProduct && (
+        <SkuPlanningModal
+          product={editingProduct}
+          override={planningSettings.productOverrides[editingProduct.id]}
+          isSaving={isSavingPlanning}
+          onClose={() => setEditingProduct(null)}
+          onSave={(override) => saveProductOverride(editingProduct.id, override)}
+        />
+      )}
     </div>
   );
 };