boss/docs/superpowers/plans/2026-04-30-admin-backoffice-redesign.md

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:

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:

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:

<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:

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

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:

{ 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

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

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.