pelagia-portal/App/app/(portal)/admin/accounts/page.tsx
Hardik a2c35d0a93 feat(admin): auto-generate structured IDs for users, vendors, accounts and cost centres
Users: employeeId auto-generated from role prefix (TCH/MAN/ACC/MGR/SUP/AUD/ADM)
followed by next sequential number; shown read-only in edit form, removed
from create form. Cost Centres: new code field (SITE-001 ...) added to
Vessel model with migration + backfill; auto-generated on create, read-only
in edit. Vendors and Accounts: code/vendorId inputs pre-filled with the
next suggested ID (VND-001, ACC-001) from the server page; user can override
with any PREFIX-NUMBER format, validated by regex.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-27 15:02:50 +05:30

78 lines
3.4 KiB
TypeScript

import { auth } from "@/auth";
import { db } from "@/lib/db";
import { hasPermission } from "@/lib/permissions";
import { redirect } from "next/navigation";
import { AddAccountButton, EditAccountButton } from "./account-form";
import { ConfirmDeleteButton } from "@/components/ui/confirm-delete-button";
import { deleteAccount } from "./actions";
import { nextId } from "@/lib/id-generators";
import type { Metadata } from "next";
export const metadata: Metadata = { title: "Account Management" };
export default async function AdminAccountsPage() {
const session = await auth();
if (!session?.user) redirect("/login");
if (!hasPermission(session.user.role, "manage_vessels_accounts")) redirect("/dashboard");
const accounts = await db.account.findMany({ orderBy: { code: "asc" } });
const suggestedCode = nextId("ACC", accounts.map((a) => a.code));
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>
<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>
<th className="px-4 py-3 text-left font-medium text-neutral-600">Code</th>
<th className="px-4 py-3 text-left font-medium text-neutral-600">Name</th>
<th className="px-4 py-3 text-left font-medium text-neutral-600">Description</th>
<th className="px-4 py-3 text-left font-medium text-neutral-600">Status</th>
<th className="px-4 py-3"></th>
</tr>
</thead>
<tbody className="divide-y divide-neutral-100">
{accounts.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>
))}
{accounts.length === 0 && (
<tr>
<td colSpan={5} className="px-4 py-8 text-center text-neutral-400">No accounts yet.</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}