Align products controls with replenishment layout

src/pages/Products.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { Download, Filter, Package, PackageCheck, PackagePlus, Search, TrendingDown, TrendingUp, X } from 'lucide-react';
+import { Download, Filter, Package, PackageCheck, Search, TrendingDown, TrendingUp, X } from 'lucide-react';
+import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
 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';
@@ -85,33 +85,6 @@ const stockPriority: Record<StockRisk, number> = {
   no_sales: 5
 };
 
-const dateFilterPresets = [
-  { value: 'today', label: 'Hoje', getRange: () => rangeForDay(new Date()) },
-  { value: 'yesterday', label: 'Ontem', getRange: () => rangeForPreviousDay() },
-  { value: '7d', label: 'Últimos 7 dias', getRange: () => rangeForLastDays(7) },
-  { value: '30d', label: 'Últimos 30 dias', getRange: () => rangeForLastDays(30) },
-  { value: 'month', label: 'Este mês', getRange: () => {
-    const end = endOfLocalDay(new Date());
-    return { start: startOfLocalDay(new Date(end.getFullYear(), end.getMonth(), 1)), end };
-  } },
-  { value: 'previous-month', label: 'Mês passado', getRange: () => {
-    const today = new Date();
-    return {
-      start: startOfLocalDay(new Date(today.getFullYear(), today.getMonth() - 1, 1)),
-      end: endOfLocalDay(new Date(today.getFullYear(), today.getMonth(), 0))
-    };
-  } },
-  { value: '90d', label: 'Últimos 90 dias', getRange: () => rangeForLastDays(90) },
-  { value: 'year', label: 'Este ano', getRange: () => {
-    const end = endOfLocalDay(new Date());
-    return { start: startOfLocalDay(new Date(end.getFullYear(), 0, 1)), end };
-  } },
-  { value: 'all', label: 'Todo o período', getRange: () => ({
-    start: startOfLocalDay(new Date(2000, 0, 1)),
-    end: endOfLocalDay(new Date())
-  }) }
-];
-
 const filterSelectClassName = "w-full h-9 bg-dark-input border border-dark-border text-dark-text text-sm rounded-lg px-3 focus:outline-none focus:border-brand-primary transition-colors cursor-pointer";
 
 const getRangeDays = (range: DateRange) => {
@@ -384,7 +357,6 @@ const Products = () => {
   }, [coverageFilter, dateRange, productAnalytics, salesFilter, searchTerm, sortBy, stockQuantityFilter, stockStatusFilter, viewMode]);
 
   const activeFilterCount =
-    (sortBy === 'sold_desc' ? 0 : 1) +
     (stockStatusFilter === 'all' ? 0 : 1) +
     (stockQuantityFilter === 'all' ? 0 : 1) +
     (salesFilter === 'all' ? 0 : 1) +
