pelagia-portal/App/app/(portal)/admin/accounts/accounts-table.tsx

"use client";

import { useTableControls } from "@/components/ui/use-table-controls";
import { TableControls, SortableTh } from "@/components/ui/table-controls";
import { AddAccountButton, EditAccountButton } from "./account-form";
import { ConfirmDeleteButton } from "@/components/ui/confirm-delete-button";
import { deleteAccount } from "./actions";

export type AccountRow = {
  id: string;
  code: string;
  name: string;
  description: string | null;
  isActive: boolean;
};

const CHIPS = ["Active", "Inactive"];

export function AccountsTable({
  accounts,
  suggestedCode,
}: {
  accounts: AccountRow[];
  suggestedCode: string;
}) {
  const { search, setSearch, sortKey, sortDir, toggleSort, activeFilters, toggleFilter, filtered } =
    useTableControls<AccountRow>({
      rows: accounts,
      defaultSortKey: "code",
      searchText: (a) =>
        [a.code, a.name, a.description ?? "", a.isActive ? "active" : "inactive"].join(" "),
      chipMatch: (a, chip) => {
        if (chip.toLowerCase() === "active") return a.isActive;
        if (chip.toLowerCase() === "inactive") return !a.isActive;
        return false;
      },
      sortValue: (a, key) => {
        if (key === "isActive") return a.isActive ? "Active" : "Inactive";
        const val = a[key as keyof AccountRow];
        if (val === null || val === undefined) return "";
        return typeof val === "string" || typeof val === "number" || typeof val === "boolean" ? val : String(val);
      },
    });

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-neutral-900">Account Management</h1>
        <AddAccountButton suggestedCode={suggestedCode} />
      </div>

      <TableControls
        search={search}
        onSearch={setSearch}
        searchPlaceholder="Search accounts…"
        chips={CHIPS}
        activeFilters={activeFilters}
        onToggleFilter={toggleFilter}
      />

      <div className="rounded-lg border border-neutral-200 bg-white overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-neutral-50 border-b border-neutral-200">
            <tr>
              <SortableTh sortKey="code" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof AccountRow)}>Code</SortableTh>
              <SortableTh sortKey="name" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof AccountRow)}>Name</SortableTh>
              <SortableTh sortKey="description" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof AccountRow)}>Description</SortableTh>
              <SortableTh sortKey="isActive" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof AccountRow)}>Status</SortableTh>
              <th className="px-4 py-3"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-100">
            {filtered.length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-8 text-center text-neutral-400">
                  No accounts match your search.
                </td>
              </tr>
            )}
            {filtered.map((account) => (
              <tr key={account.id} className="hover:bg-neutral-50">
                <td className="px-4 py-3 font-mono text-xs font-medium text-neutral-700">{account.code}</td>
                <td className="px-4 py-3 font-medium text-neutral-900">{account.name}</td>
                <td className="px-4 py-3 text-neutral-500 text-xs">{account.description ?? "—"}</td>
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    account.isActive ? "bg-success-100 text-success-700" : "bg-neutral-100 text-neutral-500"
                  }`}>
                    {account.isActive ? "Active" : "Inactive"}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className="flex items-center gap-3">
                    <EditAccountButton account={{
                      id: account.id,
                      code: account.code,
                      name: account.name,
                      description: account.description,
                      isActive: account.isActive,
                    }} />
                    <ConfirmDeleteButton onDelete={deleteAccount.bind(null, account.id)} label={account.name} />
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}