# 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.
