# Frontend Modernization Roadmap

This roadmap tracks the global cleanup from page-heavy implementation toward production-grade domain modules.

## Phase 1: Guardrails

- Add `features/*` domain boundaries.
- Keep page files below 700 lines.
- Add `npm run audit:pages`.
- Prefer `api/<domain>` imports for new code.

Status: started.

## Phase 2: Data Assets And Engines

Target pages:

- `InstancePage.tsx`
- `InstanceDetailPage.tsx`
- `RedisDetailPage.tsx`
- `MongoDBDetailPage.tsx`
- `SchemaSidebar.tsx`

Target domains:

- `features/datasource`
- `features/datasource/engines/mysql`
- `features/datasource/engines/postgresql`
- `features/redis`
- `features/mongo`

Expected outcome:

- MySQL/PostgreSQL/Redis/Mongo share consistent instance headers, metadata panels, query result density, and dangerous-action affordances.
- Engine-specific behavior is isolated.

## Phase 3: Query And Change Platform

Target pages:

- `QueriesPage.tsx`
- `TicketCreatePage.tsx`
- `TicketsPage.tsx`
- `TicketDetailPage.tsx`
- `AutoTaskPage.tsx`

Target domains:

- `features/query`
- `features/ticket`

Expected outcome:

- Query workspace, ticket creation, audit results, execution confirmation, rollback evidence, and todo views use shared production patterns.

## Phase 4: Governance And RBAC

Target pages:

- `WorkflowPage.tsx`
- `AuditRulesPage.tsx`
- `UsersPage.tsx`
- `RolesPage.tsx`
- `InstanceGroupPage.tsx`
- `LdapConfigPage.tsx`

Target domains:

- `features/governance`
- `features/rbac`

Expected outcome:

- Approval workflow, risk policy, roles, permissions, permission groups, and LDAP sync become coherent domains instead of page-local implementations.

## Phase 5: System Operations

Target pages:

- `SettingsPage.tsx`
- `ConfigPlatformPage.tsx`
- `PlatformConfigPage.tsx`
- `NotificationPage.tsx`
- `AnnouncementPage.tsx`
- `AuditLogsPage.tsx`
- `AppearanceSettings.tsx`

Target domain:

- `features/system`

Expected outcome:

- System settings, notifications, announcements, audit logs, retention, and appearance use one system-governance layout.