React Operations Console

A responsive React and TypeScript reference implementation for role-aware operational workflows. Permissions, filtering, metrics, and deterministic state transitions live in typed domain functions rather than UI-only conditions.

Product model

Dispatchers coordinate work, technicians execute assigned jobs, and managers monitor the operation. Switching roles changes which actions are allowed; the same permission rules remain independently testable outside React.

Engineering highlights

• React with strict TypeScript
• Role-aware actions for manager, dispatcher, and technician workflows
• Pure, testable domain functions
• Search, priority, status, and assignment filtering
• Responsive table-to-card layout
• Explicit loading, empty, and permission-denied states
• Zero production UI dependencies
• Unit tests for filtering, metrics, permissions, and transitions

Project structure

src/
|-- components/
|   |-- DetailPanel.tsx
|   |-- FilterBar.tsx
|   |-- MetricGrid.tsx
|   `-- WorkTable.tsx
|-- data/
|   `-- sampleData.ts
|-- domain/
|   |-- operations.test.ts
|   |-- operations.ts
|   `-- types.ts
|-- App.tsx
|-- main.tsx
`-- styles.css

Run locally

npm install
npm run dev

Verify

npm run typecheck
npm test
npm run build

Production extension points

• Replace the sample adapter with REST, GraphQL, Firebase, Supabase, or MongoDB-backed services.
• Connect role selection to authentication and server-issued claims.
• Persist transitions through an API and record immutable audit events.
• Add query caching, optimistic updates, monitoring, and end-to-end tests.

Sample data and provenance

This repository is an original public reference implementation. Names, work orders, addresses, and metrics are fictional; it contains no client source code, credentials, or production data.

See SECURITY.md before reporting a suspected vulnerability.

License

MIT