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