# Boss Admin Backoffice Redesign 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:** Rebuild `/admin` into a PC To B operations backoffice with a dashboard, customer workspace, permission workspace, and risk/governance command center.

**Architecture:** Keep the existing Next.js App Router route and existing admin APIs. Refactor the current client shell into focused React components under `src/components/admin/`, reusing `/api/v1/admin/overview`, `/api/v1/admin/access`, `/api/v1/admin/risks/actions`, and `/api/v1/admin/skills/requests`.

**Tech Stack:** Next.js 16 App Router, React 19, Ant Design, `@refinedev/core`, TypeScript source tests with `node:test`.

---

### Task 1: Source Tests For New Admin Structure

**Files:**
- Modify: `tests/admin-refine-page.test.ts`

- [ ] **Step 1: Update the admin structure assertions**

Replace the old page shell expectations with assertions for these strings:

```ts
for (const title of ["平台运营驾驶舱", "客户与账号", "授权工作台", "风险与治理"]) {
  assert.match(source, new RegExp(title));
}
for (const title of ["今日待处理", "客户健康排行", "关键风险队列", "节点健康"]) {
  assert.match(source, new RegExp(title));
}
assert.doesNotMatch(source, /window\.prompt/);
```

- [ ] **Step 2: Run the focused test**

Run:

```bash
npx tsx --test tests/admin-refine-page.test.ts
```

Expected: fail until the component is refactored.

### Task 2: Admin Shell And Navigation

**Files:**
- Modify: `src/components/admin/boss-admin-app.tsx`

- [ ] **Step 1: Replace top tabs with PC backoffice navigation**

Implement a left-side navigation with four keys: `dashboard`, `customers`, `permissions`, `governance`.

- [ ] **Step 2: Keep Refine data provider mounted**

Keep:

```tsx
<Refine dataProvider={createBossAdminDataProvider(initialOverview ?? undefined)} resources={resources}>
```

Expected: existing data provider tests continue to pass.

### Task 3: Dashboard

**Files:**
- Modify: `src/components/admin/boss-admin-app.tsx`

- [ ] **Step 1: Build metric cards**

Use existing `summary`, `companies`, `devices`, `risks`, `notifications`.

- [ ] **Step 2: Build key queues**

Dashboard must include:

```tsx
"今日待处理"
"客户健康排行"
"关键风险队列"
"节点健康"
"最近事件"
```

Expected: no big full-width table as the first visual object.

### Task 4: Customer And Permission Workspaces

**Files:**
- Modify: `src/components/admin/boss-admin-app.tsx`
- Reuse: `src/components/admin/admin-access-panel.tsx`

- [ ] **Step 1: Add customer overview section**

Show company table, account table, and customer onboarding hints.

- [ ] **Step 2: Mount `AdminAccessPanel` under 授权工作台**

Keep the existing working mutation path, but wrap it in clearer page copy and narrower visual hierarchy.

### Task 5: Risk Command Center

**Files:**
- Modify: `src/components/admin/boss-admin-app.tsx`

- [ ] **Step 1: Replace prompt-based actions**

Remove `window.prompt` for assigning owner and SLA. Use controlled inline inputs and buttons.

- [ ] **Step 2: Keep existing risk actions**

Continue posting:

```ts
{ riskId, action: "assign_owner", ownerAccount }
{ riskId, action: "set_sla", slaDueAt }
{ riskId, action: "ack" }
{ riskId, action: "resolve" }
{ riskId, action: "create_repair_ticket" }
```

### Task 6: Skill Governance

**Files:**
- Modify: `src/components/admin/boss-admin-app.tsx`
- Reuse: `src/components/admin/admin-skill-lifecycle-panel.tsx`

- [ ] **Step 1: Move Skill lifecycle panel under 风险与治理**

Use a nested Ant Design `Tabs` with `风险战情室` and `Skill 生命周期`.

### Task 7: Verification

**Files:**
- Test: `tests/admin-refine-page.test.ts`
- Test: `tests/admin-overview-route.test.ts`
- Test: `tests/admin-risk-actions-route.test.ts`
- Test: `tests/admin-skill-lifecycle-panel-source.test.ts`

- [ ] **Step 1: Run focused admin tests**

```bash
npx tsx --test tests/admin-refine-page.test.ts tests/admin-overview-route.test.ts tests/admin-risk-actions-route.test.ts tests/admin-skill-lifecycle-panel-source.test.ts
```

Expected: all pass.

- [ ] **Step 2: Run lint/build**

```bash
npm run lint
npm run build
```

Expected: both pass.

## Self-review

- Spec coverage: covers dashboard, customer workspace, permission workspace, risk command center, Skill governance, testing.
- Placeholder scan: no TBD/TODO language.
- Type consistency: component names and existing endpoints match current code.