page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { apiClient } from '@/lib/client/apiClient';
 
interface Location {
  f100: number;
  f101: string;
}
 
interface StoreSalesData {
  storeid: string;
  storename: string;
  sales: number;
  salesInc: number;
  lastcost: number;
  waccost: number;
  salecnt: number;
  units: number;
  avgrev: number;
  gp: number;
}
 
export default function SalesByStorePage() {
  const [fromDate, setFromDate] = useState(() => {
    const d = new Date();
    d.setDate(1); // First of month
    return d.toISOString().split('T')[0];
  });
  const [toDate, setToDate] = useState(() => {
    const d = new Date();
    return d.toISOString().split('T')[0];
  });
  const [storeData, setStoreData] = useState<StoreSalesData[]>([]);
  const [loading, setLoading] = useState(false);
  const [sortColumn, setSortColumn] = useState<keyof StoreSalesData>('storename');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
 
  const loadReport = async () => {
    setLoading(true);
    try {
      // Get trading summary grouped by location
      const params = new URLSearchParams({ 
        dateFrom: fromDate,
        dateTo: toDate, 
        groupBy: 'location' 
      });
      const response = await apiClient.request(`/v1/reports/trading-summary?${params.toString()}`);
 
      if (response.success && (response.data as any)?.DATS) {
        const results: StoreSalesData[] = (response.data as any).DATS.map((item: any) => {
          const sales = Number(item.f120 || 0); // Revenue
          const salecnt = Number(item.f121 || 0); // Transaction count
          const units = Number(item.f107 || 0); // Units sold
          
          return {
            storeid: String(item.f100 || 0),
            storename: item.f101 || 'Unknown Store',
            sales: sales,
            salesInc: sales, // Same as sales (tax included)
            lastcost: 0, // Not available in this API
            waccost: 0, // Not available in this API
            salecnt: salecnt,
            units: units,
            avgrev: salecnt !== 0 ? sales / salecnt : 0,
            gp: 0 // GP calculation not available without cost data
          };
        }).filter((store: StoreSalesData) => store.sales > 0);
 
        setStoreData(results);
      }
    } catch (error) {
      console.error('Error loading report:', error);
    } finally {
      setLoading(false);
    }
  };
 
  const formatCurrency = (value: number): string => {
    return new Intl.NumberFormat('en-NZ', {
      style: 'currency',
      currency: 'NZD',
      minimumFractionDigits: 2
    }).format(value);
  };
 
  const handleSort = (column: keyof StoreSalesData) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortColumn(column);
      setSortDirection('asc');
    }
  };
 
  const sortedData = [...storeData].sort((a, b) => {
    const aVal = a[sortColumn];
    const bVal = b[sortColumn];
    
    if (aVal === undefined || bVal === undefined) return 0;
    
    if (typeof aVal === 'number' && typeof bVal === 'number') {
      return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
    }
    
    const aStr = String(aVal);
    const bStr = String(bVal);
    return sortDirection === 'asc' 
      ? aStr.localeCompare(bStr)
      : bStr.localeCompare(aStr);
  });
 
  const SortIcon = ({ column }: { column: keyof StoreSalesData }) => {
    if (sortColumn !== column) return <span className="text-muted/50">⇅</span>;
    return <span>{sortDirection === 'asc' ? '↑' : '↓'}</span>;
  };
 
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">Sales by Store 🏪</h1>
        <p className="text-sm text-muted mb-2">
          Summary trading information by store location
        </p>
        <div className="text-sm text-muted">
          <a href="/pages/reports/sales-reports" className="text-brand hover:underline">Sales</a>
          {' > '}
          <span>Sales by Store</span>
        </div>
      </div>
 
      {/* Filters */}
      <div className="bg-surface rounded-lg shadow p-6 mb-6">
        <form 
          onSubmit={(e) => { e.preventDefault(); loadReport(); }}
          className="flex flex-wrap items-end gap-4"
        >
          <div>
            <label className="block text-sm font-medium text-text mb-2">
              From Date (including):
            </label>
            <input
              type="date"
              value={fromDate}
              onChange={(e) => setFromDate(e.target.value)}
              className="border rounded px-3 py-2"
            />
          </div>
 
          <div>
            <label className="block text-sm font-medium text-text mb-2">
              To Date (excluding):
            </label>
            <input
              type="date"
              value={toDate}
              onChange={(e) => setToDate(e.target.value)}
              className="border rounded px-3 py-2"
            />
          </div>
 
          <div>
            <button
              type="submit"
              disabled={loading}
              className="bg-brand text-white px-6 py-2 rounded hover:bg-brand2 disabled:bg-muted/50"
            >
              {loading ? 'Loading...' : 'Submit'}
            </button>
          </div>
        </form>
      </div>
 
      {/* Results Table */}
      <div className="bg-surface rounded-lg shadow overflow-hidden">
        {loading ? (
          <div className="p-8 text-center">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-info"></div>
            <p className="mt-2 text-muted">Loading store sales data...</p>
          </div>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-surface-2 sticky top-0">
                  <tr>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('storename')}
                    >
                      Store <SortIcon column="storename" />
                    </th>
                    <th 
                      className="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('sales')}
                    >
                      Sales <SortIcon column="sales" />
                    </th>
                    <th 
                      className="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('salecnt')}
                    >
                      Num Sales <SortIcon column="salecnt" />
                    </th>
                    <th 
                      className="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('units')}
                    >
                      Num Units <SortIcon column="units" />
                    </th>
                    <th 
                      className="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('avgrev')}
                    >
                      Avg Sale <SortIcon column="avgrev" />
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {sortedData.length === 0 ? (
                    <tr>
                      <td colSpan={5} className="px-4 py-8 text-center text-muted">
                        {loading ? 'Loading...' : 'No sales data found for the selected period. Click Submit to load data.'}
                      </td>
                    </tr>
                  ) : (
                    sortedData.map((store, idx) => (
                      <tr key={idx} className="hover:bg-surface-2">
                        <td className="px-4 py-3 font-medium">
                          {store.storename}
                        </td>
                        <td className="px-4 py-3 text-right font-semibold text-green-600">
                          {formatCurrency(store.sales)}
                        </td>
                        <td className="px-4 py-3 text-right">
                          {store.salecnt}
                        </td>
                        <td className="px-4 py-3 text-right">
                          {store.units}
                        </td>
                        <td className="px-4 py-3 text-right">
                          {formatCurrency(store.avgrev)}
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
            
            {storeData.length > 0 && (
              <div className="px-4 py-3 bg-surface-2 border-t">
                <p className="text-sm text-muted">
                  Showing {storeData.length} store{storeData.length !== 1 ? 's' : ''} with sales during the selected period.
                </p>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}