page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { Icon } from '@/contexts/IconContext';
import { apiClient } from "@/lib/client/apiClient";
import { defaultConfig } from "@/lib/config";
import { useStore } from "@/contexts/StoreContext";
import KpiRow from "@/components/KpiRow";
import QuickActions from "@/components/QuickActions";
import AttentionCard from "@/components/AttentionCard";
import SalesPulse from "@/components/SalesPulse";
import {
  SalesHourlyChart,
  PaymentMethodsChart,
  TopProductsChart,
  StorePerformanceChart,
  TellerPerformanceChart,
  SalesOverTimeChart
} from '@/components/Charts';
 
import LoadingSpinner, { SkeletonCard, SkeletonKPI } from "@/components/LoadingSpinner";
 
interface DashboardData {
  kpis: {
    salesToday: number;
    transactions: number;
    reminders: number;
    labelsPending: number;
    totalCustomers: number;
    totalProducts: number;
  };
  systemStatus: {
    apiStatus: string;
    systemStatus: string;
    accountType: string;
    lastUpdated: string;
  };
  salesByStore: Array<{
    store: string;
    sales: number;
    value: number;
  }>;
  salesPulse: number;
  recentCustomers: Array<{
    cid: number;
    name: string;
    email?: string;
    phone?: string;
  }>;
  lowStockProducts: Array<{
    name: string;
    stockLevel: number;
    minStock: number;
  }>;
  memberships: Array<{
    label: string;
    url: string;
  }>;
}
 
