LLDRepositories
v1.2 is unreleased — see v1.1 for the current stable release.
mcm-ui
Next.js frontend for MSP and Enterprise workflows.
mcm-ui
mcm-ui is the Next.js / React / TypeScript frontend for the MCM platform. It is deployed as a static export to Firebase Hosting and provides the browser experience for MSP and Enterprise users.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js App Router with static export |
| UI Components | Radix UI + shadcn/ui + Tailwind CSS |
| Charts | Recharts |
| Forms | react-hook-form + Zod |
| State | React Context |
| Maps | Leaflet + react-leaflet |
| Infrastructure viz | @xyflow/react |
| Hosting | Firebase Hosting |
Platform Areas
The UI presents workflows backed by the MCM module services and core API.
| Area | Backend owner |
|---|---|
| Accounts, MSP, Enterprise, billing, and admin workflows | mcm-api |
| Discovery | mcm-module-discovery |
| FinOps | mcm-module-finops |
| SecOps | mcm-module-secops |
| Governance | mcm-module-governance |
| Orchestration | mcm-module-orchestration |
Design Conventions
All pages follow the standard shell pattern documented in UI Design Guidelines. The canonical reference implementation is components/features/enterprise/accounts/accounts-page-client.tsx.
Key layout components:
| Component | Path |
|---|---|
RouteTabShell | components/ui/route-tab-shell.tsx |
TopLevelTabsNav | components/ui/top-level-tabs-nav.tsx |
PageHeader | components/ui/page-header.tsx |
DataTable | components/ui/data-table.tsx |
InteractiveKpiCard | components/ui/interactive-surfaces.tsx |
Deployment
The app is built with NEXT_STATIC_EXPORT=true, which triggers Next.js static export mode and writes the output to out/. Firebase Hosting serves the exported app. See mcm-devops for CI/CD and deployment automation.