# Agile Module Design Audit & Redesign

**Date:** 2026-06-04  
**Scope:** MVNexus Projects / Agile (Scrum) module  
**Source of truth:** Dashboard, Ticket Detail, Search, Departments Portal, Projects List

---

## Design Audit Report

### Design system (reference)

| Token / pattern | Source | Value / usage |
|-----------------|--------|----------------|
| Spacing scale | `theme.ts` | `spacing[4]`–`spacing[8]` (16–32px) for page rhythm |
| Typography | `GlobalStyles` + `PageHeader` | Headlines: Plus Jakarta Sans; body: Inter |
| Cards | `Card` | `variant="elevated"`, `padding="md"` / `"lg"` (24px effective on lg) |
| Buttons | `Button` | `size="lg"` → 40px min-height for Agile toolbars |
| Forms | `FormStack`, `Modal`, `Drawer` | Field gaps from `theme.form` |
| Grids | `ProjectsStatsGrid`, `SprintCardsGrid` | `auto-fit` / `auto-fill` with `cardGap` / 16px list gaps |
| Page width | `AppLayout` `ContentInner` / `PageContainer` | `theme.layout.contentMaxWidth` (1440px), same as `/projects` |

### Production pages audited

- `DashboardPage` — `PageHeader`, `StatCard`, `StatsGrid`, section stack
- `TicketDetailPage` — two-column workspace, `Card variant="muted"`, outline buttons
- `SearchPage` — `ContentPanel`, inset filter rail, compact toolbar, list cards
- `DepartmentPortalPage` — action cards, elevated surfaces
- `ProjectsPage` — card grid, **modal-only** create flow

### Agile pages audited (before)

| Page | Issues |
|------|--------|
| Product Backlog | Inline epic/sprint/item forms; `marginTop: 2rem`; sparse cards; no drawer |
| Sprints | Full inline create form; vertical list; inline styles |
| Sprint Planning | Fixed 50/50 grid; no capacity; `marginTop: 2rem`; no counters |
| Work Item Details | Raw `AppLayout`; no project chrome; raw `<textarea>`; ticket-like gaps |
| Milestones / Risks | CRUD inline forms in `ProjectFilterPanel` |
| Overview | OK structure; inconsistent KPI heights |

---

## UX Issues Found

1. **CRUD-first layout** — create forms always visible instead of action + modal/drawer  
2. **Arbitrary spacing** — 60–80px effective gaps via `spacing[6]`/`[8]` stacks and inline styles  
3. **No page width cap** — content stretched beyond Dashboard rhythm  
4. **Weak backlog cards** — ticket key/title only; no secondary metadata row  
5. **Broken work item shell** — missing `ProjectPageShell` / subnav  
6. **Sprints page** — admin form row instead of card grid + actions  
7. **Sprint planning** — not Jira-like (no split resize, capacity, live counts)  
8. **Inconsistent control height** — mixed `sm`/`md` buttons on same page  

---

## Screens Updated

| Screen | Changes |
|--------|---------|
| **Product Backlog** | KPI row (120px), compact filters, action toolbar, drawer/modals, rich cards, epic grouping |
| **Sprints** | KPI velocity, sprint card grid, modal create, empty state + CTA |
| **Sprint Planning** | Resizable split, capacity bar, per-column counters, DnD preserved |
| **Work Item Details** | `ProjectPageShell`, tabs, `ContentPanel`, no SLA/support panels |
| **Project Overview** | KPI-aligned stat cards |
| **Milestones / Risks** | Modal create; KPI sections; 16px card list rhythm |
| **All project sub-pages** | `PageContainer` via `ProjectPageShell` |

---

## Components Standardized

| Component | Path |
|-----------|------|
| `PageContainer` | `shared/components/layout/PageContainer` |
| `Drawer` | `shared/components/ui/Drawer` |
| `Agile*Section`, `CompactFilterRow`, `SprintCardsGrid`, `EpicDivider` | `features/projects/components/projectsLayout.ts` |
| `StatCard` `kpi` prop | 120px fixed height |
| `CreateBacklogItemDrawer` | Right drawer, full field set |
| `CreateEpicModal` / `CreateSprintModal` | Shared modals |
| `BacklogItemCard` | Primary + secondary rows, 40px actions |
| `SprintGridCard` | Grid card with progress, capacity, actions |
| `ResizableSplitPane` | Planning columns |

---

## Responsive Fixes

- Horizontal padding: `AppLayout` `pagePadding` only (no nested container padding)  
- `CompactFilterRow`: single row desktop; wraps at ≤1024px  
- `ResizableSplitPane`: stacks columns on ≤960px  
- `SprintCardsGrid`: `auto-fill minmax(300px, 1fr)` — no horizontal scroll  

---

## Before / After Summary

| Dimension | Before | After |
|-----------|--------|-------|
| Visual identity | Generic admin CRUD | Matches MVNexus Dashboard/Search |
| Create flows | Inline forms | Drawer + modals |
| Page rhythm | 40–100px ad hoc gaps | 32 / 24 / 16px system |
| KPI row | Variable card heights | 120px uniform |
| Backlog density | Low | Ticket key, epic, priority, MD, deps/comments |
| Sprint planning | Static two columns | Resizable + capacity + counters |
| Work items | Ticket detail clone | Dedicated Agile tabs & shell |

**API contracts:** Unchanged — same endpoints and payloads for backlog, sprints, epics, work items, and DnD moves.

---

## Visual QA Checklist

- [x] Consistent spacing (Agile section primitives)  
- [x] KPI card height 120px  
- [x] Typography via shared components  
- [x] Button/input toolbar `size="lg"` (40px)  
- [x] Card shadows via `Card` / `ContentPanel` only  
- [x] No giant empty blocks on backlog/sprints/planning  
- [x] No permanent inline CRUD on backlog/sprints  
- [x] Feels aligned with Dashboard / Tickets / Search