Adds a reusable useTableControls hook and TableControls/SortableTh components, then wires them into all six admin table pages (users, vendors, vessels, sites, accounts, products). Each page now supports a global search bar, clickable sortable column headers with ↑/↓/⇅ indicators, and role/status filter chips — all purely client-side with no URL params or server round-trips. Server pages continue to fetch the full list and pass it as props to a new *-table.tsx Client Component. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
32 lines
891 B
TypeScript
32 lines
891 B
TypeScript
import { auth } from "@/auth";
|
|
import { db } from "@/lib/db";
|
|
import { hasPermission } from "@/lib/permissions";
|
|
import { redirect } from "next/navigation";
|
|
import { VesselsTable } from "./vessels-table";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = { title: "Cost Centre Management" };
|
|
|
|
export default async function AdminVesselsPage() {
|
|
const session = await auth();
|
|
if (!session?.user) redirect("/login");
|
|
|
|
if (!hasPermission(session.user.role, "manage_vessels_accounts")) redirect("/dashboard");
|
|
|
|
const vessels = await db.vessel.findMany({
|
|
orderBy: { name: "asc" },
|
|
include: { site: { select: { name: true } } },
|
|
});
|
|
|
|
return (
|
|
<VesselsTable
|
|
vessels={vessels.map((v) => ({
|
|
id: v.id,
|
|
code: v.code,
|
|
name: v.name,
|
|
siteName: v.site?.name ?? null,
|
|
isActive: v.isActive,
|
|
}))}
|
|
/>
|
|
);
|
|
}
|