page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
import { apiClient } from '@/lib/client/apiClient';
import {
  SalesHourlyChart,
  PaymentMethodsChart,
  TopProductsChart,
  StorePerformanceChart,
  TellerPerformanceChart,
  SalesOverTimeChart
} from '@/components/Charts';
 
/**
 * Analytics Dashboard - Updated to use apiClient with new OpenAPI routes
 * 
 * This page now leverages the comprehensive OpenAPI routes implementation:
 * - Uses type-safe apiClient methods instead of raw fetch calls
 * - Properly handles OpenAPI response format: { success, data: { data: { Entity: [...] } } }
 * - Fetches real data from Customers, Products, and Locations endpoints
 */
 
interface DashboardData {
  customers: number;
  products: number;
  locations: number;
}
 
interface Product {
  Pid?: number;
  Name?: string;
  Barcode?: string;
  SellPrice?: number;
  StockLevel?: number;
}
 
interface Customer {
  Cid?: number;
  Name?: string;
  Phone?: string;
  Mobile?: string;
  Email?: string;
}
 
export default function AnalyticsDashboard() {
  const [dateRange, setDateRange] = useState('today');
  const [loading, setLoading] = useState(true);
  const [dashboardData, setDashboardData] = useState<DashboardData>({
    customers: 0,
    products: 0,
    locations: 0
  });
  const [products, setProducts] = useState<Product[]>([]);
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [lowStockProducts, setLowStockProducts] = useState<Array<{ 
    pid: number; 
    description: string; 
    totalQty: number; 
    locations: Array<{ locid: number; locationName: string; qty: number }> 
  }>>([]);
  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 }>>([]);
 
  useEffect(() => {
    loadDashboardData();
  }, []);
 
  const loadHourlyStats = async () => {
    try {
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      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) {
        setSalesHourly([]);
        return;
      }
 
      const data = await response.json();
      const sales = data.APPD || [];
 
      if (sales.length === 0) {
        setSalesHourly([]);
        return;
      }
 
      const hourCounts: { [key: number]: { count: number; total: number } } = {};
      
      sales.forEach((item: any) => {
        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
          }
        }
      });
      
      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) => {
          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);
        });
      
      setSalesHourly(hourlyArray);
    } catch (error) {
      console.error('Error loading hourly stats:', error);
      setSalesHourly([]);
    }
  };
 
  const loadDailyStats = async () => {
    try {
      const today = new Date();
      const weekAgo = new Date(today);
      weekAgo.setDate(weekAgo.getDate() - 7);
 
      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) {
        setSalesDaily([]);
        return;
      }
 
      const data = await response.json();
      const days = data.APPD || [];
 
      if (days.length === 0) {
        setSalesDaily([]);
        return;
      }
 
      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) => {
        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;
        }
      });
 
      const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
      const dailyArray = weekDays.map(day => ({
        time: day,
        sales: dayMap[day].count
      }));
 
      setSalesDaily(dailyArray);
    } catch (error) {
      console.error('Error loading daily stats:', error);
      setSalesDaily([]);
    }
  };
 
  const loadPaymentStats = async () => {
    try {
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      const params = new URLSearchParams({
        startDate: startOfDay.toISOString().split('T')[0],
        endDate: endOfDay.toISOString().split('T')[0]
      });
      
      const response = await fetch(`/api/v1/stats/today-payment?${params}`);
      if (!response.ok) {
        setPaymentMethods([]);
        return;
      }
 
      const result = await response.json();
      if (!result.success || !result.data || result.data.length === 0) {
        setPaymentMethods([]);
        return;
      }
 
      const paymentTotals: { [key: string]: number } = {};
      result.data.forEach((storeData: any) => {
        for (let i = 300; i <= 330; i++) {
          const amount = parseFloat(storeData[`f${i}`]) || 0;
          if (amount > 0) {
            const nameField = `f${i + 200}`;
            const methodName = storeData[nameField] || `Payment ${i - 299}`;
            if (methodName && methodName !== 'Unknown' && methodName !== 'Other') {
              paymentTotals[methodName] = (paymentTotals[methodName] || 0) + amount;
            }
          }
        }
      });
 
      const totalAmount = Object.values(paymentTotals).reduce((sum, amt) => sum + amt, 0);
      const paymentArray = Object.entries(paymentTotals)
        .map(([method, amount]) => ({
          method,
          amount: Math.round(amount),
          percentage: totalAmount > 0 ? Math.round((amount / totalAmount) * 100) : 0
        }))
        .filter(p => p.amount > 0)
        .sort((a, b) => b.amount - a.amount)
        .slice(0, 10);
 
      setPaymentMethods(paymentArray);
    } catch (error) {
      console.error('Error loading payment stats:', error);
      setPaymentMethods([]);
    }
  };
 
  const loadTellerStats = async () => {
    try {
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      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) {
        setTellerPerformance([]);
        return;
      }
 
      const result = await response.json();
      if (!result.success || !result.data || result.data.length === 0) {
        setTellerPerformance([]);
        return;
      }
 
      const tellerArray = result.data
        .map((item: any) => ({
          teller: item.f106 || 'Unknown',
          sales: parseInt(item.f107) || 0,
          amount: Math.round(parseFloat(item.f120) || 0)
        }))
        .filter((t: any) => t.teller !== 'Unknown' && t.amount > 0)
        .sort((a: any, b: any) => b.amount - a.amount)
        .slice(0, 10);
 
      setTellerPerformance(tellerArray);
    } catch (error) {
      console.error('Error loading teller stats:', error);
      setTellerPerformance([]);
    }
  };
 
  const loadTopProducts = async () => {
    try {
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      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) {
        return;
      }
 
      const data = await response.json();
      const products = data.APPD || [];
 
      if (products.length > 0) {
        const productArray = products
          .map((item: any) => ({
            Name: item.f2000 || 'Unknown Product',
            StockLevel: parseInt(item.f107) || 0,
            SellPrice: parseFloat(item.f120) || 0
          }))
          .filter((p: any) => p.SellPrice > 0)
          .sort((a: any, b: any) => b.SellPrice - a.SellPrice)
          .slice(0, 10);
 
        setProducts(productArray);
      }
    } catch (error) {
      console.error('Error loading top products:', error);
    }
  };
 
  const loadStorePerformance = async () => {
    try {
      const today = new Date();
      const startOfDay = new Date(today.setHours(0, 0, 0, 0));
      const endOfDay = new Date(today.setHours(23, 59, 59, 999));
 
      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) {
        setStorePerformance([]);
        return;
      }
 
      const data = await response.json();
      const stores = data.APPD || [];
 
      if (stores.length === 0) {
        setStorePerformance([]);
        return;
      }
 
      const storeArray = stores
        .map((item: any) => ({
          store: item.f2000 || 'Unknown Store',
          sales: parseInt(item.f107) || 0,
          amount: Math.round(parseFloat(item.f120) || 0)
        }))
        .filter((s: any) => s.amount > 0)
        .sort((a: any, b: any) => b.amount - a.amount)
        .slice(0, 3);
 
      setStorePerformance(storeArray);
    } catch (error) {
      console.error('Error loading store performance:', error);
      setStorePerformance([]);
    }
  };
 
  async function loadDashboardData() {
    try {
      setLoading(true);
      
      // Fetch real data using apiClient (leverages new OpenAPI routes)
      const [
        customersResult, 
        productsResult, 
        locationsResult,
        salesTotalsResult
      ] = await Promise.allSettled([
        apiClient.getCustomers({ limit: 10000, source: 'openapi' }),
        apiClient.getProducts({ limit: 10000, source: 'openapi' }),
        apiClient.getLocations(),
        apiClient.getSalesTotals()
      ]);
 
      // Process customers - apiClient returns { success, data } where data has the structure
      let customerCount = 0;
      let customersData: Customer[] = [];
      if (customersResult.status === 'fulfilled' && customersResult.value.success) {
        const apiData = customersResult.value.data as any;
        const customerData = apiData?.data?.Customer;
        if (Array.isArray(customerData)) {
          customerCount = customerData.length;
          customersData = customerData;
        }
      }
 
      // Process products - apiClient returns { success, data } where data has the structure
      let productCount = 0;
      let productsData: Product[] = [];
      if (productsResult.status === 'fulfilled' && productsResult.value.success) {
        const apiData = productsResult.value.data as any;
        const productData = apiData?.data?.Product;
        if (Array.isArray(productData)) {
          productCount = productData.length;
          productsData = productData;
        }
      }
 
      // Process locations - apiClient returns { success, data } where data has the structure
      let locationCount = 0;
      if (locationsResult.status === 'fulfilled' && locationsResult.value.success) {
        const apiData = locationsResult.value.data as any;
        const locationData = apiData?.data?.Location;
        if (Array.isArray(locationData)) {
          locationCount = locationData.length;
        }
      }
 
      console.log('Dashboard data loaded:', { 
        customers: customerCount, 
        products: productCount, 
        locations: locationCount 
      });
 
      // Calculate low stock products from products data (stock level <= 15)
      const lowStock = productsData.filter(p => (p.StockLevel || 0) <= 15 && (p.StockLevel || 0) > 0)
        .slice(0, 10)
        .map(p => ({
          pid: p.Pid || 0,
          description: p.Name || 'Unknown Product',
          totalQty: p.StockLevel || 0,
          locations: []
        }));
      setLowStockProducts(lowStock);
 
      setDashboardData({
        customers: customerCount,
        products: productCount,
        locations: locationCount
      });
 
      // Load real chart data from new endpoints
      await loadHourlyStats();
      await loadDailyStats();
      await loadPaymentStats();
      await loadTellerStats();
      await loadTopProducts();
      await loadStorePerformance();
      
      setProducts(productsData);
      setCustomers(customersData);
 
    } catch (error) {
      console.error('Failed to load dashboard data:', error);
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold mb-2 flex items-center gap-2">Analytics Dashboard <Icon name="analytics" /></h1>
            <p className="text-muted">Comprehensive sales analytics and insights</p>
          </div>
          <div className="flex gap-2">
            <select 
              value={dateRange} 
              onChange={(e) => setDateRange(e.target.value)}
              className="px-3 py-2 border border-border rounded-md text-sm"
            >
              <option value="today">Today</option>
              <option value="week">This Week</option>
              <option value="month">This Month</option>
              <option value="quarter">This Quarter</option>
            </select>
          </div>
        </div>
      </div>
 
      {/* Key Metrics - Using Real Data */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <div className="bg-surface rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="text-3xl mr-4"><Icon name="people" className="text-brand" /></div>
            <div>
              <div className="text-sm text-muted">Total Customers</div>
              <div className="text-2xl font-bold text-brand">
                {loading ? '...' : dashboardData.customers}
              </div>
              <div className="text-xs text-muted/70">From database</div>
            </div>
          </div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="text-3xl mr-4"><Icon name="inventory_2" className="text-brand" /></div>
            <div>
              <div className="text-sm text-muted">Total Products</div>
              <div className="text-2xl font-bold text-brand">
                {loading ? '...' : dashboardData.products}
              </div>
              <div className="text-xs text-muted/70">From database</div>
            </div>
          </div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="text-3xl mr-4"><Icon name="store" className="text-brand" /></div>
            <div>
              <div className="text-sm text-muted">Active Locations</div>
              <div className="text-2xl font-bold text-success">
                {loading ? '...' : dashboardData.locations}
              </div>
              <div className="text-xs text-muted/70">From database</div>
            </div>
          </div>
        </div>
 
        <div className="bg-surface rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="text-3xl mr-4"><Icon name="api" className="text-brand" /></div>
            <div>
              <div className="text-sm text-muted">Data Source</div>
              <div className="text-lg font-bold text-info">OpenAPI</div>
              <div className="text-xs text-success"><Icon name="check_circle" className="text-xs" /> Live data</div>
            </div>
          </div>
        </div>
      </div>
 
      {/* Data Status Notice */}
      <div className="bg-success/10 border border-success/30 rounded-lg p-4 mb-8">
        <div className="flex items-start">
          <div className="text-2xl mr-3"><Icon name="check_circle" className="text-success" /></div>
          <div>
            <h3 className="font-semibold text-success mb-1">Real-Time Data Active</h3>
            <p className="text-sm text-success/90">
              Displaying <strong>real data</strong> from your system. 
              Customer count: <strong>{dashboardData.customers}</strong>, 
              Product count: <strong>{dashboardData.products}</strong>, 
              Location count: <strong>{dashboardData.locations}</strong>
            </p>
          </div>
        </div>
      </div>
 
      {/* Main Charts Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        
        {/* Sales Performance by Hour */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Sales Performance by Hour</h2>
          </div>
          <div className="p-4 h-80">
            <SalesHourlyChart data={salesHourly} />
          </div>
        </div>
 
        {/* Weekly Sales Trend */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Weekly Sales Trend</h2>
          </div>
          <div className="p-4 h-80">
            <SalesOverTimeChart timeframe="day" data={salesDaily} />
          </div>
        </div>
 
        {/* Payment Methods Distribution */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Payment Methods Distribution</h2>
          </div>
          <div className="p-4 h-80">
            <PaymentMethodsChart data={paymentMethods} />
          </div>
        </div>
 
        {/* Top Products Performance */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Top Products (By Stock Level)</h2>
          </div>
          <div className="p-4 h-80">
            <TopProductsChart data={products.slice(0, 10).map(p => ({
              name: p.Name || 'Unknown Product',
              quantity: p.StockLevel || 0,
              value: (p.SellPrice || 0) * (p.StockLevel || 0)
            }))} />
          </div>
        </div>
 
        {/* Store Performance Comparison */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Store Performance Comparison</h2>
          </div>
          <div className="p-4 h-80">
            <StorePerformanceChart data={storePerformance} />
          </div>
        </div>
 
        {/* Staff Performance */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Staff Performance</h2>
          </div>
          <div className="p-4 h-80">
            <TellerPerformanceChart data={tellerPerformance} />
          </div>
        </div>
      </div>
 
      {/* Additional Insights */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        
        {/* Top Selling Categories */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Product Statistics</h2>
          </div>
          <div className="p-4">
            <div className="space-y-3">
              <div className="space-y-1">
                <div className="flex justify-between text-sm">
                  <span className="text-text">Total Products</span>
                  <span className="text-text font-semibold">{dashboardData.products}</span>
                </div>
                <div className="w-full bg-surface-2 rounded-full h-2">
                  <div 
                    className="bg-brand h-2 rounded-full"
                    style={{ width: '100%' }}
                  ></div>
                </div>
              </div>
              
              <div className="space-y-1">
                <div className="flex justify-between text-sm">
                  <span className="text-text">Products with Stock</span>
                  <span className="text-text font-semibold">
                    {products.filter(p => (p.StockLevel || 0) > 0).length}
                  </span>
                </div>
                <div className="w-full bg-surface-2 rounded-full h-2">
                  <div 
                    className="bg-success h-2 rounded-full"
                    style={{ 
                      width: `${dashboardData.products > 0 
                        ? (products.filter(p => (p.StockLevel || 0) > 0).length / dashboardData.products * 100)
                        : 0}%` 
                    }}
                  ></div>
                </div>
                <div className="text-xs text-muted">
                  {dashboardData.products > 0 
                    ? `${((products.filter(p => (p.StockLevel || 0) > 0).length / dashboardData.products) * 100).toFixed(0)}%` 
                    : '0%'} in stock
                </div>
              </div>
 
              <div className="space-y-1">
                <div className="flex justify-between text-sm">
                  <span className="text-text">Total Stock Value</span>
                  <span className="text-text font-semibold">
                    ${products.reduce((sum, p) => 
                      sum + ((p.SellPrice || 0) * (p.StockLevel || 0)), 0
                    ).toFixed(0)}
                  </span>
                </div>
                <div className="w-full bg-surface-2 rounded-full h-2">
                  <div 
                    className="bg-brand h-2 rounded-full"
                    style={{ width: '75%' }}
                  ></div>
                </div>
                <div className="text-xs text-muted">Estimated retail value</div>
              </div>
            </div>
          </div>
        </div>
 
        {/* Customer Insights */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Customer Insights</h2>
          </div>
          <div className="p-4">
            <div className="space-y-4">
              <div className="text-center">
                <div className="text-2xl font-bold text-brand">{dashboardData.customers}</div>
                <div className="text-sm text-muted">Total Customers</div>
                <div className="text-xs text-success">Real-time count</div>
              </div>
              <hr />
              <div className="text-center">
                <div className="text-2xl font-bold text-info">
                  {customers.filter(c => c.Email).length}
                </div>
                <div className="text-sm text-muted">With Email</div>
                <div className="text-xs text-muted">
                  {dashboardData.customers > 0 
                    ? `${((customers.filter(c => c.Email).length / dashboardData.customers) * 100).toFixed(0)}%` 
                    : '0%'}
                </div>
              </div>
              <hr />
              <div className="text-center">
                <div className="text-2xl font-bold text-success">
                  {customers.filter(c => c.Phone || c.Mobile).length}
                </div>
                <div className="text-sm text-muted">With Phone</div>
                <div className="text-xs text-muted">
                  {dashboardData.customers > 0 
                    ? `${((customers.filter(c => c.Phone || c.Mobile).length / dashboardData.customers) * 100).toFixed(0)}%` 
                    : '0%'}
                </div>
              </div>
            </div>
          </div>
        </div>
 
        {/* Inventory Alerts */}
        <div className="bg-surface rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-lg font-semibold">Inventory Status - Low Stock Alerts</h2>
            <p className="text-xs text-muted mt-1">Products with stock ≤ 15 units across all locations</p>
          </div>
          <div className="p-4">
            <div className="space-y-3">
              {lowStockProducts.map((product, idx) => {
                const stock = product.totalQty;
                const status = stock === 0 ? 'out' : stock <= 5 ? 'critical' : stock <= 15 ? 'low' : 'ok';
                return (
                  <div key={idx} className="border rounded-lg p-3">
                    <div className="flex justify-between items-start mb-2">
                      <div className="flex-1">
                        <div className="text-sm font-medium text-text">
                          {(product.description || 'Unknown').substring(0, 40)}
                          {(product.description || '').length > 40 ? '...' : ''}
                        </div>
                        <div className="text-xs text-muted mt-1">
                          Product ID: {product.pid} | Total Stock: {stock} units
                        </div>
                      </div>
                      <div className={`px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap ml-2 ${
                        status === 'out' ? 'bg-red-100 text-red-800' :
                        status === 'critical' ? 'bg-orange-100 text-orange-800' :
                        status === 'low' ? 'bg-yellow-100 text-yellow-800' :
                        'bg-green-100 text-green-800'
                      }`}>
                        {status === 'out' ? '⚫ OUT' : 
                         status === 'critical' ? '🔴 CRITICAL' : 
                         status === 'low' ? '🟡 LOW' : '🟢 OK'}
                      </div>
                    </div>
                    {product.locations.length > 0 && (
                      <div className="mt-2 pt-2 border-t">
                        <div className="text-xs text-muted mb-1">Stock by location:</div>
                        <div className="grid grid-cols-2 gap-1">
                          {product.locations.slice(0, 4).map((loc, locIdx) => (
                            <div key={locIdx} className="text-xs text-muted">
                              {loc.locationName}: <span className="font-medium">{loc.qty}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
              {lowStockProducts.length === 0 && (
                <div className="text-sm text-muted text-center py-4">
                  ✅ No low stock alerts - All products well stocked!
                </div>
              )}
            </div>
          </div>
        </div>
                        </div>
                  
                        {/* Action Items */}
                        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6">
                          <h2 className="text-lg font-semibold mb-4">📋 Data Summary & Insights</h2>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="bg-surface rounded-lg p-4">
                              <h3 className="font-medium text-text mb-2">📊 Current Status</h3>
                              <ul className="text-sm text-muted space-y-1">
                                <li>• {dashboardData.customers} customers in database</li>
                                <li>• {dashboardData.products} products catalogued</li>
                                <li>• {products.filter(p => (p.StockLevel || 0) > 0).length} products in stock</li>
                                <li>• {customers.filter(c => c.Email).length} customers with email</li>
                              </ul>
                            </div>
                            <div className="bg-surface rounded-lg p-4">
                              <h3 className="font-medium text-text mb-2">💡 Quick Insights</h3>
                              <ul className="text-sm text-muted space-y-1">
                                <li>• Low stock items: {lowStockProducts.length}</li>
                                <li>• Out of stock: {lowStockProducts.filter(p => p.totalQty === 0).length}</li>
                                <li>• Inventory value: ${products.reduce((sum, p) => 
                                  sum + ((p.SellPrice || 0) * (p.StockLevel || 0)), 0
                                ).toFixed(0)}</li>
                                <li>• Active locations: {dashboardData.locations}</li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    );
                  }