page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from "react";
import { Icon } from '@/contexts/IconContext';
import { apiClient } from "@/lib/client/apiClient";
 
interface StockLevel {
  locname: string;
  pid: number;
  qoh: number;
  descrip: string;
  sku: string | null;
  partcode: string | null;
}
 
interface Location {
  id: number;
  name: string;
}
 
export default function StockLevelsPage() {
  const [stockLevels, setStockLevels] = useState<StockLevel[]>([]);
  const [locations, setLocations] = useState<Location[]>([]);
  const [selectedLocation, setSelectedLocation] = useState<string>("all");
  const [includeZero, setIncludeZero] = useState<boolean>(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [sortColumn, setSortColumn] = useState<keyof StockLevel | null>("qoh");
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
 
  useEffect(() => {
    loadLocations();
    loadStockLevels();
  }, []);
 
  useEffect(() => {
    loadStockLevels();
  }, [selectedLocation, includeZero]);
 
  const loadLocations = async () => {
    try {
      const result = await apiClient.get('/v1/locations');
      if (result.DATS && Array.isArray(result.DATS)) {
        const locs = result.DATS.map((loc: any) => ({
          id: loc.f100,
          name: loc.f101 || loc.f500 || `Location ${loc.f100}`
        }));
        setLocations(locs);
      }
    } catch (error) {
      console.error('Failed to load locations:', error);
    }
  };
 
  const loadStockLevels = async () => {
    try {
      setLoading(true);
      setError(null);
 
      const params: any = {
        includeZero: includeZero ? 'true' : 'false'
      };
 
      if (selectedLocation !== 'all') {
        params.locationId = selectedLocation;
      }
 
      const queryString = new URLSearchParams(params as any).toString();
      const result = await apiClient.get(`/v1/inventory/stock-levels?${queryString}`);
 
      if (result.success && result.data) {
        setStockLevels(result.data.rows || []);
      } else {
        setError('Failed to load stock levels');
        setStockLevels([]);
      }
    } catch (error: any) {
      console.error('Failed to load stock levels:', error);
      setError(error.message || 'Network error while fetching stock levels');
      setStockLevels([]);
    } finally {
      setLoading(false);
    }
  };
 
  const handleSort = (column: keyof StockLevel) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      setSortColumn(column);
      setSortDirection(column === 'qoh' ? 'desc' : 'asc');
    }
  };
 
  const sortedStockLevels = [...stockLevels].sort((a, b) => {
    if (!sortColumn) return 0;
 
    const aVal = a[sortColumn];
    const bVal = b[sortColumn];
 
    if (aVal === null && bVal === null) return 0;
    if (aVal === null) return 1;
    if (bVal === null) return -1;
 
    let comparison = 0;
    if (typeof aVal === 'number' && typeof bVal === 'number') {
      comparison = aVal - bVal;
    } else {
      comparison = String(aVal).localeCompare(String(bVal));
    }
 
    return sortDirection === 'asc' ? comparison : -comparison;
  });
 
  const totalQoh = stockLevels.reduce((sum, item) => sum + (item.qoh || 0), 0);
 
  return (
    <div className="p-6 bg-bg min-h-screen">
      <div className="mb-6">
        <div className="bg-warn/10 p-4 rounded-lg border-l-4 border-warn mb-4">
          <div className="text-text">
            <h1 className="text-2xl font-bold flex items-center gap-2"><Icon name="inventory_2" size={28} /> Store Stock Levels</h1>
            <p className="text-sm mt-1 text-muted">View current inventory levels across all locations</p>
          </div>
        </div>
      </div>
 
      {/* Filters */}
      <div className="bg-surface p-4 rounded-lg shadow border border-border mb-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-text mb-1">Location</label>
            <select
              className="w-full p-3 border border-border rounded-lg bg-surface text-text focus:ring-2 focus:ring-brand"
              value={selectedLocation}
              onChange={(e) => setSelectedLocation(e.target.value)}
            >
              <option value="all">All Locations</option>
              {locations.map(loc => (
                <option key={loc.id} value={loc.id}>
                  {loc.name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-text mb-1">Display Options</label>
            <div className="flex items-center h-full">
              <label className="flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={includeZero}
                  onChange={(e) => setIncludeZero(e.target.checked)}
                  className="mr-2 h-4 w-4"
                />
                <span className="text-sm text-text">Include zero stock items</span>
              </label>
            </div>
          </div>
          <div className="flex items-end">
            <button
              onClick={loadStockLevels}
              className="px-4 py-3 bg-brand text-white rounded-lg hover:opacity-90 font-medium flex items-center gap-2"
            >
              <Icon name="refresh" size={20} /> Refresh
            </button>
          </div>
        </div>
      </div>
 
      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-brand-2 p-4 rounded-lg border border-border">
          <div className="text-2xl font-bold text-brand">{stockLevels.length}</div>
          <div className="text-sm text-text">Total Items</div>
        </div>
        <div className="bg-surface-2 p-4 rounded-lg border border-border">
          <div className="text-2xl font-bold text-brand">{totalQoh}</div>
          <div className="text-sm text-text">Total Quantity</div>
        </div>
        <div className="bg-warn/10 p-4 rounded-lg border border-warn">
          <div className="text-2xl font-bold text-warn">
            {stockLevels.filter(s => s.qoh < 0).length}
          </div>
          <div className="text-sm text-text">Negative Stock</div>
        </div>
      </div>
 
      {/* Error Display */}
      {error && (
        <div className="bg-danger/10 border-l-4 border-danger p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <Icon name="warning" size={24} className="text-danger" />
            </div>
            <div className="ml-3">
              <p className="text-sm text-danger">{error}</p>
            </div>
          </div>
        </div>
      )}
 
      {/* Loading Indicator */}
      {loading && (
        <div className="flex justify-center items-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand"></div>
          <span className="ml-3 text-muted">Loading stock levels...</span>
        </div>
      )}
 
      {/* Stock Levels Table */}
      {!loading && (
        <div className="bg-surface rounded-lg shadow overflow-auto border border-border">
          <table className="min-w-full divide-y divide-border">
            <thead className="bg-[var(--brand)] text-surface">
              <tr>
                <th 
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer hover:opacity-90"
                  onClick={() => handleSort('locname')}
                >
                  Store {sortColumn === 'locname' && (sortDirection === 'asc' ? '▲' : '▼')}
                </th>
                <th 
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer hover:opacity-90"
                  onClick={() => handleSort('pid')}
                >
                  PID {sortColumn === 'pid' && (sortDirection === 'asc' ? '▲' : '▼')}
                </th>
                <th 
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer hover:opacity-90"
                  onClick={() => handleSort('qoh')}
                >
                  On Hand {sortColumn === 'qoh' && (sortDirection === 'asc' ? '▲' : '▼')}
                </th>
                <th 
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer hover:opacity-90"
                  onClick={() => handleSort('descrip')}
                >
                  Description {sortColumn === 'descrip' && (sortDirection === 'asc' ? '▲' : '▼')}
                </th>
                <th 
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer hover:opacity-90"
                  onClick={() => handleSort('sku')}
                >
                  SKU/PLU {sortColumn === 'sku' && (sortDirection === 'asc' ? '▲' : '▼')}
                </th>
                <th 
                  className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer hover:opacity-90"
                  onClick={() => handleSort('partcode')}
                >
                  Part Code {sortColumn === 'partcode' && (sortDirection === 'asc' ? '▲' : '▼')}
                </th>
              </tr>
            </thead>
            <tbody className="bg-surface divide-y divide-border">
              {sortedStockLevels.length === 0 ? (
                <tr>
                  <td colSpan={6} className="px-6 py-4 text-center text-muted">
                    No stock levels found
                  </td>
                </tr>
              ) : (
                sortedStockLevels.map((stock, index) => (
                  <tr 
                    key={`${stock.pid}-${stock.locname}-${index}`}
                    className={`
                      ${stock.qoh < 0 ? 'bg-danger/10' : stock.qoh === 0 ? 'bg-surface-2' : ''}
                      hover:bg-surface-2
                    `}
                  >
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                      {stock.locname}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                      {stock.pid}
                    </td>
                    <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${
                      stock.qoh < 0 ? 'text-danger' : 
                      stock.qoh === 0 ? 'text-muted' : 
                      'text-brand'
                    }`}>
                      {stock.qoh}
                    </td>
                    <td className="px-6 py-4 text-sm text-text">
                      {stock.descrip}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                      {stock.sku || '-'}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                      {stock.partcode || '-'}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
            {sortedStockLevels.length > 0 && (
              <tfoot className="bg-surface-2">
                <tr>
                  <td className="px-6 py-3 text-sm font-bold text-text">Totals</td>
                  <td className="px-6 py-3 text-sm">&nbsp;</td>
                  <td className="px-6 py-3 text-sm font-bold text-text">{totalQoh}</td>
                  <td className="px-6 py-3 text-sm">&nbsp;</td>
                  <td className="px-6 py-3 text-sm">&nbsp;</td>
                  <td className="px-6 py-3 text-sm">&nbsp;</td>
                </tr>
              </tfoot>
            )}
          </table>
        </div>
      )}
    </div>
  );
}