refactor: Thay thế hook dịch thuật tùy chỉnh bằng hook useTranslations từ next-intl, cập nhật các thành phần liên quan đến dịch thuật và điều hướng sau khi đăng nhập thành công.
This commit is contained in:
Ho Ngoc Hai
176
.cursor/plans/implement-user-pages_6e6b2c08.plan.md
Normal file
176
.cursor/plans/implement-user-pages_6e6b2c08.plan.md
Normal file
@@ -0,0 +1,176 @@
|
||||
---
|
||||
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.
|
||||
Reference in New Issue
Block a user