---
phase: 17-initiative-dashboard
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - packages/web/src/components/StatusBadge.tsx
  - packages/web/src/components/ProgressBar.tsx
autonomous: true
---

<objective>
Create reusable StatusBadge and ProgressBar components for the initiative dashboard.

Purpose: These are shared UI primitives used by InitiativeCard and potentially other views. Building them first unblocks parallel work on cards and dialogs.
Output: Two tested, styled components matching the wireframe specification.
</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

@docs/wireframes/initiative-dashboard.md
@packages/web/src/components/ui/badge.tsx
@packages/web/src/lib/utils.ts
@packages/shared/src/types.ts
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create StatusBadge component</name>
  <files>packages/web/src/components/StatusBadge.tsx</files>
  <action>
Create a StatusBadge component that renders a colored badge for entity statuses.

The component accepts a `status` string prop and renders it as a styled badge using the shadcn Badge component.

**Status-to-style mapping (based on actual backend types):**

Initiative statuses:
- `active` → blue background (use badge `default` variant with blue coloring via className)
- `completed` → green background
- `archived` → gray background

Phase statuses:
- `pending` → gray background
- `in_progress` → blue background
- `completed` → green background
- `blocked` → red background

Make this generic — accept any string status, apply Tailwind classes based on a lookup map. Unknown statuses get gray default.

**Display text:** Uppercase, underscores replaced with spaces. E.g., `in_progress` → `IN PROGRESS`.

Use the existing Badge component from `@/components/ui/badge` as the base. Apply custom background/text colors via className overrides (not new badge variants — keep shadcn components stock).

Export as named export: `export function StatusBadge`.
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json</verify>
  <done>StatusBadge component renders colored badges for all initiative and phase statuses with correct text formatting</done>
</task>

<task type="auto">
  <name>Task 2: Create ProgressBar component</name>
  <files>packages/web/src/components/ProgressBar.tsx</files>
  <action>
Create a ProgressBar component showing completion percentage.

**Props:**
- `completed: number` — number of completed items
- `total: number` — total items

**Display logic:**
- Calculate percentage: `(completed / total) * 100`, or 0 if total is 0
- Render a horizontal bar with Tailwind: gray track (h-2 rounded-full bg-muted), filled portion (h-2 rounded-full transition-all) with width set via inline style `width: ${percentage}%`
- Show text label next to bar: `{percentage}%`

**Color variants:**
- 0% (or total=0): Gray track only, no fill
- 1-99%: Blue fill (`bg-primary`)
- 100%: Green fill (`bg-green-500`)

Keep it simple — a div-based progress bar, not a native `<progress>` element. Use `cn()` from `@/lib/utils` for conditional classes.

Export as named export: `export function ProgressBar`.
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json</verify>
  <done>ProgressBar component renders percentage-based bar with correct colors for 0%, partial, and 100% states</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes
- [ ] Both components export named functions
- [ ] No new dependencies needed (uses existing shadcn Badge + Tailwind)
</verification>

<success_criteria>

- StatusBadge renders colored badges for all backend status types
- ProgressBar renders visual progress with percentage label
- Both components use existing shadcn/Tailwind primitives
- TypeScript compiles without errors
  </success_criteria>

<output>
After completion, create `.planning/phases/17-initiative-dashboard/17-01-SUMMARY.md`
</output>
