page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface PickingSale {
  f100: number; // Sale ID
  f102: number; // Total
  f109: string; // Date
  f2001: number; // Age in days
  f905: number; // Line count
  f108: number; // Status
  f7102?: number; // Assigned store
  f7120?: string; // Picking comments
  f7121?: number; // Row color
  f7123?: string; // Customer comments
  BIG1?: Array<{ f103: string }>; // Biggest item
  DELI?: Array<{
    f302?: string; // Notes
    f303?: string; // Phone
    f304?: string; // Name
    f305?: string; // Email
    f306?: string; // Click+Collect store
  }>;
  CUST?: Array<{
    f101?: string; // Name
    f112?: string; // Phone
    f115?: string; // Email
    Name?: string;
  }>;
}
 
interface Location {
  f100: number;
  f101: string;
}
 
export default function SalesPickingPage() {
  const [sales, setSales] = useState<PickingSale[]>([]);
  const [locations, setLocations] = useState<Location[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [colorFilter, setColorFilter] = useState('');
  const [locationFilter, setLocationFilter] = useState('');
  const [rowLimit, setRowLimit] = useState(400);
 
  useEffect(() => {
    loadLocations();
    loadSales();
  }, []);
 
  const loadLocations = async () => {
    try {
      const response = await fetch('/api/v1/locations');
      if (response.ok) {
        const data = await response.json();
        setLocations(data.data || []);
      }
    } catch (error) {
      console.error('Failed to load locations:', error);
    }
  };
 
  const loadSales = async () => {
    setLoading(true);
    try {
      const response = await fetch(`/api/v1/sales/picking?limit=${rowLimit}`);
      if (response.ok) {
        const data = await response.json();
        setSales(data.data || []);
      }
    } catch (error) {
      console.error('Failed to load sales:', error);
    } finally {
      setLoading(false);
    }
  };
 
  const updateSale = async (saleId: number, updates: Record<string, any>) => {
    try {
      await fetch(`/api/v1/sales/${saleId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updates)
      });
      
      // Update local state
      setSales(prev => prev.map(s => 
        s.f100 === saleId ? { ...s, ...updates } : s
      ));
    } catch (error) {
      console.error('Failed to update sale:', error);
    }
  };
 
  const getCustomerName = (sale: PickingSale) => {
    return sale.DELI?.[0]?.f304 || 
           sale.CUST?.[0]?.Name || 
           sale.CUST?.[0]?.f101 || 
           '';
  };
 
  const getPhone = (sale: PickingSale) => {
    return sale.DELI?.[0]?.f303 || sale.CUST?.[0]?.f112 || '';
  };
 
  const getEmail = (sale: PickingSale) => {
    return sale.DELI?.[0]?.f305 || sale.CUST?.[0]?.f115 || '';
  };
 
  const getNotes = (sale: PickingSale) => {
    return sale.DELI?.[0]?.f302 || '';
  };
 
  const getRowColor = (colorCode?: number) => {
    switch (colorCode) {
      case 2: return '#00FF00'; // Lime
      case 7: return '#FFFF00'; // Yellow
      case 25: return '#8A2BE2'; // Blue Violet
      case 64: return '#FF69B4'; // Hot Pink
      case 131: return '#4682B4'; // Steel Blue
      case 132: return '#D2B48C'; // Tan
      default: return '';
    }
  };
 
  const formatDate = (dateStr: string | undefined) => {
    if (!dateStr) return '';
    try {
      // Fieldpine returns dates like "2025|12|24|16|5|3||"
      if (dateStr.includes('|')) {
        const parts = dateStr.split('|');
        const year = parseInt(parts[0]);
        const month = parseInt(parts[1]);
        const day = parseInt(parts[2]);
        const hour = parseInt(parts[3] || '0');
        const minute = parseInt(parts[4] || '0');
        
        const date = new Date(year, month - 1, day, hour, minute);
        const monthName = date.toLocaleDateString('en-US', { month: 'short' });
        const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
        
        return `${day}-${monthName}-${year} ${timeStr}`;
      }
      
      // Fallback for standard date formats
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return dateStr;
      
      const day = date.getDate();
      const month = date.toLocaleDateString('en-US', { month: 'short' });
      const year = date.getFullYear();
      const time = date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
      
      return `${day}-${month}-${year} ${time}`;
    } catch {
      return dateStr || '';
    }
  };
 
  const filteredSales = sales.filter(sale => {
    // Search filter
    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      const matches = 
        String(sale.f100).includes(term) ||
        getCustomerName(sale).toLowerCase().includes(term) ||
        getNotes(sale).toLowerCase().includes(term);
      if (!matches) return false;
    }
 
    // Color filter
    if (colorFilter) {
      const cfn = Number(colorFilter);
      const hcolor = sale.f7121 || 0;
      if (cfn === -1 && hcolor > 0) return false; // No set color
      if (cfn === -2 && hcolor <= 0) return false; // Any set color
      if (cfn > 0 && hcolor !== cfn) return false;
    }
 
    // Location filter
    if (locationFilter) {
      const locId = Number(locationFilter);
      const cLoc = sale.f7102 || 0;
      if (locId === -1 && cLoc > 0) return false; // Not assigned
      if (locId > 0 && cLoc !== locId) return false;
    }
 
    return true;
  });
 
  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand mx-auto"></div>
          <p className="mt-4 text-muted">Loading sales awaiting picking...</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-text">Sales Picking</h1>
        <p className="mt-2 text-muted">
          Sales that have been received and are awaiting stock picking and shipping.
        </p>
      </div>
 
      {/* Filters */}
      <div className="mb-6 bg-surface rounded-lg shadow p-4">
        <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
          <div>
            <label className="block text-sm font-medium text-text mb-1">Rows</label>
            <div className="flex gap-2">
              <input
                type="number"
                value={rowLimit}
                onChange={(e) => setRowLimit(Number(e.target.value))}
                className="block w-20 rounded-md border-border shadow-sm focus:border-brand focus:ring-brand sm:text-sm"
              />
              <button
                onClick={loadSales}
                className="px-4 py-2 bg-brand text-white rounded-md hover:opacity-90 transition-all"
              >
                Load
              </button>
            </div>
          </div>
 
          <div>
            <label className="block text-sm font-medium text-text mb-1">Search</label>
            <input
              type="text"
              placeholder="Sale #, customer, notes..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="block w-full rounded-md border-border shadow-sm focus:border-brand focus:ring-brand sm:text-sm"
            />
          </div>
 
          <div>
            <label className="block text-sm font-medium text-text mb-1">Color</label>
            <select
              value={colorFilter}
              onChange={(e) => setColorFilter(e.target.value)}
              className="block w-full rounded-md border-border shadow-sm focus:border-brand focus:ring-brand sm:text-sm"
            >
              <option value="">Any/all</option>
              <option value="-1">No set color</option>
              <option value="-2">Any set color</option>
              <option value="64" style={{ backgroundColor: '#FF69B4' }}>Hot Pink</option>
              <option value="7" style={{ backgroundColor: '#FFFF00' }}>Yellow</option>
              <option value="2" style={{ backgroundColor: '#00FF00' }}>Lime</option>
              <option value="25" style={{ backgroundColor: '#8A2BE2' }}>Blue Violet</option>
              <option value="131" style={{ backgroundColor: '#4682B4' }}>Steel Blue</option>
              <option value="132" style={{ backgroundColor: '#D2B48C' }}>Tan</option>
            </select>
          </div>
 
          <div>
            <label className="block text-sm font-medium text-text mb-1">Store</label>
            <select
              value={locationFilter}
              onChange={(e) => setLocationFilter(e.target.value)}
              className="block w-full rounded-md border-border shadow-sm focus:border-brand focus:ring-brand sm:text-sm"
            >
              <option value="">Any/All</option>
              <option value="-1">Not Assigned</option>
              {locations.map(loc => (
                <option key={loc.f100} value={loc.f100}>{loc.f101}</option>
              ))}
            </select>
          </div>
 
          <div className="flex items-end">
            <div className="text-sm text-muted">
              Displaying {filteredSales.length} of {sales.length} sales
            </div>
          </div>
        </div>
      </div>
 
      {/* Sales Table */}
      <div className="bg-surface rounded-lg shadow overflow-x-auto">
        <table className="min-w-full divide-y divide-border">
          <thead className="bg-[var(--brand)] text-surface">
            <tr>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Date</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Age</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Sale#</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Total</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Lines</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Store</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Comments</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Customer</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Phone</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Email</th>
              <th className="px-3 py-3 text-left text-xs font-medium uppercase tracking-wider">Notes</th>
            </tr>
          </thead>
          <tbody className="bg-surface divide-y divide-border">
            {filteredSales.map((sale, idx) => (
              <tr 
                key={sale.f100} 
                style={{ backgroundColor: getRowColor(sale.f7121) || (idx % 2 === 0 ? 'var(--surface)' : 'var(--surface-2)') }}
              >
                <td className="px-3 py-2 whitespace-nowrap text-sm text-text">
                  {formatDate(sale.f109)}
                </td>
                <td className="px-3 py-2 whitespace-nowrap text-sm text-text">
                  {sale.f2001?.toFixed(1) || '0.0'}
                </td>
                <td className="px-3 py-2 whitespace-nowrap text-sm">
                  <a 
                    href={`/pages/sales/${sale.f100}`}
                    className="text-brand hover:underline"
                  >
                    {sale.f100}
                  </a>
                </td>
                <td className="px-3 py-2 whitespace-nowrap text-sm text-text">
                  ${sale.f102?.toFixed(2)}
                </td>
                <td className="px-3 py-2 whitespace-nowrap text-sm text-text">
                  {sale.f905}
                </td>
                <td className="px-3 py-2 text-sm">
                  <select
                    value={sale.f7102 || 0}
                    onChange={(e) => updateSale(sale.f100, { f7102: Number(e.target.value) })}
                    className="block w-full rounded border-border text-sm focus:border-brand focus:ring-brand"
                  >
                    <option value="0">Not Assigned</option>
                    {locations.map(loc => (
                      <option key={loc.f100} value={loc.f100}>{loc.f101}</option>
                    ))}
                  </select>
                </td>
                <td className="px-3 py-2 text-sm">
                  <input
                    type="text"
                    value={sale.f7120 || ''}
                    onChange={(e) => updateSale(sale.f100, { f7120: e.target.value })}
                    className="block w-full rounded border-border text-sm focus:border-brand focus:ring-brand"
                    placeholder="Pick comments..."
                  />
                </td>
                <td className="px-3 py-2 text-sm text-text">
                  {getCustomerName(sale)}
                </td>
                <td className="px-3 py-2 text-sm text-text">
                  {getPhone(sale) && (
                    <a href={`tel:${getPhone(sale)}`} className="text-brand hover:underline">
                      {getPhone(sale)}
                    </a>
                  )}
                </td>
                <td className="px-3 py-2 text-sm text-text">
                  {getEmail(sale) && (
                    <a href={`mailto:${getEmail(sale)}`} className="text-brand hover:underline">
                      {getEmail(sale)}
                    </a>
                  )}
                </td>
                <td className="px-3 py-2 text-sm text-text max-w-xs truncate" title={getNotes(sale)}>
                  {getNotes(sale)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
 
        {filteredSales.length === 0 && (
          <div className="text-center py-12 text-muted">
            No sales found matching your filters.
          </div>
        )}
      </div>
    </div>
  );
}