[ZukaiSagan]

Summary
Establish a cohesive health-app design system and dashboard experience.

Outcome
Replace the previous card-heavy presentation with a deliberate, accessible, responsive health-app experience built on shared visual tokens and reusable UI primitives.

Scope

• Establish reusable visual tokens for color, spacing, typography, surfaces, and health-status states.
• Redesign the application shell, navigation, dashboard hierarchy, and responsive behavior.
• Support configurable background themes without scattering hard-coded colors across pages.
• Establish reusable loading, empty, error, metric, timeline, and confirmation components.
• Preserve multilingual and RTL support.
• Add focused UI / design-system coverage in Vitest.

Subdeliverables

• Define visual tokens and health-status color system
• Redesign the application shell and navigation
• Build reusable health UI components
• Redesign the dashboard hierarchy and cards
• Add responsive, accessibility, and RTL verification
• Add visual regression / focused UI coverage

Checklist

• Primary routes use the shared design system
• Dashboard has a clear primary action and no placeholder-only cards
• Background and status color changes are token-driven and accessible
• Responsive, keyboard, screen-reader, and RTL behavior are verified
• Focused UI / design-system tests pass

Test Plan

• cd frontend && npm run test:run
• npm run build
• Open /dashboard - confirm primary CTA, tools grid, and empty activity state
• Switch background theme (Calm / Clinical / Grove) and confirm surfaces update without hard-coded page colors
• Exercise mobile nav (hamburger) and keyboard skip-to-content
• Switch language to Arabic and confirm RTL layout on shell + dashboard

[mudabs]

Thank you for the code changes. Please address the following before merge:

• Fix the missing closing </div> in frontend/src/pages/Dashboard.jsx. The current JSX does not parse, causing frontend lint, tests, and build to fail.
• Resolve the Fast Refresh ESLint errors in frontend/src/context/ThemeContext.jsx. Move exported constants/hooks into a separate module or apply an appropriate lint-safe structure.
• Re-run and confirm all checks pass:
  • npm run lint
  • npm run test:run
  • npm run build

The backend checks pass, but the frontend blockers must be resolved before approval.

[mudabs]

Thanks Zukai for the work done. I see a significant number of changes in the code however, please address the following before this PR can be approved:

1. Fix the JSX structure in frontend/src/pages/Dashboard.jsx.

   In the tools section, the <div className="mb-4"> opened before the tools heading is not closed before the <ul> element. Add the missing closing </div> immediately after the tools subtitle and before the tools list. This currently causes the ESLint JSX parsing error:

   Expected corresponding JSX closing tag for <div>

2. Fix the Fast Refresh lint errors in frontend/src/context/ThemeContext.jsx.

   The file currently exports constants, a provider component, and the useTheme hook together. This violates react-refresh/only-export-components at the exports for THEMES and useTheme.

   Please either:

   • Move the theme constants/context/hook into separate modules and leave the provider component in its own component file, updating all imports and tests; or
   • Apply a narrowly scoped, documented lint-safe structure that satisfies the Fast Refresh rule.

   Theme behavior must remain unchanged, including the supported themes, localStorage persistence, and data-theme updates.

3. Re-run the complete frontend verification suite:

   • npm run lint
   • npm run test:run
   • npm run build

4. Confirm that the following behavior still works after the refactor:

   • Dashboard renders successfully.
   • Mobile navigation opens and closes correctly.
   • Theme switching updates the document theme and persists after reload.
   • English, Arabic/RTL, and the other supported languages continue to render correctly.
   • Existing dashboard and design-system tests remain passing.

Please push the fixes and confirm that all GitHub Actions checks are green before requesting another review.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[mudabs]

I had to work on the changes requested. All tests passed.