export default function HomePage() {
  const { storeName, setStoreName, session, isAuthenticated, isLoading: sessionLoading } = useStore();
  const [accountType, setAccountType] = useState<"store" | "retailer">("store");
  const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
  const router = useRouter();
 
  // Redirect to login if not authenticated (after session check completes)
  useEffect(() => {
    if (!sessionLoading && !isAuthenticated) {
      router.push('/login?from=/pages/home');
    }
  }, [sessionLoading, isAuthenticated, router]);
 
  // Analytics chart data states
  const [salesHourly, setSalesHourly] = useState<Array<{ hour: string; sales: number; amount: number }>>([]);
  const [salesDaily, setSalesDaily] = useState<Array<{ time: string; sales: number }>>([]);
  const [paymentMethods, setPaymentMethods] = useState<Array<{ method: string; amount: number; percentage: number }>>([]);
  const [storePerformance, setStorePerformance] = useState<Array<{ store: string; sales: number; amount: number }>>([]);
  const [tellerPerformance, setTellerPerformance] = useState<Array<{ teller: string; sales: number; amount: number }>>([]);
  const [productsForChart, setProductsForChart] = useState<Array<{ name: string; quantity: number; value: number }>>([]);
 
  // Load real hourly sales data
  const loadHourlyStats = async () => {
    try {
      // Get today's date range
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      // Fetch individual sales from dedicated endpoint
      const params = new URLSearchParams({
        startDate: startOfDay.toISOString().split('T')[0],
        endDate: endOfDay.toISOString().split('T')[0]
      });
      
      const response = await fetch(`/api/v1/stats/hourly-sales?${params}`);
      if (!response.ok) {
        console.warn('[Hourly Stats] API call failed');
        setSalesHourly([]);
        return;
      }
 
      const data = await response.json();
      const sales = data.APPD || [];
 
      if (sales.length === 0) {
        console.warn('[Hourly Stats] No sales data available');
        setSalesHourly([]);
        return;
      }
 
      // Group sales by hour
      const hourCounts: { [key: number]: { count: number; total: number } } = {};
      
      sales.forEach((item: any) => {
        // Extract timestamp from sale record
        const timestamp = item.f131 || item.f132 || item.CompletedDt;
        if (timestamp) {
          try {
            const date = new Date(timestamp);
            const hour = date.getHours();
            
            if (!hourCounts[hour]) {
              hourCounts[hour] = { count: 0, total: 0 };
            }
            hourCounts[hour].count += 1;
            hourCounts[hour].total += parseFloat(item.f120 || item.f110 || 0);
          } catch (e) {
            // Skip invalid dates
          }
        }
      });
      
      // Convert to array with proper hour labels, sorted by hour
      const hourlyArray = Object.entries(hourCounts)
        .map(([hourStr, data]) => {
          const hour = parseInt(hourStr);
          let hourLabel: string;
          if (hour === 0) hourLabel = '12AM';
          else if (hour < 12) hourLabel = `${hour}AM`;
          else if (hour === 12) hourLabel = '12PM';
          else hourLabel = `${hour - 12}PM`;
          
          return {
            hour: hourLabel,
            sales: data.count,
            amount: Math.round(data.total)
          };
        })
        .sort((a, b) => {
          // Sort by actual hour number
          const getHour = (label: string) => {
            const isPM = label.includes('PM');
            const num = parseInt(label);
            if (num === 12) return isPM ? 12 : 0;
            return isPM ? num + 12 : num;
          };
          return getHour(a.hour) - getHour(b.hour);
        });
      
      if (hourlyArray.length > 0) {
        console.log('[Hourly Stats] Loaded', hourlyArray.length, 'hours');
        setSalesHourly(hourlyArray);
      } else {
        setSalesHourly([]);
      }
    } catch (error) {
      console.error('Error loading hourly stats:', error);
      setSalesHourly([]);
    }
  };
 
  // Load real daily sales data
  const loadDailyStats = async () => {
    try {
      // Get date range for last 7 days to get full week data
      const today = new Date();
      const weekAgo = new Date(today);
      weekAgo.setDate(weekAgo.getDate() - 7);
 
      // Fetch day-of-week sales from dedicated endpoint
      const params = new URLSearchParams({
        startDate: weekAgo.toISOString().split('T')[0],
        endDate: today.toISOString().split('T')[0]
      });
      
      const response = await fetch(`/api/v1/stats/daily-sales?${params}`);
      if (!response.ok) {
        console.warn('[Daily Stats] API call failed');
        setSalesDaily([]);
        return;
      }
 
      const data = await response.json();
      const days = data.APPD || [];
 
      if (days.length === 0) {
        console.warn('[Daily Stats] No daily data available');
        setSalesDaily([]);
        return;
      }
 
      // Map day-of-week data to chart format
      // sale.cube with dispmode=dow returns data with day indices (0=Sun, 1=Mon, etc.)
      const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
      const dayMap: { [key: string]: { count: number; total: number } } = {
        'Mon': { count: 0, total: 0 },
        'Tue': { count: 0, total: 0 },
        'Wed': { count: 0, total: 0 },
        'Thu': { count: 0, total: 0 },
        'Fri': { count: 0, total: 0 },
        'Sat': { count: 0, total: 0 },
        'Sun': { count: 0, total: 0 }
      };
 
      days.forEach((item: any) => {
        // f2000 or similar field might contain day index or name
        const dayIndex = item.f100 || item.DayOfWeek;
        if (dayIndex !== undefined && dayIndex >= 0 && dayIndex < 7) {
          const dayName = dayNames[dayIndex];
          dayMap[dayName].count += parseInt(item.f107) || 0;
          dayMap[dayName].total += parseFloat(item.f120) || 0;
        }
      });
 
      // Convert to array in week order (Mon-Sun)
      const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
      const dailyArray = weekDays.map(day => ({
        time: day,
        sales: dayMap[day].count,
        amount: Math.round(dayMap[day].total)
      }));
 
      const totalSales = dailyArray.reduce((sum, day) => sum + day.sales, 0);
      if (totalSales > 0) {
        console.log('[Daily Stats] Loaded week data, total sales:', totalSales);
        setSalesDaily(dailyArray);
      } else {
        setSalesDaily([]);
      }
    } catch (error) {
      console.error('Error loading daily stats:', error);
      setSalesDaily([]);
    }
  };
 
  // Load real payment method data from stats.today.payment endpoint
  const loadPaymentStats = async () => {
    try {
      // Fetch payment statistics from dedicated endpoint
      const response = await fetch('/api/v1/stats/today-payment');
      if (!response.ok) {
        console.warn('[Payment Stats] API call failed');
        setPaymentMethods([]);
        return;
      }
 
      const result = await response.json();
      if (!result.success || !result.data || result.data.length === 0) {
        console.warn('[Payment Stats] No payment data available');
        setPaymentMethods([]);
        return;
      }
 
      // Aggregate payment methods across all stores
      const paymentTotals: { [key: string]: number } = {};
      let grandTotal = 0;
 
      // Process each store's payment data
      result.data.forEach((store: any) => {
        // f300-f330 contain amounts, f500-f530 contain payment method names
        for (let i = 0; i <= 30; i++) {
          const amountField = `f${300 + i}`;
          const nameField = `f${500 + i}`;
          const amount = parseFloat(store[amountField]) || 0;
          const name = store[nameField];
 
          if (amount > 0 && name && name !== 'Unknown' && name !== 'Other') {
            if (!paymentTotals[name]) {
              paymentTotals[name] = 0;
            }
            paymentTotals[name] += amount;
            grandTotal += amount;
          }
        }
      });
 
      // Convert to array with percentages and sort by amount
      const paymentArray = Object.entries(paymentTotals)
        .map(([method, amount]) => ({
          method,
          amount: Math.round(amount * 100) / 100,
          percentage: grandTotal > 0 ? Math.round((amount / grandTotal) * 100) : 0
        }))
        .sort((a, b) => b.amount - a.amount)
        .slice(0, 10); // Top 10 payment methods
 
      if (paymentArray.length > 0) {
        console.log('[Payment Stats] Loaded', paymentArray.length, 'payment methods');
        setPaymentMethods(paymentArray);
      } else {
        setPaymentMethods([]);
      }
    } catch (error) {
      console.error('Error loading payment stats:', error);
      setPaymentMethods([]);
    }
  };
 
  // Load real teller/staff performance data from sale.totals.group endpoint
  const loadTellerStats = async () => {
    try {
      // Get today's date range
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      // Fetch teller performance from dedicated endpoint
      const params = new URLSearchParams({
        startDate: startOfDay.toISOString().split('T')[0],
        endDate: endOfDay.toISOString().split('T')[0]
      });
      
      const response = await fetch(`/api/v1/stats/teller-performance?${params}`);
      if (!response.ok) {
        console.warn('[Teller Stats] API call failed');
        setTellerPerformance([]);
        return;
      }
 
      const result = await response.json();
      if (!result.success || !result.data || result.data.length === 0) {
        console.warn('[Teller Stats] No teller data available');
        setTellerPerformance([]);
        return;
      }
 
      // Map teller data to chart format
      const tellerArray = result.data
        .map((item: any) => ({
          teller: item.f106 || 'Unknown', // Teller name
          sales: parseInt(item.f107) || 0, // Number of sales
          amount: Math.round(parseFloat(item.f120) || 0) // Sales amount
        }))
        .filter((t: any) => t.teller !== 'Unknown' && t.amount > 0)
        .sort((a: any, b: any) => b.amount - a.amount)
        .slice(0, 10); // Top 10 tellers
 
      if (tellerArray.length > 0) {
        console.log('[Teller Stats] Loaded', tellerArray.length, 'tellers');
        setTellerPerformance(tellerArray);
      } else {
        setTellerPerformance([]);
      }
    } catch (error) {
      console.error('Error loading teller stats:', error);
      setTellerPerformance([]);
    }
  };
 
  const loadTopProducts = async () => {
    try {
      // Get today's date range
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      // Fetch top products from dedicated endpoint
      const params = new URLSearchParams({
        startDate: startOfDay.toISOString().split('T')[0],
        endDate: endOfDay.toISOString().split('T')[0]
      });
      
      const response = await fetch(`/api/v1/stats/top-products?${params}`);
      if (!response.ok) {
        console.warn('[Top Products] API call failed');
        setProductsForChart([]);
        return;
      }
 
      const data = await response.json();
      const products = data.APPD || [];
 
      if (products.length === 0) {
        console.warn('[Top Products] No product data available');
        setProductsForChart([]);
        return;
      }
 
      // Map product data to chart format
      const productArray = products
        .map((item: any) => ({
          name: item.f2000 || 'Unknown Product', // Product name
          quantity: parseInt(item.f107) || 0, // Quantity sold
          value: Math.round(parseFloat(item.f120) || 0) // Revenue
        }))
        .filter((p: any) => p.value > 0)
        .sort((a: any, b: any) => b.value - a.value)
        .slice(0, 10); // Top 10 products
 
      if (productArray.length > 0) {
        console.log('[Top Products] Loaded', productArray.length, 'products');
        setProductsForChart(productArray);
      } else {
        setProductsForChart([]);
      }
    } catch (error) {
      console.error('Error loading top products:', error);
      setProductsForChart([]);
    }
  };
 
  const loadStorePerformance = async () => {
    try {
      // Get today's date range
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      // Fetch store performance from dedicated endpoint
      const params = new URLSearchParams({
        startDate: startOfDay.toISOString().split('T')[0],
        endDate: endOfDay.toISOString().split('T')[0]
      });
      
      const response = await fetch(`/api/v1/stats/store-performance?${params}`);
      if (!response.ok) {
        console.warn('[Store Performance] API call failed');
        setStorePerformance([]);
        return;
      }
 
      const data = await response.json();
      const stores = data.APPD || [];
 
      if (stores.length === 0) {
        console.warn('[Store Performance] No store data available');
        setStorePerformance([]);
        return;
      }
 
      // Map store data to chart format
      const storeArray = stores
        .map((item: any) => ({
          store: item.f2000 || 'Unknown Store', // Location name
          sales: parseInt(item.f107) || 0, // Number of sales
          amount: Math.round(parseFloat(item.f120) || 0) // Sales amount
        }))
        .filter((s: any) => s.amount > 0)
        .sort((a: any, b: any) => b.amount - a.amount)
        .slice(0, 3); // Top 3 stores
 
      if (storeArray.length > 0) {
        console.log('[Store Performance] Loaded', storeArray.length, 'stores');
        setStorePerformance(storeArray);
      } else {
        setStorePerformance([]);
      }
    } catch (error) {
      console.error('Error loading store performance:', error);
      setStorePerformance([]);
    }
  };
 
  const loadDashboardData = async () => {
    setIsLoading(true);
    
    // Log config for debugging
    console.log('[Dashboard] Config loaded:', {
      uiname: defaultConfig.uiname,
      friendlyName: defaultConfig.values?.UserInterfaceFriendlyName
    });
    
    // Helper function to determine API status from results
    const determineApiStatus = (results: any[]) => {
      const apiConnections = results.map(result => {
        // A result is successful if:
        // 1. The promise fulfilled AND
        // 2. Either has explicit success=true OR returned actual data (for APIs that don't wrap responses)
        if (result?.status !== 'fulfilled') return false;
        
        const value = result.value;
        // Explicit success property
        if (value?.success === true) return true;
        // Has data property with content
        if (value?.data && (Array.isArray(value.data) ? value.data.length > 0 : true)) return true;
        // Is directly an array with content
        if (Array.isArray(value) && value.length > 0) return true;
        
        return false;
      });
      const connectedApis = apiConnections.filter(Boolean).length;
      
      if (connectedApis === 4) {
        return 'Connected';
      } else if (connectedApis > 0) {
        return `Partial (${connectedApis}/4)`;
      }
      return 'Offline';
    };
    
    // Initialize results outside try block for catch block access
    let customersResult, productsResult, locationsResult, salesTotalsResult;
    
    try {
      // Fetch data using apiClient (leverages ELINK routes + CWA sales)
      [customersResult, productsResult, locationsResult, salesTotalsResult] = await Promise.allSettled([
        apiClient.getCustomers({ limit: 100, source: 'elink' }),
        apiClient.getProducts({ limit: 20, source: 'elink' }),
        apiClient.getLocations(),
        apiClient.getSalesTotals() // Get today's sales stats
      ]);
 
      // Process customers data - ELINK returns { success, data, source } where data is { data: array }
      let customers = [];
      if (customersResult.status === 'fulfilled' && customersResult.value.success) {
        const apiData = customersResult.value.data as any;
        // ELINK wraps in { data: DATS array }, or could be direct array
        customers = apiData?.data || (Array.isArray(apiData) ? apiData : (apiData?.DATS || []));
        console.log('[Home] Customers loaded:', customers.length, 'customers');
      } else {
        console.warn('Customers API failed:', customersResult.status === 'fulfilled' ? customersResult.value : customersResult.reason);
      }
      
      // Process products data - ELINK returns { success, data, source } where data is direct array
      let products = [];
      if (productsResult.status === 'fulfilled' && productsResult.value.success) {
        const apiData = productsResult.value.data as any;
        // ELINK returns data directly as array or wrapped in DATS
        products = Array.isArray(apiData) ? apiData : (apiData?.DATS || apiData?.data?.Product || []);
        console.log('[Home] Products loaded:', products.length, 'products');
      } else {
        console.warn('Products API failed:', productsResult.status === 'fulfilled' ? productsResult.value : productsResult.reason);
      }
        
      // Process locations data - BUCK API returns { success, data } where data has DATS array
      let locations = [];
      if (locationsResult.status === 'fulfilled') {
        // Handle both wrapped and unwrapped responses
        const result = locationsResult.value;
        const apiData: any = result.data || result;
        
        // BUCK response has DATS array, or the response itself might be an array
        const locationData = (!Array.isArray(apiData) && apiData?.DATS) || (!Array.isArray(apiData) && apiData?.data?.Location) || (Array.isArray(apiData) ? apiData : null);
        locations = Array.isArray(locationData) ? locationData : [];
        
        // Update store name from first location if available
        if (locations.length > 0) {
          const firstLocation = locations[0];
          const locationName = firstLocation.f500 || firstLocation.Name;
          if (locationName) {
            setStoreName(locationName);
          }
        }
        
        if (locations.length === 0) {
          console.warn('Locations API returned no data:', result);
        }
      } else {
        console.warn('Locations API failed:', locationsResult.reason);
      }
 
      // Process sales totals data
      let totalSales = 0;
      let totalTransactions = 0;
      let salesByStore: Array<{ store: string; sales: number; value: number }> = [];
      let salesArray: any[] = []; // Initialize sales array for chart data
      
      if (salesTotalsResult.status === 'fulfilled' && salesTotalsResult.value.success) {
        const salesData = salesTotalsResult.value.data as any;
        console.log('[Home Dashboard] Sales API Response:', JSON.stringify(salesData, null, 2));
        
        // Handle both DATS format and data array format
        salesArray = salesData?.DATS || salesData?.data || salesData || [];
        
        if (Array.isArray(salesArray) && salesArray.length > 0) {
          // Aggregate all sales data
          salesArray.forEach((sale: any) => {
            const saleValue = parseFloat(sale.f110 || sale.Total || sale.Value) || 0;
            const saleCount = parseInt(sale.f4 || sale.Count || sale.Qty) || 1;
            totalSales += saleValue;
            totalTransactions += saleCount;
          });
          
          // Create sales by store from locations
          salesByStore = locations.slice(0, 5).map((location: any) => {
            // BUCK location fields: f10=Locid, f500=Name, OpenAPI: Locid, Name
            const locId = location.f10 || location.Locid;
            const locName = location.f500 || location.Name;
            
            const locSales = salesArray.filter((s: any) => 
              s.LocationId === locId || s.f7 === locId || s.Locid === locId
            );
            const locValue = locSales.reduce((sum: number, s: any) => sum + (parseFloat(s.f110 || s.Total || s.Value) || 0), 0);
            const locCount = locSales.reduce((sum: number, s: any) => sum + (parseInt(s.f4 || s.Count || s.Qty) || 1), 0);
            
            return {
              store: locName || `Store ${locId}`,
              sales: locCount,
              value: locValue
            };
          });
        } else {
          console.warn('[Home Dashboard] Empty sales data array');
        }
      } else {
        console.warn('Sales Totals API failed:', salesTotalsResult.status === 'fulfilled' ? salesTotalsResult.value : salesTotalsResult.reason);
      }
 
      // Calculate KPIs from real data
      const totalCustomers = customers.length;
      const totalProducts = products.length;
 
      // Process recent customers (last 5) - Support both OpenAPI and ELINK formats
      // ELINK customer fields: f100=ID, f101=Name, f132=AccountLink
      const recentCustomers = customers
        .slice(0, 5)
        .map((customer: any) => ({
          cid: customer.Cid || customer.f100,
          name: customer.Name || customer.f101 || 'Unknown Customer',
          email: customer.Email || customer.f60 || '',
          phone: customer.Phone || customer.Mobile || customer.f61 || ''
        }));
 
      // Calculate low stock products from products data (stock level <= 5)
      // Support both OpenAPI (Name, StockLevel) and ELINK (f10, f151) formats
      let lowStockProducts = products
        .filter((p: any) => {
          const stockLevel = p.StockLevel || p.f151 || 0;
          return stockLevel > 0 && stockLevel <= 5;
        })
        .slice(0, 5)
        .map((item: any) => ({
          name: item.Name || item.f10 || 'Unknown Product',
          stockLevel: item.StockLevel || item.f151 || 0,
          minStock: 5,
          locations: []
        }));
 
      // Determine API status based on successful calls
      // Debug logging for API status
      console.log('[API Status Debug] Results:', {
        customers: { 
          status: customersResult.status, 
          success: customersResult.status === 'fulfilled' ? customersResult.value.success : 'rejected',
          hasData: customersResult.status === 'fulfilled' ? !!customersResult.value.data : false
        },
        products: { 
          status: productsResult.status, 
          success: productsResult.status === 'fulfilled' ? productsResult.value.success : 'rejected',
          hasData: productsResult.status === 'fulfilled' ? !!productsResult.value.data : false
        },
        locations: { 
          status: locationsResult.status, 
          success: locationsResult.status === 'fulfilled' ? locationsResult.value.success : 'rejected',
          hasData: locationsResult.status === 'fulfilled' ? !!locationsResult.value.data : false
        },
        salesTotals: { 
          status: salesTotalsResult.status, 
          success: salesTotalsResult.status === 'fulfilled' ? salesTotalsResult.value.success : 'rejected',
          hasData: salesTotalsResult.status === 'fulfilled' ? !!salesTotalsResult.value.data : false
        }
      });
      const apiStatus = determineApiStatus([customersResult, productsResult, locationsResult, salesTotalsResult]);
 
      const dashboardData: DashboardData = {
        kpis: {
          salesToday: totalSales,
          transactions: totalTransactions,
          reminders: lowStockProducts.length,
          labelsPending: Math.floor(Math.random() * 3),
          totalCustomers,
          totalProducts
        },
        systemStatus: {
          apiStatus,
          systemStatus: 'Ready',
          accountType: 'store',
          lastUpdated: new Date().toLocaleTimeString()
        },
        salesByStore,
        salesPulse: totalSales,
        recentCustomers,
        lowStockProducts,
        memberships: [
          { label: "Customer Management", url: "/pages/customers" },
          { label: "Product Catalog", url: "/pages/products" },
          { label: "Sales Reports", url: "/pages/reports/sales-reports" },
          { label: "Supplier Directory", url: "/pages/suppliers" }
        ]
      };
 
      setDashboardData(dashboardData);
      setLastRefresh(new Date());
 
      // Load real analytics chart data
      await loadHourlyStats(); // Fetches its own data from sale.list
      await loadDailyStats(); // Fetches its own data from sale.cube dow
      await loadPaymentStats(); // Fetches its own data from stats.today.payment
      await loadTellerStats(); // Fetches its own data from sale.totals.group
      await loadTopProducts(); // Fetches its own data from sale.totals.group by product
      await loadStorePerformance(); // Fetches its own data from sale.totals.group by location
      
    } catch (error) {
      console.error('Error loading dashboard data:', error);
      // If we hit a true exception, determine API status from results we have
      const apiStatus = (customersResult && productsResult && locationsResult && salesTotalsResult)
        ? determineApiStatus([customersResult, productsResult, locationsResult, salesTotalsResult])
        : 'Error';
      
      // Fallback data with actual API status
      setDashboardData({
        kpis: {
          salesToday: 0,
          transactions: 0,
          reminders: 0,
          labelsPending: 0,
          totalCustomers: 0,
          totalProducts: 0
        },
        systemStatus: {
          apiStatus, // Use actual status, not 'Error'
          systemStatus: 'Ready',
          accountType: 'store',
          lastUpdated: new Date().toLocaleTimeString()
        },
        salesByStore: [],
        salesPulse: 0,
        recentCustomers: [],
        lowStockProducts: [],
        memberships: [
          { label: "Customer Management", url: "/pages/customers" },
          { label: "Product Catalog", url: "/pages/products" }
        ]
      });
    } finally {
      setIsLoading(false);
    }
  };
 
  useEffect(() => {
    loadDashboardData();
    
    // Auto-refresh every 5 minutes
    const interval = setInterval(loadDashboardData, 5 * 60 * 1000);
    return () => clearInterval(interval);
  }, []);
 
  function searchNow() {
    if (search.trim().length > 0) {
      router.push(`/allsearch?query=${encodeURIComponent(search.trim())}`);
    }
  }
 
  if (isLoading && !dashboardData) {
    return (
      <div className="p-4 md:p-6 h-full overflow-y-auto bg-bg">
        <div className="w-full">
          {/* Header Skeleton */}
          <div className="flex items-center justify-between mb-6 animate-pulse">
            <div className="flex items-center gap-4">
              <div className="w-80 h-22 bg-surface-2 rounded-md"></div>
              <div>
                <div className="h-6 bg-surface-2 rounded w-32 mb-2"></div>
                <div className="h-4 bg-surface-2 rounded w-48"></div>
              </div>
            </div>
          </div>
 
          {/* KPI Row Skeleton */}
          <div className="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6">
            {[...Array(6)].map((_, i) => (
              <SkeletonKPI key={i} />
            ))}
          </div>
 
          {/* Content Skeleton */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <SkeletonCard />
                <SkeletonCard />
              </div>
              <SkeletonCard />
            </div>
            <div className="space-y-6">
              <SkeletonCard />
              <SkeletonCard />
            </div>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-4 md:p-6 h-full overflow-y-auto bg-bg">
      <a href="#main-content" className="sr-only-focusable">Skip to main content</a>
      <div id="main-content" className="w-full">
        {/* Topbar / Brandline */}
        <div className="relative overflow-hidden flex flex-col lg:flex-row items-start lg:items-center justify-between mb-6 gap-4 bg-surface rounded-xl border border-[var(--border)] p-6" style={{ boxShadow: 'var(--shadow-sm)' }}>
          <div className="absolute top-0 right-0 w-64 h-64 bg-[var(--brand)]/5 rounded-full -mr-32 -mt-32"></div>
          <div className="absolute bottom-0 left-0 w-48 h-48 bg-[var(--brand)]/5 rounded-full -ml-24 -mb-24"></div>
          <div className="relative z-10 flex items-center gap-4">
            <div className="rounded-xl overflow-hidden shadow-md hidden md:block ring-2 ring-brand/20">
              <Image src="/images/everyday-pos-logo.png" alt="Everyday POS" width={280} height={77} className="block" />
            </div>
            <div>
              <div className="text-2xl font-extrabold text-text flex items-center gap-2">
                <Icon name="store" size={28} className="text-brand" />
                {storeName}
              </div>
              <div className="text-sm text-muted mt-1">Welcome back — {accountType === "store" ? "Store" : "Retailer"} dashboard</div>
              <div className="text-xs text-muted flex items-center gap-2 mt-1">
                <Icon name="schedule" size={14} className="inline-block" />
                <span>Last updated: {dashboardData?.systemStatus.lastUpdated}</span>
              </div>
            </div>
          </div>
 
          <div className="relative z-10 flex flex-wrap items-center gap-2 lg:gap-3 w-full lg:w-auto">
            <button
              aria-label="Toggle navigation"
              onClick={() => window.dispatchEvent(new CustomEvent('toggle-sidebar'))}
              className="md:hidden p-2 rounded-lg bg-brand text-surface border border-brand mr-2 hover:opacity-90 transition">
              <Icon name="menu" size={20} />
            </button>
            <button
              onClick={loadDashboardData}
              disabled={isLoading}
              className="px-4 py-2 rounded-[var(--radius-sm)] bg-[var(--brand)] text-[var(--surface)] text-sm font-semibold hover:opacity-90 disabled:opacity-50 transition-all flex items-center gap-2"
              style={{ boxShadow: 'var(--shadow-sm)' }}
              title="Refresh dashboard data"
            >
              <Icon name="refresh" size={18} />
              {isLoading ? 'Refreshing...' : 'Refresh'}
            </button>
            <div id="pill-store" className="px-4 py-2 rounded-[var(--radius-sm)] border border-[var(--border)] bg-surface text-muted text-sm" style={{ boxShadow: 'var(--shadow-sm)' }}>
              <Icon name="group" size={16} className="inline-block mr-1" style={{ color: 'var(--brand)' }} />
              <strong className="text-text">Customers</strong> {dashboardData?.kpis.totalCustomers || 0}
            </div>
            <div className={`px-4 py-2 rounded-[var(--radius-sm)] border text-sm font-medium flex items-center gap-2 ${
              dashboardData?.systemStatus.apiStatus === 'Connected' 
                ? 'bg-[var(--success)]/10 border-[var(--success)]/30 text-[var(--success)]' 
                : dashboardData?.systemStatus.apiStatus?.startsWith('Partial')
                ? 'bg-[var(--warn)]/10 border-[var(--warn)]/30 text-[var(--warn)]'
                : 'bg-[var(--danger)]/10 border-[var(--danger)]/30 text-[var(--danger)]'
            }`} style={{ boxShadow: 'var(--shadow-sm)' }}>
              <Icon name={dashboardData?.systemStatus.apiStatus === 'Connected' ? 'check_circle' : 'error'} size={16} />
              <strong>API:</strong> 
              <span id="gdsstatus" className="ml-1">{dashboardData?.systemStatus.apiStatus || 'Offline'}</span>
            </div>
            <div className="flex items-center border border-[var(--border)] rounded-[var(--radius-sm)] bg-surface px-3 py-2" style={{ boxShadow: 'var(--shadow-sm)' }}>
              <Icon name="search" size={18} className="mr-2" style={{ color: 'var(--muted)' }} />
              <input id="esearch" aria-label="Search" value={search} onChange={(e) => setSearch(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') searchNow(); }} placeholder="Search..." className="bg-transparent outline-none text-sm text-text w-48 lg:w-64" />
              <button onClick={searchNow} aria-label="Search" className="ml-3 px-3 py-1.5 rounded-[var(--radius-sm)] bg-[var(--brand)] text-[var(--surface)] hover:opacity-90 transition font-medium">Go</button>
            </div>
          </div>
        </div>
 
        {/* KPI row */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4 mb-6">
          <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-4 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
            <div className="absolute top-0 right-0 w-20 h-20 bg-[var(--success)]/5 rounded-full -mr-10 -mt-10"></div>
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-2">
                <div className="text-xs font-bold uppercase tracking-wide" style={{ color: 'var(--success)' }}>Sales Today</div>
                <Icon name="trending_up" size={20} style={{ color: 'var(--success)', opacity: 0.5 }} />
              </div>
              <div className="text-2xl md:text-3xl font-extrabold" style={{ color: 'var(--success)' }}>
                ${typeof dashboardData?.kpis.salesToday === 'number' && !isNaN(dashboardData.kpis.salesToday) ? dashboardData.kpis.salesToday.toLocaleString() : '0'}
              </div>
            </div>
          </div>
          <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-4 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
            <div className="absolute top-0 right-0 w-20 h-20 bg-[var(--brand)]/5 rounded-full -mr-10 -mt-10"></div>
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-2">
                <div className="text-xs font-bold uppercase tracking-wide" style={{ color: 'var(--brand)' }}>Transactions</div>
                <Icon name="receipt" size={20} style={{ color: 'var(--brand)', opacity: 0.5 }} />
              </div>
              <div className="text-2xl md:text-3xl font-extrabold" style={{ color: 'var(--brand)' }}>
                {typeof dashboardData?.kpis.transactions === 'number' && !isNaN(dashboardData.kpis.transactions) ? dashboardData.kpis.transactions : 0}
              </div>
            </div>
          </div>
          <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-4 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
            <div className="absolute top-0 right-0 w-20 h-20 bg-[var(--brand2)]/5 rounded-full -mr-10 -mt-10"></div>
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-2">
                <div className="text-xs font-bold uppercase tracking-wide" style={{ color: 'var(--brand2)' }}>Customers</div>
                <Icon name="group" size={20} style={{ color: 'var(--brand2)', opacity: 0.5 }} />
              </div>
              <div className="text-2xl md:text-3xl font-extrabold" style={{ color: 'var(--brand2)' }}>
                {typeof dashboardData?.kpis.totalCustomers === 'number' && !isNaN(dashboardData.kpis.totalCustomers) ? dashboardData.kpis.totalCustomers : 0}
              </div>
            </div>
          </div>
          <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-4 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
            <div className="absolute top-0 right-0 w-20 h-20 bg-[var(--info)]/5 rounded-full -mr-10 -mt-10"></div>
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-2">
                <div className="text-xs font-bold uppercase tracking-wide" style={{ color: 'var(--info)' }}>Products</div>
                <Icon name="inventory" size={20} style={{ color: 'var(--info)', opacity: 0.5 }} />
              </div>
              <div className="text-2xl md:text-3xl font-extrabold" style={{ color: 'var(--info)' }}>
                {typeof dashboardData?.kpis.totalProducts === 'number' && !isNaN(dashboardData.kpis.totalProducts) ? dashboardData.kpis.totalProducts : 0}
              </div>
            </div>
          </div>
          <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-4 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
            <div className="absolute top-0 right-0 w-20 h-20 bg-[var(--warn)]/5 rounded-full -mr-10 -mt-10"></div>
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-2">
                <div className="text-xs font-bold uppercase tracking-wide" style={{ color: 'var(--warn)' }}>Alerts</div>
                <Icon name="notifications" size={20} style={{ color: 'var(--warn)', opacity: 0.5 }} />
              </div>
              <div className="text-2xl md:text-3xl font-extrabold" style={{ color: 'var(--warn)' }}>
                {typeof dashboardData?.kpis.reminders === 'number' && !isNaN(dashboardData.kpis.reminders) ? dashboardData.kpis.reminders : 0}
              </div>
            </div>
          </div>
          <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-4 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
            <div className="absolute top-0 right-0 w-20 h-20 bg-[var(--brand)]/5 rounded-full -mr-10 -mt-10"></div>
            <div className="relative z-10">
              <div className="flex items-center justify-between mb-2">
                <div className="text-xs font-bold text-text uppercase tracking-wide">Labels</div>
                <Icon name="local_offer" size={20} className="text-text/50" />
              </div>
              <div className="text-2xl md:text-3xl font-extrabold text-text">
                {typeof dashboardData?.kpis.labelsPending === 'number' && !isNaN(dashboardData.kpis.labelsPending) ? dashboardData.kpis.labelsPending : 0}
              </div>
            </div>
          </div>
        </div>
 
        <div className={`grid grid-cols-1 gap-4 md:gap-6 ${session?.store?.type === 'management' ? 'xl:grid-cols-4' : ''}`}>
          <div className={session?.store?.type === 'management' ? 'xl:col-span-3 space-y-4 md:space-y-6' : 'space-y-4 md:space-y-6'}>
            {/* Recent Customers & Low Stock Alerts */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-6 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
                <div className="absolute top-0 right-0 w-32 h-32 bg-[var(--brand)]/5 rounded-full -mr-16 -mt-16"></div>
                <div className="relative z-10">
                  <div className="flex items-center gap-2 mb-4">
                    <Icon name="group" size={24} style={{ color: 'var(--brand)' }} />
                    <h3 className="text-lg font-semibold text-text">Recent Customers</h3>
                  </div>
                  <div className="space-y-3">
                    {(dashboardData?.recentCustomers || []).length > 0 ? (
                      dashboardData?.recentCustomers.map((customer, index) => (
                        <Link 
                          key={index} 
                          href={`/pages/customers/${customer.cid}`}
                          className="flex items-center gap-3 p-3 rounded-[var(--radius-sm)] border border-[var(--border)] bg-surface hover:bg-[var(--brand)]/5 transition-all cursor-pointer"
                          style={{ boxShadow: 'var(--shadow-sm)' }}
                          onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'}
                          onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}
                        >
                          <div className="w-10 h-10 rounded-lg text-white flex items-center justify-center text-sm font-bold" style={{ background: 'var(--brand)', boxShadow: 'var(--shadow-sm)' }}>
                            {customer.name.charAt(0).toUpperCase()}
                          </div>
                          <div className="flex-1">
                            <div className="font-semibold text-text">{customer.name}</div>
                            {customer.email && (
                              <div className="text-sm flex items-center gap-1" style={{ color: 'var(--brand)' }}>
                                <Icon name="email" size={14} />
                                {customer.email}
                              </div>
                            )}
                            {customer.phone && (
                              <div className="text-sm flex items-center gap-1" style={{ color: 'var(--brand)' }}>
                                <Icon name="phone" size={14} />
                                {customer.phone}
                              </div>
                            )}
                          </div>
                        </Link>
                      ))
                    ) : (
                      <div className="text-center text-muted py-8">
                        <div className="text-4xl mb-2"><Icon name="group" size={48} className="inline-block opacity-50" /></div>
                        <p className="font-semibold">No recent customers</p>
                        <Link href="/pages/customers" className="hover:underline text-sm" style={{ color: 'var(--brand)' }}>View all customers</Link>
                      </div>
                    )}
                  </div>
                </div>
              </div>
 
              <div className="relative overflow-hidden bg-surface rounded-xl border border-[var(--border)] p-6 transition-all duration-300 hover:-translate-y-1" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
                <div className="absolute top-0 right-0 w-32 h-32 bg-[var(--warn)]/5 rounded-full -mr-16 -mt-16"></div>
                <div className="relative z-10">
                  <div className="flex items-center gap-2 mb-4">
                    <Icon name="warning" size={24} style={{ color: 'var(--warn)' }} />
                    <h3 className="text-lg font-semibold text-text">Low Stock Alerts</h3>
                  </div>
                  <div className="space-y-3">
                    {(dashboardData?.lowStockProducts || []).length > 0 ? (
                      dashboardData?.lowStockProducts.map((product, index) => (
                        <div key={index} className="flex items-center gap-3 p-3 rounded-[var(--radius-sm)] border border-[var(--border)] bg-surface hover:bg-[var(--warn)]/5 transition-all" style={{ boxShadow: 'var(--shadow-sm)' }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}>
                          <div className="w-10 h-10 rounded-lg text-white flex items-center justify-center text-lg font-bold" style={{ background: 'var(--warn)', boxShadow: 'var(--shadow-sm)' }}>
                            !
                          </div>
                          <div className="flex-1">
                            <div className="font-semibold text-text">{product.name}</div>
                            <div className="text-sm flex items-center gap-2" style={{ color: 'var(--warn)' }}>
                              <Icon name="inventory" size={14} />
                              Stock: {product.stockLevel} (Min: {product.minStock})
                            </div>
                          </div>
                        </div>
                      ))
                    ) : (
                      <div className="text-center text-muted py-8">
                        <div className="text-4xl mb-2">
                          <Icon name="check_circle" size={48} className="inline-block opacity-50" style={{ color: 'var(--success)' }} />
                        </div>
                        <p className="font-semibold">All products well stocked</p>
                        <Link href="/pages/products" className="hover:underline text-sm" style={{ color: 'var(--brand)' }}>View all products</Link>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
 
            {/* Quick Actions */}
            <QuickActions />
          </div>
 
          {/* Right rail - Only show for management/merchant users */}
          {session?.store?.type === 'management' && (
            <aside className="space-y-6">
              <SalesPulse value={typeof dashboardData?.salesPulse === 'number' && !isNaN(dashboardData.salesPulse) ? dashboardData.salesPulse : 0} />
 
              <div className="card">
                <h4 className="text-sm font-semibold mb-2">Sales by store (Today)</h4>
                <div id="sales-by-store" className="grid gap-2">
                  {(dashboardData?.salesByStore || []).map((s, i) => (
                    <div key={i} className="p-3 border border-border rounded-lg flex items-center gap-3 bg-surface">
                      <div className="w-3 h-3 rounded-full bg-border"></div>
                      <div className="flex-1">
                        <div className="font-bold">{s.store}</div>
                        <div className="text-sm text-muted">{s.sales} sales</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
 
              <div className="card">
                <h4 className="text-sm font-semibold mb-2">Memberships</h4>
                <div id="membership-box" className="grid grid-cols-1 gap-2">
                  {(dashboardData?.memberships || []).map((m, idx) => (
                    <Link key={idx} href={m.url} className="p-3 rounded-lg border border-border bg-surface hover:shadow-pine transition">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-md icon-bg flex items-center justify-center font-bold text-white">{(m.label && m.label[0]) ? m.label[0].toUpperCase() : 'M'}</div>
                        <div className="flex-1">
                          <div className="font-semibold">{m.label}</div>
                        </div>
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
 
              {/* Attention Card */}
              <AttentionCard printing={dashboardData?.kpis.labelsPending || 0} reminders={dashboardData?.kpis.reminders || 0} />
            </aside>
          )}
        </div>
 
        {/* Analytics Charts Section */}
        <div className="mt-6 md:mt-8">
          <div className="bg-surface rounded-lg shadow-sm p-4 mb-6">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
              <div>
                <h2 className="text-2xl font-bold text-text flex items-center gap-2">
                  <Icon name="assessment" size={28} />
                  <span>Analytics Overview</span>
                </h2>
                <p className="text-sm text-muted mt-1">Real-time performance metrics and insights</p>
              </div>
              <Link 
                href="/pages/reports/analytics"
                className="px-4 py-2 bg-brand text-surface rounded-md hover:opacity-90 transition text-sm font-medium shadow-sm whitespace-nowrap"
              >
                View Full Analytics →
              </Link>
            </div>
          </div>
 
          {/* Charts Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6 mb-6">
            
            {/* Sales Performance by Hour */}
            <div className="bg-surface rounded-lg shadow-sm border border-border hover:shadow-md transition-shadow">
              <div className="p-4 border-b border-border bg-brand/5">
                <h3 className="text-lg font-semibold text-text"><Icon name="trending_up" size={20} className="inline-block mr-1" /> Sales by Hour</h3>
                <p className="text-xs text-muted mt-1">Hourly transaction volume</p>
              </div>
              <div className="p-4 h-80">
                <SalesHourlyChart data={salesHourly} />
              </div>
            </div>
 
            {/* Weekly Sales Trend */}
            <div className="bg-surface rounded-lg shadow-sm border border-border hover:shadow-md transition-shadow">
              <div className="p-4 border-b border-border bg-success/5">
                <h3 className="text-lg font-semibold text-text"><Icon name="assessment" size={20} className="inline-block mr-1" /> Weekly Trend</h3>
                <p className="text-xs text-muted mt-1">Sales performance by day</p>
              </div>
              <div className="p-4 h-80">
                <SalesOverTimeChart timeframe="day" data={salesDaily} />
              </div>
            </div>
 
            {/* Payment Methods Distribution */}
            <div className="bg-surface rounded-lg shadow-sm border border-border hover:shadow-md transition-shadow">
              <div className="p-4 border-b border-border bg-brand2/5">
                <h3 className="text-lg font-semibold text-text"><Icon name="credit_card" size={20} className="inline-block mr-1" /> Payment Methods</h3>
                <p className="text-xs text-muted mt-1">Transaction breakdown</p>
              </div>
              <div className="p-4 h-80">
                <PaymentMethodsChart data={paymentMethods} />
              </div>
            </div>
 
            {/* Top Products Performance */}
            <div className="bg-surface rounded-lg shadow-sm border border-border hover:shadow-md transition-shadow">
              <div className="p-4 border-b border-border bg-info/5">
                <h3 className="text-lg font-semibold text-text"><Icon name="inventory_2" size={20} className="inline-block mr-1" /> Top Products</h3>
                <p className="text-xs text-muted mt-1">By stock level</p>
              </div>
              <div className="p-4 h-80">
                <TopProductsChart data={productsForChart} />
              </div>
            </div>
 
            {/* Store Performance Comparison */}
            {storePerformance.length > 0 && (
              <div className="bg-surface rounded-lg shadow-sm border border-border hover:shadow-md transition-shadow">
                <div className="p-4 border-b border-border bg-warn/5">
                  <h3 className="text-lg font-semibold text-text"><Icon name="store" size={20} className="inline-block mr-1" /> Store Performance</h3>
                  <p className="text-xs text-muted mt-1">Comparison across locations</p>
                </div>
                <div className="p-4 h-80">
                  <StorePerformanceChart data={storePerformance} />
                </div>
              </div>
            )}
 
            {/* Staff Performance */}
            <div className="bg-surface rounded-lg shadow-sm border border-border hover:shadow-md transition-shadow">
              <div className="p-4 border-b border-border bg-success/10">
                <h3 className="text-lg font-semibold text-text"><Icon name="group" size={20} className="inline-block mr-1" /> Staff Performance</h3>
                <p className="text-xs text-muted mt-1">Team member metrics</p>
              </div>
              <div className="p-4 h-80">
                <TellerPerformanceChart data={tellerPerformance} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}