Add product group analysis view

src/App.tsx

@@ -7,6 +7,7 @@ import { isAuthenticated, isSuperAdmin } from './dataService';
 const Dashboard = React.lazy(() => import('./pages/Dashboard'));
 const Products = React.lazy(() => import('./pages/Products'));
 const ProductDetails = React.lazy(() => import('./pages/ProductDetails'));
+const ProductGroupDetails = React.lazy(() => import('./pages/ProductGroupDetails'));
 const Replenishment = React.lazy(() => import('./pages/Replenishment'));
 const ProductionOrders = React.lazy(() => import('./pages/ProductionOrders'));
 const Clients = React.lazy(() => import('./pages/Clients'));
@@ -46,6 +47,7 @@ function App() {
         <Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
           <Route path="graph" element={<Dashboard />} />
           <Route path="products" element={<Products />} />
+          <Route path="products/groups/:groupKey" element={<ProductGroupDetails />} />
           <Route path="products/:id" element={<ProductDetails />} />
           <Route path="replenishment" element={<Replenishment />} />
           <Route path="stock" element={<Navigate to="/products" replace />} />

src/pages/ProductGroupDetails.tsx

@@ -0,0 +1,454 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Link, useOutletContext, useParams } from 'react-router-dom';
+import { DollarSign, Package, Palette, Ruler, TrendingDown, TrendingUp, Warehouse } from 'lucide-react';
+import BackButton from '../components/BackButton';
+import DateRangePicker from '../components/DateRangePicker';
+import RefreshStatus from '../components/RefreshStatus';
+import { fetchProductAnalytics } from '../dataService';
+import { decodeProductGroupKey, normalizeProductText, parseProductName, sortProductSizes } from '../productParsing';
+import type { DateRange, ProductAnalyticsItem } from '../types';
+
+type VariantRow = ProductAnalyticsItem & {
+  color: string;
+  size: string;
+  dailySales: number;
+  daysOfCover: number | null;
+};
+
+type BreakdownRow = {
+  label: string;
+  quantitySold: number;
+  revenue: number;
+  stock: number;
+  skuCount: number;
+};
+
+const COLOR_SWATCHES: Array<{ pattern: string; color: string }> = [
+  { pattern: 'preto', color: '#171717' },
+  { pattern: 'branco', color: '#f8fafc' },
+  { pattern: 'bege', color: '#d7bf9a' },
+  { pattern: 'café', color: '#79553d' },
+  { pattern: 'cafe', color: '#79553d' },
+  { pattern: 'perola', color: '#e7dfcf' },
+  { pattern: 'pérola', color: '#e7dfcf' },
+  { pattern: 'marinho', color: '#172554' },
+  { pattern: 'bordo', color: '#6b1226' },
+  { pattern: 'bordô', color: '#6b1226' },
+  { pattern: 'verde', color: '#166534' },
+  { pattern: 'rosa', color: '#f0a6bf' },
+  { pattern: 'cinza', color: '#8f8f8f' },
+  { pattern: 'vermelho', color: '#b91c1c' },
+  { pattern: 'grafite', color: '#3f3f46' },
+  { pattern: 'azul', color: '#2563eb' }
+];
+
+const getRangeDays = (range: DateRange) => {
+  const start = new Date(range.start);
+  const end = new Date(range.end);
+  start.setHours(0, 0, 0, 0);
+  end.setHours(0, 0, 0, 0);
+  return Math.max(1, Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1);
+};
+
+const formatNumber = (value: number, maximumFractionDigits = 0) => (
+  new Intl.NumberFormat('pt-BR', { maximumFractionDigits }).format(value)
+);
+
+const formatCurrency = (value: number) => (
+  new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value)
+);
+
+const formatDays = (value: number | null) => {
+  if (value === null) return '-';
+  if (value > 999) return '999+ dias';
+  return `${formatNumber(value, value < 10 ? 1 : 0)} dias`;
+};
+
+const getSwatchColor = (label: string) => {
+  const normalizedLabel = label.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase();
+  return COLOR_SWATCHES.find(item => normalizedLabel.includes(item.pattern.normalize('NFD').replace(/\p{Diacritic}/gu, '')))?.color || '#64748b';
+};
+
+const buildBreakdown = (rows: VariantRow[], field: 'color' | 'size') => {
+  const totals = new Map<string, BreakdownRow>();
+
+  rows.forEach(row => {
+    const label = row[field] || (field === 'color' ? 'Sem cor' : 'Sem tamanho');
+    const current = totals.get(label) || { label, quantitySold: 0, revenue: 0, stock: 0, skuCount: 0 };
+    totals.set(label, {
+      label,
+      quantitySold: current.quantitySold + row.quantitySold,
+      revenue: current.revenue + row.revenue,
+      stock: current.stock + row.stock,
+      skuCount: current.skuCount + 1
+    });
+  });
+
+  const values = [...totals.values()];
+  if (field === 'size') {
+    return values.sort((a, b) => {
+      const [sortedA, sortedB] = sortProductSizes([a.label, b.label]);
+      if (sortedA === a.label && sortedB === b.label) return 0;
+      return sortedA === a.label ? -1 : 1;
+    });
+  }
+
+  return values.sort((a, b) => b.quantitySold - a.quantitySold);
+};
+
+const BreakdownPanel = ({
+  title,
+  subtitle,
+  rows,
+  type
+}: {
+  title: string;
+  subtitle: string;
+  rows: BreakdownRow[];
+  type: 'color' | 'size';
+}) => {
+  const maxSold = Math.max(...rows.map(row => row.quantitySold), 0);
+
+  return (
+    <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+      <div className="mb-5 flex items-start justify-between gap-4">
+        <div>
+          <h3 className="text-base font-bold text-dark-text">{title}</h3>
+          <p className="mt-1 text-sm font-medium text-dark-muted">{subtitle}</p>
+        </div>
+        {type === 'color' ? (
+          <Palette className="h-5 w-5 text-brand-primary" />
+        ) : (
+          <Ruler className="h-5 w-5 text-brand-primary" />
+        )}
+      </div>
+
+      {rows.length === 0 ? (
+        <div className="flex h-32 items-center justify-center text-sm font-semibold text-dark-muted">
+          Sem dados para este grupo.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {rows.map(row => {
+            const width = maxSold ? Math.max(4, (row.quantitySold / maxSold) * 100) : 0;
+            const swatchColor = type === 'color' ? getSwatchColor(row.label) : '#25c2ff';
+
+            return (
+              <div key={row.label} className="grid grid-cols-[120px_1fr_92px] items-center gap-3">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span
+                    className="h-2.5 w-2.5 shrink-0 rounded-sm border border-white/20"
+                    style={{ backgroundColor: swatchColor }}
+                  />
+                  <span className="truncate text-xs font-bold text-dark-text" title={row.label}>
+                    {type === 'size' && row.label !== 'Sem tamanho' ? `Tam. ${row.label}` : row.label}
+                  </span>
+                </div>
+                <div className="h-2.5 overflow-hidden rounded-full bg-dark-border">
+                  <div
+                    className="h-full rounded-full"
+                    style={{ width: `${width}%`, backgroundColor: swatchColor, opacity: 0.86 }}
+                  />
+                </div>
+                <div className="text-right text-xs">
+                  <div className="font-bold text-dark-text">{formatNumber(row.quantitySold)} un.</div>
+                  <div className="text-[10px] font-semibold text-dark-muted">{row.skuCount} SKUs</div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ProductGroupDetailsSkeleton = () => (
+  <div className="space-y-6" aria-label="Carregando grupo de produtos">
+    <div className="flex flex-col gap-4">
+      <div className="skeleton h-4 w-20" />
+      <div className="flex items-center gap-4">
+        <div className="skeleton h-16 w-16 rounded-2xl" />
+        <div className="w-full max-w-xl">
+          <div className="skeleton h-3 w-24" />
+          <div className="skeleton mt-3 h-7 w-full" />
+        </div>
+      </div>
+    </div>
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+      {[0, 1, 2, 3].map(item => (
+        <div key={`group-kpi-skeleton-${item}`} className="skeleton h-28 rounded-2xl" />
+      ))}
+    </div>
+    <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+      <div className="skeleton h-80 rounded-2xl" />
+      <div className="skeleton h-80 rounded-2xl" />
+    </div>
+  </div>
+);
+
+const ProductGroupDetails = () => {
+  const { groupKey } = useParams<{ groupKey: string }>();
+  const { dateRange, setDateRange } = useOutletContext<{
+    dateRange: DateRange,
+    setDateRange: (range: DateRange) => void
+  }>();
+  const [products, setProducts] = useState<ProductAnalyticsItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const groupName = useMemo(() => {
+    if (!groupKey) return '';
+
+    try {
+      return decodeProductGroupKey(groupKey);
+    } catch {
+      return '';
+    }
+  }, [groupKey]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadProducts = async () => {
+      setIsLoading(true);
+      const data = await fetchProductAnalytics(dateRange);
+
+      if (isMounted) {
+        setProducts(data);
+        setIsLoading(false);
+      }
+    };
+
+    void loadProducts();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [dateRange]);
+
+  const groupRows = useMemo<VariantRow[]>(() => {
+    const rangeDays = getRangeDays(dateRange);
+    const normalizedGroupName = normalizeProductText(groupName).toLowerCase();
+
+    return products
+      .map(product => {
+        const metadata = parseProductName(product.name);
+        const dailySales = product.quantitySold / rangeDays;
+
+        return {
+          ...product,
+          color: metadata.color,
+          size: metadata.size,
+          baseName: metadata.baseName,
+          dailySales,
+          daysOfCover: dailySales > 0 ? product.stock / dailySales : null
+        };
+      })
+      .filter(product => normalizeProductText(product.baseName).toLowerCase() === normalizedGroupName)
+      .sort((a, b) => b.quantitySold - a.quantitySold);
+  }, [dateRange, groupName, products]);
+
+  const totals = useMemo(() => {
+    const totalSold = groupRows.reduce((total, row) => total + row.quantitySold, 0);
+    const totalRevenue = groupRows.reduce((total, row) => total + row.revenue, 0);
+    const totalStock = groupRows.reduce((total, row) => total + row.stock, 0);
+    const dailySales = groupRows.reduce((total, row) => total + row.dailySales, 0);
+    const daysOfCover = dailySales > 0 ? totalStock / dailySales : null;
+    const colors = new Set(groupRows.map(row => row.color).filter(Boolean));
+    const sizes = new Set(groupRows.map(row => row.size).filter(Boolean));
+
+    return {
+      totalSold,
+      totalRevenue,
+      totalStock,
+      dailySales,
+      daysOfCover,
+      colorCount: colors.size,
+      sizeCount: sizes.size
+    };
+  }, [groupRows]);
+
+  const colorBreakdown = useMemo(() => buildBreakdown(groupRows, 'color'), [groupRows]);
+  const sizeBreakdown = useMemo(() => buildBreakdown(groupRows, 'size'), [groupRows]);
+  const isRefreshing = isLoading && products.length > 0;
+
+  if (isLoading && products.length === 0) {
+    return <ProductGroupDetailsSkeleton />;
+  }
+
+  if (!groupName || groupRows.length === 0) {
+    return (
+      <div className="py-12 text-center">
+        <p className="font-medium text-zinc-500 dark:text-dark-muted">Grupo de produtos não encontrado.</p>
+        <Link to="/products" className="mt-4 inline-block font-bold text-brand-primary hover:underline">
+          Voltar para produtos
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-col gap-4">
+          <BackButton fallbackTo="/products" />
+
+          <div className="flex items-center gap-4">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-brand-primary shadow-sm dark:border-dark-border dark:bg-dark-card">
+              <Package className="h-8 w-8" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-dark-muted">
+                Grupo · {formatNumber(groupRows.length)} SKUs · {formatNumber(totals.colorCount)} cores · {formatNumber(totals.sizeCount)} tamanhos
+              </p>
+              <h1 className="truncate text-2xl font-bold text-zinc-900 dark:text-dark-text" title={groupName}>{groupName}</h1>
+            </div>
+          </div>
+        </div>
+
+        <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
+      </div>
+
+      <RefreshStatus isRefreshing={isRefreshing} />
+
+      <div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+          <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Unidades vendidas</p>
+                <p className="text-3xl font-bold text-dark-text">{formatNumber(totals.totalSold)}</p>
+              </div>
+              <Package className="h-6 w-6 text-brand-primary" />
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Receita total</p>
+                <p className="text-3xl font-bold text-dark-text">{formatCurrency(totals.totalRevenue)}</p>
+              </div>
+              <DollarSign className="h-6 w-6 text-emerald-300" />
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Estoque</p>
+                <p className="text-3xl font-bold text-dark-text">{formatNumber(totals.totalStock)}</p>
+              </div>
+              <Warehouse className="h-6 w-6 text-purple-300" />
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="mb-1 text-xs font-bold uppercase tracking-widest text-dark-muted">Cobertura estimada</p>
+                <p className="text-3xl font-bold text-dark-text">{formatDays(totals.daysOfCover)}</p>
+              </div>
+              <TrendingDown className="h-6 w-6 text-sky-300" />
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+          <BreakdownPanel
+            title="Venda por cor"
+            subtitle="Cores mais vendidas dentro deste grupo."
+            rows={colorBreakdown}
+            type="color"
+          />
+          <BreakdownPanel
+            title="Venda por tamanho"
+            subtitle="Tamanhos mais vendidos dentro deste grupo."
+            rows={sizeBreakdown}
+            type="size"
+          />
+        </div>
+
+        <div className="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-dark-border dark:bg-dark-card">
+          <div className="border-b border-zinc-100 px-6 py-4 dark:border-dark-border">
+            <h3 className="text-base font-bold text-zinc-900 dark:text-dark-text">Variações do grupo</h3>
+            <p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">SKUs, cores e tamanhos que formam este grupo.</p>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[1100px] table-fixed text-left text-sm">
+              <colgroup>
+                <col className="w-[120px]" />
+                <col className="w-[360px]" />
+                <col className="w-[120px]" />
+                <col className="w-[100px]" />
+                <col className="w-[120px]" />
+                <col className="w-[120px]" />
+                <col className="w-[140px]" />
+                <col className="w-[130px]" />
+                <col className="w-[130px]" />
+              </colgroup>
+              <thead className="border-b border-zinc-100 bg-zinc-50 text-zinc-500 dark:border-dark-border dark:bg-dark-header dark:text-dark-muted">
+                <tr>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">ID Produto</th>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Descrição</th>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Cor</th>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Tamanho</th>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Vendido</th>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Estoque</th>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Média diária</th>
+                  <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-wider">Receita</th>
+                  <th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-wider">Ações</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
+                {groupRows.map(row => (
+                  <tr key={row.id} className="transition-colors hover:bg-zinc-50/80 dark:hover:bg-dark-input/50">
+                    <td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{row.id}</td>
+                    <td className="max-w-0 px-6 py-2.5">
+                      <div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={row.name}>{row.name}</div>
+                      <div className="text-[10px] font-medium text-zinc-400 dark:text-dark-muted">Preço Atual: {formatCurrency(row.lastPrice)}</div>
+                    </td>
+                    <td className="px-6 py-2.5">
+                      <span className="inline-flex max-w-full items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-2.5 py-1 text-xs font-bold text-sky-300">
+                        <span
+                          className="h-2 w-2 shrink-0 rounded-sm border border-white/20"
+                          style={{ backgroundColor: getSwatchColor(row.color || 'Sem cor') }}
+                        />
+                        <span className="truncate">{row.color || '-'}</span>
+                      </span>
+                    </td>
+                    <td className="px-6 py-2.5">
+                      <span className="inline-flex rounded-full border border-emerald-400/25 bg-emerald-400/10 px-2.5 py-1 text-xs font-bold text-emerald-300">
+                        {row.size || '-'}
+                      </span>
+                    </td>
+                    <td className="px-6 py-2.5 whitespace-nowrap">
+                      <div className="flex items-center gap-2">
+                        <Package className="h-3.5 w-3.5 text-zinc-400 dark:text-dark-muted" />
+                        <span className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.quantitySold)} un.</span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-2.5 whitespace-nowrap font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.stock)} un.</td>
+                    <td className="px-6 py-2.5 whitespace-nowrap text-zinc-500 dark:text-dark-muted">{formatNumber(row.dailySales, 2)} un./dia</td>
+                    <td className="px-6 py-2.5 whitespace-nowrap font-bold text-brand-primary">{formatCurrency(row.revenue)}</td>
+                    <td className="px-4 py-2.5 text-right">
+                      <Link
+                        to={`/products/${row.id}`}
+                        className="inline-flex items-center whitespace-nowrap rounded-lg bg-brand-primary/10 px-3 py-1.5 text-xs font-bold text-brand-primary transition-opacity hover:opacity-80"
+                      >
+                        <TrendingUp className="mr-1.5 h-3.5 w-3.5" />
+                        Ver SKU
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductGroupDetails;

src/pages/Products.tsx

@@ -6,6 +6,7 @@ import RefreshStatus from '../components/RefreshStatus';
 import type { DateRange, ProductAnalyticsItem } from '../types';
 import { exportToCSV, fetchProductAnalytics } from '../dataService';
 import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, rangeForLastDays, rangeForPreviousDay, startOfLocalDay } from '../dateRanges';
+import { encodeProductGroupKey, parseProductName, sortProductSizes } from '../productParsing';
 
 type StockRisk = 'rupture' | 'critical' | 'attention' | 'monitor' | 'healthy' | 'no_sales';
 type StockStatusFilter = 'all' | StockRisk;
@@ -13,12 +14,23 @@ type StockQuantityFilter = 'all' | 'zero' | 'positive' | 'low' | 'high';
 type SalesFilter = 'all' | 'sold' | 'not_sold';
 type CoverageFilter = 'all' | 'up_to_7' | 'up_to_14' | 'up_to_30' | 'over_30' | 'none';
 type ProductSortOption = 'sold_desc' | 'sold_asc' | 'stock_priority' | 'revenue_desc' | 'revenue_asc' | 'stock_asc' | 'stock_desc' | 'coverage_asc' | 'coverage_desc' | 'name_asc';
+type ProductViewMode = 'sku' | 'group';
 
 type ProductRow = ProductAnalyticsItem & {
   dailySales: number;
   daysOfCover: number | null;
   risk: StockRisk;
   riskLabel: string;
+  baseName: string;
+  color: string;
+  size: string;
+  productIds: string[];
+  skuCount: number;
+  colors: string[];
+  sizes: string[];
+  topColor: string;
+  topSize: string;
+  groupKey: string;
 };
 
 const riskStyles: Record<StockRisk, { label: string; className: string; dotClass: string }> = {
@@ -176,6 +188,7 @@ const Products = () => {
   const [stockQuantityFilter, setStockQuantityFilter] = useState<StockQuantityFilter>('all');
   const [salesFilter, setSalesFilter] = useState<SalesFilter>('all');
   const [coverageFilter, setCoverageFilter] = useState<CoverageFilter>('all');
+  const [viewMode, setViewMode] = useState<ProductViewMode>('sku');
   const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
   const filterMenuRef = useRef<HTMLDivElement>(null);
   const [productAnalytics, setProductAnalytics] = useState<ProductAnalyticsItem[]>([]);
@@ -230,26 +243,100 @@ const Products = () => {
   const productsData = useMemo<ProductRow[]>(() => {
     const days = getRangeDays(dateRange);
     const normalizedSearch = searchTerm.trim().toLowerCase();
-    const products = productAnalytics.map(product => {
+    const skuRows = productAnalytics.map(product => {
       const dailySales = product.quantitySold / days;
       const risk = classifyStockRisk(product.stock, dailySales);
       const style = riskStyles[risk];
+      const metadata = parseProductName(product.name);
 
       return {
         ...product,
         dailySales,
         daysOfCover: dailySales > 0 ? product.stock / dailySales : null,
         risk,
-        riskLabel: style.label
+        riskLabel: style.label,
+        baseName: metadata.baseName,
+        color: metadata.color,
+        size: metadata.size,
+        productIds: [product.id],
+        skuCount: 1,
+        colors: metadata.color ? [metadata.color] : [],
+        sizes: metadata.size ? [metadata.size] : [],
+        topColor: metadata.color || '-',
+        topSize: metadata.size || '-',
+        groupKey: encodeProductGroupKey(metadata.baseName)
       };
     });
 
+    const groups = new Map<string, ProductRow[]>();
+
+    skuRows.forEach(product => {
+      const key = product.baseName.toLowerCase();
+      const group = groups.get(key) || [];
+      group.push(product);
+      groups.set(key, group);
+    });
+
+    const groupedRows = Array.from(groups.values()).map(group => {
+      const first = group[0];
+      const quantitySold = group.reduce((total, product) => total + product.quantitySold, 0);
+      const revenue = group.reduce((total, product) => total + product.revenue, 0);
+      const stock = group.reduce((total, product) => total + product.stock, 0);
+      const orderLineCount = group.reduce((total, product) => total + product.orderLineCount, 0);
+      const dailySales = quantitySold / days;
+      const daysOfCover = dailySales > 0 ? stock / dailySales : null;
+      const risk = classifyStockRisk(stock, dailySales);
+      const style = riskStyles[risk];
+      const colorTotals = new Map<string, number>();
+      const sizeTotals = new Map<string, number>();
+
+      group.forEach(product => {
+        if (product.color) {
+          colorTotals.set(product.color, (colorTotals.get(product.color) || 0) + product.quantitySold);
+        }
+        if (product.size) {
+          sizeTotals.set(product.size, (sizeTotals.get(product.size) || 0) + product.quantitySold);
+        }
+      });
+
+      const topColor = [...colorTotals.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] || '-';
+      const topSize = [...sizeTotals.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] || '-';
+      const colors = [...colorTotals.keys()].sort((a, b) => a.localeCompare(b, 'pt-BR'));
+      const sizes = sortProductSizes([...sizeTotals.keys()]);
+
+      return {
+        ...first,
+        id: first.groupKey,
+        name: first.baseName,
+        quantitySold,
+        revenue,
+        orderLineCount,
+        stock,
+        dailySales,
+        daysOfCover,
+        risk,
+        riskLabel: style.label,
+        productIds: group.map(product => product.id),
+        skuCount: group.length,
+        colors,
+        sizes,
+        topColor,
+        topSize,
+        lastPrice: quantitySold > 0 ? revenue / quantitySold : first.lastPrice
+      };
+    });
+
+    const activeRows = viewMode === 'group' ? groupedRows : skuRows;
+
     const filteredProducts = normalizedSearch
-      ? products.filter(product =>
+      ? activeRows.filter(product =>
         product.name.toLowerCase().includes(normalizedSearch) ||
-        product.id.toLowerCase().includes(normalizedSearch)
+        product.id.toLowerCase().includes(normalizedSearch) ||
+        product.productIds.some(id => id.toLowerCase().includes(normalizedSearch)) ||
+        product.colors.some(color => color.toLowerCase().includes(normalizedSearch)) ||
+        product.sizes.some(size => size.toLowerCase().includes(normalizedSearch))
       )
-      : products;
+      : activeRows;
 
     const detailedFilteredProducts = filteredProducts.filter(product => {
       const matchesStatus = stockStatusFilter === 'all' || product.risk === stockStatusFilter;
@@ -294,7 +381,7 @@ const Products = () => {
           return b.quantitySold - a.quantitySold;
       }
     });
-  }, [coverageFilter, dateRange, productAnalytics, salesFilter, searchTerm, sortBy, stockQuantityFilter, stockStatusFilter]);
+  }, [coverageFilter, dateRange, productAnalytics, salesFilter, searchTerm, sortBy, stockQuantityFilter, stockStatusFilter, viewMode]);
 
   const activeFilterCount =
     (sortBy === 'sold_desc' ? 0 : 1) +
@@ -373,6 +460,29 @@ const Products = () => {
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+          <div className="inline-flex rounded-xl border border-dark-border bg-dark-input p-1">
+            {[
+              { key: 'sku' as const, label: 'SKU' },
+              { key: 'group' as const, label: 'Grupo' }
+            ].map(view => (
+              <button
+                key={view.key}
+                type="button"
+                onClick={() => {
+                  setViewMode(view.key);
+                  setCurrentPage(1);
+                }}
+                className={`rounded-lg px-4 py-2 text-sm font-bold transition-colors cursor-pointer ${
+                  viewMode === view.key
+                    ? 'bg-brand-primary text-brand-contrast'
+                    : 'text-dark-muted hover:bg-dark-card hover:text-dark-text'
+                }`}
+              >
+                {view.label}
+              </button>
+            ))}
+          </div>
+
           <div className="relative w-full sm:w-72">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-5 h-5" />
             <input
@@ -581,8 +691,14 @@ const Products = () => {
           <button
             onClick={() => {
               const exportData = productsData.map(product => ({
-                'ID Produto': product.id,
+                'Tipo': viewMode === 'group' ? 'Grupo' : 'SKU',
+                'ID Produto': viewMode === 'group' ? product.productIds.join(' | ') : product.id,
                 'Descrição': product.name,
+                'SKUs': product.skuCount,
+                'Cores': product.colors.join(' | '),
+                'Tamanhos': product.sizes.join(' | '),
+                'Cor principal': product.topColor,
+                'Tamanho principal': product.topSize,
                 'Status': product.riskLabel,
                 'Preço Atual (R$)': product.lastPrice.toFixed(2).replace('.', ','),
                 'Total Vendido (un.)': product.quantitySold,
@@ -591,7 +707,7 @@ const Products = () => {
                 'Cobertura': product.daysOfCover === null ? '' : product.daysOfCover.toFixed(1).replace('.', ','),
                 'Receita Gerada (R$)': product.revenue.toFixed(2).replace('.', ',')
               }));
-              exportToCSV(exportData, `produtos_${new Date().toISOString().split('T')[0]}.csv`);
+              exportToCSV(exportData, `${viewMode === 'group' ? 'grupos_produtos' : 'produtos'}_${new Date().toISOString().split('T')[0]}.csv`);
             }}
             className="flex items-center justify-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
             title="Exportar para CSV"
@@ -623,8 +739,8 @@ const Products = () => {
               </colgroup>
               <thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
                 <tr>
-                  <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">ID Produto</th>
+                  <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">{viewMode === 'group' ? 'SKUs' : 'ID Produto'}</th>
-                  <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Descrição</th>
+                  <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">{viewMode === 'group' ? 'Grupo' : 'Descrição'}</th>
                   <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Status</th>
                   <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Total Vendido</th>
                   <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Estoque</th>
@@ -640,10 +756,16 @@ const Products = () => {
 
                   return (
                     <tr key={product.id} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
-                      <td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{product.id}</td>
+                      <td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">
+                        {viewMode === 'group' ? `${product.skuCount} SKUs` : `#${product.id}`}
+                      </td>
                       <td className="max-w-0 px-6 py-2.5">
                         <div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={product.name}>{product.name}</div>
-                        <div className="text-[10px] text-zinc-400 dark:text-dark-muted font-medium">Preço Atual: {formatCurrency(product.lastPrice)}</div>
+                        <div className="truncate text-[10px] text-zinc-400 dark:text-dark-muted font-medium">
+                          {viewMode === 'group'
+                            ? `Cor principal: ${product.topColor} · Tam. principal: ${product.topSize} · ${product.colors.length} cores · ${product.sizes.length} tamanhos`
+                            : `Preço Atual: ${formatCurrency(product.lastPrice)}`}
+                        </div>
                       </td>
                       <td className="px-6 py-2.5">
                         <span className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-bold ${style.className}`}>
@@ -668,11 +790,11 @@ const Products = () => {
                       <td className="px-6 py-2.5 text-brand-primary font-bold whitespace-nowrap">{formatCurrency(product.revenue)}</td>
                       <td className="px-4 py-2.5 text-right">
                         <Link
-                          to={`/products/${product.id}`}
+                          to={viewMode === 'group' ? `/products/groups/${product.groupKey}` : `/products/${product.id}`}
                           className="inline-flex items-center whitespace-nowrap text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity bg-brand-primary/10 px-3 py-1.5 rounded-lg cursor-pointer"
                         >
                           <TrendingUp className="w-3.5 h-3.5 mr-1.5" />
-                          Ver Gráfico
+                          {viewMode === 'group' ? 'Ver Grupo' : 'Ver Gráfico'}
                         </Link>
                       </td>
                     </tr>
@@ -696,7 +818,7 @@ const Products = () => {
             totalPages={totalPages}
             pageSize={itemsPerPage}
             pageSizeOptions={[10, 20, 50, 100]}
-            itemLabel="produtos"
+            itemLabel={viewMode === 'group' ? 'grupos' : 'produtos'}
             pageSizeLabel="itens por página"
             startIndex={startIndex}
             endIndex={Math.min(startIndex + itemsPerPage, productsData.length)}

src/productParsing.ts

@@ -3,6 +3,23 @@ const sizeSet = new Set(sizeOrder);
 
 export const normalizeProductText = (value: string) => value.replace(/\s+/g, ' ').trim();
 
+export const encodeProductGroupKey = (value: string) => {
+  const normalizedValue = normalizeProductText(value);
+  const bytes = new TextEncoder().encode(normalizedValue);
+  const binary = Array.from(bytes, byte => String.fromCharCode(byte)).join('');
+
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+};
+
+export const decodeProductGroupKey = (value: string) => {
+  const base64 = value.replace(/-/g, '+').replace(/_/g, '/');
+  const paddedBase64 = base64.padEnd(Math.ceil(base64.length / 4) * 4, '=');
+  const binary = atob(paddedBase64);
+  const bytes = Uint8Array.from(binary, character => character.charCodeAt(0));
+
+  return normalizeProductText(new TextDecoder().decode(bytes));
+};
+
 export const sortProductSizes = (sizes: string[]) => [...sizes].sort((a, b) => {
   const indexA = sizeOrder.indexOf(a);
   const indexB = sizeOrder.indexOf(b);