Procura — B2B Procurement & Supplier Portal (Concept Template)

Procura is a commercial concept B2B procurement and supplier management application template built with Next.js 16.4 (App Router), React 19.3, TypeScript, Tailwind CSS 4, shadcn/ui, Recharts, Zustand, React Hook Form, and Zod. Spanning 28 connected screens, it models the complete purchasing lifecycle from requisition to goods receipt.

Procura links requisitions, approvals, RFQs, supplier bids, purchase orders, and warehouse receipts through a shared, schema-validated browser state engine (Zustand + localStorage). Performing an action in one stage—such as approving a request, awarding a supplier quotation, or logging a partial delivery—immediately updates downstream document histories, fulfillment quantities, and executive spend metrics.

End-to-End Purchasing Modules: Procurement Overview, Spend Intelligence, Purchase Requests (list, create, detail), Approval Queue, RFQs (list, create, detail), Weighted Quote Comparison Workbench (scoring price, lead time, payment terms, and one-click PO award), Supplier Directory, Scorecards & Onboarding, Purchase Orders, Fulfillment Tracking, Goods Receipts, and Spend/Performance Reports.

5 Role-Based Demo Personas + Supplier Portal: Switch instantly between Buyer, Requester, Approver, Administrator, and external Supplier Portal views (Supplier Overview, Quotations, and Orders).

4 Accent Presets & Multi-Locale Formatting: Includes 4 light-mode enterprise accent themes (Jade, Cobalt, Forest, Oxblood), US/UK/DE currency & date formatting, CSV export, empty-workspace mode, and one-click demo state reset.