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 TellerSales {
  tid: number;
  name: string;
  sales: number;
  lastcost: number;
  waccost: number;
  units: number;
  numsales: number;
  avesale: number;
  itemspersale: number;
  gp: number;
  percenttotal: number;
}
 
export default function SalesByTellerPage() {
  const [tellerData, setTellerData] = useState<TellerSales[]>([]);
  const [loading, setLoading] = useState(false);
  const [totalPeriodRev, setTotalPeriodRev] = useState(0);
  const [sortColumn, setSortColumn] = useState<keyof TellerSales>('sales');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
 
  const loadReport = async () => {
    setLoading(true);
    try {
      const response = await apiClient.request('/v1/sales/stats?type=staff');
 
      if (response.success && (response.data as any)?.DATS) {
        let totalRev = 0;
        const results: TellerSales[] = (response.data as any).DATS.map((item: any) => {
          const sales = Number(item.f120 || 0);  // Revenue
          const units = Number(item.f107 || 0);  // Units
          const numsales = Number(item.f121 || 0);  // Transaction count
          
          totalRev += sales;
 
          const avesale = numsales > 0 ? sales / numsales : 0;
          const itemspersale = numsales > 0 ? units / numsales : 0;
 
          return {
            tid: Number(item.f100 || 0),
            name: String(item.f101 || 'Unknown Staff'),
            sales,
            lastcost: 0,  // Not available in this API
            waccost: 0,  // Not available in this API
            units,
            numsales,
            avesale,
            itemspersale,
            gp: 0,  // GP not available without cost data
            percenttotal: 0
          };
        });
 
        // Calculate percentages
        results.forEach(item => {
          item.percenttotal = totalRev > 0 ? (item.sales / totalRev) * 100 : 0;
        });
 
        setTotalPeriodRev(totalRev);
        setTellerData(results);
      } else {
        setTellerData([]);
        setTotalPeriodRev(0);
      }
    } catch (error) {
      console.error('Error loading report:', error);
      setTellerData([]);
    } 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 TellerSales) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortColumn(column);
      setSortDirection('asc');
    }
  };
 
  const sortedData = [...tellerData].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 TellerSales }) => {
    if (sortColumn !== column) return <span className="text-muted/50">⇅</span>;
    return <span>{sortDirection === 'asc' ? '↑' : '↓'}</span>;
  };
 
  const GPBar = ({ value }: { value: number }) => {
    const percentage = Math.max(0, Math.min(100, Math.round(value)));
    
    if (percentage === 0) return null;
    
    // Color coding: red < 40%, blue 40-60%, green > 60%
    let colorClass = 'bg-brand';
    if (percentage < 40) colorClass = 'bg-red-500';
    if (percentage > 60) colorClass = 'bg-green-500';
    
    return (
      <div className="flex items-center gap-2">
        <div className="flex-1 bg-surface-2 rounded-full h-4 overflow-hidden">
          <div 
            className={`${colorClass} h-full rounded-full transition-all duration-300`}
            style={{ width: `${percentage}%` }}
          ></div>
        </div>
        <span className="text-xs font-medium w-12 text-right">{percentage}%</span>
      </div>
    );
  };
 
  const PercentBar = ({ value }: { value: number }) => {
    const percentage = Math.max(0, Math.min(100, Math.round(value)));
    
    if (percentage === 0) return null;
    
    return (
      <div className="flex items-center gap-2">
        <div className="flex-1 bg-surface-2 rounded-full h-4 overflow-hidden">
          <div 
            className="bg-green-500 h-full rounded-full transition-all duration-300"
            style={{ width: `${percentage}%` }}
          ></div>
        </div>
        <span className="text-xs font-medium w-12 text-right">{percentage.toFixed(0)}%</span>
      </div>
    );
  };
 
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">Sales by Teller 👤</h1>
        <p className="text-sm text-muted mb-2">
          Staff sales performance summary
        </p>
        <div className="text-sm text-muted">
          <a href="/pages/reports/sales-reports" className="text-brand hover:underline">Sales</a>
          {' > '}
          <span>Sales by Teller</span>
        </div>
      </div>
 
      {/* Filters */}
      <div className="bg-surface rounded-lg shadow p-6 mb-6">
        <div className="mb-4 p-3 bg-info/10 border-l-4 border-info">
          <p className="text-sm text-info">
            <strong>Note:</strong> This report shows current staff sales data. Date and location filtering is not available in this API.
          </p>
        </div>
        <form 
          onSubmit={(e) => { e.preventDefault(); loadReport(); }}
          className="flex items-end gap-4"
        >
          <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...' : 'Load Staff Sales'}
            </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 sales data...</p>
          </div>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-[var(--brand)] text-surface sticky top-0">
                  <tr>
                    <th 
                      className="px-3 py-2 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('tid')}
                    >
                      Tid# <SortIcon column="tid" />
                    </th>
                    <th 
                      className="px-3 py-2 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('name')}
                    >
                      Name <SortIcon column="name" />
                    </th>
                    <th 
                      className="px-3 py-2 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('numsales')}
                    >
                      #Sales <SortIcon column="numsales" />
                    </th>
                    <th className="px-3 py-2 text-left font-semibold">
                      % of Sales
                    </th>
                    <th 
                      className="px-3 py-2 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('units')}
                    >
                      Items Sold <SortIcon column="units" />
                    </th>
                    <th 
                      className="px-3 py-2 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('sales')}
                    >
                      Sales <SortIcon column="sales" />
                    </th>
                    <th 
                      className="px-3 py-2 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('avesale')}
                    >
                      Avg. Sale$ <SortIcon column="avesale" />
                    </th>
                    <th 
                      className="px-3 py-2 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('itemspersale')}
                    >
                      Avg #Items/Sale <SortIcon column="itemspersale" />
                    </th>
                    <th 
                      className="px-3 py-2 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('lastcost')}
                    >
                      Last Cost <SortIcon column="lastcost" />
                    </th>
                    <th 
                      className="px-3 py-2 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('gp')}
                    >
                      GP% <SortIcon column="gp" />
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {sortedData.length === 0 ? (
                    <tr>
                      <td colSpan={10} className="px-4 py-8 text-center text-muted">
                        No sales data found for the selected period
                      </td>
                    </tr>
                  ) : (
                    sortedData.map((teller, idx) => (
                      <tr key={idx} className="hover:bg-surface-2">
                        <td className="px-3 py-2">
                          {teller.tid || '-'}
                        </td>
                        <td className="px-3 py-2 font-medium">
                          {teller.name || 'Unknown'}
                        </td>
                        <td className="px-3 py-2 text-right">
                          {teller.numsales}
                        </td>
                        <td className="px-3 py-2" style={{ minWidth: '150px' }}>
                          <PercentBar value={teller.percenttotal} />
                        </td>
                        <td className="px-3 py-2 text-right">
                          {teller.units}
                        </td>
                        <td className="px-3 py-2 text-right font-semibold">
                          {formatCurrency(teller.sales)}
                        </td>
                        <td className="px-3 py-2 text-right">
                          {formatCurrency(teller.avesale)}
                        </td>
                        <td className="px-3 py-2 text-right">
                          {teller.itemspersale.toFixed(1)}
                        </td>
                        <td className="px-3 py-2 text-right">
                          {formatCurrency(teller.lastcost)}
                        </td>
                        <td className="px-3 py-2" style={{ minWidth: '150px' }}>
                          <GPBar value={teller.gp} />
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
            
            {tellerData.length > 0 && (
              <div className="px-4 py-3 bg-surface-2 border-t">
                <div className="text-sm text-muted">
                  <strong>Total Period Revenue:</strong> {formatCurrency(totalPeriodRev)}
                  {' | '}
                  Showing {tellerData.length} teller{tellerData.length !== 1 ? 's' : ''}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}