feat(sidebar+vessels): Purchasing section, split Administration, Cost Centre rename

Sidebar: - Inventory section renamed to Purchasing - Manager gets separate Administration section for Vendors only - Admin gets full Administration (Vendors + Users + Accounting Codes + Companies) - Sites hidden from Manager when NEXT_PUBLIC_INVENTORY_ENABLED=false - Cost Centres replaces Vessels in the Purchasing nav link Admin vessel pages: - All headings, titles, dialogs, breadcrumbs: Vessels -> Cost Centre - Error messages updated accordingly Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 02:53:33 +05:30 · 2026-05-31 02:53:33 +05:30 · e3851a1799
commit e3851a1799
parent b2402a7e22
6 changed files with 79 additions and 60 deletions
--- a/App/app/(portal)/admin/vessels/[id]/page.tsx
+++ b/App/app/(portal)/admin/vessels/[id]/page.tsx
@ -11,7 +11,7 @@ interface Props { params: Promise<{ id: string }> }
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;
  const v = await db.vessel.findUnique({ where: { id }, select: { name: true } });
-  return { title: v?.name ?? "Vessel Detail" };
+  return { title: v?.name ?? "Cost Centre Detail" };
 }

 export default async function VesselDetailPage({ params }: Props) {
@ -46,7 +46,7 @@ export default async function VesselDetailPage({ params }: Props) {
  return (
    <div className="max-w-5xl space-y-6">
      <div className="flex items-center gap-2 text-sm text-neutral-500">
-        <Link href="/admin/vessels" className="hover:text-neutral-700">Vessels</Link>
+        <Link href="/admin/vessels" className="hover:text-neutral-700">Cost Centres</Link>
        <span>/</span>
        <span className="text-neutral-900 font-medium">{vessel.name}</span>
      </div>
--- a/App/app/(portal)/admin/vessels/actions.ts
+++ b/App/app/(portal)/admin/vessels/actions.ts
@ -10,7 +10,7 @@ import { nextId } from "@/lib/id-generators";
 type ActionResult = { ok: true } | { error: string };

 const vesselSchema = z.object({
-  name: z.string().min(1, "Vessel name is required"),
+  name: z.string().min(1, "Cost centre name is required"),
  code: z.string().optional(),
 });

@ -66,7 +66,7 @@ export async function deleteVessel(id: string): Promise<ActionResult> {
  if (!session?.user || !hasPermission(session.user.role, "manage_vessels_accounts")) return { error: "Unauthorized" };

  const inUse = await db.purchaseOrder.findFirst({ where: { vesselId: id } });
-  if (inUse) return { error: "Cannot delete: vessel is referenced in purchase orders. Remove those POs first." };
+  if (inUse) return { error: "Cannot delete: this cost centre is referenced in purchase orders." };

  await db.vessel.delete({ where: { id } });
  revalidatePath("/admin/vessels");
@ -80,7 +80,7 @@ export async function toggleVesselActive(vesselId: string): Promise<ActionResult
  }

  const vessel = await db.vessel.findUnique({ where: { id: vesselId }, select: { isActive: true } });
-  if (!vessel) return { error: "Vessel not found" };
+  if (!vessel) return { error: "Cost centre not found" };

  await db.vessel.update({ where: { id: vesselId }, data: { isActive: !vessel.isActive } });
  revalidatePath("/admin/vessels");
--- a/App/app/(portal)/admin/vessels/page.tsx
+++ b/App/app/(portal)/admin/vessels/page.tsx
@ -6,7 +6,7 @@ import { VesselsTable } from "./vessels-table";
 import { nextId } from "@/lib/id-generators";
 import type { Metadata } from "next";

-export const metadata: Metadata = { title: "Vessel Management" };
+export const metadata: Metadata = { title: "Cost Centre Management" };

 export default async function AdminVesselsPage() {
  const session = await auth();
--- a/App/app/(portal)/admin/vessels/vessel-form.tsx
+++ b/App/app/(portal)/admin/vessels/vessel-form.tsx
@ -34,7 +34,7 @@ function VesselFormFields({ vessel, suggestedCode }: { vessel?: VesselRow; sugge
        )}
      </div>
      <div>
-        <label className="block text-xs font-medium text-neutral-700 mb-1">Vessel Name *</label>
+        <label className="block text-xs font-medium text-neutral-700 mb-1">Cost Centre Name *</label>
        <input name="name" defaultValue={vessel?.name} required className={INPUT} />
      </div>
    </div>
@ -60,9 +60,9 @@ export function AddVesselButton({ suggestedCode }: { suggestedCode?: string }) {
    <>
      <button onClick={() => setOpen(true)}
        className="rounded-lg bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-primary-700 transition-colors">
-        + Add Vessel
+        + Add Cost Centre
      </button>
-      <AdminDialog title="Add Vessel" open={open} onClose={() => setOpen(false)}>
+      <AdminDialog title="Add Cost Centre" open={open} onClose={() => setOpen(false)}>
        <form onSubmit={handleSubmit} className="space-y-4">
          <VesselFormFields suggestedCode={suggestedCode} />
          {error && <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
@ -73,7 +73,7 @@ export function AddVesselButton({ suggestedCode }: { suggestedCode?: string }) {
            </button>
            <button type="submit" disabled={pending}
              className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-60">
-              {pending ? "Creating…" : "Create Vessel"}
+              {pending ? "Creating…" : "Create Cost Centre"}
            </button>
          </div>
        </form>
@ -119,7 +119,7 @@ export function EditVesselButton({
          Edit
        </button>
      )}
-      <AdminDialog title="Edit Vessel" open={open} onClose={() => setOpen(false)}>
+      <AdminDialog title="Edit Cost Centre" open={open} onClose={() => setOpen(false)}>
        <form onSubmit={handleSubmit} className="space-y-4">
          <VesselFormFields vessel={vessel} />
          {error && <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
--- a/App/app/(portal)/admin/vessels/vessels-table.tsx
+++ b/App/app/(portal)/admin/vessels/vessels-table.tsx
@ -49,7 +49,7 @@ function VesselActionsMenu({ vessel }: { vessel: VesselRow }) {
        open={toggleOpen}
        onOpenChange={setToggleOpen}
        title={vessel.isActive ? `Deactivate ${vessel.name}?` : `Activate ${vessel.name}?`}
-        description={vessel.isActive ? `${vessel.name} will be hidden from new purchase orders.` : `${vessel.name} will become available for new purchase orders.`}
+        description={vessel.isActive ? `${vessel.name} will be hidden from new PO cost centre selection.` : `${vessel.name} will become available in PO cost centre selection.`}
        confirmLabel={vessel.isActive ? "Deactivate" : "Activate"}
        onConfirm={() => toggleVesselActive(vessel.id)}
      />
@ -79,14 +79,14 @@ export function VesselsTable({ vessels, suggestedCode }: { vessels: VesselRow[];
  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-neutral-900">Vessel Management</h1>
+        <h1 className="text-2xl font-semibold text-neutral-900">Cost Centre Management</h1>
        <AddVesselButton suggestedCode={suggestedCode} />
      </div>

      <TableControls
        search={search}
        onSearch={setSearch}
-        searchPlaceholder="Search vessels…"
+        searchPlaceholder="Search cost centres…"
        chips={CHIPS}
        activeFilters={activeFilters}
        onToggleFilter={toggleFilter}
@ -106,7 +106,7 @@ export function VesselsTable({ vessels, suggestedCode }: { vessels: VesselRow[];
            {filtered.length === 0 && (
              <tr>
                <td colSpan={4} className="px-4 py-8 text-center text-neutral-400">
-                  No vessels match your search.
+                  No cost centres match your search.
                </td>
              </tr>
            )}
--- a/App/components/layout/sidebar.tsx
+++ b/App/components/layout/sidebar.tsx
@ -46,27 +46,35 @@ const NAV_ITEMS: NavItem[] = [
  { href: "/profile",          label: "My Profile",             icon: UserCircle },
 ];

-// Vendor/product/cart nav — always visible (needed for PO creation)
-const PO_CATALOGUE_ITEMS: NavItem[] = [
+// ── Purchasing section ────────────────────────────────────────────────────────
+// Staff browsing items (product catalogue + cart for PO creation)
+const PURCHASING_STAFF: NavItem[] = [
  { href: "/inventory/items",   label: "Items",         icon: Package,      roles: ["TECHNICAL", "MANNING", "SUPERUSER"] },
  { href: "/inventory/vendors", label: "Vendors",       icon: Store,        roles: ["TECHNICAL", "MANNING", "SUPERUSER"] },
  { href: "/inventory/cart",    label: "Cart",          icon: ShoppingCart, roles: ["TECHNICAL", "MANNING", "SUPERUSER", "MANAGER"] },
-  { href: "/admin/vendors",     label: "Vendors", icon: Store,        roles: ["MANAGER", "ACCOUNTS", "ADMIN"] },
-  { href: "/admin/products",    label: "Items",   icon: Package,      roles: ["MANAGER", "ADMIN"] },
-  { href: "/admin/vessels",     label: "Vessels", icon: Ship,         roles: ["MANAGER", "ADMIN"] },
-  { href: "/admin/sites",       label: "Sites",   icon: MapPin,       roles: ["MANAGER", "ADMIN"] },
 ];

-// Inventory tracking nav — hidden when NEXT_PUBLIC_INVENTORY_ENABLED=false
-const INVENTORY_TRACKING_ITEMS: NavItem[] = [];  // reserved for future inventory-only links
+// Manager / Admin catalogue management — Sites conditionally shown
+const PURCHASING_MGMT: NavItem[] = [
+  { href: "/admin/products", label: "Items",          icon: Package, roles: ["MANAGER", "ADMIN"] },
+  { href: "/admin/vessels",  label: "Cost Centres",   icon: Ship,    roles: ["MANAGER", "ADMIN"] },
+  ...(INVENTORY_ENABLED
+    ? [{ href: "/admin/sites", label: "Sites", icon: MapPin, roles: ["MANAGER", "ADMIN"] as Role[] }]
+    : []),
+];

-const INVENTORY_ITEMS: NavItem[] = INVENTORY_ENABLED
-  ? [...PO_CATALOGUE_ITEMS, ...INVENTORY_TRACKING_ITEMS]
-  : PO_CATALOGUE_ITEMS;
+const PURCHASING_ITEMS: NavItem[] = [...PURCHASING_STAFF, ...PURCHASING_MGMT];

+// ── Administration section ────────────────────────────────────────────────────
+// Vendors shown to MANAGER / ACCOUNTS under their own Administration header
+const MANAGER_ADMIN_ITEMS: NavItem[] = [
+  { href: "/admin/vendors", label: "Vendors", icon: Store, roles: ["MANAGER", "ACCOUNTS", "ADMIN"] },
+];
+
+// Full Administration section (ADMIN only)
 const ADMIN_ITEMS: NavItem[] = [
  { href: "/admin/users",              label: "Users",             icon: Users      },
-  { href: "/admin/superuser-requests", label: "SuperUser Requests", icon: ShieldCheck },
+  { href: "/admin/superuser-requests", label: "SuperUser Requests",icon: ShieldCheck },
  { href: "/admin/accounts",           label: "Accounting Codes",  icon: Building2  },
  { href: "/admin/companies",          label: "Companies",         icon: Briefcase  },
 ];
@ -75,12 +83,9 @@ export function Sidebar({ userRole }: { userRole: Role }) {
  const pathname = usePathname();
  const isAdmin  = userRole === "ADMIN";

-  const visible = NAV_ITEMS.filter(
-    (item) => !item.roles || item.roles.includes(userRole)
-  );
-  const visibleInventory = INVENTORY_ITEMS.filter(
-    (item) => !item.roles || item.roles.includes(userRole)
-  );
+  const visibleMain       = NAV_ITEMS.filter((i) => !i.roles || i.roles.includes(userRole));
+  const visiblePurchasing = PURCHASING_ITEMS.filter((i) => !i.roles || i.roles.includes(userRole));
+  const visibleMgrAdmin   = MANAGER_ADMIN_ITEMS.filter((i) => !i.roles || i.roles.includes(userRole));

  return (
    <aside className="flex h-screen w-60 shrink-0 flex-col border-r border-neutral-200 bg-white">
@ -92,27 +97,34 @@ export function Sidebar({ userRole }: { userRole: Role }) {
      </div>

      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
-        {visible.map((item) => (
+        {visibleMain.map((item) => (
          <NavLink key={item.href} item={item} pathname={pathname} />
        ))}

-        {visibleInventory.length > 0 && (
+        {visiblePurchasing.length > 0 && (
          <>
-            <div className="pt-4 pb-1 px-3">
-              <p className="text-xs font-semibold text-neutral-400 uppercase tracking-wider">Inventory</p>
-            </div>
-            {visibleInventory.map((item) => (
+            <SectionHeader label="Purchasing" />
+            {visiblePurchasing.map((item) => (
              <NavLink key={item.href} item={item} pathname={pathname} />
            ))}
          </>
        )}

+        {/* Vendors under Administration for MANAGER / ACCOUNTS */}
+        {!isAdmin && visibleMgrAdmin.length > 0 && (
+          <>
+            <SectionHeader label="Administration" />
+            {visibleMgrAdmin.map((item) => (
+              <NavLink key={item.href} item={item} pathname={pathname} />
+            ))}
+          </>
+        )}
+
+        {/* Full Administration section for ADMIN */}
        {isAdmin && (
          <>
-            <div className="pt-4 pb-1 px-3">
-              <p className="text-xs font-semibold text-neutral-400 uppercase tracking-wider">Administration</p>
-            </div>
-            {ADMIN_ITEMS.map((item) => (
+            <SectionHeader label="Administration" />
+            {[...MANAGER_ADMIN_ITEMS, ...ADMIN_ITEMS].map((item) => (
              <NavLink key={item.href} item={item} pathname={pathname} />
            ))}
          </>
@ -122,10 +134,17 @@ export function Sidebar({ userRole }: { userRole: Role }) {
  );
 }

+function SectionHeader({ label }: { label: string }) {
+  return (
+    <div className="pt-4 pb-1 px-3">
+      <p className="text-xs font-semibold text-neutral-400 uppercase tracking-wider">{label}</p>
+    </div>
+  );
+}
+
 function NavLink({ item, pathname }: { item: NavItem; pathname: string }) {
  const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
  const Icon = item.icon;
-
  return (
    <Link
      href={item.href}