page.tsx

Go to the documentation of this file.

"use client";
import { useState, useEffect } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { SkeletonRow } from "@/components/LoadingSpinner";
import { Icon } from "@/contexts/IconContext";
 
interface Customer {
  Cid: number; // Customer ID
  Name: string; // Name
  Phone?: string; // Phone
  Mobile?: string; // Mobile
  Email?: string; // Email
  Division?: string; // Company/Division
  Key?: string; // Unique Key
}
 
export default function CustomersPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [sortBy, setSortBy] = useState("name-az");
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [loading, setLoading] = useState(false);
  const [showAddModal, setShowAddModal] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    fetchCustomers();
  }, []);
 
  useEffect(() => {
    // Debounce search
    const timer = setTimeout(() => {
      if (searchTerm.trim().length > 0 || customers.length > 0) {
        fetchCustomers();
      }
    }, 300);
 
    return () => clearTimeout(timer);
  }, [searchTerm]);
 
  const fetchCustomers = async () => {
    setLoading(true);
    setError(null);
    try {
      // Use apiClient for type-safe API calls
      const result = await apiClient.getCustomers({
        limit: 100,
        search: searchTerm.trim() || undefined,
        source: 'openapi'
      });
      
      // Handle OpenAPI response: { success, data: { data: { Customer: [...] } } }
      if (result.success) {
        const apiData = result.data as any;
        const customerData = apiData?.data?.Customer || [];
        if (Array.isArray(customerData) && customerData.length > 0) {
          // Map field names to component interface
          let sortedCustomers = customerData.map((c: any) => ({
            Cid: c.Cid || c.f100,
            Name: c.Name || c.f101 || 'Unnamed Customer',
            Phone: c.Phone || c.f112,
            Mobile: c.Mobile || c.f113,
            Email: c.Email || c.f115,
            Division: c.Division || c.f164,
            Key: c.Key || c.f254
          }));
          
          switch (sortBy) {
            case "name-az":
              sortedCustomers.sort((a: Customer, b: Customer) => (a.Name || "").localeCompare(b.Name || ""));
              break;
            case "name-za":
              sortedCustomers.sort((a: Customer, b: Customer) => (b.Name || "").localeCompare(a.Name || ""));
              break;
            case "recent":
              // Sort by ID for now since we don't have last sale data in OpenAPI
              sortedCustomers.sort((a: Customer, b: Customer) => (b.Cid || 0) - (a.Cid || 0));
              break;
          }
          
          setCustomers(sortedCustomers);
        } else {
          setCustomers([]);
          setError("No customer data available");
        }
      } else {
        setCustomers([]);
        setError("Failed to load customers");
      }
    } catch (error) {
      console.error("Error fetching customers:", error);
      setError("Network error while fetching customers");
      // Use demo data as fallback
      setCustomers([]);
    } finally {
      setLoading(false);
    }
  };
 
  const filteredCustomers = customers.filter(customer => {
    if (searchTerm === "") return true;
    
    const searchLower = searchTerm.toLowerCase();
    const name = (customer.Name || "").toLowerCase();
    const company = (customer.Division || "").toLowerCase();
    const email = (customer.Email || "").toLowerCase();
    const phone = (customer.Phone || "").toLowerCase();
    const mobile = (customer.Mobile || "").toLowerCase();
    
    return name.includes(searchLower) ||
           company.includes(searchLower) ||
           email.includes(searchLower) ||
           phone.includes(searchLower) ||
           mobile.includes(searchLower);
  });
 
  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="groups" size={32} className="text-brand" />
          Customer Management
        </h1>
        <p className="text-muted">Manage customer records and contact 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 customers by name, company, or email..."
              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="recent">Recent Activity</option>
            </select>
            <button 
              className="px-4 py-3 bg-brand text-surface rounded-lg hover:bg-brand2 transition-colors flex items-center gap-2"
              onClick={() => setShowAddModal(true)}
            >
              <Icon name="person_add" size={20} />
              Add Customer
            </button>
          </div>
        </div>
 
        {/* Stats */}
        <div className="flex gap-4 text-sm text-muted">
          <span>Total customers: <strong>{customers.length}</strong></span>
          {searchTerm && (
            <span>Showing: <strong>{filteredCustomers.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" size={20} className="text-warn" />
            <span className="ml-2 text-warn/90">{error}</span>
            <button
              onClick={fetchCustomers}
              className="ml-auto text-warn hover:text-warn/80 underline"
            >
              Retry
            </button>
          </div>
        </div>
      )}
 
      {/* Customer List */}
      {!error && (
        <div className="bg-surface rounded-lg shadow overflow-hidden">
          {filteredCustomers.length === 0 ? (
            <div className="p-8 text-center">
              <Icon name="groups" size={64} className="text-muted mx-auto mb-4" />
              <h3 className="text-lg font-medium text-text mb-2">
                {searchTerm ? "No customers found" : "No customers yet"}
              </h3>
              <p className="text-muted mb-4">
                {searchTerm 
                  ? `No customers match "${searchTerm}"` 
                  : "Start by adding your first customer"}
              </p>
              {!searchTerm && (
                <button 
                  className="px-4 py-2 bg-brand text-surface rounded-lg hover:bg-brand2 inline-flex items-center gap-2"
                  onClick={() => setShowAddModal(true)}
                >
                  <Icon name="person_add" size={20} />
                  Add First Customer
                </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">
                      Customer
                    </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">
                      Company
                    </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">
                  {loading ? (
                    [...Array(5)].map((_, i) => <SkeletonRow key={i} />)
                  ) : (
                    filteredCustomers.map((customer) => (
                      <tr 
                      key={customer.Cid} 
                      className="hover:bg-surface-2 cursor-pointer transition-colors"
                      onClick={() => window.location.href = `/pages/customers/${customer.Cid}`}
                    >
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div>
                          <div className="text-sm font-medium text-brand">
                            {customer.Name || "Unnamed Customer"}
                          </div>
                          <div className="text-sm text-muted">
                            ID: {customer.Cid}
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-text">
                          {customer.Phone && (
                            <div className="flex items-center gap-1"><Icon name="phone" size={14} className="text-muted" /> {customer.Phone}</div>
                          )}
                          {customer.Mobile && (
                            <div className="flex items-center gap-1"><Icon name="smartphone" size={14} className="text-muted" /> {customer.Mobile}</div>
                          )}
                          {customer.Email && (
                            <div className="flex items-center gap-1"><Icon name="email" size={14} className="text-muted" /> {customer.Email}</div>
                          )}
                          {!customer.Phone && !customer.Mobile && !customer.Email && (
                            <span className="text-muted/60">No contact info</span>
                          )}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                        {customer.Division || "-"}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div className="flex gap-2">
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              window.location.href = `/pages/customers/${customer.Cid}`;
                            }}
                            className="text-brand hover:text-brand2 flex items-center gap-1"
                          >
                            <Icon name="visibility" size={16} />
                            View
                          </button>
                          <a
                            href={`/pages/customers/${customer.Cid}`}
                            onClick={(e) => e.stopPropagation()}
                            className="text-success hover:text-success/80 flex items-center gap-1"
                          >
                            <Icon name="edit" size={16} />
                            Edit
                          </a>
                          <button 
                            className="text-brand2 hover:text-brand2/80 flex items-center gap-1"
                            onClick={() => window.location.href = `/pages/sales?customerId=${customer.Cid}`}
                          >
                            <Icon name="shopping_cart" size={16} />
                            Sale
                          </button>
                          <button 
                            className="text-muted hover:text-text flex items-center gap-1"
                            onClick={() => window.location.href = `/pages/reports/sales-reports?customerId=${customer.Cid}`}
                          >
                            <Icon name="history" size={16} />
                            History
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                  )}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
 
      {/* Add Customer Modal Placeholder */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-surface rounded-lg p-6 w-full max-w-md">
            <h3 className="text-lg font-medium mb-4">Add New Customer</h3>
            <div className="mb-4">
              <label className="block text-sm font-medium text-text mb-1">
                Customer Name
              </label>
              <input
                type="text"
                className="w-full p-2 border border-border rounded focus:ring-2 focus:ring-brand"
                placeholder="Enter customer name"
              />
            </div>
            <div className="flex justify-end gap-2">
              <button
                className="px-4 py-2 text-muted hover:text-text"
                onClick={() => setShowAddModal(false)}
              >
                Cancel
              </button>
              <button
                className="px-4 py-2 bg-brand text-surface rounded hover:bg-brand2 flex items-center gap-2"
                onClick={() => {
                  setShowAddModal(false);
                  // TODO: Implement customer creation
                  alert("Customer creation coming soon!");
                }}
              >
                <Icon name="save" size={16} />
                Save
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}