100 lines
5.0 KiB
TypeScript
100 lines
5.0 KiB
TypeScript
import { permissions } from "@mrp/shared";
|
|
import type { PurchaseOrderStatus, PurchaseOrderSummaryDto } from "@mrp/shared";
|
|
import { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { useAuth } from "../../auth/AuthProvider";
|
|
import { api, ApiError } from "../../lib/api";
|
|
import { purchaseStatusFilters } from "./config";
|
|
import { PurchaseStatusBadge } from "./PurchaseStatusBadge";
|
|
|
|
export function PurchaseListPage() {
|
|
const { token, user } = useAuth();
|
|
const [documents, setDocuments] = useState<PurchaseOrderSummaryDto[]>([]);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<"ALL" | PurchaseOrderStatus>("ALL");
|
|
const [status, setStatus] = useState("Loading purchase orders...");
|
|
|
|
const canManage = user?.permissions.includes("purchasing.write") ?? false;
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
return;
|
|
}
|
|
|
|
api.getPurchaseOrders(token, { q: searchTerm.trim() || undefined, status: statusFilter === "ALL" ? undefined : statusFilter })
|
|
.then((nextDocuments) => {
|
|
setDocuments(nextDocuments);
|
|
setStatus(`${nextDocuments.length} purchase orders matched the current filters.`);
|
|
})
|
|
.catch((error: unknown) => {
|
|
const message = error instanceof ApiError ? error.message : "Unable to load purchase orders.";
|
|
setStatus(message);
|
|
});
|
|
}, [searchTerm, statusFilter, token]);
|
|
|
|
return (
|
|
<section className="surface-panel">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
|
<div>
|
|
<p className="section-kicker">PURCHASING</p>
|
|
<h3 className="module-title">PURCHASE ORDERS</h3>
|
|
</div>
|
|
{canManage ? (
|
|
<Link to="/purchasing/orders/new" className="inline-flex items-center justify-center rounded-2xl bg-brand px-3 py-2 text-sm font-semibold text-white">
|
|
New purchase order
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<div className="mt-4 grid gap-2.5 rounded-[16px] border border-line/70 bg-page/60 p-2.5 xl:grid-cols-[1.35fr_0.8fr]">
|
|
<label className="block">
|
|
<span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Search</span>
|
|
<input value={searchTerm} onChange={(event) => setSearchTerm(event.target.value)} placeholder="Search purchase orders by document number or vendor" className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand" />
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Status</span>
|
|
<select value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as "ALL" | PurchaseOrderStatus)} className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand">
|
|
{purchaseStatusFilters.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div className="mt-4 rounded-[16px] border border-line/70 bg-page/60 px-3 py-2 text-sm text-muted">{status}</div>
|
|
{documents.length === 0 ? (
|
|
<div className="mt-4 rounded-[16px] border border-dashed border-line/70 bg-page/60 px-4 py-7 text-center text-sm text-muted">No purchase orders have been added yet.</div>
|
|
) : (
|
|
<div className="mt-4 overflow-hidden rounded-[16px] border border-line/70">
|
|
<table className="min-w-full divide-y divide-line/70 text-sm">
|
|
<thead className="bg-page/80 text-left text-muted">
|
|
<tr>
|
|
<th className="px-2 py-2">Document</th>
|
|
<th className="px-2 py-2">Vendor</th>
|
|
<th className="px-2 py-2">Status</th>
|
|
<th className="px-2 py-2">Issue Date</th>
|
|
<th className="px-2 py-2">Value</th>
|
|
<th className="px-2 py-2">Lines</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-line/70 bg-surface">
|
|
{documents.map((document) => (
|
|
<tr key={document.id} className="transition hover:bg-page/70">
|
|
<td className="px-2 py-2"><Link to={`/purchasing/orders/${document.id}`} className="font-semibold text-text hover:text-brand">{document.documentNumber}</Link></td>
|
|
<td className="px-2 py-2 text-muted">{document.vendorName}</td>
|
|
<td className="px-2 py-2"><PurchaseStatusBadge status={document.status} /></td>
|
|
<td className="px-2 py-2 text-muted">{new Date(document.issueDate).toLocaleDateString()}</td>
|
|
<td className="px-2 py-2 text-muted">${document.total.toFixed(2)}</td>
|
|
<td className="px-2 py-2 text-muted">{document.lineCount}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|