ctms/docs/plans/2026-06-02-material-equipment-detail.md

Material Equipment Detail Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Add a read-only detail page for material equipment records in the material management module.

Architecture: Reuse the existing material equipment API detail endpoint and the project detail-page layout conventions. Add one route, one detail view, and one list-page navigation entry without changing create/update/delete behavior.

Tech Stack: Vue 3, Vue Router, Element Plus, Vitest static source tests.

---

Task 1: Route And Navigation Tests

Files:

• Modify: frontend/src/router.test.ts

Steps:

1. Add the future equipment detail view to detail-navigation expectations.
2. Add breadcrumb expectations for equipment detail page title.
3. Add a list-page expectation for detail navigation.
4. Run the focused tests and confirm they fail because the route/view/link do not exist yet.

Task 2: Detail Page Implementation

Files:

• Create: frontend/src/views/materials/MaterialEquipmentDetail.vue
• Modify: frontend/src/router/index.ts
• Modify: frontend/src/views/ia/MaterialEquipment.vue

Steps:

1. Build a read-only detail view using getMaterialEquipment.
2. Set breadcrumb context using the equipment name.
3. Register /materials/equipment/:equipmentId.
4. Add the list table detail link.
5. Run focused frontend tests and type/build verification where feasible.