Add manual SKU planning overrides

src/pages/ProductDetails.tsx

@@ -1,17 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
-import { Package, DollarSign, ReceiptText, Warehouse } from 'lucide-react';
+import { Package, DollarSign, Pencil, ReceiptText, Warehouse } from 'lucide-react';
 import { AreaChart, Area, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import BackButton from '../components/BackButton';
 import DateRangePicker from '../components/DateRangePicker';
+import SkuPlanningModal from '../components/SkuPlanningModal';
 import ProductTypeBadge from '../components/ProductTypeBadge';
 import RefreshStatus from '../components/RefreshStatus';
-import type { DateRange, ProductDetailsAnalytics } from '../types';
-import { fetchProductDetailsAnalytics } from '../dataService';
+import type { CutProductOverride, CuttingSettings, DateRange, ProductDetailsAnalytics } from '../types';
+import { fetchCuttingSettings, fetchProductDetailsAnalytics, saveCuttingSettings } from '../dataService';
 import { parseProductName } from '../productParsing';
 import { formatColorLabel } from '../displayFormatters';
 import { averageRecentValues, formatDateBucketLabel, formatDateBucketLongLabel, getAutoDateBucket, getMovingAverageWindow, getRangeDayCount, getDateBucketKey, type DateBucket } from '../chartUtils';
-import { classifyProductType, getProductTypeConfig } from '../productClassification';
+import { getProductTypeConfig, resolveProductType } from '../productClassification';
 
 const CHART_GRID_COLOR = 'var(--chart-grid)';
 const CHART_AXIS_COLOR = 'var(--chart-axis)';
@@ -132,6 +133,24 @@ const ProductDetails = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [chartMetric, setChartMetric] = useState<ProductChartMetric>('quantity');
   const [selectedProductBucket, setSelectedProductBucket] = useState<string | null>(null);
+  const [planningSettings, setPlanningSettings] = useState<CuttingSettings>({ familyYields: {}, productOverrides: {} });
+  const [isPlanningModalOpen, setIsPlanningModalOpen] = useState(false);
+  const [isSavingPlanning, setIsSavingPlanning] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadPlanningSettings = async () => {
+      const settings = await fetchCuttingSettings();
+      if (isMounted) setPlanningSettings(settings);
+    };
+
+    void loadPlanningSettings();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
 
   useEffect(() => {
     let isMounted = true;
@@ -169,6 +188,25 @@ const ProductDetails = () => {
     return new Intl.NumberFormat('pt-BR').format(value);
   };
 
+  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);
+      setIsPlanningModalOpen(false);
+    } finally {
+      setIsSavingPlanning(false);
+    }
+  };
+
   if (isLoading && !details) {
     return <ProductDetailsSkeleton />;
   }
@@ -183,7 +221,7 @@ const ProductDetails = () => {
   }
 
   const { productInfo, chartData, totalSold, totalRevenue, totalOrders = 0, averageTicket = 0, variantBreakdown = [] } = details;
-  const productType = classifyProductType(productInfo.name);
+  const productType = resolveProductType(productInfo.name, planningSettings.productOverrides[productInfo.id]);
   const productTypeConfig = getProductTypeConfig(productType);
   const isRefreshing = isLoading && Boolean(details);
   const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
@@ -299,6 +337,15 @@ const ProductDetails = () => {
               <div className="mt-2 flex flex-wrap items-center gap-2">
                 <ProductTypeBadge type={productType} />
                 <span className="text-xs font-semibold text-dark-muted">{productTypeConfig.description}</span>
+                <button
+                  type="button"
+                  onClick={() => setIsPlanningModalOpen(true)}
+                  className="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary cursor-pointer"
+                  title={`Editar planejamento do SKU ${productInfo.id}`}
+                  aria-label={`Editar planejamento do SKU ${productInfo.id}`}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </button>
               </div>
             </div>
           </div>
@@ -549,6 +596,16 @@ const ProductDetails = () => {
         )}
       </div>
       </div>
+
+      {isPlanningModalOpen && (
+        <SkuPlanningModal
+          product={productInfo}
+          override={planningSettings.productOverrides[productInfo.id]}
+          isSaving={isSavingPlanning}
+          onClose={() => setIsPlanningModalOpen(false)}
+          onSave={(override) => saveProductOverride(productInfo.id, override)}
+        />
+      )}
     </div>
   );
 };

src/pages/ProductGroupDetails.tsx

@@ -9,12 +9,12 @@ import ProductTypeBadge from '../components/ProductTypeBadge';
 import RefreshStatus from '../components/RefreshStatus';
 import { buildSkuEditPath } from '../catalogLinks';
 import { buildOpenProductionByProductId } from '../analytics/cutting';
-import { fetchProductAnalytics, fetchProductionOrders } from '../dataService';
+import { fetchCuttingSettings, fetchProductAnalytics, fetchProductionOrders } from '../dataService';
 import { decodeProductGroupKey, normalizeProductText, parseProductName } from '../productParsing';
 import { formatColorLabel } from '../displayFormatters';
 import { getProductColor } from '../productColors';
-import { classifyProductType, getDominantProductType, getProductTypeConfig, type ProductTypeKey } from '../productClassification';
-import type { DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
+import { getDominantProductType, getProductTypeConfig, resolveProductType, type ProductTypeKey } from '../productClassification';
+import type { CuttingSettings, DateRange, ProductAnalyticsItem, ProductionOrderItem } from '../types';
 
 type VariantRow = ProductAnalyticsItem & {
   color: string;
@@ -194,6 +194,7 @@ const ProductGroupDetails = () => {
   const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
   const [productionOrders, setProductionOrders] = useState<ProductionOrderItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [planningSettings, setPlanningSettings] = useState<CuttingSettings>({ familyYields: {}, productOverrides: {} });
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(20);
 
@@ -207,6 +208,21 @@ const ProductGroupDetails = () => {
     }
   }, [groupKey]);
 
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadPlanningSettings = async () => {
+      const settings = await fetchCuttingSettings();
+      if (isMounted) setPlanningSettings(settings);
+    };
+
+    void loadPlanningSettings();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   useEffect(() => {
     let isMounted = true;
 
@@ -243,7 +259,7 @@ const ProductGroupDetails = () => {
     return products
       .map(product => {
         const metadata = parseProductName(product.name);
-        const productType = classifyProductType(product.name);
+        const productType = resolveProductType(product.name, planningSettings.productOverrides[product.id]);
         const dailySales = product.quantitySold / rangeDays;
         const projectedDemand = dailySales * REPLENISHMENT_TARGET_DAYS;
         const openProductionQuantity = openProductionByProductId[product.id] || 0;
@@ -266,7 +282,7 @@ const ProductGroupDetails = () => {
       })
       .filter(product => normalizeProductText(product.baseName).toLowerCase() === normalizedGroupName)
       .sort((a, b) => b.quantitySold - a.quantitySold);
-  }, [dateRange, groupName, openProductionByProductId, products]);
+  }, [dateRange, groupName, openProductionByProductId, planningSettings.productOverrides, products]);
 
   const totals = useMemo(() => {
     const totalSold = groupRows.reduce((total, row) => total + row.quantitySold, 0);

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>
   );
 };