feat: add date filter to clients page to analyze purchasing behavior within specific timeframes

src/pages/Clients.tsx

@@ -1,13 +1,18 @@
 import { useMemo, useState, useEffect } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { Search, ChevronRight, Filter, ChevronLeft } from 'lucide-react';
-import type { OrderData } from '../types';
+import type { OrderData, DateRange } from '../types';
 import { parseOrderDate } from '../dataService';
+import DateRangePicker from '../components/DateRangePicker';
 
 type SortOption = 'recent' | 'spent_desc' | 'spent_asc' | 'items_desc' | 'items_asc';
 
 const Clients = () => {
-  const { ordersData } = useOutletContext<{ ordersData: OrderData[] }>();
+  const { dateRange, setDateRange, ordersData } = useOutletContext<{ 
+    dateRange: DateRange, 
+    setDateRange: (range: DateRange) => void, 
+    ordersData: OrderData[] 
+  }>();
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState<SortOption>('recent');
   
@@ -15,13 +20,17 @@ const Clients = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
 
-  // Reset to first page when search or sort changes
+  // Reset to first page when search, sort, or date changes
   useEffect(() => {
     setCurrentPage(1);
-  }, [searchTerm, sortBy]);
+  }, [searchTerm, sortBy, dateRange]);
 
   const clientsData = useMemo(() => {
-    const orders = ordersData;
+    const orders = ordersData.filter(order => {
+      const orderDate = parseOrderDate(order.Data_Pedido);
+      return orderDate >= dateRange.start && orderDate <= dateRange.end;
+    });
+
     const clientMap: Record<string, { totalSpent: number, totalItems: number, uniqueOrders: Set<string>, lastPurchase: number }> = {};
 
     orders.forEach(order => {
@@ -65,7 +74,7 @@ const Clients = () => {
         default: return 0;
       }
     });
-  }, [searchTerm, sortBy, ordersData]);
+  }, [searchTerm, sortBy, ordersData, dateRange]);
 
   // Pagination logic
   const totalPages = Math.ceil(clientsData.length / itemsPerPage);
@@ -78,13 +87,18 @@ const Clients = () => {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+      <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-4">
         <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>
         </div>
         
-        <div className="flex flex-col sm:flex-row gap-3">
+        <div className="flex flex-col sm:flex-row flex-wrap gap-3 items-center justify-start xl:justify-end">
+          <DateRangePicker 
+            dateRange={dateRange} 
+            onChange={setDateRange} 
+          />
+          
           <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 
@@ -100,14 +114,14 @@ const Clients = () => {
             </select>
           </div>
 
-          <div className="relative">
+          <div className="relative w-full sm:w-auto">
             <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 cliente..." 
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full md: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 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"
             />
           </div>
         </div>