Procurement and supplier management frontend for developers building purchasing software with Next.js and TypeScript.

A connected procurement demo

Create a purchase request, approve it, invite supplier quotations, compare bids, award a purchase order, and record received goods. Procura connects these steps through shared browser state so document histories, fulfillment quantities, and dashboard figures respond to your actions.

The quote-comparison screen includes weighted scoring, line-level prices, lead times, payment terms, and award-to-order actions. Five demo personas show the buyer, requester, approver, administrator, and supplier experiences.

Included screens

28 screens cover procurement overview, spend intelligence, request lists and forms, request details, approvals, RFQ lists and forms, RFQ details, quote comparison, supplier directory and profiles, scorecards, onboarding, order lists and forms, order details, fulfillment, receipts and receipt details, supplier portal overview, supplier quotations and orders, spend and performance reports, demo sign-in, team settings, and workspace settings.

Key Features & Implementation

• Modern Architecture: Next.js 16.4.0 App Router, React 19.3.0, TypeScript strict mode, and Tailwind CSS 4.
• Component System: shadcn/ui primitives on Radix, Lucide icons, Recharts, React Hook Form, and Zod validation.
• Global State & Resilience: Zustand with localStorage schema validation and graceful self-healing recovery.
• Visual Presets: Four curated light-mode accent presets (Jade, Cobalt, Forest, and Oxblood).
• International Formatting: English interface with US English, UK English, and German number and date formatting.
• Workflow Tools: Browser-persisted fictional records, empty workspace mode, CSV data export, and demo reset.
• Developer Deliverables: Clean source code, pinned pnpm lockfile, English customization documentation, automated Playwright/Vitest tests, changelog, and third-party notices.

Requirements

• Node.js 24.18.x and pnpm 12.7.0 (or npm).
• Production hosting requires any Node.js server runtime or Vercel.
• No third-party API keys, paid services, or private environment variables required for the demo.
• Verified in Playwright Chromium desktop and Pixel 7 emulation.

Scope and limitations

This is a complete frontend template with an interactive local demo engine. Persona sign-in and permissions are simulated locally; there is no backend database, production authentication, email service, or payment processor included. Dark mode, RTL, and static HTML export are not included.