page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { apiClient } from '@/lib/client/apiClient';
import { Icon } from '@/contexts/IconContext';
import {
  SalesHourlyChart,
  PaymentMethodsChart,
  TopProductsChart,
  StorePerformanceChart,
  TellerPerformanceChart,
  TopCustomersChart,
  SalesOverTimeChart
} from '@/components/Charts';
 
interface TodayStats {
  f100?: number;
  f101?: string;
  f150?: number; // Number of sales
  f211?: number; // Receipt total
}
 
interface TopProduct {
  pid: string;
  name: string;
  value: number;
  percentage: number;
}
 
interface ReportOption {
  title: string;
  description?: string;
  icon: string;
  link: string;
}
 
export default function SalesReportsPage() {
  const [todayReceipts, setTodayReceipts] = useState(0);
  const [storeStats, setStoreStats] = useState<TodayStats[]>([]);
  const [topProducts, setTopProducts] = useState<TopProduct[]>([]);
  const [loading, setLoading] = useState(true);
  const [hourlyData, setHourlyData] = useState<any[]>([]);
  const [paymentData, setPaymentData] = useState<any[]>([]);
  const [dailyData, setDailyData] = useState<any[]>([]);
  const [tellerData, setTellerData] = useState<any[]>([]);
 
  const reportOptions: ReportOption[] = [
    {
      title: 'Layby Sales',
      description: 'Sales currently on layby',
      icon: 'shopping_cart',
      link: '/pages/reports/sales-reports/layby'
    },
    {
      title: 'Lost Sales',
      description: 'Orders that did not ship',
      icon: 'trending_down',
      link: '/pages/reports/sales-reports/lost-sales'
    },
    {
      title: 'Edited Sales',
      description: 'Sales edited after completion',
      icon: 'edit',
      link: '/pages/reports/sales-reports/edited-sales'
    },
    {
      title: 'Sales by Store',
      description: 'Sales totals per location',
      icon: 'store',
      link: '/pages/reports/sales-reports/sales-by-store'
    },
    {
      title: 'Sales by Month',
      description: 'Sales per location by month',
      icon: 'calendar_month',
      link: '/pages/reports/sales-reports/sales-by-month'
    },
    {
      title: 'Open Quotations',
      description: 'Open quotes requiring action',
      icon: 'chat',
      link: '/pages/reports/sales-reports/open-quotations'
    },
    {
      title: 'Sales by Teller',
      description: 'Sales completed by staff members',
      icon: 'person',
      link: '/pages/reports/sales-reports/sales-by-teller'
    },
    {
      title: 'Sales by Customer',
      description: 'Sales grouped by customer',
      icon: 'group',
      link: '/pages/reports/sales-reports/sales-by-customer'
    },
    {
      title: 'Sales by Account',
      description: 'Sales grouped by account',
      icon: 'account_balance',
      link: '/pages/reports/sales-reports/sales-by-account'
    },
    {
      title: 'Sales by X',
      description: 'Sales by customer city, postcode, keywords, referral tags, and more',
      icon: 'analytics',
      link: '/pages/reports/sales-reports/sales-by-x'
    },
    {
      title: 'Basket Sizes',
      description: 'Breakdown of items per sale',
      icon: 'shopping_bag',
      link: '/pages/reports/sales-reports/basket-sizes'
    },
    {
      title: 'Sales with Discounts',
      description: 'List of sales with a discount applied',
      icon: 'local_offer',
      link: '/pages/reports/sales-reports/sales-with-discounts'
    },
    {
      title: 'Sale Items Review',
      description: 'Individual saleline details',
      icon: 'list',
      link: '/pages/reports/sales-reports/sale-items-review'
    },
    {
      title: 'Sale Header Review',
      description: 'Single line per sale',
      icon: 'description',
      link: '/pages/reports/sales-reports/sale-header-review'
    },
    {
      title: 'Past Sales Finder',
      description: 'Useful keyword search if specifics such as customer are unknown',
      icon: 'search',
      link: '/pages/reports/sales-reports/past-sales-finder'
    },
    {
      title: 'Payment List',
      description: 'List of individual payment transactions',
      icon: 'credit_card',
      link: '/pages/reports/sales-reports/payment-list'
    },
    {
      title: 'Sales KPI',
      description: 'Key performance indicators by store',
      icon: 'assessment',
      link: '/pages/reports/sales-reports/sales-kpi'
    }
  ];
 
  useEffect(() => {
    loadAllData();
  }, []);
 
  const loadAllData = async () => {
    try {
      setLoading(true);
      
      // Load all data in parallel
      await Promise.allSettled([
        loadTodayStats(),
        loadTopProducts(),
        loadHourlyStats(),
        loadPaymentStats(),
        loadDailyStats(),
        loadTellerStats()
      ]);
    } catch (error) {
      console.error('Error loading sales report data:', error);
    } finally {
      setLoading(false);
    }
  };
 
  const loadTodayStats = 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');
        return;
      }
 
      const data = await response.json();
      const stores = data.APPD || [];
 
      if (stores.length === 0) {
        console.warn('[Store Performance] No store data available');
        return;
      }
 
      // Calculate total revenue and map store data to the format expected by the page
      const totalRevenue = stores.reduce((sum: number, item: any) => 
        sum + (parseFloat(item.f120) || 0), 0);
      setTodayReceipts(totalRevenue);
 
      const storeArray: TodayStats[] = stores
        .map((item: any) => ({
          f101: item.f2000 || 'Unknown Store', // Location name
          f150: parseInt(item.f107) || 0, // Number of sales
          f211: parseFloat(item.f120) || 0 // Sales amount
        }))
        .filter((s: any) => s.f211 > 0)
        .sort((a: any, b: any) => b.f211 - a.f211);
 
      if (storeArray.length > 0) {
        console.log('[Store Performance] Loaded', storeArray.length, 'stores, total revenue:', totalRevenue);
        setStoreStats(storeArray);
      }
    } catch (error) {
      console.error('Error loading today stats:', error);
    }
  };
 
  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');
        setTopProducts([]);
        return;
      }
 
      const data = await response.json();
      const products = data.APPD || [];
 
      if (products.length === 0) {
        console.warn('[Top Products] No product data available');
        setTopProducts([]);
        return;
      }
 
      // Map product data to the format expected by the page
      const totalRevenue = products.reduce((sum: number, item: any) => 
        sum + (parseFloat(item.f120) || 0), 0);
 
      const productArray: TopProduct[] = products
        .map((item: any) => {
          const revenue = parseFloat(item.f120) || 0;
          const percentage = totalRevenue > 0 ? (revenue / totalRevenue) * 100 : 0;
          
          return {
            pid: String(item.f1000) || '0', // Product ID
            name: (item.f2000 || 'Unknown Product').substring(0, 30), // Product name
            value: Math.round(revenue), // Revenue
            percentage: Math.max(percentage, 2)
          };
        })
        .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');
        setTopProducts(productArray);
      } else {
        setTopProducts([]);
      }
    } catch (error) {
      console.error('Error loading top products:', error);
      setTopProducts([]);
    }
  };
 
  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');
        setHourlyData([]);
        return;
      }
 
      const data = await response.json();
      const sales = data.APPD || [];
 
      if (sales.length === 0) {
        console.warn('[Hourly Stats] No sales data available');
        setHourlyData([]);
        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');
        setHourlyData(hourlyArray);
      } else {
        setHourlyData([]);
      }
    } catch (error) {
      console.error('Error loading hourly stats:', error);
      setHourlyData([]);
    }
  };
 
  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');
        setPaymentData([]);
        return;
      }
 
      const result = await response.json();
      if (!result.success || !result.data || result.data.length === 0) {
        console.warn('[Payment Stats] No payment data available');
        setPaymentData([]);
        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) {
        setPaymentData(paymentArray);
      } else {
        setPaymentData([]);
      }
    } catch (error) {
      console.error('Error loading payment stats:', error);
      setPaymentData([]);
    }
  };
 
  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');
        setDailyData([]);
        return;
      }
 
      const data = await response.json();
      const days = data.APPD || [];
 
      if (days.length === 0) {
        console.warn('[Daily Stats] No daily data available');
        setDailyData([]);
        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);
        setDailyData(dailyArray);
      } else {
        setDailyData([]);
      }
    } catch (error) {
      console.error('Error loading daily stats:', error);
      setDailyData([]);
    }
  };
 
  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');
        setTellerData([]);
        return;
      }
 
      const result = await response.json();
      if (!result.success || !result.data || result.data.length === 0) {
        console.warn('[Teller Stats] No teller data available');
        setTellerData([]);
        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
 
      setTellerData(tellerArray);
    } catch (error) {
      console.error('Error loading teller stats:', error);
      setTellerData([]);
    }
  };
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-NZ', {
      style: 'currency',
      currency: 'NZD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(value);
  };
 
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2 flex items-center gap-2">
          Sales Reports <Icon name="assessment" size={32} className="text-brand" />
        </h1>
        <p className="text-muted">Sales analysis and reporting</p>
      </div>
 
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        {/* Sales Today Summary */}
        <div className="relative overflow-hidden bg-gradient-to-br from-success/10 via-surface to-surface rounded-xl shadow-lg border border-success/20 p-6 hover:shadow-xl transition-shadow duration-300">
          <div className="absolute top-0 right-0 w-32 h-32 bg-success/5 rounded-full -mr-16 -mt-16"></div>
          <div className="absolute bottom-0 left-0 w-24 h-24 bg-success/5 rounded-full -ml-12 -mb-12"></div>
          <div className="relative z-10">
            <div className="flex items-center gap-2 mb-4">
              <Icon name="trending_up" size={28} className="text-success" />
              <h2 className="text-xl font-semibold text-success">Sales Today</h2>
            </div>
            {loading ? (
              <div className="text-center py-4">
                <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-success"></div>
              </div>
            ) : (
              <>
                <div className="mb-4">
                  <div className="text-sm text-muted mb-1">Total Receipts</div>
                  <div className="text-3xl font-bold text-success">
                    {formatCurrency(todayReceipts)}
                  </div>
                </div>
                
                {storeStats.length > 0 && (
                  <div className="space-y-2 max-h-40 overflow-y-auto">
                    {storeStats.slice(0, 5).map((store, idx) => (
                      <div key={idx} className="flex justify-between items-center text-sm bg-surface/50 rounded-lg p-2 border border-border/30">
                        <span className="text-text truncate mr-2 font-medium">{store.f101}</span>
                        <span className="font-semibold text-success">{formatCurrency(store.f211 || 0)}</span>
                      </div>
                    ))}
                  </div>
                )}
              </>
            )}
          </div>
        </div>
 
        {/* Top 10 Products Today */}
        <div className="relative overflow-hidden bg-gradient-to-br from-brand/10 via-surface to-surface rounded-xl shadow-lg border border-brand/20 p-6 lg:col-span-2 hover:shadow-xl transition-shadow duration-300">
          <div className="absolute top-0 right-0 w-40 h-40 bg-brand/5 rounded-full -mr-20 -mt-20"></div>
          <div className="absolute bottom-0 left-0 w-32 h-32 bg-brand/5 rounded-full -ml-16 -mb-16"></div>
          <div className="relative z-10">
            <div className="flex items-center gap-2 mb-4">
              <Icon name="shopping_bag" size={28} className="text-brand" />
              <h2 className="text-xl font-semibold text-brand">Top 10 Selling Today</h2>
            </div>
            {topProducts.length > 0 ? (
              <div className="space-y-3">
                {topProducts.map((product, idx) => (
                  <div key={idx} className="bg-surface/50 rounded-lg p-3 border border-border/30 hover:border-brand/50 transition-colors">
                    <div className="flex justify-between items-center text-sm mb-2">
                      <div className="flex items-center gap-2 flex-1 mr-4">
                        <span className="flex items-center justify-center w-6 h-6 rounded-full bg-brand/20 text-brand text-xs font-bold">
                          {idx + 1}
                        </span>
                        <span className="text-text truncate font-medium" title={product.name}>
                          {product.name}
                        </span>
                      </div>
                      <span className="text-brand font-semibold">
                        {product.percentage.toFixed(1)}%
                      </span>
                    </div>
                    <div className="w-full bg-surface-2 rounded-full h-2.5 overflow-hidden">
                      <div 
                        className="bg-gradient-to-r from-brand to-brand2 h-2.5 rounded-full transition-all duration-500 shadow-sm"
                        style={{ width: `${Math.min(product.percentage, 100)}%` }}
                      ></div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center text-muted py-8">
                <Icon name="info" size={48} className="mx-auto mb-2 opacity-50" />
                <p>No product data available</p>
              </div>
            )}
          </div>
        </div>
      </div>
 
      {/* Report Options Grid */}
      <div className="bg-surface rounded-xl shadow-sm border border-border p-6">
        <h2 className="text-xl font-semibold mb-6 flex items-center gap-2">
          <Icon name="folder_open" size={24} className="text-brand" />
          Available Reports
        </h2>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
          {reportOptions.map((option, idx) => (
            <a
              key={idx}
              href={option.link}
              className="group relative block bg-gradient-to-br from-surface to-surface-2 border border-border rounded-xl p-4 text-center hover:shadow-xl hover:scale-[1.02] hover:border-brand/50 hover:from-brand/5 hover:to-brand/10 transition-all duration-300 overflow-hidden"
              title={option.description}
            >
              <div className="absolute inset-0 bg-gradient-to-br from-brand/0 to-brand/0 group-hover:from-brand/5 group-hover:to-brand/10 transition-all duration-300"></div>
              <div className="relative z-10">
                <div className="mb-3 flex justify-center">
                  <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-brand/10 to-brand/20 group-hover:from-brand/20 group-hover:to-brand/30 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all duration-300">
                    <Icon name={option.icon} size={28} className="text-brand group-hover:scale-110 transition-transform duration-300" />
                  </div>
                </div>
                <div className="text-sm font-semibold text-text group-hover:text-brand transition-colors duration-200">
                  {option.title}
                </div>
                {option.description && (
                  <div className="text-xs text-muted mt-1 line-clamp-2">
                    {option.description}
                  </div>
                )}
              </div>
            </a>
          ))}
        </div>
      </div>
 
      {/* Widgets Section */}
      <div className="mt-8">
        <h2 className="text-xl font-semibold mb-4">Live Dashboards</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          
          {/* Sales Today by Hour */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-success text-surface font-semibold text-sm">
              Sales Today by Hour
            </div>
            <div className="p-4 h-64">
              <SalesHourlyChart data={hourlyData.length > 0 ? hourlyData : undefined} />
            </div>
          </div>
 
          {/* Payment Methods Today */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-success text-surface font-semibold text-sm">
              Payment Methods Today
            </div>
            <div className="p-4 h-64">
              <PaymentMethodsChart data={paymentData.length > 0 ? paymentData : undefined} />
            </div>
          </div>
 
          {/* Store Performance Today */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-success text-surface font-semibold text-sm">
              Store Performance Today
            </div>
            <div className="p-4 h-64">
              <StorePerformanceChart 
                data={storeStats.map(store => ({
                  store: store.f101 || 'Unknown',
                  sales: store.f150 || 0,
                  amount: store.f211 || 0
                }))}
              />
            </div>
          </div>
 
          {/* Top Products Today */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-brand text-surface font-semibold text-sm">
              Top Products Today
            </div>
            <div className="p-4 h-64">
              <TopProductsChart 
                data={topProducts.slice(0, 5).map((product, idx) => ({
                  name: product.name,
                  quantity: Math.floor(product.percentage / 3), // Convert percentage to quantity
                  value: product.value * Math.floor(product.percentage / 3)
                }))}
              />
            </div>
          </div>
 
          {/* Top Tellers Today */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-brand text-surface font-semibold text-sm">
              Top Tellers Today
            </div>
            <div className="p-4 h-64">
              <TellerPerformanceChart data={tellerData} />
            </div>
          </div>
 
          {/* Top Customers Today */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-brand text-surface font-semibold text-sm">
              Top Customers Today
            </div>
            <div className="p-4 h-64">
              <TopCustomersChart />
            </div>
          </div>
        </div>
      </div>
 
      {/* Sales Trend Analysis */}
      <div className="mt-8">
        <h2 className="text-xl font-semibold mb-4">Sales Trend Analysis</h2>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          
          {/* Weekly Sales Trend */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-info text-surface font-semibold">
              Daily Sales Trend
            </div>
            <div className="p-4 h-64">
              <SalesOverTimeChart 
                timeframe="day" 
                data={dailyData.length > 0 ? dailyData : undefined}
              />
            </div>
          </div>
 
          {/* Recent Activity Widget */}
          <div className="bg-surface rounded-lg shadow overflow-hidden">
            <div className="p-3 bg-brand text-surface font-semibold">
              Store Activity Summary
            </div>
            <div className="p-4 h-64">
              <div className="space-y-3 max-h-56 overflow-y-auto">
                {storeStats.length > 0 ? (
                  storeStats.map((store, idx) => (
                    <div key={idx} className="border-b pb-2 last:border-b-0">
                      <div className="flex justify-between items-start">
                        <div className="flex-1">
                          <div className="text-sm font-medium text-text">{store.f101}</div>
                          <div className="text-xs text-muted">
                            {store.f150} transactions
                          </div>
                        </div>
                        <div className="text-sm font-semibold text-success">
                          ${typeof store.f211 === 'number' ? store.f211.toFixed(2) : '0.00'}
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="text-center text-muted py-8">
                    No store data available
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
 
      {/* Note about data availability */}
      {(hourlyData.length === 0 && paymentData.length === 0 && dailyData.length === 0) && !loading && (
        <div className="mt-6 bg-info/10 border-l-4 border-brand p-4">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-info" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
              </svg>
            </div>
            <div className="ml-3">
              <p className="text-sm text-info">
                <strong>Note:</strong> Some charts may show empty data because there are no sales transactions for today yet. 
                Sales data will appear as transactions are processed throughout the day.
              </p>
            </div>
          </div>
        </div>
      )}
 
      {/* Legacy demo data removed */}
      <div className="hidden">
        {[
          { id: '12345', amount: 89.99, time: '2:35 PM', item: 'Brother TN-2430 Toner', payment: 'EFTPOS' },
          { id: '12344', amount: 45.99, time: '2:28 PM', item: 'HP 65 Black Ink', payment: 'Cash' },
          { id: '12343', amount: 129.50, time: '2:15 PM', item: 'Canon Multipack', payment: 'EFTPOS' },
          { id: '12342', amount: 38.99, time: '2:05 PM', item: 'Canon PG-545 Black', payment: 'Mobile Pay' },
          { id: '12341', amount: 65.99, time: '1:58 PM', item: 'Samsung MLT-D111S', payment: 'EFTPOS' },
        ].map((sale, idx) => (
          <div key={idx} className="border-b pb-2 last:border-b-0">
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="text-sm font-medium text-text">Sale #{sale.id}</div>
                <div className="text-xs text-muted truncate">{sale.item}</div>
                <div className="text-xs text-muted">
                  {sale.time} • {sale.payment}
                </div>
              </div>
              <div className="text-sm font-semibold text-green-600">
                ${sale.amount}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}