305809f0b2
Phase 18: Initiative Detail - 4 plans in 2 waves - 3 parallel (wave 1), 1 sequential (wave 2) - Ready for execution
115 lines
4.1 KiB
Markdown
115 lines
4.1 KiB
Markdown
---
|
|
phase: 18-initiative-detail
|
|
plan: 01
|
|
type: execute
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified:
|
|
- packages/web/src/components/InitiativeHeader.tsx
|
|
- packages/web/src/components/ProgressPanel.tsx
|
|
autonomous: true
|
|
---
|
|
|
|
<objective>
|
|
Create InitiativeHeader and ProgressPanel components for the initiative detail page.
|
|
|
|
Purpose: The header provides navigation back to the dashboard, displays initiative metadata (name, status, dates), and the progress panel shows phase/task completion stats with a progress bar.
|
|
Output: Two reusable components ready for page assembly in Plan 04.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@~/.claude/get-shit-done/workflows/execute-plan.md
|
|
@~/.claude/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/ROADMAP.md
|
|
@.planning/STATE.md
|
|
|
|
# Wireframe spec
|
|
@docs/wireframes/initiative-detail.md
|
|
|
|
# Prior phase components to follow patterns
|
|
@packages/web/src/components/StatusBadge.tsx
|
|
@packages/web/src/components/ProgressBar.tsx
|
|
@packages/web/src/components/InitiativeCard.tsx
|
|
|
|
# tRPC client
|
|
@packages/web/src/lib/trpc.ts
|
|
|
|
# Existing route placeholder
|
|
@packages/web/src/routes/initiatives/$id.tsx
|
|
|
|
# Shared types
|
|
@packages/shared/src/types.ts
|
|
</context>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Create InitiativeHeader component</name>
|
|
<files>packages/web/src/components/InitiativeHeader.tsx</files>
|
|
<action>
|
|
Create a header component for the initiative detail page.
|
|
|
|
Props interface:
|
|
- `initiative`: object with `{ id: string; name: string; status: string; createdAt: string; updatedAt: string }` (serialized initiative from tRPC — dates are ISO strings)
|
|
- `onBack`: `() => void` callback for the back button
|
|
|
|
Layout (matching wireframe):
|
|
- Top bar: left-aligned "← Back to Dashboard" button (use `ChevronLeft` from lucide-react), right-aligned "[Actions]" placeholder (just a disabled Button for now — actions come in Plan 04)
|
|
- Below: Card containing initiative name as h1, status badge (reuse existing StatusBadge component), and metadata line showing created/updated dates formatted as readable strings (use `new Date(iso).toLocaleDateString()`)
|
|
|
|
Use Tailwind classes. Follow same component structure as InitiativeCard (functional component, named export).
|
|
Do NOT fetch data — this is a presentational component that receives props.
|
|
</action>
|
|
<verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes with no errors</verify>
|
|
<done>InitiativeHeader renders initiative name, status badge, dates, and back button. TypeScript compiles cleanly.</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 2: Create ProgressPanel component</name>
|
|
<files>packages/web/src/components/ProgressPanel.tsx</files>
|
|
<action>
|
|
Create a progress panel component matching the wireframe's PROGRESS section.
|
|
|
|
Props interface:
|
|
- `phasesComplete`: number
|
|
- `phasesTotal`: number
|
|
- `tasksComplete`: number
|
|
- `tasksTotal`: number
|
|
|
|
Layout:
|
|
- Card with "Progress" heading
|
|
- Reuse existing ProgressBar component for overall task percentage (`tasksComplete / tasksTotal * 100`, handle 0/0 as 0%)
|
|
- Below the bar: two lines of text: "Phases: {phasesComplete}/{phasesTotal} complete" and "Tasks: {tasksComplete}/{tasksTotal} complete"
|
|
|
|
Use Tailwind. Follow Card component from shadcn (CardHeader, CardContent pattern).
|
|
This is a pure presentational component — no data fetching.
|
|
</action>
|
|
<verify>npx tsc --noEmit -p packages/web/tsconfig.app.json passes with no errors</verify>
|
|
<done>ProgressPanel displays progress bar with phase/task completion stats. TypeScript compiles cleanly.</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
Before declaring plan complete:
|
|
- [ ] `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes
|
|
- [ ] `npx vite build` in packages/web succeeds
|
|
- [ ] Both components export correctly and follow existing patterns
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
|
|
- InitiativeHeader component created with back button, name, status badge, dates
|
|
- ProgressPanel component created with progress bar and phase/task counts
|
|
- Both components are presentational (no data fetching)
|
|
- TypeScript and Vite build pass
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/18-initiative-detail/18-01-SUMMARY.md`
|
|
</output>
|