refactor backend and persist stock campaign queue

src/components/DateRangePicker.tsx

@@ -76,7 +76,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
         } else {
           ref.current.focus();
         }
-      } catch (e) {
+      } catch {
         ref.current.focus();
       }
     }
@@ -183,4 +183,4 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
   );
 };
 
-export default DateRangePicker;
+export default DateRangePicker;

src/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Outlet, Link, useLocation } from 'react-router-dom';
 import { LayoutDashboard, Users, BarChart3, ChevronLeft, ChevronRight, Package, Loader2, LogOut } from 'lucide-react';
-import type { DateRange, OrderData } from '../types';
+import type { DateRange, OrderData, StockData } from '../types';
 import { fetchData, fetchStock, logout } from '../dataService';
 
 const Layout = () => {
@@ -25,7 +25,7 @@ const Layout = () => {
   });
 
   const [ordersData, setOrdersData] = useState<OrderData[]>([]);
-  const [stockData, setStockData] = useState<any[]>([]);
+  const [stockData, setStockData] = useState<StockData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [refreshInterval, setRefreshInterval] = useState<number>(() => {
     const saved = localStorage.getItem('nexstar_refresh_interval');
@@ -41,7 +41,9 @@ const Layout = () => {
   };
 
   useEffect(() => {
-    loadData(true);
+    // The dashboard has to fetch its initial server state after mount.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    void loadData(true);
   }, []);
 
   useEffect(() => {

src/dataService.ts

@@ -1,4 +1,4 @@
-import type { OrderData } from './types';
+import type { OrderData, StockData } from './types';
 
 const API_URL = import.meta.env.VITE_API_URL || '/api';
 
@@ -33,7 +33,7 @@ export const isAuthenticated = (): boolean => {
   return !!localStorage.getItem('auth_token');
 };
 
-export const fetchStock = async (): Promise<any[]> => {
+export const fetchStock = async (): Promise<StockData[]> => {
     try {
         const token = localStorage.getItem('auth_token');
         const response = await fetch(`${API_URL}/stock`, {
@@ -47,7 +47,7 @@ export const fetchStock = async (): Promise<any[]> => {
         }
         if (!response.ok) return [];
         return await response.json();
-    } catch (error) {
+    } catch {
         return [];
     }
 };
@@ -89,7 +89,7 @@ export const parseOrderDate = (dateStr: string): Date => {
   return isNaN(fallback.getTime()) ? new Date(0) : fallback;
 };
 
-export const exportToCSV = (data: any[], filename: string) => {
+export const exportToCSV = (data: Record<string, unknown>[], filename: string) => {
   if (!data || !data.length) return;
   
   const headers = Object.keys(data[0]);
@@ -102,7 +102,7 @@ export const exportToCSV = (data: any[], filename: string) => {
   for (const row of data) {
     const values = headers.map(header => {
       const val = row[header];
-      const escaped = ('' + val).replace(/"/g, '\\"');
+      const escaped = String(val ?? '').replace(/"/g, '""');
       return `"${escaped}"`;
     });
     csvRows.push(values.join(','));

src/main.tsx

@@ -1,3 +1,4 @@
+import '@vitejs/plugin-react/preamble'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { HashRouter } from 'react-router-dom'

src/pages/Clients.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { Search, ChevronRight, Filter, ChevronLeft, Download } from 'lucide-react';
 import type { OrderData, DateRange } from '../types';
@@ -20,11 +20,6 @@ const Clients = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
 
-  // Reset to first page when search, sort, or date changes
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [searchTerm, sortBy, dateRange]);
-
   const clientsData = useMemo(() => {
     const orders = ordersData.filter(order => {
       const orderDate = parseOrderDate(order.Data_Pedido);
@@ -101,14 +96,20 @@ const Clients = () => {
         <div className="flex flex-col sm:flex-row flex-wrap gap-3 items-center justify-start xl:justify-end">
           <DateRangePicker 
             dateRange={dateRange} 
-            onChange={setDateRange} 
+            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 SortOption)}
+              onChange={(e) => {
+                setSortBy(e.target.value as SortOption);
+                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>
@@ -125,7 +126,10 @@ const Clients = () => {
               type="text" 
               placeholder="Buscar cliente..." 
               value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
+              onChange={(e) => {
+                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"
             />
           </div>

src/pages/Dashboard.tsx

@@ -30,7 +30,23 @@ const formatCurrency = (value: number) => {
   return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
 };
 
-const CustomTooltip = ({ active, payload, label, isCurrency }: any) => {
+type ChartTooltipPayload = {
+  value: number;
+  name?: string;
+  color?: string;
+  payload?: {
+    fill?: string;
+  };
+};
+
+type CustomTooltipProps = {
+  active?: boolean;
+  payload?: ChartTooltipPayload[];
+  label?: string;
+  isCurrency?: boolean;
+};
+
+const CustomTooltip = ({ active, payload, label, isCurrency }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1';
     const displayLabel = label || payload[0].name;

src/pages/Login.tsx

@@ -22,7 +22,7 @@ const Login = () => {
       } else {
         setError('E-mail ou senha incorretos.');
       }
-    } catch (err) {
+    } catch {
       setError('Erro ao conectar ao servidor.');
     } finally {
       setIsLoading(false);

src/pages/ProductDetails.tsx

@@ -6,7 +6,13 @@ import DateRangePicker from '../components/DateRangePicker';
 import type { OrderData, DateRange } from '../types';
 import { parseOrderDate } from '../dataService';
 
-const CustomTooltip = ({ active, payload, label }: any) => {
+type CustomTooltipProps = {
+  active?: boolean;
+  payload?: Array<{ value: number }>;
+  label?: string;
+};
+
+const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     return (
       <div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
@@ -47,7 +53,8 @@ const ProductDetails = () => {
     orders.forEach(order => {
       const orderDate = parseOrderDate(order.Data_Pedido);
 
-      if (orderDate >= dateRange.start && orderDate <= dateRange.end) {        const dateStr = order.Data_Pedido;
+      if (orderDate >= dateRange.start && orderDate <= dateRange.end) {
+        const dateStr = order.Data_Pedido;
         salesByDate[dateStr] = (salesByDate[dateStr] || 0) + order.Quantidade;
         sold += order.Quantidade;
         revenue += (order.Quantidade * order.Valor_Unitario);

src/pages/Products.tsx

@@ -1,8 +1,8 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { Search, Package, TrendingUp, ChevronLeft, ChevronRight, Download } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
-import type { OrderData, DateRange } from '../types';
+import type { OrderData, DateRange, StockData } from '../types';
 import { parseOrderDate, exportToCSV } from '../dataService';
 
 const Products = () => {
@@ -10,7 +10,7 @@ const Products = () => {
     dateRange: DateRange, 
     setDateRange: (range: DateRange) => void, 
     ordersData: OrderData[],
-    stockData: any[],
+    stockData: StockData[],
     refreshInterval: number,
     setRefreshInterval: (interval: number) => void,
     loadData: (showLoading?: boolean) => void
@@ -21,11 +21,6 @@ const Products = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
 
-  // Reset to first page when search or date range changes
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [searchTerm, dateRange]);
-
   const productsData = useMemo(() => {
     const orders = ordersData;
     const productMap: Record<string, { id: string, name: string, totalSold: number, revenue: number, lastPrice: number, stock: number }> = {};
@@ -75,7 +70,7 @@ const Products = () => {
     }
 
     return result.sort((a, b) => b.totalSold - a.totalSold);
-  }, [dateRange, searchTerm, ordersData]);
+  }, [dateRange, searchTerm, ordersData, stockData]);
 
   // Pagination logic
   const totalPages = Math.ceil(productsData.length / itemsPerPage);
@@ -97,7 +92,10 @@ const Products = () => {
         <div className="flex flex-col sm:flex-row gap-3">
           <DateRangePicker 
             dateRange={dateRange} 
-            onChange={setDateRange} 
+            onChange={(range) => {
+              setDateRange(range);
+              setCurrentPage(1);
+            }}
           />
           
           <div className="relative">
@@ -106,7 +104,10 @@ const Products = () => {
               type="text" 
               placeholder="Buscar por nome ou ID..." 
               value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setCurrentPage(1);
+              }}
               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"
             />
           </div>

src/types.ts

@@ -11,6 +11,14 @@ export interface OrderData {
   Fone_Cliente?: string;
 }
 
+export interface StockData {
+  produto_id: string;
+  nome: string;
+  saldo: number;
+  delta_estoque: number;
+  updated_at?: string;
+}
+
 export interface DateRange {
   start: Date;
   end: Date;