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

"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { useTableControls } from "@/components/ui/use-table-controls";
import { TableControls, SortableTh } from "@/components/ui/table-controls";
import { AddUserButton, EditUserButton } from "./user-form";
import { RowActionsMenu, RowActionsItem, RowActionsDestructiveItem, RowActionsSeparator } from "@/components/ui/row-actions-menu";
import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
import { deleteUser, toggleUserActive } from "./actions";
import { grantSuperUser } from "../superuser-requests/actions";
import { ShieldCheck } from "lucide-react";

export type UserRow = {
  id: string;
  employeeId: string;
  name: string;
  email: string;
  role: string;
  isActive: boolean;
  createdAt: string; // serialised as ISO string from server
};

const ROLE_LABELS: Record<string, string> = {
  TECHNICAL: "Technical",
  MANNING: "Manning",
  ACCOUNTS: "Accounts",
  MANAGER: "Manager",
  SUPERUSER: "SuperUser",
  AUDITOR: "Auditor",
  ADMIN: "Admin",
};

const CHIPS = ["Manning", "Technical", "Accounts", "Manager", "Superuser", "Auditor", "Admin", "Active", "Inactive"];

function UserActionsMenu({ user }: { user: UserRow }) {
  const router = useRouter();
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const [grantPending, startGrantTransition] = useTransition();

  function handleToggle() {
    startTransition(async () => {
      await toggleUserActive(user.id);
      router.refresh();
    });
  }

  function handleGrantSuperUser() {
    startGrantTransition(async () => {
      await grantSuperUser(user.id);
      router.refresh();
    });
  }

  return (
    <>
      <RowActionsMenu>
        <RowActionsItem onClick={() => setEditOpen(true)}>Edit</RowActionsItem>
        <RowActionsItem onClick={handleToggle} disabled={isPending}>
          {user.isActive ? "Deactivate" : "Activate"}
        </RowActionsItem>
        {user.role !== "SUPERUSER" && user.role !== "ADMIN" && (
          <RowActionsItem onClick={handleGrantSuperUser} disabled={grantPending}>
            <ShieldCheck className="h-3.5 w-3.5" />
            Grant SuperUser
          </RowActionsItem>
        )}
        <RowActionsSeparator />
        <RowActionsDestructiveItem onClick={() => setDeleteOpen(true)}>Delete</RowActionsDestructiveItem>
      </RowActionsMenu>

      <EditUserButton
        user={{
          id: user.id,
          employeeId: user.employeeId,
          name: user.name,
          email: user.email,
          role: user.role,
          isActive: user.isActive,
        }}
        open={editOpen}
        onOpenChange={setEditOpen}
      />
      <DeleteConfirmDialog
        open={deleteOpen}
        onOpenChange={setDeleteOpen}
        label={user.name}
        onConfirm={() => deleteUser(user.id)}
      />
    </>
  );
}

export function UsersTable({ users }: { users: UserRow[] }) {
  const { search, setSearch, sortKey, sortDir, toggleSort, activeFilters, toggleFilter, filtered } =
    useTableControls<UserRow>({
      rows: users,
      defaultSortKey: "employeeId",
      searchText: (u) =>
        [u.employeeId, u.name, u.email, ROLE_LABELS[u.role] ?? u.role, u.isActive ? "active" : "inactive"].join(" "),
      chipMatch: (u, chip) => {
        const chipLower = chip.toLowerCase();
        if (chipLower === "active") return u.isActive;
        if (chipLower === "inactive") return !u.isActive;
        return (ROLE_LABELS[u.role] ?? u.role).toLowerCase() === chipLower;
      },
      sortValue: (u, key) => {
        if (key === "role") return ROLE_LABELS[u.role] ?? u.role;
        if (key === "isActive") return u.isActive ? "Active" : "Inactive";
        const v = u[key as keyof UserRow];
        return typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : String(v);
      },
    });

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-neutral-900">User Management</h1>
        <AddUserButton />
      </div>

      <TableControls
        search={search}
        onSearch={setSearch}
        searchPlaceholder="Search users…"
        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="employeeId" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof UserRow)}>Employee ID</SortableTh>
              <SortableTh sortKey="name" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof UserRow)}>Name</SortableTh>
              <SortableTh sortKey="email" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof UserRow)}>Email</SortableTh>
              <SortableTh sortKey="role" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof UserRow)}>Role</SortableTh>
              <SortableTh sortKey="isActive" activeSortKey={sortKey as string | null} sortDir={sortDir} onSort={(k) => toggleSort(k as keyof UserRow)}>Status</SortableTh>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Created</th>
              <th className="px-4 py-3 w-10"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-100">
            {filtered.length === 0 && (
              <tr>
                <td colSpan={7} className="px-4 py-8 text-center text-neutral-400">
                  No users match your search.
                </td>
              </tr>
            )}
            {filtered.map((user) => (
              <tr key={user.id} className="hover:bg-neutral-50">
                <td className="px-4 py-3 font-mono text-xs text-neutral-600">{user.employeeId}</td>
                <td className="px-4 py-3 font-medium text-neutral-900">{user.name}</td>
                <td className="px-4 py-3 text-neutral-600">{user.email}</td>
                <td className="px-4 py-3">
                  <span className="rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-700">
                    {ROLE_LABELS[user.role] ?? user.role}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    user.isActive ? "bg-success-100 text-success-700" : "bg-neutral-100 text-neutral-500"
                  }`}>
                    {user.isActive ? "Active" : "Inactive"}
                  </span>
                </td>
                <td className="px-4 py-3 text-neutral-500">
                  {new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "numeric" }).format(new Date(user.createdAt))}
                </td>
                <td className="px-4 py-3">
                  <UserActionsMenu user={user} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}