# Build 21 Admin Pages — Implementation Plan

## Scope

Build all 21 admin frontend pages (Phase 1 + Phase 1*) following the approved [Bermadani Design System](file:///home/tanesheva/.gemini/antigravity-ide/brain/e1ebddee-49b6-43b3-a90a-9949b96fb4f3/bermadani_design_system.md).

**Backend status:**
- ✅ 3 controllers ready: `MemberController`, `SimpananController`, `LoanController` (11 pages)
- ✅ 7 controllers ready: Admin Dashboard, Laporan (4), COA, Jurnal, FiscalPeriod, Settings, Users (10 pages)

---

## Phase 0 — Shared Components (Build First)

These components are reused across most admin pages. Build them before any pages.

### [NEW] `AdminLayout.jsx`
> `resources/js/Layouts/AdminLayout.jsx`

Same structure as `AuthenticatedLayout` but with admin-specific nav:
- Dashboard, Anggota, Simpanan, Pinjaman, Laporan (submenu), COA, Jurnal, Periode, Pengaturan, Users
- Extends sidebar with collapsible "Laporan" group (like Revio's Forecasts submenu)
- Same header, mobile bottom nav

### [NEW] `StatCard.jsx`
> `resources/js/Components/UI/StatCard.jsx`

Props: `{ label, value, change, changeDirection, gradient, icon }`

Uses Card + inner gradient panel. Gradient options: `emerald`, `sky`, `amber`, `indigo`, `rose`.

### [NEW] `DataTable.jsx`
> `resources/js/Components/UI/DataTable.jsx`

Props: `{ columns, data, onRowClick, emptyMessage }`

Renders inside a `rounded-[2rem]` card. Table head with `text-[11px] font-semibold uppercase` headers. Hover rows.

### [NEW] `Pagination.jsx`
> `resources/js/Components/UI/Pagination.jsx`

Props: `{ links }` (from Laravel paginator)

Previous/Next + page numbers in `rounded-xl` buttons.

### [NEW] `SearchInput.jsx`
> `resources/js/Components/UI/SearchInput.jsx`

Props: `{ value, onChange, placeholder }`

Search icon + input. Debounced Inertia visit.

### [NEW] `FilterDropdown.jsx`
> `resources/js/Components/UI/FilterDropdown.jsx`

Props: `{ label, options, value, onChange }`

### [NEW] `FormCard.jsx`
> `resources/js/Components/UI/FormCard.jsx`

Props: `{ title, description, children }`

Card wrapper for form sections with title + dividers.

### [NEW] `FormInput.jsx`
> `resources/js/Components/UI/FormInput.jsx`

Props: `{ label, error, type, ...inputProps }`

Label + styled input + error message.

### [NEW] `FormSelect.jsx`
> `resources/js/Components/UI/FormSelect.jsx`

Props: `{ label, error, options, ...selectProps }`

### [NEW] `StatusBadge.jsx`
> `resources/js/Components/UI/StatusBadge.jsx`

Props: `{ status }` — maps to semantic colors (AKTIF→emerald, PENDING→amber, etc.)

### [NEW] `Modal.jsx`
> `resources/js/Components/UI/Modal.jsx`

Props: `{ isOpen, onClose, title, children }`

Backdrop blur + centered card.

### [NEW] `EmptyState.jsx`
> `resources/js/Components/UI/EmptyState.jsx`

Props: `{ icon, title, description, action }`

### [NEW] `Tabs.jsx`
> `resources/js/Components/UI/Tabs.jsx`

Props: `{ tabs, activeTab, onChange }`

---

## Phase 1 — Pages with Ready Controllers (11 pages)

### 1.1 Members (5 pages)

#### [NEW] `Admin/Members/Index.jsx`
**Template**: Index/List  
**Props from controller**:
```js
{
  members: { data: [...], links: [...], meta: {...} }, // paginated
  filters: { search, status, role }
}
```
**Features**: SearchInput + FilterDropdown (status, role) → StatCards (total, aktif, nonaktif, new this month) → DataTable (name, member_number, role, status, join_date, actions) → Pagination

#### [NEW] `Admin/Members/Create.jsx`
**Template**: Form  
**Props**: none  
**Form fields**: name, email, password, nik, phone, address, unit_kerja, position, role (select), monthly_wajib_amount  
**Submit**: POST to `admin.members.store`

#### [NEW] `Admin/Members/Show.jsx`
**Template**: Detail  
**Props from controller**:
```js
{
  member: { id, name, email, member_number, nik, phone, address,
            unit_kerja, position, role, status, member_tier, points,
            join_date, monthly_wajib_amount, is_member_koperasi,
            recent_simpanan: [...], recent_loans: [...] }
}
```
**Layout**: Profile card (8col) + Summary sidebar (4col) + Recent simpanan table + Recent loans table

#### [NEW] `Admin/Members/Edit.jsx`
**Template**: Form  
**Props from controller**:
```js
{
  member: { id, name, email, member_number, nik, phone, address,
            unit_kerja, position, role, status, monthly_wajib_amount, status_note }
}
```
**Submit**: PUT to `admin.members.update`

---

### 1.2 Simpanan (3 pages)

#### [NEW] `Admin/Simpanan/Index.jsx`
**Template**: Index/List (combined with deposit/withdraw forms)
**Props from controller**:
```js
{ members: [{ id, name, member_number }] }
```
**Layout**: Tabs for "Setoran" and "Penarikan" — each tab has a form card with member select + amount

#### [NEW] `Admin/Simpanan/Deposit.jsx`
**Template**: Form
**Shares route with Index** — or renders as standalone form page
**Form fields**: member_id (searchable select), type (POKOK/WAJIB/SUKARELA), amount, description, billing_month
**Submit**: POST to `admin.simpanan.deposit`

#### [NEW] `Admin/Simpanan/Withdraw.jsx`
**Template**: Form  
**Form fields**: member_id (searchable select), amount, description  
**Submit**: POST to `admin.simpanan.withdraw`

> [!NOTE]
> The current `SimpananController@index` only passes `members` list. We may combine Index + Deposit + Withdraw into one page with tabs, or keep them separate. The design system shows them as separate routes.

---

### 1.3 Loans (3 pages)

#### [NEW] `Admin/Loans/Index.jsx`
**Template**: Index/List  
**Props from controller**:
```js
{
  loans: { data: [...], links: [...] }, // paginated
  filters: { status, source }
}
```
**Features**: FilterDropdown (status, source) → StatCards → DataTable (loan_number, member, amount, remaining, status, actions) → Pagination

#### [NEW] `Admin/Loans/Create.jsx`
**Template**: Form  
**Props**: `{ members: [{ id, name, member_number }] }`  
**Form fields**: member_id, source (BERMADANI/BMT_ITQAN), base_amount, interest_rate, tenor, purpose  
**Submit**: POST to `admin.loans.store`

#### [NEW] `Admin/Loans/Show.jsx`
**Template**: Detail  
**Props**: `{ loan }` (full loan with member + payments)  
**Layout**: Loan summary card + Member info + Schedule table + Payment history  
**Actions**: Approve (if PENDING) → Disburse (if APPROVED) → Record Payment (if ACTIVE)

---

## Phase 2 — Pages Needing New Controllers (10 pages)

> [!IMPORTANT]
> These need both new backend controllers AND frontend pages. I'll create the controllers alongside the pages.

### 2.1 Admin Dashboard

#### [NEW] `Admin/Dashboard.jsx`
**Template**: Dashboard Overview  
**New controller**: `Admin\DashboardController@index`  
**Data needed**: total_members, total_simpanan, total_loans_outstanding, shu_running, recent_activities, top_members  
**Layout**: 4× StatCards → Chart (8col) + Top Members (4col) → Recent Activity table

---

### 2.2 Laporan (4 pages)

All 4 laporan pages use `GeneralLedgerService` methods.

#### [NEW] `Admin/Laporan/Neraca.jsx` — Balance Sheet
#### [NEW] `Admin/Laporan/LabaRugi.jsx` — Income Statement
#### [NEW] `Admin/Laporan/TrialBalance.jsx` — Trial Balance
#### [NEW] `Admin/Laporan/BukuBesar.jsx` — Account Ledger

**New controller**: `Admin\LaporanController`  
**Backend**: `GeneralLedgerService` already has `getBalanceSheet()`, `getIncomeStatement()`, `getTrialBalance()`, `getAccountLedger()`.

---

### 2.3 COA, Jurnal, FiscalPeriod, Settings, Users (4 pages)

#### [NEW] `Admin/COA/Index.jsx` — Chart of Accounts
#### [NEW] `Admin/Jurnal/Index.jsx` — Journal Entries
#### [NEW] `Admin/FiscalPeriod/Index.jsx` — Fiscal Period management
#### [NEW] `Admin/Settings/Index.jsx` — Cooperative Settings
#### [NEW] `Admin/Users/Index.jsx` — User & Role management

**New controllers needed**: `CoaController`, `JurnalController`, `FiscalPeriodController`, `SettingsController`, `UserController`

---

## Build Order

```
Phase 0: Shared Components (13 components)
  └── AdminLayout → StatCard → DataTable → Pagination → SearchInput
  └── FilterDropdown → FormCard → FormInput → FormSelect
  └── StatusBadge → Modal → EmptyState → Tabs

Phase 1: Controller-Ready Pages (11 pages)
  ├── 1.1 Members/Index → Members/Create → Members/Show → Members/Edit
  ├── 1.2 Simpanan/Index → Simpanan/Deposit → Simpanan/Withdraw
  └── 1.3 Loans/Index → Loans/Create → Loans/Show

Phase 2: New Controllers + Pages (10 pages)
  ├── 2.1 Admin Dashboard (controller + page)
  ├── 2.2 Laporan (LaporanController + 4 pages)
  └── 2.3 COA, Jurnal, FiscalPeriod, Settings, Users (5 controllers + 5 pages)
```

---

## Open Questions

> [!IMPORTANT]
> **Simpanan page structure**: The current `SimpananController@index` is minimal (just passes members list). Should we:
> - **Option A**: Build one combined page with Tabs (Index shows both deposit + withdraw forms) — simpler
> - **Option B**: Keep 3 separate pages (Index as transaction history, Deposit form, Withdraw form) — needs index controller update
> 
> The page_map shows 3 separate routes. I recommend **Option B** and adding transaction history to the index controller.

---

## Verification Plan

### Build Verification
- `npm run build` after each phase to catch compilation errors

### Visual Verification  
- `npm run dev` → navigate to each page
- Check responsive behavior (desktop + mobile)
- Verify design system consistency (shadows, radii, typography, colors)

### Functional Verification
- Submit forms → check Inertia redirects + flash messages
- Pagination → verify page navigation
- Search/Filter → verify query param updates
- Action buttons (Approve, Disburse, Payment) → verify state changes