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

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