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,233 +390,13 @@ 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">
+          <DateRangePicker
-            {[
+            dateRange={dateRange}
-              { key: 'sku' as const, label: 'SKU' },
+            onChange={(range) => {
-              { key: 'group' as const, label: 'Grupo' }
+              setDateRange(range);
-            ].map(view => (
+              setCurrentPage(1);
-              <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
-              type="text"
-              placeholder="Buscar por nome ou ID..."
-              value={searchTerm}
-              onChange={(e) => {
-                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"
-            />
-          </div>
-
-          <div ref={filterMenuRef} className="relative w-full sm:w-auto">
-            <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 ${
-                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'
-              }`}
-            >
-              <Filter className="h-4 w-4" />
-              Filtros
-              {hasActiveFilters && (
-                <span className="rounded-full bg-brand-primary px-1.5 py-0.5 text-[10px] font-bold text-brand-contrast">
-                  {activeFilterCount}
-                </span>
-              )}
-            </button>
-
-            {isFilterMenuOpen && (
-              <div className="absolute right-0 top-full z-20 mt-2 w-[min(28rem,calc(100vw-2rem))] rounded-xl border border-dark-border bg-dark-card p-3 shadow-2xl">
-                <div className="mb-3 flex items-center justify-between">
-                  <h3 className="text-sm font-bold text-dark-text">Filtros</h3>
-                  <button
-                    type="button"
-                    onClick={() => setIsFilterMenuOpen(false)}
-                    className="cursor-pointer rounded-lg p-1 text-dark-muted transition-colors hover:bg-dark-input hover:text-dark-text"
-                    aria-label="Fechar filtros"
-                  >
-                    <X className="h-4 w-4" />
-                  </button>
-                </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
-                      value={stockStatusFilter}
-                      onChange={(event) => {
-                        setStockStatusFilter(event.target.value as StockStatusFilter);
-                        setCurrentPage(1);
-                      }}
-                      className={`${filterSelectClassName} mt-1`}
-                    >
-                      {stockStatusOptions.map(option => (
-                        <option key={option.value} value={option.value}>{option.label}</option>
-                      ))}
-                    </select>
-                  </label>
-
-                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
-                    Estoque
-                    <select
-                      value={stockQuantityFilter}
-                      onChange={(event) => {
-                        setStockQuantityFilter(event.target.value as StockQuantityFilter);
-                        setCurrentPage(1);
-                      }}
-                      className={`${filterSelectClassName} mt-1`}
-                    >
-                      <option value="all">Todos</option>
-                      <option value="zero">Zerado</option>
-                      <option value="positive">Com estoque</option>
-                      <option value="low">Baixo: 1 a 10 un.</option>
-                      <option value="high">Alto: acima de 100 un.</option>
-                    </select>
-                  </label>
-
-                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
-                    Vendas
-                    <select
-                      value={salesFilter}
-                      onChange={(event) => {
-                        setSalesFilter(event.target.value as SalesFilter);
-                        setCurrentPage(1);
-                      }}
-                      className={`${filterSelectClassName} mt-1`}
-                    >
-                      <option value="all">Todos</option>
-                      <option value="sold">Vendeu no período</option>
-                      <option value="not_sold">Não vendeu no período</option>
-                    </select>
-                  </label>
-
-                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
-                    Cobertura estimada
-                    <select
-                      value={coverageFilter}
-                      onChange={(event) => {
-                        setCoverageFilter(event.target.value as CoverageFilter);
-                        setCurrentPage(1);
-                      }}
-                      className={`${filterSelectClassName} mt-1`}
-                    >
-                      <option value="all">Todos</option>
-                      <option value="up_to_7">0-7 dias</option>
-                      <option value="up_to_14">8-14 dias</option>
-                      <option value="up_to_30">15-30 dias</option>
-                      <option value="over_30">&gt;30 dias</option>
-                      <option value="none">Sem venda</option>
-                    </select>
-                  </label>
-                </div>
-
-                <div className="mt-3 flex items-center justify-between border-t border-dark-border pt-3">
-                  <button
-                    type="button"
-                    onClick={resetProductFilters}
-                    disabled={!hasActiveFilters}
-                    className="cursor-pointer text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-40"
-                  >
-                    Limpar
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setIsFilterMenuOpen(false)}
-                    className="cursor-pointer rounded-xl bg-brand-primary px-4 py-2 text-sm font-bold text-brand-contrast transition-opacity hover:opacity-90"
-                  >
-                    Aplicar
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-
-          <Link
-            to="/replenishment?status=need&view=group"
-            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="Ver necessidade de reposição"
-          >
-            <PackagePlus size={16} className="text-brand-primary" />
-            <span className="hidden sm:inline">Reposição</span>
-          </Link>
 
           <button
             onClick={() => {
@@ -720,6 +430,190 @@ const Products = () => {
 
       <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' },
+            { 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">
+          <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..."
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              setCurrentPage(1);
+            }}
+            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">
+          <button
+            type="button"
+            onClick={() => setIsFilterMenuOpen(open => !open)}
+            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-input text-dark-text hover:border-brand-primary'
+            }`}
+          >
+            <Filter className="h-4 w-4" />
+            Filtros
+            {hasActiveFilters && (
+              <span className="rounded-full bg-brand-primary px-1.5 py-0.5 text-[10px] font-bold text-brand-contrast">
+                {activeFilterCount}
+              </span>
+            )}
+          </button>
+
+          {isFilterMenuOpen && (
+            <div className="absolute right-0 top-full z-20 mt-2 w-[min(28rem,calc(100vw-2rem))] rounded-xl border border-dark-border bg-dark-card p-3 shadow-2xl">
+              <div className="mb-3 flex items-center justify-between">
+                <h3 className="text-sm font-bold text-dark-text">Filtros</h3>
+                <button
+                  type="button"
+                  onClick={() => setIsFilterMenuOpen(false)}
+                  className="cursor-pointer rounded-lg p-1 text-dark-muted transition-colors hover:bg-dark-input hover:text-dark-text"
+                  aria-label="Fechar filtros"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </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">
+                  Status
+                  <select
+                    value={stockStatusFilter}
+                    onChange={(event) => {
+                      setStockStatusFilter(event.target.value as StockStatusFilter);
+                      setCurrentPage(1);
+                    }}
+                    className={`${filterSelectClassName} mt-1`}
+                  >
+                    {stockStatusOptions.map(option => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </select>
+                </label>
+
+                <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
+                  Estoque
+                  <select
+                    value={stockQuantityFilter}
+                    onChange={(event) => {
+                      setStockQuantityFilter(event.target.value as StockQuantityFilter);
+                      setCurrentPage(1);
+                    }}
+                    className={`${filterSelectClassName} mt-1`}
+                  >
+                    <option value="all">Todos</option>
+                    <option value="zero">Zerado</option>
+                    <option value="positive">Com estoque</option>
+                    <option value="low">Baixo: 1 a 10 un.</option>
+                    <option value="high">Alto: acima de 100 un.</option>
+                  </select>
+                </label>
+
+                <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
+                  Vendas
+                  <select
+                    value={salesFilter}
+                    onChange={(event) => {
+                      setSalesFilter(event.target.value as SalesFilter);
+                      setCurrentPage(1);
+                    }}
+                    className={`${filterSelectClassName} mt-1`}
+                  >
+                    <option value="all">Todos</option>
+                    <option value="sold">Vendeu no período</option>
+                    <option value="not_sold">Não vendeu no período</option>
+                  </select>
+                </label>
+
+                <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
+                  Cobertura estimada
+                  <select
+                    value={coverageFilter}
+                    onChange={(event) => {
+                      setCoverageFilter(event.target.value as CoverageFilter);
+                      setCurrentPage(1);
+                    }}
+                    className={`${filterSelectClassName} mt-1`}
+                  >
+                    <option value="all">Todos</option>
+                    <option value="up_to_7">0-7 dias</option>
+                    <option value="up_to_14">8-14 dias</option>
+                    <option value="up_to_30">15-30 dias</option>
+                    <option value="over_30">&gt;30 dias</option>
+                    <option value="none">Sem venda</option>
+                  </select>
+                </label>
+              </div>
+
+              <div className="mt-3 flex items-center justify-between border-t border-dark-border pt-3">
+                <button
+                  type="button"
+                  onClick={resetProductFilters}
+                  disabled={!hasActiveFilters}
+                  className="cursor-pointer text-sm font-bold text-dark-muted transition-colors hover:text-dark-text disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Limpar
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setIsFilterMenuOpen(false)}
+                  className="cursor-pointer rounded-xl bg-brand-primary px-4 py-2 text-sm font-bold text-brand-contrast transition-opacity hover:opacity-90"
+                >
+                  Aplicar
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <select
+          value={sortBy}
+          onChange={(event) => {
+            setSortBy(event.target.value as ProductSortOption);
+            setCurrentPage(1);
+          }}
+          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"
+        >
+          <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>
+      </div>
+
       {isLoading && productAnalytics.length === 0 ? (
         <ProductTableSkeleton />
       ) : (