New filter panel layout at client page

src/dataService.ts

@@ -1,4 +1,4 @@
-import type { AuthUser, CampaignPreview, CampaignProcessSummary, CampaignQueueSummary, ClientAnalyticsItem, ClientDetailsAnalytics, CreateUserResult, DashboardAnalytics, DateRange, ManagedUser, OrderData, ProductAnalyticsItem, ProductDetailsAnalytics, RfmAnalytics, StockData } from './types';
+import type { AuthUser, CampaignPreview, CampaignProcessSummary, CampaignQueueSummary, ClientAnalyticsItem, ClientDetailsAnalytics, ClientFilterOptions, ClientMetadataFilters, CreateUserResult, DashboardAnalytics, DateRange, ManagedUser, OrderData, ProductAnalyticsItem, ProductDetailsAnalytics, RfmAnalytics, StockData } from './types';
 import { formatDateParam } from './dateRanges';
 
 const API_URL = import.meta.env.VITE_API_URL || '/api';
@@ -154,12 +154,35 @@ export const fetchProductDetailsAnalytics = async (productId: string, dateRange:
     }
 };
 
-export const fetchRfmAnalytics = async (dateRange: DateRange): Promise<RfmAnalytics | null> => {
+const appendClientMetadataFilterParams = (params: URLSearchParams, filters?: Partial<ClientMetadataFilters>) => {
+    if (!filters) return;
+    if (filters.marketplace) params.set('marketplace', filters.marketplace);
+    if (filters.canal_venda) params.set('canal_venda', filters.canal_venda);
+    if (filters.seller) params.set('seller', filters.seller);
+};
+
+export const fetchClientFilterOptions = async (dateRange: DateRange): Promise<ClientFilterOptions> => {
     try {
         const params = new URLSearchParams({
             start: formatDateParam(dateRange.start),
             end: formatDateParam(dateRange.end)
         });
+        const response = await authFetch(`/analytics/clients/filters?${params.toString()}`);
+        if (!response.ok) return { marketplaces: [], salesChannels: [], sellers: [] };
+        return await response.json();
+    } catch (error) {
+        console.error('Fetch client filter options failed', error);
+        return { marketplaces: [], salesChannels: [], sellers: [] };
+    }
+};
+
+export const fetchRfmAnalytics = async (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>): Promise<RfmAnalytics | null> => {
+    try {
+        const params = new URLSearchParams({
+            start: formatDateParam(dateRange.start),
+            end: formatDateParam(dateRange.end)
+        });
+        appendClientMetadataFilterParams(params, filters);
         const response = await authFetch(`/analytics/rfm?${params.toString()}`);
         if (!response.ok) return null;
         return await response.json();
@@ -169,12 +192,13 @@ export const fetchRfmAnalytics = async (dateRange: DateRange): Promise<RfmAnalyt
     }
 };
 
-export const fetchClientAnalytics = async (dateRange: DateRange): Promise<ClientAnalyticsItem[]> => {
+export const fetchClientAnalytics = async (dateRange: DateRange, filters?: Partial<ClientMetadataFilters>): Promise<ClientAnalyticsItem[]> => {
     try {
         const params = new URLSearchParams({
             start: formatDateParam(dateRange.start),
             end: formatDateParam(dateRange.end)
         });
+        appendClientMetadataFilterParams(params, filters);
         const response = await authFetch(`/analytics/clients?${params.toString()}`);
         if (!response.ok) return [];
         return await response.json();

src/pages/Clients.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { Search, ChevronRight, Filter, ChevronLeft, Download } from 'lucide-react';
-import type { ClientAnalyticsItem, DateRange, RfmAnalytics, RfmClient } from '../types';
-import { exportToCSV, fetchClientAnalytics, fetchRfmAnalytics } from '../dataService';
-import DateRangePicker from '../components/DateRangePicker';
+import { Search, ChevronRight, Filter, ChevronLeft, X } from 'lucide-react';
+import type { ClientAnalyticsItem, ClientFilterOptions, ClientMetadataFilters, DateRange, RfmAnalytics, RfmClient } from '../types';
+import { fetchClientAnalytics, fetchClientFilterOptions, fetchRfmAnalytics } from '../dataService';
+import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, rangeForLastDays, rangeForPreviousDay, startOfLocalDay } from '../dateRanges';
 import type { ClientSortOption, ClientSummary } from '../analytics/clients';
 
 const clientTypeStyles: Record<string, string> = {
@@ -64,6 +64,47 @@ const sortClients = (clients: ClientSummary[], sortBy: ClientSortOption) => {
   });
 };
 
+const emptyClientFilters: ClientMetadataFilters = {
+  marketplace: '',
+  canal_venda: '',
+  seller: ''
+};
+
+const emptyClientFilterOptions: ClientFilterOptions = {
+  marketplaces: [],
+  salesChannels: [],
+  sellers: []
+};
+
+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 Clients = () => {
   const { dateRange, setDateRange } = useOutletContext<{ 
     dateRange: DateRange, 
@@ -72,6 +113,10 @@ const Clients = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState<ClientSortOption>('recent');
   const [clientTypeFilter, setClientTypeFilter] = useState('all');
+  const [metadataFilters, setMetadataFilters] = useState<ClientMetadataFilters>(emptyClientFilters);
+  const [filterOptions, setFilterOptions] = useState<ClientFilterOptions>(emptyClientFilterOptions);
+  const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
+  const filterMenuRef = useRef<HTMLDivElement>(null);
   const [rfmAnalytics, setRfmAnalytics] = useState<RfmAnalytics | null>(null);
   const [clientAnalytics, setClientAnalytics] = useState<ClientAnalyticsItem[]>([]);
   
@@ -83,13 +128,15 @@ const Clients = () => {
     let isMounted = true;
 
     const loadClients = async () => {
-      const clientsData = await fetchClientAnalytics(dateRange);
+      const options = await fetchClientFilterOptions(dateRange);
+      const clientsData = await fetchClientAnalytics(dateRange, metadataFilters);
       if (isMounted) {
+        setFilterOptions(options);
         setClientAnalytics(clientsData);
         setRfmAnalytics(null);
       }
 
-      const rfmData = await fetchRfmAnalytics(dateRange);
+      const rfmData = await fetchRfmAnalytics(dateRange, metadataFilters);
       if (isMounted) {
         setRfmAnalytics(rfmData);
       }
@@ -100,23 +147,59 @@ const Clients = () => {
     return () => {
       isMounted = false;
     };
-  }, [dateRange]);
+  }, [dateRange, metadataFilters]);
+
+  useEffect(() => {
+    if (!isFilterMenuOpen) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!filterMenuRef.current?.contains(event.target as Node)) {
+        setIsFilterMenuOpen(false);
+      }
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsFilterMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isFilterMenuOpen]);
 
   const allClientsData = useMemo(() => {
     const normalizedSearch = searchTerm.trim().toLowerCase();
     const rfmByCustomerKey = new Map((rfmAnalytics?.clients || []).map(client => [client.customerKey, client]));
     const clients = clientAnalytics.map((client): ClientSummary => {
+      const rawClient = client as ClientAnalyticsItem & {
+        client_token?: string;
+        customer_key?: string;
+        last_purchase_date?: string;
+        order_count?: number;
+        quantity_purchased?: number;
+        total_spent?: number;
+      };
       const rfmClient = rfmByCustomerKey.get(client.customerKey);
+      const orderCount = Number(client.orderCount ?? rawClient.order_count ?? 0);
+      const totalSpent = Number(client.totalSpent ?? rawClient.total_spent ?? 0);
+      const totalItems = Number(client.quantityPurchased ?? rawClient.quantity_purchased ?? 0);
+      const lastPurchaseDate = client.lastPurchaseDate ?? rawClient.last_purchase_date;
+
       return {
-        customerKey: client.customerKey,
-        clientToken: client.clientToken,
+        customerKey: client.customerKey ?? rawClient.customer_key ?? '',
+        clientToken: client.clientToken ?? rawClient.client_token ?? '',
         name: client.name,
         phone: client.phone,
-        totalSpent: client.totalSpent,
-        averageTicket: client.orderCount ? client.totalSpent / client.orderCount : 0,
-        totalItems: client.quantityPurchased,
-        orderCount: client.orderCount,
-        lastPurchase: client.lastPurchaseDate ? new Date(client.lastPurchaseDate).getTime() : 0,
+        totalSpent,
+        averageTicket: orderCount ? totalSpent / orderCount : 0,
+        totalItems,
+        orderCount,
+        lastPurchase: lastPurchaseDate ? new Date(lastPurchaseDate).getTime() : 0,
         clientType: rfmClient ? (backendSegmentToClientType[rfmClient.segmentKey] || rfmClient.segmentLabel) : 'Sem análise',
         rfmScore: rfmClient?.rfmScore || '000',
         rfmPriority: rfmClient ? getRfmPriority(rfmClient) : 0
@@ -158,50 +241,133 @@ const Clients = () => {
     return new Intl.NumberFormat('pt-BR').format(value);
   };
 
+  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 selectClientType = (type: string) => {
     setClientTypeFilter(current => current === type ? 'all' : type);
     setCurrentPage(1);
   };
 
+  const updateMetadataFilter = (key: keyof ClientMetadataFilters, value: string) => {
+    setMetadataFilters(current => ({
+      ...current,
+      [key]: value
+    }));
+    setCurrentPage(1);
+  };
+
+  const resetMetadataFilters = () => {
+    setMetadataFilters(emptyClientFilters);
+    setClientTypeFilter('all');
+    setSortBy('recent');
+    setCurrentPage(1);
+  };
+
+  const getSellerOptionLabel = (seller: ClientFilterOptions['sellers'][number]) => {
+    if (seller.id && seller.name && seller.id !== seller.name) return `${seller.name} (${seller.id})`;
+    return seller.name || seller.id;
+  };
+
+  const marketplaceOptions = useMemo(() => {
+    if (!metadataFilters.marketplace || filterOptions.marketplaces.includes(metadataFilters.marketplace)) {
+      return filterOptions.marketplaces;
+    }
+
+    return [metadataFilters.marketplace, ...filterOptions.marketplaces];
+  }, [filterOptions.marketplaces, metadataFilters.marketplace]);
+
+  const salesChannelOptions = useMemo(() => {
+    if (!metadataFilters.canal_venda || filterOptions.salesChannels.includes(metadataFilters.canal_venda)) {
+      return filterOptions.salesChannels;
+    }
+
+    return [metadataFilters.canal_venda, ...filterOptions.salesChannels];
+  }, [filterOptions.salesChannels, metadataFilters.canal_venda]);
+
+  const sellerOptions = useMemo(() => {
+    if (!metadataFilters.seller || filterOptions.sellers.some(seller => seller.value === metadataFilters.seller)) {
+      return filterOptions.sellers;
+    }
+
+    const fallbackSeller = metadataFilters.seller.startsWith('id:')
+      ? { value: metadataFilters.seller, id: metadataFilters.seller.slice(3), name: metadataFilters.seller.slice(3) }
+      : { value: metadataFilters.seller, id: '', name: metadataFilters.seller.replace(/^name:/, '') };
+
+    return [fallbackSeller, ...filterOptions.sellers];
+  }, [filterOptions.sellers, metadataFilters.seller]);
+
+  const activeMetadataFilters = useMemo(() => {
+    const filters = [];
+    const selectedSeller = sellerOptions.find(seller => seller.value === metadataFilters.seller);
+
+    if (metadataFilters.marketplace) {
+      filters.push({ key: 'marketplace' as const, label: `Marketplace: ${metadataFilters.marketplace}` });
+    }
+
+    if (metadataFilters.canal_venda) {
+      filters.push({ key: 'canal_venda' as const, label: `Canal: ${metadataFilters.canal_venda}` });
+    }
+
+    if (metadataFilters.seller) {
+      filters.push({ key: 'seller' as const, label: `Vendedor: ${selectedSeller ? getSellerOptionLabel(selectedSeller) : metadataFilters.seller}` });
+    }
+
+    return filters;
+  }, [metadataFilters, sellerOptions]);
+  const activeFilterCount = activeMetadataFilters.length +
+    (clientTypeFilter === 'all' ? 0 : 1) +
+    (sortBy === 'recent' ? 0 : 1);
+  const hasActiveFilters = activeFilterCount > 0;
+
   return (
     <div className="space-y-6">
-      <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-4">
+      <div className="grid grid-cols-1 gap-4 2xl:grid-cols-[minmax(520px,1fr)_auto] 2xl:items-start">
         <div>
           <h1 className="text-2xl font-bold mb-2 text-zinc-900 dark:text-dark-text">Clientes</h1>
-          <p className="text-zinc-500 dark:text-dark-muted font-medium">Métricas de engajamento e histórico de consumo dos seus clientes.</p>
+          <p className="text-zinc-500 dark:text-dark-muted font-medium lg:whitespace-nowrap">Métricas de engajamento e histórico de consumo dos seus clientes.</p>
         </div>
-        
-        <div className="flex flex-col sm:flex-row flex-wrap gap-3 items-center justify-start xl:justify-end">
-          <DateRangePicker 
-            dateRange={dateRange} 
-            onChange={(range) => {
-              setDateRange(range);
-              setCurrentPage(1);
-            }}
-          />
-          
-          <div className="relative">
-            <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-4 h-4" />
-            <select 
-              value={sortBy}
-              onChange={(e) => {
-                setSortBy(e.target.value as ClientSortOption);
-                setCurrentPage(1);
-              }}
-              className="appearance-none bg-dark-card border border-dark-border text-dark-text text-sm rounded-xl pl-9 pr-8 py-2.5 focus:outline-none focus:border-brand-primary transition-colors shadow-sm cursor-pointer"
-            >
-              <option value="recent">Mais Recentes</option>
-              <option value="spent_desc">Maior Gasto</option>
-              <option value="spent_asc">Menor Gasto</option>
-              <option value="ticket_desc">Maior Ticket Médio</option>
-              <option value="ticket_asc">Menor Ticket Médio</option>
-              <option value="rfm_priority">Prioridade RFV</option>
-              <option value="items_desc">Mais Produtos</option>
-              <option value="items_asc">Menos Produtos</option>
-            </select>
-          </div>
 
-          <div className="relative w-full sm:w-auto">
+        <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+          <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" 
@@ -211,60 +377,178 @@ const Clients = () => {
                 setSearchTerm(e.target.value);
                 setCurrentPage(1);
               }}
-              className="w-full sm:w-64 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-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>
-          
-          <button
-            onClick={() => {
-              const exportData = clientsData.map(client => ({
-                'Nome do Cliente': client.name,
-                'Telefone/WhatsApp': client.phone || 'N/A',
-                'Tipo de Cliente': client.clientType,
-                'RFV': client.rfmScore,
-                'Total Gasto (R$)': client.totalSpent.toFixed(2).replace('.', ','),
-                'Ticket Médio (R$)': client.averageTicket.toFixed(2).replace('.', ','),
-                'Produtos Comprados': client.totalItems,
-                'Total de Pedidos': client.orderCount,
-                'Última Compra': new Date(client.lastPurchase).toLocaleDateString('pt-BR')
-              }));
-              exportToCSV(exportData, `clientes_${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>
 
-      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-4 shadow-sm">
-        <div className="mb-4">
-          <div>
-            <h2 className="text-sm font-bold text-zinc-900 dark:text-dark-text">Tipos de Clientes</h2>
-            <p className="text-xs font-semibold text-zinc-500 dark:text-dark-muted">
-              Classificação RFV sincronizada com a página RFV quando disponível.
-            </p>
-          </div>
-        </div>
-
-        <div className="flex flex-wrap gap-2">
-          {clientTypes.map(type => (
+          <div ref={filterMenuRef} className="relative w-full sm:w-auto">
             <button
-              key={type}
-              onClick={() => selectClientType(type)}
-              title={clientTypeFilter === type ? 'Clique para limpar o filtro' : `Filtrar por ${type}`}
-              className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-bold transition-all cursor-pointer hover:-translate-y-0.5 ${
-                clientTypeFilter === type
-                  ? `${clientTypeStyles[type]} ring-1 ring-current shadow-sm`
-                  : clientTypeStyles[type]
+              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'
               }`}
             >
-              <span>{type}</span>
-              <span className="rounded-full bg-black/20 px-2 py-0.5 text-[10px]">{clientTypeCounts[type] || 0}</span>
+              <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-black">
+                  {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={(e) => {
+                        setSortBy(e.target.value as ClientSortOption);
+                        setCurrentPage(1);
+                      }}
+                      className={`${filterSelectClassName} mt-1`}
+                    >
+                      <option value="recent">Mais Recentes</option>
+                      <option value="spent_desc">Maior Gasto</option>
+                      <option value="spent_asc">Menor Gasto</option>
+                      <option value="ticket_desc">Maior Ticket Médio</option>
+                      <option value="ticket_asc">Menor Ticket Médio</option>
+                      <option value="rfm_priority">Prioridade RFV</option>
+                      <option value="items_desc">Mais Produtos</option>
+                      <option value="items_asc">Menos Produtos</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">
+                    Marketplace
+                    <select
+                      value={metadataFilters.marketplace}
+                      onChange={(event) => updateMetadataFilter('marketplace', event.target.value)}
+                      className={`${filterSelectClassName} mt-1`}
+                    >
+                      <option value="">Todos</option>
+                      {marketplaceOptions.map(marketplace => (
+                        <option key={marketplace} value={marketplace}>{marketplace}</option>
+                      ))}
+                    </select>
+                  </label>
+
+                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
+                    Canal de venda
+                    <select
+                      value={metadataFilters.canal_venda}
+                      onChange={(event) => updateMetadataFilter('canal_venda', event.target.value)}
+                      className={`${filterSelectClassName} mt-1`}
+                    >
+                      <option value="">Todos</option>
+                      {salesChannelOptions.map(channel => (
+                        <option key={channel} value={channel}>{channel}</option>
+                      ))}
+                    </select>
+                  </label>
+
+                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
+                    Vendedor
+                    <select
+                      value={metadataFilters.seller}
+                      onChange={(event) => updateMetadataFilter('seller', event.target.value)}
+                      className={`${filterSelectClassName} mt-1`}
+                    >
+                      <option value="">Todos</option>
+                      {sellerOptions.map(seller => (
+                        <option key={seller.value} value={seller.value}>{getSellerOptionLabel(seller)}</option>
+                      ))}
+                    </select>
+                  </label>
+
+                  <label className="block text-xs font-bold uppercase tracking-wider text-dark-muted">
+                    Tipo de cliente
+                    <select
+                      value={clientTypeFilter}
+                      onChange={(event) => selectClientType(event.target.value)}
+                      className={`${filterSelectClassName} mt-1`}
+                    >
+                      <option value="all">Todos</option>
+                      {clientTypes.map(type => (
+                        <option key={type} value={type}>
+                          {type} ({clientTypeCounts[type] || 0})
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                </div>
+
+                <div className="mt-3 flex items-center justify-between border-t border-dark-border pt-3">
+                  <button
+                    type="button"
+                    onClick={resetMetadataFilters}
+                    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-black transition-opacity hover:opacity-90"
+                  >
+                    Aplicar
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 

src/types.ts

@@ -110,6 +110,24 @@ export interface ClientAnalyticsItem {
   lastPurchaseDate: string;
 }
 
+export interface ClientMetadataFilters {
+  marketplace: string;
+  canal_venda: string;
+  seller: string;
+}
+
+export interface ClientSellerFilterOption {
+  value: string;
+  id: string;
+  name: string;
+}
+
+export interface ClientFilterOptions {
+  marketplaces: string[];
+  salesChannels: string[];
+  sellers: ClientSellerFilterOption[];
+}
+
 export interface RfmClient {
   customerKey: string;
   clientToken: string;