feat: display available stock balance on products page based on n8n inventory updates

src/components/Layout.tsx

@@ -2,7 +2,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 { fetchData, logout } from '../dataService';
+import { fetchData, fetchStock, logout } from '../dataService';
 
 const Layout = () => {
   const location = useLocation();
@@ -25,6 +25,7 @@ const Layout = () => {
   });
 
   const [ordersData, setOrdersData] = useState<OrderData[]>([]);
+  const [stockData, setStockData] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [refreshInterval, setRefreshInterval] = useState<number>(() => {
     const saved = localStorage.getItem('nexstar_refresh_interval');
@@ -33,8 +34,9 @@ const Layout = () => {
 
   const loadData = async (showLoading = false) => {
     if (showLoading) setIsLoading(true);
-    const data = await fetchData();
+    const [data, stock] = await Promise.all([fetchData(), fetchStock()]);
     setOrdersData(data);
+    setStockData(stock);
     if (showLoading) setIsLoading(false);
   };
 
@@ -146,7 +148,7 @@ const Layout = () => {
                 <Loader2 className="w-8 h-8 text-brand-primary animate-spin" />
              </div>
           ) : (
-             <Outlet context={{ dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData }} />
+             <Outlet context={{ dateRange, setDateRange, ordersData, stockData, refreshInterval, setRefreshInterval, loadData }} />
           )}
         </div>
       </main>