Describe the bug
When running the dashboard page, ESLint reports multiple errors:

1. React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render.
2. Prettier formatting issues appear in JSX files, especially with quotes and spacing.

This causes build failures and prevents proper linting.

To Reproduce
Steps to reproduce the behavior:

1. Run the app or build the frontend:
   npm run build
2. Observe ESLint errors about conditional hooks.
3. Also notice Prettier formatting warnings when saving JSX/TSX files.

Expected behavior

• All React hooks should be called in the same order on every render to comply with rules-of-hooks.
• JSX code should pass Prettier formatting rules, e.g., quotes escaped correctly, spacing consistent.
• No build or linting errors should appear.

Screenshots
If applicable, include screenshots of terminal showing:

- react-hooks/rules-of-hooks errors

• Prettier formatting errors

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome / Edge (if relevant)
• Version Node.js 20+, Next.js 13+

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser N/A
• Version N/A

Additional context

• The issue was caused by early returns before hooks in DashboardPage and other components.
• Prettier warnings mostly involve unescaped quotes in JSX.
• Fix involves:
  1. Refactoring hooks to always execute in the same order.
  2. Escaping quotes in JSX strings.
  3. Running Prettier on all affected files.