# Implementation Plan

## Strategy

Do not rewrite the entire frontend in one uncontrolled change.

Use a phased migration with explicit checkpoints.

## Phase 0 — Finish product functionality

Before the visual/UX redesign begins:

- finish current functional changes,
- avoid spending excessive time polishing legacy visual styling,
- stabilise backend/data-model behaviour,
- run tests,
- create a pre-redesign checkpoint.

## Phase 1 — Audit

No broad design changes.

Inspect and document:

- frontend framework and build setup,
- current styling solution,
- component libraries,
- routing,
- state management,
- authentication,
- localisation,
- API integration,
- test setup,
- every current feature and workflow.

Deliverables:

- technical frontend audit,
- functionality inventory,
- route/page map,
- component inventory,
- risk list,
- proposed migration approach.

## Phase 2 — Functional baseline

Add or improve regression coverage around critical workflows before changing them.

Deliverables:

- stable baseline tests,
- known failing tests documented,
- explicit protected-functionality checklist.

## Phase 3 — UX architecture

Define the target product shell and information architecture.

Deliverables:

- sidebar structure,
- page hierarchy,
- route migration plan,
- job workflow,
- Career Profile workflow,
- CV workflow,
- dashboard architecture,
- contextual AI pattern,
- responsive interaction model.

Avoid large implementation until this architecture is coherent.

## Phase 4 — Design system foundation

Implement shared tokens/components:

- colour tokens,
- typography,
- spacing,
- radii,
- shadows,
- motion,
- light/dark themes,
- form controls,
- buttons,
- tables,
- dialogs/drawers,
- empty/loading/error states,
- page layout primitives.

The agent may replace the current UI/component layer if doing so materially improves maintainability and consistency.

## Phase 5 — Representative screens

Implement only the most representative areas first:

1. App shell/sidebar
2. Dashboard
3. Jobs workspace
4. Job detail
5. CV builder

Use these to validate the design language before migrating the entire application.

## Phase 6 — Review checkpoint

Before broad rollout, inspect:

- consistency,
- usability,
- density,
- dark mode,
- mobile,
- Norwegian localisation,
- AI patterns,
- component reuse,
- performance.

Fix system-level issues now rather than replicating them across every page.

## Phase 7 — Full migration

Migrate remaining areas, including:

- authentication,
- onboarding,
- Career Profile,
- CV library,
- Documents,
- application/cover-letter workflows,
- Analytics,
- Notifications,
- Settings,
- Admin,
- error pages,
- empty states,
- remaining dialogs and forms.

## Phase 8 — Dashboard customisation

Implement per-user dashboard configuration:

- visibility,
- ordering,
- resizing where supported,
- reset defaults,
- persistence.

Admin dashboard remains separate.

## Phase 9 — QA

Run:

- automated regression tests,
- visual inspection,
- responsive inspection,
- keyboard/accessibility checks,
- English/Norwegian checks,
- light/dark checks,
- empty/large-data edge cases,
- document/CV pagination checks.

## Phase 10 — Cleanup

Remove only genuinely obsolete legacy UI code after:

- confirming no route still uses it,
- confirming tests pass,
- confirming functionality inventory is satisfied.

## Branching recommendation

Suggested:

- stable branch/tag: `pre-ui-redesign`
- working branch: `feature/ui-redesign`

Use smaller commits grouped by system/component or migrated workflow.