lcbp3/specs/99-archives/history/2025-12-06_p3-admin-panel-plan.md

P3-1: Frontend Admin Panel Implementation Plan

Goal

Implement a functional Admin Panel for User and Master Data Management, connected to existing Backend APIs.

Scope

1. Admin Layout: Sidebar navigation and layout structure at /app/(admin).
2. User Management:
   • List Users (GET /users) with pagination/filtering.
   • Create/Edit User (POST /users, PATCH /users/:id).
   • Assign Roles (POST /users/assign-role).
3. Organization Management:
   • List Organizations (GET /organizations).
   • Create/Edit Organization (POST, PATCH).

Implementation Steps

1. Admin Layout & Navigation

• File: app/(admin)/layout.tsx
• File: components/admin/admin-sidebar.tsx
• Logic: Ensure only users with ADMIN role can access.

2. User Management

• Page: app/(admin)/admin/users/page.tsx
• Components:
  • components/admin/users/user-table.tsx (using tanstack/react-table)
  • components/admin/users/user-dialog.tsx (Create/Edit Form with Zod validation)

3. Organization Management

• Page: app/(admin)/admin/organizations/page.tsx
• Components:
  • components/admin/orgs/org-table.tsx
  • components/admin/orgs/org-dialog.tsx

Dependencies

• Backend Endpoints: verified (UserController, OrganizationController).
• UI Components: Table, Dialog, Form (Shadcn/UI - already installed).

Verification

• Login as Admin.
• Navigate to /admin/users.
• Create a new user and verify in DB/List.
• Edit user details.
• Create a new Organization.