page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { apiClient } from "@/lib/client/apiClient";
import { Icon } from "@/contexts/IconContext";
 
interface Supplier {
  Spid: number; // Supplier ID
  Name: string; // Name
  Phone?: string; // Phone
  Fax?: string; // Fax
  Email?: string; // Email
  Address1?: string; // Address Line 1
  Address2?: string; // Address Line 2
  City?: string; // City
  State?: string; // State
  PostalCode?: string; // Postal Code
  Country?: string; // Country
  Key?: string; // Unique Key
}
 
export default function SuppliersPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [sortBy, setSortBy] = useState("name-az");
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
  const [showDetailPopup, setShowDetailPopup] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();
 
  useEffect(() => {
    fetchSuppliers();
  }, []);
 
  useEffect(() => {
    // Debounce search
    const timer = setTimeout(() => {
      if (searchTerm.trim().length > 0 || suppliers.length > 0) {
        fetchSuppliers();
      }
    }, 300);
 
    return () => clearTimeout(timer);
  }, [searchTerm]);
 
  const fetchSuppliers = async () => {
    setLoading(true);
    setError(null);
    try {
      // Use apiClient for type-safe API calls
      const result = await apiClient.getSuppliers({
        limit: 100,
        search: searchTerm.trim() || undefined,
        source: 'openapi'
      });
      
      // Handle OpenAPI response: { success, data: { data: { DATS: [...] } } }
      if (result.success) {
        const apiData = result.data as any;
        const supplierData = apiData?.data?.DATS || [];
        if (Array.isArray(supplierData) && supplierData.length > 0) {
          // Apply sorting
          let sortedSuppliers = [...supplierData];
          
          switch (sortBy) {
            case "name-az":
              sortedSuppliers.sort((a, b) => (a.Name || "").localeCompare(b.Name || ""));
              break;
            case "name-za":
              sortedSuppliers.sort((a, b) => (b.Name || "").localeCompare(a.Name || ""));
              break;
            case "location":
              sortedSuppliers.sort((a, b) => (a.City || "").localeCompare(b.City || ""));
              break;
          }
          
          setSuppliers(sortedSuppliers);
        } else {
          setError("No suppliers found");
          setSuppliers([]);
        }
      } else {
        setError("Failed to load suppliers");
        setSuppliers([]);
      }
    } catch (error) {
      console.error("Error fetching suppliers:", error);
      setError("Network error while fetching suppliers");
      setSuppliers([]);
    } finally {
      setLoading(false);
    }
  };
 
  const getFullAddress = (supplier: Supplier): string => {
    const parts = [];
    if (supplier.Address1) parts.push(supplier.Address1);
    if (supplier.Address2) parts.push(supplier.Address2);
    if (supplier.City) parts.push(supplier.City);
    if (supplier.State) parts.push(supplier.State);
    if (supplier.PostalCode) parts.push(supplier.PostalCode);
    if (supplier.Country) parts.push(supplier.Country);
    return parts.join(', ') || 'No address available';
  };
 
  const openSupplierDetail = (supplier: Supplier) => {
    setSelectedSupplier(supplier);
    setShowDetailPopup(true);
  };
 
  const closePopup = () => {
    setShowDetailPopup(false);
    setSelectedSupplier(null);
  };
 
  const filteredSuppliers = suppliers.filter(supplier =>
    searchTerm === "" || 
    (supplier.Name || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
    (supplier.Email || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
    (supplier.City || "").toLowerCase().includes(searchTerm.toLowerCase())
  );
 
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2 flex items-center gap-2"><Icon name="local_shipping" size={32} /> Supplier Management</h1>
        <p className="text-muted">Manage supplier records and vendor information</p>
      </div>
 
      {/* Controls */}
      <div className="bg-surface rounded-lg shadow p-6 mb-6">
        <div className="flex flex-col sm:flex-row gap-4 mb-4">
          <div className="flex-1">
            <input
              type="text"
              placeholder="Search suppliers by name, email, or location..."
              className="w-full p-3 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-brand"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <div className="flex gap-2">
            <select
              className="p-3 border border-border rounded-lg focus:ring-2 focus:ring-brand"
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
            >
              <option value="name-az">Name A-Z</option>
              <option value="name-za">Name Z-A</option>
              <option value="location">By Location</option>
            </select>
            <button className="px-4 py-3 bg-success text-surface rounded-lg hover:bg-success/80 transition-colors flex items-center gap-2">
              <Icon name="add" size={18} /> Add Supplier
            </button>
          </div>
        </div>
 
        {/* Stats */}
        <div className="flex gap-4 text-sm text-muted">
          <span>Total suppliers: <strong>{suppliers.length}</strong></span>
          {searchTerm && (
            <span>Showing: <strong>{filteredSuppliers.length}</strong> results</span>
          )}
        </div>
      </div>
 
      {/* Error State */}
      {error && (
        <div className="bg-warn/10 border border-warn/30 rounded-lg p-4 mb-6">
          <div className="flex items-center">
            <Icon name="warning" className="text-warn" size={20} />
            <span className="ml-2 text-warn">{error}</span>
            <button
              onClick={fetchSuppliers}
              className="ml-auto text-warn hover:text-warn/80 underline"
            >
              Retry
            </button>
          </div>
        </div>
      )}
 
      {/* Loading State */}
      {loading && (
        <div className="bg-surface rounded-lg shadow p-8 text-center">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand"></div>
          <p className="mt-2 text-muted">Loading suppliers...</p>
        </div>
      )}
 
      {/* Supplier List */}
      {!loading && (
        <div className="bg-surface rounded-lg shadow overflow-hidden">
          {filteredSuppliers.length === 0 ? (
            <div className="p-8 text-center">
              <div className="text-6xl mb-4"><Icon name="local_shipping" size={72} /></div>
              <h3 className="text-lg font-medium text-text mb-2">
                {searchTerm ? "No suppliers found" : "No suppliers yet"}
              </h3>
              <p className="text-muted mb-4">
                {searchTerm 
                  ? `No suppliers match "${searchTerm}"` 
                  : "Start by adding your first supplier"}
              </p>
              {!searchTerm && (
                <button className="px-4 py-2 bg-success text-surface rounded-lg hover:bg-success/80 flex items-center gap-2 mx-auto">
                  <Icon name="add" size={18} /> Add First Supplier
                </button>
              )}
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full">
                <thead className="bg-surface-2">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                      Supplier
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                      Contact
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                      Location
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface divide-y divide-border">
                  {filteredSuppliers.map((supplier) => (
                    <tr 
                      key={supplier.Spid} 
                      onClick={() => router.push(`/pages/suppliers/${supplier.Spid}`)}
                      className="hover:bg-surface-2 cursor-pointer"
                    >
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div>
                          <Link 
                            href={`/pages/suppliers/${supplier.Spid}`}
                            className="text-sm font-medium text-brand hover:text-brand2 hover:underline"
                            onClick={(e) => e.stopPropagation()}
                          >
                            {supplier.Name || "Unnamed Supplier"}
                          </Link>
                          <div className="text-sm text-muted">
                            ID: {supplier.Spid}
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-text">
                          {supplier.Phone && (
                            <div className="flex items-center gap-1"><Icon name="phone" size={14} /> {supplier.Phone}</div>
                          )}
                          {supplier.Email && (
                            <div className="flex items-center gap-1"><Icon name="email" size={14} /> {supplier.Email}</div>
                          )}
                          {!supplier.Phone && !supplier.Email && (
                            <span className="text-muted">No contact info</span>
                          )}
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-text">
                          {supplier.City && (
                            <div>{supplier.City}</div>
                          )}
                          {supplier.State && supplier.State !== supplier.City && (
                            <div className="text-xs text-muted">{supplier.State}</div>
                          )}
                          {!supplier.City && (
                            <span className="text-muted">No location</span>
                          )}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div className="flex gap-2">
                          <button 
                            className="text-info hover:text-info/80 flex items-center gap-1"
                            onClick={(e) => {
                              e.stopPropagation();
                              openSupplierDetail(supplier);
                            }}
                          >
                            <Icon name="visibility" size={16} /> View
                          </button>
                          <button 
                            className="text-success hover:text-success/80 flex items-center gap-1"
                            onClick={(e) => e.stopPropagation()}
                          >
                            <Icon name="shopping_cart" size={16} /> Order
                          </button>
                          <button 
                            className="text-brand hover:text-brand2 flex items-center gap-1"
                            onClick={(e) => e.stopPropagation()}
                          >
                            <Icon name="edit" size={16} /> Edit
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
 
      {/* Detail Popup Modal */}
      {showDetailPopup && selectedSupplier && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-surface rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              {/* Header */}
              <div className="flex justify-between items-center mb-6">
                <div>
                  <h2 className="text-2xl font-bold text-text">{selectedSupplier.Name}</h2>
                  <p className="text-muted">Supplier ID: {selectedSupplier.Spid}</p>
                </div>
                <button
                  onClick={closePopup}
                  className="text-muted hover:text-text text-2xl leading-none"
                >
                  ×
                </button>
              </div>
 
              {/* Contact Information */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <h3 className="text-lg font-semibold text-text mb-3">Contact Information</h3>
                  <div className="space-y-2">
                    {selectedSupplier.Phone && (
                      <div className="flex items-center gap-2">
                        <Icon name="phone" size={18} className="text-muted" />
                        <a href={`tel:${selectedSupplier.Phone}`} className="text-brand hover:text-brand2">
                          {selectedSupplier.Phone}
                        </a>
                      </div>
                    )}
                    {selectedSupplier.Fax && (
                      <div className="flex items-center gap-2">
                        <Icon name="print" size={18} className="text-muted" />
                        <span>{selectedSupplier.Fax}</span>
                      </div>
                    )}
                    {selectedSupplier.Email && (
                      <div className="flex items-center gap-2">
                        <Icon name="email" size={18} className="text-muted" />
                        <a href={`mailto:${selectedSupplier.Email}`} className="text-brand hover:text-brand2">
                          {selectedSupplier.Email}
                        </a>
                      </div>
                    )}
                  </div>
                </div>
 
                <div>
                  <h3 className="text-lg font-semibold text-text mb-3">Address</h3>
                  <div className="text-text">
                    {getFullAddress(selectedSupplier)}
                  </div>
                </div>
              </div>
 
              {/* Actions */}
              <div className="flex justify-end gap-3">
                <button
                  onClick={closePopup}
                  className="px-4 py-2 bg-surface-2 hover:bg-surface text-text rounded-md font-medium transition-colors"
                >
                  Close
                </button>
                <button className="px-4 py-2 bg-info hover:bg-info/80 text-surface rounded-md font-medium transition-colors flex items-center gap-2">
                  <Icon name="edit" size={18} /> Edit Supplier
                </button>
                <button className="px-4 py-2 bg-success hover:bg-success/80 text-surface rounded-md font-medium transition-colors flex items-center gap-2">
                  <Icon name="shopping_cart" size={18} /> Create Order
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}