feat(orders): my orders list and receipt confirmation to close PO
My Orders: all submitter POs grouped as open/past with live status, manager note inline. Receipt: upload receipt file, optional notes; confirms delivery and closes PO to CLOSED.
This commit is contained in:
parent
207c16e0e5
commit
c0ec7716d7
4 changed files with 303 additions and 0 deletions
118
App/pelagia-portal/app/(portal)/my-orders/page.tsx
Normal file
118
App/pelagia-portal/app/(portal)/my-orders/page.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import { auth } from "@/auth";
|
||||
import { db } from "@/lib/db";
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { formatCurrency, formatDate, PO_STATUS_LABELS, PO_STATUS_VARIANTS } from "@/lib/utils";
|
||||
import { PoStatusBadge } from "@/components/po/po-status-badge";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = { title: "My Purchase Orders" };
|
||||
|
||||
export default async function MyOrdersPage() {
|
||||
const session = await auth();
|
||||
if (!session?.user) redirect("/login");
|
||||
|
||||
const { role, id: userId } = session.user;
|
||||
if (!["TECHNICAL", "MANNING", "SUPERUSER"].includes(role)) redirect("/dashboard");
|
||||
|
||||
const pos = await db.purchaseOrder.findMany({
|
||||
where: { submitterId: userId },
|
||||
orderBy: { updatedAt: "desc" },
|
||||
include: {
|
||||
vessel: { select: { name: true } },
|
||||
account: { select: { name: true, code: true } },
|
||||
},
|
||||
});
|
||||
|
||||
const open = pos.filter((p) =>
|
||||
["DRAFT", "SUBMITTED", "MGR_REVIEW", "VENDOR_ID_PENDING", "EDITS_REQUESTED"].includes(p.status)
|
||||
);
|
||||
const closed = pos.filter((p) =>
|
||||
["MGR_APPROVED", "SENT_FOR_PAYMENT", "PAID_DELIVERED", "CLOSED", "REJECTED"].includes(p.status)
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<h1 className="text-2xl font-semibold text-neutral-900">My Purchase Orders</h1>
|
||||
<Link
|
||||
href="/po/new"
|
||||
className="rounded-lg bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-primary-700 transition-colors"
|
||||
>
|
||||
+ New PO
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<PoTable title="Open Orders" rows={open} />
|
||||
{closed.length > 0 && <PoTable title="Past Orders" rows={closed} className="mt-8" />}
|
||||
{pos.length === 0 && (
|
||||
<div className="rounded-lg border border-neutral-200 bg-white p-12 text-center">
|
||||
<p className="text-neutral-500">You haven't raised any purchase orders yet.</p>
|
||||
<Link href="/po/new" className="mt-4 inline-block text-sm text-primary-600 hover:underline font-medium">
|
||||
Create your first PO →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type PoRow = {
|
||||
id: string;
|
||||
poNumber: string;
|
||||
title: string;
|
||||
status: import("@prisma/client").POStatus;
|
||||
totalAmount: import("@prisma/client").Prisma.Decimal;
|
||||
vessel: { name: string };
|
||||
account: { name: string; code: string };
|
||||
updatedAt: Date;
|
||||
managerNote: string | null;
|
||||
};
|
||||
|
||||
function PoTable({ title, rows, className = "" }: { title: string; rows: PoRow[]; className?: string }) {
|
||||
if (rows.length === 0) return null;
|
||||
return (
|
||||
<div className={className}>
|
||||
<h2 className="text-sm font-semibold text-neutral-700 mb-3">{title}</h2>
|
||||
<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">PO Number</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-neutral-600">Title</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-neutral-600">Vessel</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-neutral-600">Status</th>
|
||||
<th className="px-4 py-3 text-right font-medium text-neutral-600">Amount</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-neutral-600">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-100">
|
||||
{rows.map((po) => (
|
||||
<tr key={po.id} className="hover:bg-neutral-50">
|
||||
<td className="px-4 py-3">
|
||||
<Link href={`/po/${po.id}`} className="font-mono text-xs text-primary-600 hover:underline">
|
||||
{po.poNumber}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<Link href={`/po/${po.id}`} className="text-neutral-900 hover:text-primary-600 font-medium">
|
||||
{po.title}
|
||||
</Link>
|
||||
{po.managerNote && (
|
||||
<p className="mt-0.5 text-xs text-warning-700 italic truncate max-w-xs">
|
||||
Note: {po.managerNote}
|
||||
</p>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{po.vessel.name}</td>
|
||||
<td className="px-4 py-3"><PoStatusBadge status={po.status} /></td>
|
||||
<td className="px-4 py-3 text-right font-mono text-xs">{formatCurrency(Number(po.totalAmount))}</td>
|
||||
<td className="px-4 py-3 text-neutral-500">{formatDate(po.updatedAt)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
App/pelagia-portal/app/(portal)/po/[id]/receipt/actions.ts
Normal file
55
App/pelagia-portal/app/(portal)/po/[id]/receipt/actions.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
"use server";
|
||||
|
||||
import { auth } from "@/auth";
|
||||
import { db } from "@/lib/db";
|
||||
import { canPerformAction } from "@/lib/po-state-machine";
|
||||
import { notify } from "@/lib/notifier";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
export async function confirmReceipt({
|
||||
poId,
|
||||
notes,
|
||||
}: {
|
||||
poId: string;
|
||||
notes?: string;
|
||||
}): Promise<{ ok: true } | { error: string }> {
|
||||
const session = await auth();
|
||||
if (!session?.user) return { error: "Unauthorized" };
|
||||
|
||||
const po = await db.purchaseOrder.findUnique({
|
||||
where: { id: poId },
|
||||
include: { submitter: true },
|
||||
});
|
||||
if (!po) return { error: "PO not found" };
|
||||
if (!canPerformAction(po.status, "confirm_receipt", session.user.role)) {
|
||||
return { error: "You cannot confirm receipt on this PO." };
|
||||
}
|
||||
|
||||
await db.purchaseOrder.update({
|
||||
where: { id: poId },
|
||||
data: {
|
||||
status: "CLOSED",
|
||||
closedAt: new Date(),
|
||||
receipt: notes
|
||||
? { create: { storageKey: "", fileName: "no-file", notes } }
|
||||
: undefined,
|
||||
actions: {
|
||||
create: {
|
||||
actionType: "RECEIPT_CONFIRMED",
|
||||
actorId: session.user.id,
|
||||
note: notes ?? null,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [managers, accounts] = await Promise.all([
|
||||
db.user.findMany({ where: { role: "MANAGER", isActive: true } }),
|
||||
db.user.findMany({ where: { role: "ACCOUNTS", isActive: true } }),
|
||||
]);
|
||||
await notify({ event: "RECEIPT_CONFIRMED", po, recipients: [...managers, ...accounts] });
|
||||
|
||||
revalidatePath(`/po/${poId}`);
|
||||
revalidatePath("/dashboard");
|
||||
return { ok: true };
|
||||
}
|
||||
41
App/pelagia-portal/app/(portal)/po/[id]/receipt/page.tsx
Normal file
41
App/pelagia-portal/app/(portal)/po/[id]/receipt/page.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { auth } from "@/auth";
|
||||
import { db } from "@/lib/db";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { ReceiptForm } from "./receipt-form";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = { title: "Confirm Receipt" };
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export default async function ReceiptPage({ params }: Props) {
|
||||
const session = await auth();
|
||||
if (!session?.user) redirect("/login");
|
||||
|
||||
const { id } = await params;
|
||||
|
||||
const po = await db.purchaseOrder.findUnique({
|
||||
where: { id },
|
||||
select: { id: true, poNumber: true, title: true, status: true, submitterId: true },
|
||||
});
|
||||
|
||||
if (!po) notFound();
|
||||
if (po.status !== "PAID_DELIVERED") redirect(`/po/${id}`);
|
||||
if (po.submitterId !== session.user.id && session.user.role !== "SUPERUSER") {
|
||||
redirect(`/po/${id}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-lg">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-semibold text-neutral-900">Confirm Receipt</h1>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
{po.poNumber} — {po.title}
|
||||
</p>
|
||||
</div>
|
||||
<ReceiptForm poId={po.id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { confirmReceipt } from "./actions";
|
||||
import { FileUploader } from "@/components/po/file-uploader";
|
||||
import { uploadAndLinkFiles } from "@/lib/upload-files";
|
||||
|
||||
export function ReceiptForm({ poId }: { poId: string }) {
|
||||
const router = useRouter();
|
||||
const [notes, setNotes] = useState("");
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
const result = await confirmReceipt({ poId, notes });
|
||||
if ("error" in result) {
|
||||
setError(result.error);
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
if (files.length > 0) {
|
||||
const uploadErr = await uploadAndLinkFiles(poId, files, "receipt");
|
||||
if (uploadErr) {
|
||||
setError(uploadErr.error);
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
router.push(`/po/${poId}`);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-neutral-200 bg-white p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<p className="text-sm text-neutral-600">
|
||||
Confirming receipt will close this purchase order. Please verify that all
|
||||
items have been received before proceeding.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1.5">
|
||||
Delivery notes (optional)
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
className="w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 resize-none"
|
||||
placeholder="Any notes about the delivery…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 mb-1.5">
|
||||
Attachments (optional)
|
||||
</label>
|
||||
<FileUploader files={files} onChange={setFiles} disabled={submitting} />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="rounded-lg border border-neutral-300 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="rounded-lg bg-success px-4 py-2.5 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-60 transition-opacity"
|
||||
>
|
||||
{submitting ? "Confirming…" : "Confirm Receipt & Close PO"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue