# M002 V4 Catalog Admin Frontend CP1 Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Implement the Reservation V4 catalog management frontend page under System Settings for Account, Room Type, and Rate Code catalogs.

**Architecture:** Extend the existing system admin module with typed admin catalog service functions, a guarded `/system/reservation-catalogs` route, and a single focused Vue page that switches between the three catalog types. The page follows existing system admin list/form/pagination patterns and never bypasses backend permission, hotel, or catalog validation.

**Tech Stack:** Vue 3.5, TypeScript, Vue Router, Pinia auth store, Vue I18n, Vitest, existing `httpClient` and system admin CSS.

## Global Constraints

- API calls must stay in `client/src/services/systemAdminService.ts`.
- Types must stay in `client/src/types/systemAdmin.ts`.
- Route and tab entry require `RESERVATION_CATALOG_MANAGE`.
- Account create uses default `market_code=LEISURE` and `source_code=TRAVEL_AGENT`.
- List filters are `hotel_id`, `keyword`, `status`, `page_num`, `page_size`.
- No backend changes, no PMS / OPERA / OHIP integration, no V4 task card behavior changes.
- Do not submit secrets, demo keys, build artifacts, IDE files, or unrelated working tree changes.

---

### Task 1: Service And Route Contract

**Files:**
- Modify: `client/src/types/auth.ts`
- Modify: `client/src/types/systemAdmin.ts`
- Modify: `client/src/services/systemAdminService.ts`
- Modify: `client/src/router/index.ts`
- Test: `client/src/tests/systemAdminService.spec.ts`
- Test: `client/src/tests/reservationRouter.spec.ts`

**Interfaces:**
- Produces: `fetchAdminReservationCatalogAccounts`, `createAdminReservationCatalogAccount`, `updateAdminReservationCatalogAccountStatus`.
- Produces: `fetchAdminReservationCatalogRoomTypes`, `createAdminReservationCatalogRoomType`, `updateAdminReservationCatalogRoomTypeStatus`.
- Produces: `fetchAdminReservationCatalogRateCodes`, `createAdminReservationCatalogRateCode`, `updateAdminReservationCatalogRateCodeStatus`.

- [x] **Step 1: Write failing service tests**

```ts
await fetchAdminReservationCatalogAccounts({ hotel_id: 'HOTEL-TEST', keyword: 'qbd', status: 'ACTIVE', page_num: 2, page_size: 10 })
await createAdminReservationCatalogAccount({ hotel_id: 'HOTEL-TEST', account_code: 'ACME', account_name: 'Acme', market_code: 'LEISURE', source_code: 'TRAVEL_AGENT' })
await updateAdminReservationCatalogAccountStatus('10001', { status: 'DISABLED' })
```

- [x] **Step 2: Write failing router tests**

```ts
expect(router.resolve('/system/reservation-catalogs').name).toBe('system-reservation-catalogs')
expect(router.resolve('/system/reservation-catalogs').meta.permission).toBe('RESERVATION_CATALOG_MANAGE')
```

- [x] **Step 3: Implement types, services, and route**

Add the catalog request/response interfaces and route metadata, using only backend paths documented in `M002-v4-real-catalog-lookup-api-design.md`.

- [x] **Step 4: Verify task tests**

Run: `CI=true pnpm --dir client test -- systemAdminService.spec.ts reservationRouter.spec.ts`

---

### Task 2: Catalog Management Page

**Files:**
- Create: `client/src/views/system/SystemReservationCatalogsView.vue`
- Modify: `client/src/views/system/SystemAdminLayoutView.vue`
- Modify: `client/src/i18n/locales/zh-CN.ts`
- Modify: `client/src/i18n/locales/en-US.ts`
- Modify: `client/src/i18n/locales/th-TH.ts`
- Test: `client/src/tests/systemReservationCatalogsView.spec.ts`

**Interfaces:**
- Consumes service functions from Task 1.
- Produces a page that lists, creates, enables, and disables Account, Room Type, and Rate Code records.

- [x] **Step 1: Write failing page tests**

```ts
expect(wrapper.text()).toContain('Reservation V4 目录管理')
expect(fetchAdminReservationCatalogAccounts).toHaveBeenCalledWith(expect.objectContaining({ hotel_id: 'HOTEL-TEST' }))
await wrapper.find('form').trigger('submit.prevent')
expect(createAdminReservationCatalogAccount).toHaveBeenCalledWith(expect.objectContaining({ market_code: 'LEISURE', source_code: 'TRAVEL_AGENT' }))
```

- [x] **Step 2: Implement page UI**

Use existing system admin sections: filters, create form, catalog table, pagination, and row status action buttons.

- [x] **Step 3: Add i18n keys**

Add `nav.systemReservationCatalogs` and `systemAdmin.catalogs.*` to zh-CN, en-US, and th-TH.

- [x] **Step 4: Verify page tests**

Run: `CI=true pnpm --dir client test -- systemReservationCatalogsView.spec.ts`

---

### Task 3: Verification, Review, And Commit

**Files:**
- Review all changed frontend files.
- Commit only files related to this frontend CP1.

- [ ] **Step 1: Run checks**

Run:

```bash
CI=true pnpm --dir client lint
CI=true pnpm --dir client typecheck
CI=true pnpm --dir client test
CI=true pnpm --dir client build
```

- [ ] **Step 2: Code review**

Review for endpoint paths, permission gates, hotel filter behavior, idempotent status actions, stale/disabled catalog explanation, and accidental staging of unrelated files.

- [ ] **Step 3: Commit**

```bash
git add <only M002 V4 catalog admin frontend files>
git commit -m "实现V4目录管理后台前端"
```