pelagia-portal/App/app/(portal)/po/new/page.tsx
Hardik 565f9d5833 feat: searchable accounting code picker + cost centres grouped by site
Accounting Code search (new/edit/import/manager-edit PO forms):
- New SearchableSelect component (components/ui/searchable-select.tsx):
  type-to-filter by code or name, results grouped by sub-category with
  sticky headers, highlighted selected item, clear button, Escape/outside-click
  to dismiss
- Replaces the plain <select> for the main Accounting Code field on all PO forms
- LineItemsEditor per-row account column also uses SearchableSelect (compact size)
  when multi-account mode is active

Cost Centre dropdown reorganised by site:
- New type CostCentreGroup replaces flat CostCentreOption
- Each site becomes an <optgroup> label (unselectable); the site itself is the
  first selectable option inside ("Haldia (Site)"), followed by its vessels
- Vessels with no site assigned appear under an "Unassigned Vessels" group
- Shared helpers buildCostCentreGroups() and buildAccountGroups() in
  lib/cost-centre-groups.ts — used by all four PO form pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-30 17:54:43 +05:30

83 lines
3 KiB
TypeScript

import { auth } from "@/auth";
import { db } from "@/lib/db";
import { hasPermission } from "@/lib/permissions";
import { redirect } from "next/navigation";
import { NewPoForm } from "./new-po-form";
import { buildCostCentreGroups, buildAccountGroups } from "@/lib/cost-centre-groups";
import type { Metadata } from "next";
import type { LineItemInput } from "@/lib/validations/po";
import type { CartItem } from "@/lib/cart";
export const metadata: Metadata = { title: "New Purchase Order" };
interface Props {
searchParams: Promise<{ cart?: string; costCentreRef?: string }>;
}
export default async function NewPoPage({ searchParams }: Props) {
const session = await auth();
if (!session?.user) redirect("/login");
if (!hasPermission(session.user.role, "create_po")) {
redirect("/dashboard");
}
const { cart, costCentreRef: initialCostCentreRef } = await searchParams;
let initialLineItems: LineItemInput[] | undefined;
let initialVendorId: string | undefined;
if (cart) {
try {
const cartItems: CartItem[] = JSON.parse(decodeURIComponent(cart));
if (Array.isArray(cartItems) && cartItems.length > 0) {
initialLineItems = cartItems.map((item) => ({
name: item.name,
description: item.description ?? "",
quantity: item.quantity,
unit: item.unit,
size: "",
unitPrice: item.unitPrice,
gstRate: 0.18,
productId: item.productId,
}));
const vendorIds = [...new Set(cartItems.map((i) => i.vendorId).filter(Boolean))];
if (vendorIds.length === 1) initialVendorId = vendorIds[0];
}
} catch {
// malformed cart param — ignore and start empty
}
}
const [vessels, sites, leafAccounts, vendors] = await Promise.all([
db.vessel.findMany({ where: { isActive: true }, orderBy: { name: "asc" }, select: { id: true, name: true, code: true, siteId: true } }),
db.site.findMany({ where: { isActive: true }, orderBy: { name: "asc" }, select: { id: true, name: true } }),
db.account.findMany({
where: { isActive: true, children: { none: {} } },
orderBy: { code: "asc" },
select: { id: true, code: true, name: true, parent: { select: { name: true, code: true, parent: { select: { name: true, code: true } } } } },
}),
db.vendor.findMany({ where: { isActive: true }, orderBy: { name: "asc" } }),
]);
const costCentres = buildCostCentreGroups(vessels, sites);
const accounts = buildAccountGroups(leafAccounts);
return (
<div className="max-w-6xl">
<div className="mb-6">
<h1 className="text-2xl font-semibold text-neutral-900">New Purchase Order</h1>
<p className="mt-1 text-sm text-neutral-500">
Fill in the details below. You can save as draft or submit directly for approval.
</p>
</div>
<NewPoForm
costCentres={costCentres}
accounts={accounts}
vendors={vendors}
initialLineItems={initialLineItems}
initialVendorId={initialVendorId}
initialCostCentreRef={initialCostCentreRef}
/>
</div>
);
}