---
name: implement-user-pages
overview: Implement responsive user-facing and admin pages wired to the users API, working on both desktop and mobile (native-like) layouts.
todos:
  - id: create-users-api-helper
    content: Create apps/web-client/src/lib/api/users.ts with typed methods for users API
    status: completed
  - id: create-users-store
    content: Add apps/web-client/src/stores/users-store.ts and hooks to manage users state and actions
    status: completed
  - id: create-users-components
    content: Add UsersTable, UserCard, UserForm components under src/features/shared/components/users/
    status: completed
  - id: implement-admin-pages
    content: "Add admin pages: apps/web-client/src/app/admin/users/page.tsx and apps/web-client/src/app/admin/users/[id]/page.tsx"
    status: completed
  - id: implement-profile-settings
    content: "Add profile and settings pages: /profile and /settings wired to users-store/auth-store"
    status: completed
  - id: implement-auth-pages
    content: Ensure login/register pages under /auth use auth-store and redirect to /dashboard on success
    status: completed
  - id: integrate-layouts
    content: Wire pages to desktop layout (sidebar) and MobileLayout for mobile breakpoints
    status: completed
  - id: add-guards
    content: Implement client-side auth guard and role-check helper for admin routes
    status: completed
  - id: add-tests
    content: Add smoke/integration tests for auth flow and users pages
    status: completed
---

# Plan: Implement User Pages (Desktop + Mobile)

## Goal

Implement a cohesive set of pages that use the users API for both self-service (profile) and admin CRUD, and that render well on desktop (sidebar/content) and mobile (native-style MobileLayout).

## Scope

- Public & auth pages: landing, login, register, forgot-password
- Authenticated user pages: dashboard (chat), profile, settings
- Admin pages: users list, user detail, create/edit user, role management
- Mobile parity: same routes/components but rendered inside `MobileLayout`/`MobileBottomNav` for mobile sizes
- API integration: use existing http-client package and create users client helpers

## Files I'll update / create (high-signal)

- Pages
  - `apps/web-client/src/app/page.tsx` (landing — already updated)
  - `apps/web-client/src/app/auth/login/page.tsx` (login)
  - `apps/web-client/src/app/auth/register/page.tsx` (register)
  - `apps/web-client/src/app/dashboard/page.tsx` (user dashboard)
  - `apps/web-client/src/app/profile/page.tsx` (profile self-service)
  - `apps/web-client/src/app/settings/page.tsx` (settings)
  - `apps/web-client/src/app/admin/users/page.tsx` (admin users list)
  - `apps/web-client/src/app/admin/users/[id]/page.tsx` (admin user detail/edit)

- Components & layout
  - `apps/web-client/src/features/shared/components/users/UserCard.tsx`
  - `apps/web-client/src/features/shared/components/users/UserForm.tsx`
  - `apps/web-client/src/features/shared/components/users/UsersTable.tsx`
  - `apps/web-client/src/features/shared/components/layout/desktop-layout/desktop-layout.tsx` (ensure sidebar + content)
  - reuse `MobileLayout`, `MobileBottomNav` for mobile

- State & API
  - `apps/web-client/src/stores/users-store.ts` (zustand or existing store pattern used by `auth-store.ts`)
  - `packages/http-client/src/index.ts` or new helper `apps/web-client/src/lib/api/users.ts` for typed users API calls

- Auth & guards
  - `apps/web-client/src/features/shared/middleware/auth-guard.tsx` (client-side guard/wrapper)
  - add role-check helper for admin routes

- Tests & docs
  - `apps/web-client/src/features/shared/components/layout/mobile-layout/mobile-app-demo.tsx` (demo already added)
  - Add basic integration tests under `apps/web-client/src/__tests__/` for users pages

## Implementation steps (high level)

1. API client helpers (users)

   - Create `apps/web-client/src/lib/api/users.ts` with typed methods: `getUsers`, `getUser`, `createUser`, `updateUser`, `deleteUser`.
   - Use existing http-client package where appropriate.

2. Users store & hooks

   - Implement `users-store.ts` with methods that call the API helpers and manage loading/error state.
   - Expose hooks: `useUsersStore` with `fetchUsers`, `fetchUser`, `createUser`, `updateUser`, `deleteUser`.

3. Desktop layouts & components

   - Ensure `desktop-layout.tsx` (sidebar + content) exists and supports admin sections.
   - Create `UsersTable`, `UserCard`, and `UserForm` components.
   - Implement `apps/web-client/src/app/admin/users/page.tsx` to use `UsersTable` and `useUsersStore`.
   - Implement `apps/web-client/src/app/admin/users/[id]/page.tsx `to show `UserCard` + `UserForm`.

4. Auth pages & routing

   - Provide login/register pages that call `auth-store` actions; upon login redirect to `/dashboard`.
   - Protect admin pages with a client-side guard that checks `auth-store.user.role`.

5. Profile & settings

   - Implement `/profile` to fetch and update current user (self-service) via `users-store` or `auth-store` methods.
   - Settings to manage preferences (theme, language) integrated with existing providers.

6. Mobile parity

   - For all pages, ensure responsive variants use `MobileLayout` when viewport small.
   - For admin pages, provide compact mobile UI or hide complex operations (offer an «Open on desktop» hint) while allowing read/update on mobile where feasible.

7. UX polish

   - Loading and empty states
   - Error handling following project error patterns
   - Accessible controls (keyboard, focus)

8. Tests

   - Add smoke/integration tests for user list, user detail, login flow.

## Minimal example: users API helper (proposed)

```javascript
// apps/web-client/src/lib/api/users.ts
import { http } from '@goodgo/http-client';

export async function getUsers(params = {}) {
  return await http.get('/api/users', { params });
}

export async function getUser(id) {
  return await http.get(`/api/users/${id}`);
}

export async function createUser(payload) {
  return await http.post('/api/users', payload);
}

export async function updateUser(id, payload) {
  return await http.put(`/api/users/${id}`, payload);
}

export async function deleteUser(id) {
  return await http.delete(`/api/users/${id}`);
}
```

## Todos (implementation tasks)

- create-users-api-helper: Create `apps/web-client/src/lib/api/users.ts` with typed methods
- create-users-store: Implement `apps/web-client/src/stores/users-store.ts` and hooks
- create-users-components: Implement `UsersTable`, `UserCard`, `UserForm`
- implement-admin-pages: Add `apps/web-client/src/app/admin/users/page.tsx` and `[id]/page.tsx`
- implement-profile-settings: Add `/profile` and `/settings` pages
- implement-auth-pages: Ensure `login` and `register` pages integrate with `auth-store`
- integrate-layouts: Wire pages to `desktop-layout` and `MobileLayout` responsive behavior
- add-guards: Implement client-side `auth-guard` and role checks for admin
- add-tests: Add basic tests for login, users list, user detail

## Timeline (estimates)

- API helpers + store: 1-2 days
- Core components + admin pages: 2-3 days
- Auth/profile/settings: 1-2 days
- Mobile adjustments & polish: 1-2 days
- Tests + QA: 1-2 days

## Notes / assumptions

- Users API endpoints follow REST conventions (`/api/users`). If the real API URL differs, I'll adapt the helpers.
- Uses existing `auth-store` for JWT/session; token injection handled by `http-client`.
- Admin UI assumes role-based field `user.role` is present.

If you confirm this plan I will create the detailed implementation plan (file-by-file edits and the exact code snippets) and then proceed to implement. If you want any changes to scope (e.g., exclude admin CRUD for now, or prioritise mobile-first UX), tell me which items to adjust.