feat: replace SSE with Grafana-style client polling and rich date presets

src/pages/Products.tsx

@@ -6,7 +6,14 @@ import type { OrderData, DateRange } from '../types';
 import { parseOrderDate } from '../dataService';
 
 const Products = () => {
-  const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();
+  const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData } = useOutletContext<{ 
+    dateRange: DateRange, 
+    setDateRange: (range: DateRange) => void, 
+    ordersData: OrderData[],
+    refreshInterval: number,
+    setRefreshInterval: (interval: number) => void,
+    loadData: (showLoading?: boolean) => void
+  }>();
   const [searchTerm, setSearchTerm] = useState('');
 
   // Pagination state
@@ -67,7 +74,13 @@ const Products = () => {
         </div>
         
         <div className="flex flex-col sm:flex-row gap-3">
-          <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
+          <DateRangePicker 
+            dateRange={dateRange} 
+            onChange={setDateRange} 
+            refreshInterval={refreshInterval}
+            setRefreshInterval={setRefreshInterval}
+            onManualRefresh={() => loadData(true)}
+          />
           
           <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" />