page.tsx

Go to the documentation of this file.

"use client";
 
import { useState } from 'react';
import { apiClient } from '@/lib/client/apiClient';
 
interface CustomerData {
  cid: string;
  name: string;
  email?: string;
  phone?: string;
}
 
export default function SalesByCustomerPage() {
  const [customerData, setCustomerData] = useState<CustomerData[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [sortColumn, setSortColumn] = useState<keyof CustomerData>('name');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
  const [maxRows, setMaxRows] = useState(100);
 
  const loadReport = async () => {
    setIsLoading(true);
    try {
      const response = await apiClient.getCustomers({ limit: maxRows, source: 'openapi' });
 
      if (response.success && response.data) {
        const customers: CustomerData[] = response.data.map((cust: any) => ({
          cid: String(cust.cid || cust.CustomerId || ''),
          name: cust.Name || cust.CustomerName || 'Unknown Customer',
          email: cust.Email || '',
          phone: cust.Mobile || cust.Phone || ''
        }));
 
        setCustomerData(customers);
      }
    } catch (error) {
      console.error('Error loading customers:', error);
    } finally {
      setIsLoading(false);
    }
  };
 
  const handleSort = (column: keyof CustomerData) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortColumn(column);
      setSortDirection('asc');
    }
  };
 
  const sortedData = [...customerData].sort((a, b) => {
    const aVal = a[sortColumn];
    const bVal = b[sortColumn];
    
    if (aVal === undefined || bVal === undefined) return 0;
    
    const aStr = String(aVal);
    const bStr = String(bVal);
    return sortDirection === 'asc' 
      ? aStr.localeCompare(bStr)
      : bStr.localeCompare(aStr);
  });
 
  const SortIcon = ({ column }: { column: keyof CustomerData }) => {
    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 Customer 👥</h1>
        <p className="text-sm text-muted mb-2">
          Customer list and information
        </p>
        <div className="text-sm text-muted">
          <a href="/pages/reports/sales-reports" className="text-brand hover:underline">Sales</a>
          {' > '}
          <span>Sales by Customer</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 customer directory. Sales analytics by customer is not available in the current API.
          </p>
        </div>
        <form 
          onSubmit={(e) => { e.preventDefault(); loadReport(); }}
          className="flex items-end gap-4"
        >
          <div>
            <label className="block text-sm font-medium text-text mb-2">
              Max Rows:
            </label>
            <select
              value={maxRows}
              onChange={(e) => setMaxRows(Number(e.target.value))}
              className="border rounded px-3 py-2"
            >
              <option value="50">50</option>
              <option value="100">100</option>
              <option value="200">200</option>
              <option value="500">500</option>
            </select>
          </div>
          <div>
            <button
              type="submit"
              disabled={isLoading}
              className="bg-brand text-white px-6 py-2 rounded hover:bg-brand2 disabled:bg-muted/50"
            >
              {isLoading ? 'Loading...' : 'Load Customers'}
            </button>
          </div>
        </form>
      </div>
 
      {/* Results Table */}
      <div className="bg-surface rounded-lg shadow overflow-hidden">
        {isLoading ? (
          <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 customers...</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('cid')}
                    >
                      ID <SortIcon column="cid" />
                    </th>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('name')}
                    >
                      Name <SortIcon column="name" />
                    </th>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('email')}
                    >
                      Email <SortIcon column="email" />
                    </th>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('phone')}
                    >
                      Phone <SortIcon column="phone" />
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {sortedData.length === 0 ? (
                    <tr>
                      <td colSpan={4} className="px-4 py-8 text-center text-muted">
                        {isLoading ? 'Loading...' : 'No customer data found. Click "Load Customers" to fetch data.'}
                      </td>
                    </tr>
                  ) : (
                    sortedData.map((customer, idx) => (
                      <tr key={idx} className="hover:bg-surface-2">
                        <td className="px-4 py-3 font-mono text-sm">
                          {customer.cid}
                        </td>
                        <td className="px-4 py-3 font-medium">
                          {customer.name}
                        </td>
                        <td className="px-4 py-3 text-muted">
                          {customer.email || '-'}
                        </td>
                        <td className="px-4 py-3 text-muted">
                          {customer.phone || '-'}
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
            
            {customerData.length > 0 && (
              <div className="px-4 py-3 bg-surface-2 border-t">
                <p className="text-sm text-muted">
                  Showing {customerData.length} customer{customerData.length !== 1 ? 's' : ''}.
                </p>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}