page.tsx

Go to the documentation of this file.

"use client";
 
import { useState } from "react";
import { Icon } from '@/contexts/IconContext';
import { useStore } from "@/contexts/StoreContext";
 
interface SaleRow {
  f101: number;    // Sale ID
  f102: string;    // Date
  f107: number;    // Total sale
  f104: string;    // Teller name
  f200: number;    // Product ID
  f201: string;    // Product name
  f202: number;    // Qty
  f203: number;    // Line price
  f301?: string;   // Paid by
}
 
export default function PosSalesReportPage() {
  const { session } = useStore();
  const [data, setData] = useState<SaleRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  // Date filters - default to today
  const [fromDate, setFromDate] = useState(() => {
    const d = new Date();
    d.setHours(0, 0, 0, 0);
    return d.toISOString().split("T")[0];
  });
  const [toDate, setToDate] = useState(() => {
    const d = new Date();
    d.setDate(d.getDate() + 1);
    return d.toISOString().split("T")[0];
  });
 
  const loadReport = async () => {
    if (!session?.store) {
      setError("No store session found");
      return;
    }
 
    setLoading(true);
    setError(null);
    setData([]);
 
    try {
      // Call API endpoint that uses ELINK
      const response = await fetch(`/api/v1/elink/sales-report?fromDate=${fromDate}&toDate=${toDate}`, {
        method: 'GET',
        credentials: 'include',
      });
 
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || `HTTP ${response.status}`);
      }
 
      const result = await response.json();
      
      if (result.success && result.data?.APPT && Array.isArray(result.data.APPT)) {
        setData(result.data.APPT);
      } else {
        setData([]);
      }
    } catch (err: any) {
      console.error("Error loading sales report:", err);
      setError(err.message || "Failed to load sales report");
      setData([]);
    } finally {
      setLoading(false);
    }
  };
 
  const formatCurrency = (value: number | undefined) => {
    if (value === undefined || value === null) return "$0.00";
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const formatDate = (dateStr: string | undefined) => {
    if (!dateStr) return "";
    try {
      // Handle pipe-delimited format: "2026|1|6|9|46|0||" (year|month|day|hour|minute|second||)
      if (dateStr.includes('|')) {
        const parts = dateStr.split('|').filter(p => p !== '');
        if (parts.length >= 3) {
          const [year, month, day, hour = '0', minute = '0', second = '0'] = parts;
          const date = new Date(
            parseInt(year),
            parseInt(month) - 1, // JavaScript months are 0-indexed
            parseInt(day),
            parseInt(hour),
            parseInt(minute),
            parseInt(second)
          );
          return date.toLocaleString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          });
        }
      }
      // Fallback to standard date parsing
      const date = new Date(dateStr);
      return date.toLocaleDateString();
    } catch {
      return dateStr;
    }
  };
 
  // Calculate totals
  const totalQty = data.reduce((sum, row) => sum + (row.f202 || 0), 0);
  const totalSales = data.reduce((sum, row) => sum + (row.f203 || 0), 0);
  const uniqueSales = new Set(data.map(row => row.f101)).size;
 
  return (
    <div className="min-h-screen p-4" style={{ background: 'var(--bg)' }}>
      <div className="max-w-[1400px] mx-auto">
        {/* Header */}
        <div className="bg-surface rounded-lg shadow-sm p-6 mb-6 border border-border">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h1 className="text-2xl font-bold text-text">Sales Report</h1>
              {session?.store && (
                <p className="text-sm text-muted mt-1">
                  {session.store.type === 'store' ? '🏪' : '🏢'} {session.store.name}
                </p>
              )}
            </div>
            <div className="text-right">
              <div className="text-sm text-muted">Today's Sales</div>
              <div className="text-2xl font-bold text-brand">{formatCurrency(totalSales)}</div>
            </div>
          </div>
 
          {/* Date Range Filter */}
          <div className="flex gap-4 items-end">
            <div className="flex-1">
              <label className="block text-sm font-medium text-text mb-1">
                From Date
              </label>
              <input
                type="date"
                value={fromDate}
                onChange={(e) => setFromDate(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent bg-surface text-text"
              />
            </div>
            <div className="flex-1">
              <label className="block text-sm font-medium text-text mb-1">
                To Date
              </label>
              <input
                type="date"
                value={toDate}
                onChange={(e) => setToDate(e.target.value)}
                className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent bg-surface text-text"
              />
            </div>
            <button
              onClick={loadReport}
              disabled={loading}
              className="px-6 py-2 bg-brand text-white rounded-lg hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition font-medium"
            >
              {loading ? "Loading..." : "Load Report"}
            </button>
          </div>
        </div>
 
        {/* Error Message */}
        {error && (
          <div className="bg-danger/10 border border-danger rounded-lg p-4 mb-6">
            <div className="flex items-center gap-2 text-danger">
              <span className="text-xl">⚠️</span>
              <div>
                <div className="font-semibold">Error</div>
                <div className="text-sm">{error}</div>
              </div>
            </div>
          </div>
        )}
 
        {/* Summary Cards */}
        {data.length > 0 && (
          <div className="grid grid-cols-3 gap-4 mb-6">
            <div className="bg-surface rounded-lg shadow-sm p-4 border border-border">
              <div className="text-sm text-muted">Total Sales</div>
              <div className="text-2xl font-bold text-text">{uniqueSales}</div>
            </div>
            <div className="bg-surface rounded-lg shadow-sm p-4 border border-border">
              <div className="text-sm text-muted">Items Sold</div>
              <div className="text-2xl font-bold text-text">{totalQty}</div>
            </div>
            <div className="bg-surface rounded-lg shadow-sm p-4 border border-border">
              <div className="text-sm text-muted">Total Amount</div>
              <div className="text-2xl font-bold text-brand">{formatCurrency(totalSales)}</div>
            </div>
          </div>
        )}
 
        {/* Results Table */}
        {loading && (
          <div className="bg-surface rounded-lg shadow-sm p-12 text-center border border-border">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-brand"></div>
            <p className="mt-4 text-muted">Loading sales data...</p>
          </div>
        )}
 
        {!loading && data.length === 0 && !error && (
          <div className="bg-surface rounded-lg shadow-sm p-12 text-center border border-border">
            <Icon name="assessment" size={64} className="inline-block mb-4 text-muted" />
            <h3 className="text-lg font-semibold text-text mb-2">No Sales Data</h3>
            <p className="text-muted">Select a date range and click "Load Report" to view sales.</p>
          </div>
        )}
 
        {!loading && data.length > 0 && (
          <div className="bg-surface rounded-lg shadow-sm overflow-hidden border border-border">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-[var(--brand)] text-surface">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase tracking-wider">
                      Sale ID
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase tracking-wider">
                      Date
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase tracking-wider">
                      Product
                    </th>
                    <th className="px-4 py-3 text-right text-xs font-semibold text-muted uppercase tracking-wider">
                      Qty
                    </th>
                    <th className="px-4 py-3 text-right text-xs font-semibold text-muted uppercase tracking-wider">
                      Amount
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase tracking-wider">
                      Teller
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase tracking-wider">
                      Payment
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {data.map((row, idx) => (
                    <tr key={idx} className="hover:bg-surface-2 transition">
                      <td className="px-4 py-3 text-sm text-text">
                        {row.f101}
                      </td>
                      <td className="px-4 py-3 text-sm text-muted">
                        {formatDate(row.f102)}
                      </td>
                      <td className="px-4 py-3 text-sm text-text">
                        <div className="font-medium">{row.f201 || 'Unknown Product'}</div>
                        <div className="text-xs text-muted">PID: {row.f200}</div>
                      </td>
                      <td className="px-4 py-3 text-sm text-text text-right">
                        {row.f202}
                      </td>
                      <td className="px-4 py-3 text-sm font-medium text-text text-right">
                        {formatCurrency(row.f203)}
                      </td>
                      <td className="px-4 py-3 text-sm text-muted">
                        {row.f104 || '-'}
                      </td>
                      <td className="px-4 py-3 text-sm text-muted">
                        {row.f301 || '-'}
                      </td>
                    </tr>
                  ))}
                </tbody>
                <tfoot className="bg-surface-2 border-t-2 border-border">
                  <tr>
                    <td colSpan={3} className="px-4 py-3 text-sm font-bold text-text">
                      Totals
                    </td>
                    <td className="px-4 py-3 text-sm font-bold text-text text-right">
                      {totalQty}
                    </td>
                    <td className="px-4 py-3 text-sm font-bold text-brand text-right">
                      {formatCurrency(totalSales)}
                    </td>
                    <td colSpan={2}></td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        )}
 
        {/* Help Text */}
        <div className="mt-6 bg-brand-2 border border-brand rounded-lg p-4">
          <div className="flex items-start gap-2">
            <span className="text-brand text-xl">ℹ️</span>
            <div className="text-sm text-text">
              <div className="font-semibold mb-1">About This Report</div>
              <div>
                This report shows all sale items for the selected date range at your store. 
                Each row represents one product line from a sale. To see sales grouped by receipt, 
                use the Sale Header Review report.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}