Impl: SAP ERP-style SPA with Procurement, Tasks, Resources, and Audit Trail

[dxverm23]

Summary

Implements a complete SAP ERP-style single-page application.

Closes #1

Features

Dashboard

• KPI widgets (Total POs, Pending Approvals, Total Spend, Processing Time)
• Pending approvals widget with quick approve/reject actions
• Recent purchase orders widget
• Tasks overview widget

Procurement Module

• Purchase order list with status filters
• Detailed PO view with line items, audit history, and actions
• Approval workflow with approval dialog
• Status color coding (Draft → Pending → Approved → Processing → Completed)

Tasks Inbox

• Task list with status and priority filtering
• Overdue task highlighting
• Assignee information

Resources Module

• Tabbed view for Employees, Materials, Equipment
• Status indicators
• Contact information for employees

Common Components

• Responsive sidebar navigation with collapsible mode
• Top navbar with user menu
• Global search (Cmd+K) across POs, resources, and tasks
• Complete audit trail with filtering

Tech Stack

• React 19 + TypeScript + Vite
• Tailwind CSS + shadcn/ui components
• Single-file build output
• Build size: 370KB (108KB gzipped)

Structure

sap/app/
├── src/
│   ├── components/
│   │   ├── common/       # Sidebar, TopNavbar, GlobalSearch, AuditTrail
│   │   ├── dashboard/    # Dashboard + widgets
│   │   ├── dialogs/      # ApprovePODialog
│   │   ├── procurement/  # PO list + detail
│   │   ├── resources/    # Employee/Material/Equipment views
│   │   └── tasks/        # Tasks inbox
│   ├── context/          # App state provider
│   ├── lib/
│   │   ├── consts/       # Status constants
│   │   ├── fixtures/     # Mock data
│   │   ├── types/        # TypeScript types
│   │   └── utils.ts      # Utility functions
│   └── App.tsx           # Main router
└── package.json

Screenshots

The app features a professional enterprise UI with:

• Blue/indigo color scheme
• Clean typography
• Clear visual hierarchy
• Responsive design