page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { apiClient } from '@/lib/client/apiClient';
import { fieldpineApi } from "@/lib/client/fieldpineApi";
 
interface Location {
  f100: number;
  f101: string;
}
 
interface Department {
  f100: number;
  f101: string;
}
 
interface Quotation {
  f101: string; // Sale ID
  f102: string; // Date
  f103?: string; // Teller ID
  f104?: string; // Teller Name
  f105?: string; // Location ID
  f106?: string; // Store Name
  f107?: number; // Total Sale
  f108?: string; // Customer ID
  f200?: number; // Product ID
  f201?: string; // Product Name
  f202?: number; // Quantity
  f203?: number; // Line Price
  CUST?: any[]; // Customer details
}
 
export default function OpenQuotationsPage() {
  const [locations, setLocations] = useState<Location[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [fromDate, setFromDate] = useState('');
  const [toDate, setToDate] = useState(() => {
    const d = new Date();
    d.setDate(d.getDate() + 1);
    return d.toISOString().split('T')[0];
  });
  const [selectedLocation, setSelectedLocation] = useState('0');
  const [selectedDepartment, setSelectedDepartment] = useState('0');
  const [maxRows, setMaxRows] = useState('200');
  const [quotations, setQuotations] = useState<Quotation[]>([]);
  const [loading, setLoading] = useState(false);
  const [sortColumn, setSortColumn] = useState<keyof Quotation>('f102');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
 
  useEffect(() => {
    loadLocations();
    loadDepartments();
  }, []);
 
  const loadLocations = async () => {
    try {
      const apiKey = sessionStorage.getItem("fieldpine_apikey");
      if (!apiKey) return;
 
      const response = await fieldpineApi({
        endpoint: '/buck?3=retailmax.elink.locations&100=1',
        apiKey
      });
 
      if (response.DATS) {
        setLocations(response.DATS);
      }
    } catch (error) {
      console.error('Error loading locations:', error);
    }
  };
 
  const loadDepartments = async () => {
    try {
      const apiKey = sessionStorage.getItem("fieldpine_apikey");
      if (!apiKey) return;
 
      const response = await fieldpineApi({
        endpoint: '/buck?3=retailmax.elink.departments',
        apiKey
      });
 
      if (response.DATS) {
        setDepartments(response.DATS);
      }
    } catch (error) {
      console.error('Error loading departments:', error);
    }
  };
 
  const loadQuotations = async () => {
    setLoading(true);
    try {
      const apiKey = sessionStorage.getItem("fieldpine_apikey");
      if (!apiKey) {
        console.error("No API key found");
        setLoading(false);
        return;
      }
 
      let predicates = '';
 
      // Date range (optional)
      if (fromDate) {
        const fromFormatted = formatDateForAPI(fromDate);
        predicates += `&9=f102,4,${fromFormatted}`;
      }
      if (toDate) {
        const toFormatted = formatDateForAPI(toDate);
        predicates += `&9=f102,1,${toFormatted}`;
      }
      
      // Filter for quotations (f109 = 10001)
      predicates += '&9=f109,0,10001';
 
      // Add location filter
      if (selectedLocation !== '0' && selectedLocation !== '') {
        predicates += `&9=f105,0,${selectedLocation}`;
      }
 
      // Add department filter
      if (selectedDepartment !== '0' && selectedDepartment !== '') {
        predicates += `&9=f801,0,${selectedDepartment}`;
      }
 
      // Full product and customer packets
      predicates += '&103=1&104=1';
 
      // Add max rows limit
      predicates += `&8=${maxRows}`;
 
      const response = await fieldpineApi({
        endpoint: `/buck?3=retailmax.elink.saleflat.list${predicates}`,
        apiKey
      });
 
      if (response.APPT) {
        setQuotations(response.APPT);
      } else {
        setQuotations([]);
      }
    } catch (error) {
      console.error('Error loading quotations:', error);
      setQuotations([]);
    } finally {
      setLoading(false);
    }
  };
 
  const formatDateForAPI = (dateStr: string): string => {
    const date = new Date(dateStr);
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    return `${day}-${month}-${year}`;
  };
 
  const handleSearch = () => {
    loadQuotations();
  };
 
  const formatDate = (dateStr?: string): string => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-NZ', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };
 
  const formatCurrency = (value?: number): string => {
    if (!value) return '$0.00';
    return new Intl.NumberFormat('en-NZ', {
      style: 'currency',
      currency: 'NZD'
    }).format(value);
  };
 
  const handleSort = (column: keyof Quotation) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortColumn(column);
      setSortDirection('asc');
    }
  };
 
  const sortedQuotations = [...quotations].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 Quotation }) => {
    if (sortColumn !== column) return <span className="text-muted/50">⇅</span>;
    return <span>{sortDirection === 'asc' ? '↑' : '↓'}</span>;
  };
 
  const getCustomerName = (quote: Quotation): string => {
    if (quote.CUST && quote.CUST[0] && quote.CUST[0].f101) {
      return quote.CUST[0].f101;
    }
    return '';
  };
 
  const handleViewQuote = (saleId: string) => {
    // Open the quote PDF in a new window
    window.open(`/OpenApi/DocumentRequest?template=121&output=pdf&saleid=${saleId}`, '_blank');
  };
 
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold mb-2">Open Quotations 💬</h1>
            <p className="text-sm text-muted mb-2">
              View and manage open sales quotations
            </p>
            <div className="text-sm text-muted">
              <a href="/pages/reports/sales-reports" className="text-brand hover:underline">Sales</a>
              {' > '}
              <span>Open Quotations</span>
            </div>
          </div>
          <div>
            <a 
              href="/report/pos/sales/fieldpine/EnterQuote.htm"
              className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
              target="_blank"
              rel="noopener noreferrer"
            >
              Enter New Quote
            </a>
          </div>
        </div>
      </div>
 
      {/* Filters */}
      <div className="bg-surface rounded-lg shadow p-6 mb-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-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="w-full 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="w-full border rounded px-3 py-2"
            />
          </div>
 
          <div>
            <label className="block text-sm font-medium text-text mb-2">
              Store:
            </label>
            <select
              value={selectedLocation}
              onChange={(e) => setSelectedLocation(e.target.value)}
              className="w-full border rounded px-3 py-2"
            >
              <option value="0">All Stores</option>
              {locations.map(loc => (
                <option key={loc.f100} value={loc.f100}>
                  {loc.f101}
                </option>
              ))}
            </select>
          </div>
 
          <div>
            <label className="block text-sm font-medium text-text mb-2">
              Department:
            </label>
            <select
              value={selectedDepartment}
              onChange={(e) => setSelectedDepartment(e.target.value)}
              className="w-full border rounded px-3 py-2"
            >
              <option value="0">--Select--</option>
              {departments.map(dept => (
                <option key={dept.f100} value={dept.f100}>
                  {dept.f101}
                </option>
              ))}
            </select>
          </div>
 
          <div>
            <label className="block text-sm font-medium text-text mb-2">
              Max Rows:
            </label>
            <input
              type="number"
              value={maxRows}
              onChange={(e) => setMaxRows(e.target.value)}
              className="w-full border rounded px-3 py-2"
            />
          </div>
 
          <div className="flex items-end">
            <button
              onClick={handleSearch}
              disabled={loading}
              className="w-full bg-brand text-white px-6 py-2 rounded hover:bg-brand2 disabled:bg-muted/50"
            >
              {loading ? 'Loading...' : 'Display'}
            </button>
          </div>
        </div>
      </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 quotations...</p>
          </div>
        ) : (
          <>
            <div className="overflow-x-auto max-h-[600px] overflow-y-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('f102')}
                    >
                      Date <SortIcon column="f102" />
                    </th>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('f106')}
                    >
                      Store <SortIcon column="f106" />
                    </th>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('f101')}
                    >
                      Sale# <SortIcon column="f101" />
                    </th>
                    <th 
                      className="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('f107')}
                    >
                      Total Sale <SortIcon column="f107" />
                    </th>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('f104')}
                    >
                      Teller <SortIcon column="f104" />
                    </th>
                    <th 
                      className="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('f201')}
                    >
                      Product <SortIcon column="f201" />
                    </th>
                    <th 
                      className="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('f202')}
                    >
                      Qty <SortIcon column="f202" />
                    </th>
                    <th 
                      className="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-surface-2/80"
                      onClick={() => handleSort('f203')}
                    >
                      Line Price <SortIcon column="f203" />
                    </th>
                    <th className="px-4 py-3 text-left font-semibold">
                      Customer Name
                    </th>
                    <th className="px-4 py-3 text-center font-semibold">
                      Options
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {sortedQuotations.length === 0 ? (
                    <tr>
                      <td colSpan={10} className="px-4 py-8 text-center text-muted">
                        No open quotations found
                      </td>
                    </tr>
                  ) : (
                    sortedQuotations.map((quote, idx) => (
                      <tr key={idx} className="hover:bg-surface-2">
                        <td className="px-4 py-3 whitespace-nowrap">
                          {formatDate(quote.f102)}
                        </td>
                        <td className="px-4 py-3">
                          {quote.f106 || '-'}
                        </td>
                        <td className="px-4 py-3">
                          <a 
                            href={`/report/pos/sales/fieldpine/SingleSale.htm?sid=${quote.f101}`}
                            className="text-brand hover:underline"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {quote.f101}
                          </a>
                        </td>
                        <td className="px-4 py-3 text-right font-semibold">
                          {formatCurrency(quote.f107)}
                        </td>
                        <td className="px-4 py-3">
                          {quote.f104 || '-'}
                        </td>
                        <td className="px-4 py-3">
                          {quote.f200 ? (
                            <a 
                              href={`/report/pos/stock/fieldpine/singlepid.htm?pid=${quote.f200}`}
                              className="text-brand hover:underline"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {quote.f201 || quote.f200}
                            </a>
                          ) : (
                            quote.f201 || '-'
                          )}
                        </td>
                        <td className="px-4 py-3 text-right">
                          {quote.f202 || 0}
                        </td>
                        <td className="px-4 py-3 text-right">
                          {formatCurrency(quote.f203)}
                        </td>
                        <td className="px-4 py-3">
                          {getCustomerName(quote) || '-'}
                        </td>
                        <td className="px-4 py-3 text-center">
                          <button
                            onClick={() => handleViewQuote(quote.f101)}
                            className="bg-brand text-white px-3 py-1 rounded text-xs hover:bg-brand2"
                          >
                            View Quote
                          </button>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
            
            {quotations.length > 0 && (
              <div className="px-4 py-3 bg-surface-2 border-t text-sm text-muted">
                Showing {quotations.length} open quotation{quotations.length !== 1 ? 's' : ''}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}