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

src/pages/Dashboard.tsx

@@ -47,7 +47,14 @@ const CustomTooltip = ({ active, payload, label, isCurrency }: any) => {
 };
 
 const Dashboard = () => {
-  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 filteredData = useMemo(() => {
     const orders = ordersData;
@@ -112,7 +119,13 @@ const Dashboard = () => {
           <h1 className="text-2xl font-bold mb-2 text-dark-text">Visão Geral</h1>
           <p className="text-dark-muted font-medium">Resumo de vendas e performance dos produtos.</p>
         </div>
-        <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
+        <DateRangePicker 
+          dateRange={dateRange} 
+          onChange={setDateRange} 
+          refreshInterval={refreshInterval}
+          setRefreshInterval={setRefreshInterval}
+          onManualRefresh={() => loadData(true)}
+        />
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">

src/pages/ProductDetails.tsx

@@ -20,7 +20,14 @@ const CustomTooltip = ({ active, payload, label }: any) => {
 
 const ProductDetails = () => {
   const { id } = useParams<{ id: string }>();
-  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 { productInfo, chartData, totalSold, totalRevenue } = useMemo(() => {
     const orders = ordersData.filter(order => order.ID_Produto === id);
@@ -92,8 +99,13 @@ const ProductDetails = () => {
           </div>
         </div>
 
-        <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
-      </div>
+        <DateRangePicker 
+          dateRange={dateRange} 
+          onChange={setDateRange} 
+          refreshInterval={refreshInterval}
+          setRefreshInterval={setRefreshInterval}
+          onManualRefresh={() => loadData(true)}
+        />      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">

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" />