5. Portfolio Overview
5.1 Layout - 4-Quadrant Dashboard
Purpose: Executive summary showing high-level KPIs, timeline progress, priorities, and risks at-a-glance.
Full Specification:
┌───────────────────────────────────────────────────────────────────┐
│ Portfolio Overview │
│ Last updated: Nov 27, 2025 2:35 PM [Refresh] │
├─────────────────────────────┬─────────────────────────────────────┤
│ KEY METRICS │ TIMELINE PROGRESS │
│ │ │
│ 📦 Projects │ Beta → Pilot → GTM │
│ 46 total │ ████████████████░░░░░ 78% │
│ 12 active • 34 complete │ │
│ │ 🎯 Current Phase: Beta Testing │
│ ✓ Tasks │ Week 2 of 4 (50% complete) │
│ 530 total │ │
│ 415 complete (78%) │ 📅 Next Milestone: │
│ 115 in progress │ Beta Analysis - Dec 10, 2025 │
│ │ (13 days remaining) │
│ 💰 Budget │ │
│ $884K allocated │ Timeline Health: ✅ ON TRACK │
│ $450K spent (51%) │ Completion Rate: +8% this week │
│ $434K remaining │ │
│ │ │
│ 🎯 Success Rate │ │
│ 95% on-time delivery │ │
│ 4% overdue │ │
│ 1% at risk │ │
│ │ │
└─────────────────────────────┴─────────────────────────────────────┘
┌─────────────────────────────┬─────────────────────────────────────┐
│ TOP PRIORITIES (P0/P1) │ ACTIVE RISKS │
│ │ │
│ 1. 🔴 License Manager (P0) │ ⚠️ R-001: NESTED LEARNING (HIGH) │
│ 5 tasks • Due: Dec 5 │ Impact: Feature complexity │
│ Status: In Progress │ Mitigation: MVP + iterate │
│ [View Tasks] │ Owner: Architecture Team │
│ │ │
│ 2. 🟡 Dashboard 2.0 (P1) │ ⚠️ R-003: Performance (MEDIUM) │
│ 80 tasks • Due: Jan 31 │ Impact: Page load times │
│ Status: Scheduled │ Mitigation: Load testing │
│ [View Tasks] │ Owner: DevOps Team │
│ │ │
│ 3. 🟡 Cloud Deploy (P1) │ ✅ R-005: Architecture (RESOLVED) │
│ 23 tasks • Due: Dec 20 │ Previous: HIGH → MEDIUM │
│ Status: In Progress │ Resolution: Visual diagrams │
│ [View Tasks] │ Closed: Nov 16, 2025 │
│ │ │
│ [View All 46 Projects →] │ [View Risk Register →] │
│ │ │
└─────────────────────────────┴─────────────────────────────────────┘
5.2 Implementation Prompt - Portfolio Overview
Prompt for AI/Developer:
Create a Portfolio Overview dashboard with 4 quadrants in a 2×2 grid layout.
LAYOUT:
- Container: CSS Grid with 2 columns, 2 rows
- Gap: 24px between quadrants
- Responsive: Stack vertically on mobile (<768px)
- Max width: 1400px, centered with auto margins
QUADRANT 1: KEY METRICS (Top Left)
Content:
- Projects: Total count, active count, complete count
- Tasks: Total (530), complete count with percentage, in progress count
- Budget: Total allocated ($884K), spent with percentage, remaining
- Success Rate: On-time delivery %, overdue %, at risk %
Visual Design:
- Icons: Use emoji or SVG icons (📦 ✓ 💰 🎯)
- Font size: 24px for numbers, 14px for labels
- Color: Gray-900 for numbers, Gray-700 for labels
- Spacing: 16px between metrics
- Dividers: 1px solid Gray-300 between sections
Data Source: Fetch from data/portfolio-metrics.json
QUADRANT 2: TIMELINE PROGRESS (Top Right)
Content:
- Phase progression: Beta → Pilot → GTM with completion bar
- Progress bar: 78% filled (green), 22% empty (gray-300)
- Current phase: Name, week count (Week X of Y), percentage
- Next milestone: Name, date, days remaining
- Timeline health: Status indicator (✅ ON TRACK, ⚠️ AT RISK, 🔴 DELAYED)
- Completion rate: Change from last week (+8%)
Visual Design:
- Progress bar: 100% width, 12px height, rounded corners (6px)
- Filled portion: Green gradient (linear-gradient(90deg, #00A651, #00D668))
- Phase labels: 14px, positioned above bar
- Milestone icon: 🎯 (target)
- Health indicator: Large emoji with colored text
Data Source: Fetch from data/projects.json (calculate from phase data)
QUADRANT 3: TOP PRIORITIES (Bottom Left)
Content:
- Show top 3 P0/P1 projects sorted by due date (ascending)
- For each project:
- Priority badge (P0 red circle, P1 orange circle)
- Project name
- Task count + due date
- Status (In Progress, Scheduled, etc.)
- [View Tasks] button
Visual Design:
- List layout: Vertical stack with 12px gap
- Priority badge: 12px circle, inline with project name
- Project name: 16px, semibold, truncate with ellipsis
- Metadata: 12px, Gray-700
- Button: Small, primary blue, hover state darker
- Empty state: "No high-priority projects" (if P0/P1 list empty)
Interaction:
- Click project name: Navigate to project detail
- Click [View Tasks]: Open project with filters (Priority: P0/P1, Status: Pending/In Progress)
- Click [View All]: Navigate to all projects page
Data Source: Fetch from data/tasks.json, filter by priority P0/P1, sort by due_date
QUADRANT 4: ACTIVE RISKS (Bottom Right)
Content:
- Show active risks from risk register (top 3 by severity)
- For each risk:
- Severity indicator (⚠️ HIGH, ⚠️ MEDIUM, ✅ LOW/RESOLVED)
- Risk ID + description
- Impact statement
- Mitigation strategy
- Owner/team
- Status (if resolved: show resolution date)
Visual Design:
- List layout: Vertical stack with 16px gap
- Severity icon: ⚠️ for active, ✅ for resolved
- Risk ID: Bold, 14px (e.g., "R-001")
- Impact: 12px, italic, Gray-700
- Mitigation: 12px, Gray-900
- Resolved items: Strike-through text, Gray-500
Interaction:
- Click risk: Expand to show full details (inline expansion)
- Click [View Risk Register]: Navigate to full risk register page
Data Source: Fetch from data/project-plan.json (parse risk register section)
ACCESSIBILITY:
- Use semantic HTML: <section>, <h2>, <ul>, <li>
- Add ARIA labels: aria-label="Key metrics", aria-label="Timeline progress"
- Keyboard: Tab through interactive elements, Enter to activate
- Focus indicators: 2px blue outline on all focusable elements
- Screen reader: Announce metric changes on refresh
RESPONSIVE DESIGN:
Desktop (≥1024px): 2×2 grid
Tablet (768px-1023px): 2×2 grid, smaller padding
Mobile (<768px): 1 column stack (Metrics → Timeline → Priorities → Risks)
REFRESH BEHAVIOR:
- Auto-refresh: Every 60 seconds (fetch new data)
- Manual refresh: Click [Refresh] button in header
- Loading state: Show spinner overlay during data fetch
- Error state: Show error message if fetch fails, retry button
PERFORMANCE:
- Lazy load: Only fetch data when Portfolio Overview tab active
- Cache: Cache data for 60 seconds (localStorage)
- Animation: Smooth transitions for metric changes (0.3s ease)