/* Pelagia Portal — page components */
const { useState: useS, useEffect: useE, useMemo: useM } = React;
/* ═══════════════════ LOGIN ═══════════════════ */
const LoginPage = ({ onLogin }) => (
Pelagia Portal
Internal · Purchase Order Management
);
/* ═══════════════════ DASHBOARD (Manager view) ═══════════════════ */
const Dashboard = ({ role, go }) => {
// Manager-rich view; switch headline content by role
const isMgr = role === "MANAGER" || role === "SUPERUSER";
const isAcct = role === "ACCOUNTS";
const isAuditor = role === "AUDITOR" || role === "ADMIN";
const isSubmitter = role === "TECHNICAL" || role === "MANNING";
const maxSpend = Math.max(...SPEND_TREND.map(s => s.v));
return (
<>
Good afternoon, Anjali
Tuesday, May 12, 2026 · 14:38 IST · 3 vessels active at sea
{isMgr && (
<>
↑ 2 vs last week} onClick={() => go("approvals")} />
across 5 vessels} />
↓ 8% vs Apr} />
submit → approve} />
₹ in thousands}>
{SPEND_TREND.map((s, i) => (
{s.v}
))}
{VESSEL_SPEND.map((v, i) => {
const max = Math.max(...VESSEL_SPEND.map(x => x.v));
return (
);
})}
go("history")} href="#">View history →} flush>
| PO Number | Title | Vessel |
Submitter | Approved | Amount |
{ORDERS.filter(o => ["MGR_APPROVED", "SENT_FOR_PAYMENT", "PAID_DELIVERED", "CLOSED"].includes(o.status)).slice(0, 5).map(o => (
go("po-detail", o.id)}>
| {o.id} |
{o.title} |
{o.vessel} |
{o.submitter} |
{o.approved || "—"} |
{inr(o.amount)} |
))}
)}
{isAcct && (
<>
go("payments")} />
go("payments")} className="muted" style={{ fontSize: 12 }}>Open queue →}>
4 POs ready to send for payment. Open the queue to process.
)}
{isSubmitter && (
<>
go("my-orders")} />
| PO Number | Title | Vessel | Status | Amount |
|---|
{ORDERS.filter(o => o.submitter === "Rajesh Pillai").slice(0, 4).map(o => (
go("po-detail", o.id)}>
| {o.id} |
{o.title} |
{o.vessel} |
|
{inr(o.amount)} |
))}
)}
{isAuditor && (
<>
go("history")} />
)}
);
};
/* ═══════════════════ MY ORDERS ═══════════════════ */
const MyOrders = ({ go }) => {
const mine = ORDERS.filter(o => o.submitter === "Rajesh Pillai");
const open = mine.filter(o => ["DRAFT","SUBMITTED","MGR_REVIEW","VENDOR_ID_PENDING","EDITS_REQUESTED"].includes(o.status));
const past = mine.filter(o => !["DRAFT","SUBMITTED","MGR_REVIEW","VENDOR_ID_PENDING","EDITS_REQUESTED"].includes(o.status));
// Add a couple of synthetic past orders to make it feel real
const pastFull = [...past, ...ORDERS.filter(o => ["CLOSED","PAID_DELIVERED","SENT_FOR_PAYMENT","MGR_APPROVED","REJECTED"].includes(o.status)).slice(0,3)];
return (
<>
My Purchase Orders
{open.length} open · {pastFull.length} past
Open orders
{open.length === 0 ? No open orders.
: (
| PO Number | Title | Vessel | Status | Updated | Amount |
|---|
{open.map(o => (
go("po-detail", o.id)}>
| {o.id} |
{o.title} |
{o.vessel} |
|
{o.submitted || o.created || "—"} |
{inr(o.amount)} |
{o.managerNote && (
Manager note · Anjali Krishnan: {o.managerNote}
|
)}
))}
)}
Past orders
| PO Number | Title | Vessel | Status | Closed/Completed | Amount |
|---|
{pastFull.map(o => (
go("po-detail", o.id)}>
| {o.id} |
{o.title} |
{o.vessel} |
|
{o.closed || o.paid || o.approved || o.rejected || "—"} |
{inr(o.amount)} |
))}
);
};
Object.assign(window, { LoginPage, Dashboard, MyOrders });