@@ -392,7 +364,6 @@ const Products = () => {
   const hasActiveFilters = activeFilterCount > 0;
 
   const resetProductFilters = () => {
-    setSortBy('sold_desc');
     setStockStatusFilter('all');
     setStockQuantityFilter('all');
     setSalesFilter('all');
@@ -400,47 +371,6 @@ const Products = () => {
     setCurrentPage(1);
   };
 
-  const datePresetValue = useMemo(() => {
-    const currentStart = formatDateParam(dateRange.start);
-    const currentEnd = formatDateParam(dateRange.end);
-    const preset = dateFilterPresets.find(option => {
-      const range = option.getRange();
-      return formatDateParam(range.start) === currentStart && formatDateParam(range.end) === currentEnd;
-    });
-
-    return preset?.value || 'custom';
-  }, [dateRange]);
-
-  const updateDatePreset = (value: string) => {
-    if (value === 'custom') return;
-
-    const preset = dateFilterPresets.find(option => option.value === value);
-    if (!preset) return;
-
-    setDateRange(preset.getRange());
-    setCurrentPage(1);
-  };
-
-  const updateDateStart = (value: string) => {
-    const nextStart = parseLocalDateInput(value);
-    if (!nextStart) return;
-
-    const start = startOfLocalDay(nextStart);
-    const end = dateRange.end < start ? endOfLocalDay(start) : dateRange.end;
-    setDateRange({ start, end });
-    setCurrentPage(1);
-  };
-
-  const updateDateEnd = (value: string) => {
-    const nextEnd = parseLocalDateInput(value);
-    if (!nextEnd) return;
-
-    const end = endOfLocalDay(nextEnd);
-    const start = dateRange.start > end ? startOfLocalDay(end) : dateRange.start;
-    setDateRange({ start, end });
-    setCurrentPage(1);
-  };
-
   const totalPages = Math.ceil(productsData.length / itemsPerPage);
   const safeCurrentPage = Math.min(currentPage, totalPages || 1);
   const startIndex = (safeCurrentPage - 1) * itemsPerPage;
@@ -460,6 +390,47 @@ const Products = () => {
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+          <DateRangePicker
+            dateRange={dateRange}
+            onChange={(range) => {
+              setDateRange(range);
+              setCurrentPage(1);
+            }}
+          />
+
+          <button
+            onClick={() => {
+              const exportData = productsData.map(product => ({
+                '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,
+                'Estoque': product.stock,
+                'Média Diária': product.dailySales.toFixed(2).replace('.', ','),
+                'Cobertura': product.daysOfCover === null ? '' : product.daysOfCover.toFixed(1).replace('.', ','),
+                'Receita Gerada (R$)': product.revenue.toFixed(2).replace('.', ',')
+              }));
+              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"
+          >
+            <Download size={16} className="text-brand-primary" />
+            <span className="hidden sm:inline">Exportar</span>
+          </button>
+        </div>
+      </div>
+
+      <RefreshStatus isRefreshing={isRefreshing} />
+
+      <div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[auto_1fr_auto_190px]">
         <div className="inline-flex rounded-xl border border-dark-border bg-dark-input p-1">
           {[
             { key: 'sku' as const, label: 'SKU' },
@@ -483,8 +454,8 @@ const Products = () => {
           ))}
         </div>
 
-          <div className="relative w-full sm:w-72">
+        <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-5 h-5" />
+          <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-400 dark:text-dark-muted" />
           <input
             type="text"
             placeholder="Buscar por nome ou ID..."
@@ -493,18 +464,18 @@ const Products = () => {
               setSearchTerm(e.target.value);
               setCurrentPage(1);
             }}
-              className="w-full bg-dark-card border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary hover:border-brand-primary transition-colors shadow-sm"
+            className="w-full bg-dark-input border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary hover:border-brand-primary transition-colors"
           />
         </div>
 
-          <div ref={filterMenuRef} className="relative w-full sm:w-auto">
+        <div ref={filterMenuRef} className="relative">
           <button
             type="button"
             onClick={() => setIsFilterMenuOpen(open => !open)}
-              className={`flex w-full items-center justify-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium shadow-sm transition-colors sm:w-auto ${
+            className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl border px-4 text-sm font-medium shadow-sm transition-colors ${
               hasActiveFilters
                 ? 'cursor-pointer border-brand-primary bg-brand-primary/10 text-brand-primary'
-                  : 'cursor-pointer border-dark-border bg-dark-card text-dark-text hover:border-brand-primary'
+                : 'cursor-pointer border-dark-border bg-dark-input text-dark-text hover:border-brand-primary'
             }`}
           >
             <Filter className="h-4 w-4" />
@@ -531,63 +502,6 @@ const Products = () => {
               </div>
 
               <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
-                    Período
-                    <select
-                      value={datePresetValue}
-                      onChange={(event) => updateDatePreset(event.target.value)}
-                      className={`${filterSelectClassName} mt-1`}
-                    >
-                      <option value="custom">Personalizado</option>
-                      {dateFilterPresets.map(preset => (
-                        <option key={preset.value} value={preset.value}>{preset.label}</option>
-                      ))}
-                    </select>
-                  </label>
-
-                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
-                    Ordenação
-                    <select
-                      value={sortBy}
-                      onChange={(event) => {
-                        setSortBy(event.target.value as ProductSortOption);
-                        setCurrentPage(1);
-                      }}
-                      className={`${filterSelectClassName} mt-1`}
-                    >
-                      <option value="sold_desc">Mais vendidos</option>
-                      <option value="sold_asc">Menos vendidos</option>
-                      <option value="stock_priority">Prioridade de estoque</option>
-                      <option value="revenue_desc">Maior receita</option>
-                      <option value="revenue_asc">Menor receita</option>
-                      <option value="stock_asc">Menor estoque</option>
-                      <option value="stock_desc">Maior estoque</option>
-                      <option value="coverage_asc">Menor cobertura</option>
-                      <option value="coverage_desc">Maior cobertura</option>
-                      <option value="name_asc">Nome A-Z</option>
-                    </select>
-                  </label>
-
-                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
-                    De
-                    <input
-                      type="date"
-                      value={formatDateParam(dateRange.start)}
-                      onChange={(event) => updateDateStart(event.target.value)}
-                      className={`${filterSelectClassName} mt-1`}
-                    />
-                  </label>
-
-                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
-                    Até
-                    <input
-                      type="date"
-                      value={formatDateParam(dateRange.end)}
-                      onChange={(event) => updateDateEnd(event.target.value)}
-                      className={`${filterSelectClassName} mt-1`}
-                    />
-                  </label>
-
                 <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
                   Status
                   <select
@@ -679,46 +593,26 @@ const Products = () => {
           )}
         </div>
 
-          <Link
+        <select
-            to="/replenishment?status=need&view=group"
+          value={sortBy}
-            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"
+          onChange={(event) => {
-            title="Ver necessidade de reposição"
+            setSortBy(event.target.value as ProductSortOption);
-          >
+            setCurrentPage(1);
-            <PackagePlus size={16} className="text-brand-primary" />
-            <span className="hidden sm:inline">Reposição</span>
-          </Link>
-
-          <button
-            onClick={() => {
-              const exportData = productsData.map(product => ({
-                '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,
-                'Estoque': product.stock,
-                'Média Diária': product.dailySales.toFixed(2).replace('.', ','),
-                'Cobertura': product.daysOfCover === null ? '' : product.daysOfCover.toFixed(1).replace('.', ','),
-                'Receita Gerada (R$)': product.revenue.toFixed(2).replace('.', ',')
-              }));
-              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"
+          className="h-11 rounded-xl border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text focus:outline-none focus:border-brand-primary cursor-pointer"
-            title="Exportar para CSV"
         >
-            <Download size={16} className="text-brand-primary" />
+          <option value="sold_desc">Mais vendidos</option>
-            <span className="hidden sm:inline">Exportar</span>
+          <option value="sold_asc">Menos vendidos</option>
-          </button>
+          <option value="stock_priority">Prioridade de estoque</option>
+          <option value="revenue_desc">Maior receita</option>
+          <option value="revenue_asc">Menor receita</option>
+          <option value="stock_asc">Menor estoque</option>
+          <option value="stock_desc">Maior estoque</option>
+          <option value="coverage_asc">Menor cobertura</option>
+          <option value="coverage_desc">Maior cobertura</option>
+          <option value="name_asc">Nome A-Z</option>
+        </select>
       </div>
-      </div>
-
-      <RefreshStatus isRefreshing={isRefreshing} />
 
       {isLoading && productAnalytics.length === 0 ? (
         <ProductTableSkeleton />