import Link from "next/link";
import { sellerApi } from "@/lib/api/seller";
import { requireRole, requireServerToken } from "@/lib/auth/server";
import type { ApiSellerOrderDetail } from "@/lib/api/types";
import AdvanceStatusButton from "./AdvanceStatusButton";
import InvoiceImage from "./InvoiceImage";
import { formatCurrency, formatDateTime } from "@/lib/utils";
import AddressBlock from "@/components/orders/AddressBlock";
import OrderPriceBreakup, { OrderTerms } from "@/components/orders/OrderPriceBreakup";
import {
ArrowLeft,
CheckCircle2,
Clock,
Truck,
Package,
FileText,
Send,
XCircle,
Eye,
Receipt,
FileMinus,
FilePlus,
} from "lucide-react";
type PageProps = {
params: Promise<{ id: string }>;
searchParams: Promise<{ error?: string }>;
};
function fmtINR(n: number | string | null | undefined) {
return formatCurrency(Number(n ?? 0));
}
// IST, one format everywhere (B36). The local formatter this replaced had no
// time zone, so the seller saw server-clock times that disagreed with the buyer.
const fmtDate = formatDateTime;
type StatusConfig = {
Icon: typeof Clock;
tone: string;
bg: string;
ring: string;
title: string;
message: string;
};
/** Banner for each canonical status code (see src/lib/status.ts). */
function statusConfig(code: string | null | undefined, label: string): StatusConfig {
switch (code) {
case "booking_pending":
case "booked":
return { Icon: Clock, tone: "text-amber-700", bg: "bg-amber-50", ring: "ring-amber-200", title: label, message: "The buyer has booked this order. Confirm it to start loading." };
case "seller_confirmed":
return { Icon: CheckCircle2, tone: "text-emerald-700", bg: "bg-emerald-50", ring: "ring-emerald-200", title: label, message: "You confirmed this order. Mark it as loading when the vehicle arrives." };
case "weighed_invoiced":
return { Icon: FileText, tone: "text-purple-700", bg: "bg-purple-50", ring: "ring-purple-200", title: label, message: "Weighbridge slip and invoice are done; dispatch next." };
case "loading":
return { Icon: Package, tone: "text-purple-700", bg: "bg-purple-50", ring: "ring-purple-200", title: "Loading in Progress", message: "Order is currently being loaded onto the vehicle." };
case "dispatched":
return { Icon: Send, tone: "text-blue-700", bg: "bg-blue-50", ring: "ring-blue-200", title: "Order Dispatched", message: "Order has been dispatched and is on its way." };
case "delivered":
return { Icon: CheckCircle2, tone: "text-emerald-700", bg: "bg-emerald-50", ring: "ring-emerald-200", title: "Order Delivered", message: "Order has been delivered successfully." };
case "payment_settled":
case "closed":
return { Icon: CheckCircle2, tone: "text-emerald-700", bg: "bg-emerald-50", ring: "ring-emerald-200", title: "Order Complete", message: "Order is fully closed." };
case "cancelled":
return { Icon: XCircle, tone: "text-red-700", bg: "bg-red-50", ring: "ring-red-200", title: "Order Cancelled", message: "Order has been cancelled." };
default:
return { Icon: Truck, tone: "text-gray-700", bg: "bg-gray-50", ring: "ring-gray-200", title: label, message: `Order is currently "${label}".` };
}
}
function Row({ label, value }: { label: string; value: React.ReactNode }) {
return (
{label}
{value}
);
}
function Metric({ label, value }: { label: string; value: string }) {
return (
{label}
{value}
);
}
function DocLink({ href, icon, label }: { href: string; icon: React.ReactNode; label: string }) {
return (
{icon} {label}
);
}
async function loadOrder(token: string, id: number) {
try {
return await sellerApi.order(token, id);
} catch {
return null as ApiSellerOrderDetail | null;
}
}
/**
* The heaviest page in the seller area, and the one that gained most from the
* move: everything here — invoices, history, consignee, pricing — is read-only
* markup that used to ship as client JS purely because one `useEffect` owned the
* fetch. Only the status buttons and the invoice thumbnails are still client
* components now.
*
* Mutation errors arrive as `?error=` rather than component state, since the
* Server Action has no state to write back into.
*/
export default async function SellerOrderDetailPage({ params, searchParams }: PageProps) {
const { id } = await params;
const sp = await searchParams;
const path = `/seller/orders/${id}`;
const token = await requireServerToken(path);
await requireRole(["seller"]);
const order = await loadOrder(token, Number(id));
const err = sp.error?.trim() || null;
if (!order) {
return
Order not found.
;
}
// Allowed next steps come from the API (canonical lifecycle), not a local table.
const nextOptions = order.next_statuses ?? [];
const statusText = order.status_label ?? order.status ?? "—";
const cfg = statusConfig(order.status_code, statusText);
const summary = order.summary;
const unit = summary?.unit ?? "MT";
// Commission is a per-unit figure on the quote; it applies to every unit
// ordered. (This used to be `commission * (qty + gst / 100)`.)
const commission = Number(order.seller_commission ?? 0);
const totalQty = Number(summary?.total_quantity ?? order.total_quantity ?? 0);
const commissionValue = commission * totalQty;
return (
Back to orders
Seller Order — {order.order_id ?? order.unique_id}