From 0c536d1cb2b8b1c71e1b57825e7487a31d90094c Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 20:54:45 +0000 Subject: [PATCH] Generated by Spark: Roadmap should have Metrics, Objectives, Bowling Chart, Dashboard, X-Matrix and any other concepts we forgot. --- src/components/Roadmap.tsx | 980 +++++++++++++++++++++++++------------ 1 file changed, 672 insertions(+), 308 deletions(-) diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx index c9088b9..e7812dc 100644 --- a/src/components/Roadmap.tsx +++ b/src/components/Roadmap.tsx @@ -2,344 +2,684 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com import { Badge } from '@/components/ui/badge' import { Separator } from '@/components/ui/separator' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { CheckCircle, Circle, Target, ChartBar, Link as LinkIcon, Package, Wrench, ChartLine } from '@phosphor-icons/react' +import { Button } from '@/components/ui/button' +import { + Target, + ChartBar, + GridFour, + TrendUp, + Gauge, + ListChecks, + ArrowsOut, + CheckCircle, + WarningCircle, + XCircle, + Circle +} from '@phosphor-icons/react' import { ScrollArea } from '@/components/ui/scroll-area' +import { Progress } from '@/components/ui/progress' -interface RoadmapPhase { +interface Objective { id: string - phase: string - status: 'completed' | 'in-progress' | 'planned' - quarter: string - capabilities: RoadmapCapability[] -} - -interface RoadmapCapability { - title: string + category: 'breakthrough' | 'annual' | 'improvement' description: string - category: 'strategy' | 'execution' | 'integration' | 'analytics' - requirements: string[] + owner: string + targetDate: string + status: 'on-track' | 'at-risk' | 'completed' | 'not-started' + metrics: Metric[] } -const roadmapData: RoadmapPhase[] = [ +interface Metric { + id: string + name: string + baseline: number + current: number + target: number + unit: string + frequency: 'monthly' | 'quarterly' | 'annual' + lastUpdated: string + trend: 'improving' | 'stable' | 'declining' +} + +interface BowlingChartData { + objective: string + months: MonthStatus[] +} + +interface MonthStatus { + month: string + status: 'green' | 'yellow' | 'red' | 'not-started' + actual: number + target: number +} + +interface XMatrixItem { + id: string + type: 'objective' | 'strategy' | 'tactic' | 'metric' + text: string + relationships: string[] +} + +const mockObjectives: Objective[] = [ { - id: 'phase-1', - phase: 'Foundation', - status: 'in-progress', - quarter: 'Q1 2025', - capabilities: [ + id: 'obj-1', + category: 'breakthrough', + description: 'Achieve 25% revenue growth through new market expansion', + owner: 'Chief Growth Officer', + targetDate: '2025-12-31', + status: 'on-track', + metrics: [ { - title: 'Strategy Cards Core', - description: 'Enable structured strategy creation using proven frameworks', - category: 'strategy', - requirements: [ - 'Support SWOT, Hoshin Kanri, OKR, and Value Disciplines frameworks', - 'Capture vision, goals, metrics, and assumptions', - 'Enable collaborative strategy formulation', - 'Reduce reliance on slides and spreadsheets' - ] + id: 'm1', + name: 'Revenue Growth', + baseline: 100, + current: 115, + target: 125, + unit: '%', + frequency: 'quarterly', + lastUpdated: '2025-01-15', + trend: 'improving' }, { - title: 'Workbench Foundations', - description: 'Basic initiative tracking and execution capabilities', - category: 'execution', - requirements: [ - 'Create and manage initiatives linked to strategy', - 'Track progress, status, and ownership', - 'Support priority and portfolio assignment', - 'Enable KPI definition and tracking' - ] - }, - { - title: 'Portfolio Structure', - description: 'Organize initiatives into strategic portfolios', - category: 'execution', - requirements: [ - 'Support M&A, OpEx, Financial, ESG, and Innovation portfolios', - 'Enable custom portfolio definitions', - 'Track capacity and utilization per portfolio', - 'Visual portfolio grouping and filtering' - ] + id: 'm2', + name: 'New Market Share', + baseline: 0, + current: 12, + target: 20, + unit: '%', + frequency: 'monthly', + lastUpdated: '2025-01-15', + trend: 'improving' } ] }, { - id: 'phase-2', - phase: 'Alignment & Traceability', - status: 'planned', - quarter: 'Q2 2025', - capabilities: [ + id: 'obj-2', + category: 'annual', + description: 'Reduce operational costs by 15% while maintaining quality', + owner: 'Chief Operating Officer', + targetDate: '2025-12-31', + status: 'at-risk', + metrics: [ { - title: 'Strategy-to-Execution Linking', - description: 'End-to-end traceability from strategy to delivery', - category: 'integration', - requirements: [ - 'Link initiatives directly to strategy card goals', - 'Visual impact mapping and alignment views', - 'Trace KPIs back to strategic objectives', - 'Identify alignment gaps and orphaned work' - ] + id: 'm3', + name: 'Cost Reduction', + baseline: 100, + current: 92, + target: 85, + unit: '%', + frequency: 'monthly', + lastUpdated: '2025-01-15', + trend: 'stable' }, { - title: 'Dashboard & Reporting', - description: 'Real-time visibility and executive reporting', - category: 'analytics', - requirements: [ - 'Portfolio-level dashboards with drill-down', - 'Scorecard management with consistent definitions', - 'Real-time status and progress tracking', - 'Executive summary views' - ] - }, - { - title: 'Governance & Accountability', - description: 'Clear ownership and decision-making support', - category: 'execution', - requirements: [ - 'Define and track initiative ownership', - 'Support portfolio-level prioritization', - 'Enable impact and capacity assessment', - 'Decision history and rationale capture' - ] + id: 'm4', + name: 'Quality Score', + baseline: 85, + current: 87, + target: 90, + unit: 'pts', + frequency: 'monthly', + lastUpdated: '2025-01-15', + trend: 'improving' } ] }, { - id: 'phase-3', - phase: 'Advanced Execution', - status: 'planned', - quarter: 'Q3 2025', - capabilities: [ + id: 'obj-3', + category: 'improvement', + description: 'Improve customer satisfaction score to 95%', + owner: 'Chief Customer Officer', + targetDate: '2025-06-30', + status: 'on-track', + metrics: [ { - title: 'Multi-Methodology Support', - description: 'Support diverse execution approaches', - category: 'execution', - requirements: [ - 'Strategic Portfolio Management workflows', - 'Hoshin Kanri policy deployment', - 'Operational Excellence and Lean methods', - 'OKR cascading and alignment' - ] - }, - { - title: 'Financial Integration', - description: 'Link strategy to financial outcomes', - category: 'analytics', - requirements: [ - 'Budget tracking and allocation by initiative', - 'Savings and value realization tracking', - 'ROI and financial impact analysis', - 'Shared visibility between Ops and Finance' - ] - }, - { - title: 'Dependency & Risk Management', - description: 'Identify and manage cross-initiative dependencies', - category: 'execution', - requirements: [ - 'Map dependencies between initiatives', - 'Track delivery risks and blockers', - 'Impact analysis for changes', - 'Automated risk identification' - ] - } - ] - }, - { - id: 'phase-4', - phase: 'Enterprise Scale', - status: 'planned', - quarter: 'Q4 2025', - capabilities: [ - { - title: 'External Integrations', - description: 'Connect with enterprise systems', - category: 'integration', - requirements: [ - 'Project management tool integrations', - 'ERP system connectivity', - 'CRM data integration', - 'Automated data sync and reconciliation' - ] - }, - { - title: 'Advanced Analytics', - description: 'Predictive insights and recommendations', - category: 'analytics', - requirements: [ - 'Capacity vs demand forecasting', - 'Predictive delivery risk scoring', - 'Resource optimization recommendations', - 'Trend analysis and pattern detection' - ] - }, - { - title: 'Global Operations', - description: 'Support for multi-region, multi-language organizations', - category: 'integration', - requirements: [ - 'Multi-language support', - 'Regional customization and branding', - 'Organizational hierarchy modeling', - 'Distributed team collaboration' - ] + id: 'm5', + name: 'NPS Score', + baseline: 72, + current: 84, + target: 95, + unit: 'pts', + frequency: 'monthly', + lastUpdated: '2025-01-15', + trend: 'improving' } ] } ] -const categoryIcons = { - strategy: Target, - execution: CheckCircle, - integration: LinkIcon, - analytics: ChartLine -} +const mockBowlingChart: BowlingChartData[] = [ + { + objective: 'Revenue Growth 25%', + months: [ + { month: 'Jan', status: 'green', actual: 102, target: 102 }, + { month: 'Feb', status: 'green', actual: 105, target: 104 }, + { month: 'Mar', status: 'yellow', actual: 107, target: 108 }, + { month: 'Apr', status: 'green', actual: 111, target: 110 }, + { month: 'May', status: 'green', actual: 115, target: 113 }, + { month: 'Jun', status: 'not-started', actual: 0, target: 116 }, + { month: 'Jul', status: 'not-started', actual: 0, target: 118 }, + { month: 'Aug', status: 'not-started', actual: 0, target: 120 }, + { month: 'Sep', status: 'not-started', actual: 0, target: 122 }, + { month: 'Oct', status: 'not-started', actual: 0, target: 123 }, + { month: 'Nov', status: 'not-started', actual: 0, target: 124 }, + { month: 'Dec', status: 'not-started', actual: 0, target: 125 } + ] + }, + { + objective: 'Cost Reduction 15%', + months: [ + { month: 'Jan', status: 'green', actual: 98, target: 98 }, + { month: 'Feb', status: 'yellow', actual: 96, target: 95 }, + { month: 'Mar', status: 'yellow', actual: 94, target: 92 }, + { month: 'Apr', status: 'red', actual: 93, target: 90 }, + { month: 'May', status: 'yellow', actual: 92, target: 88 }, + { month: 'Jun', status: 'not-started', actual: 0, target: 87 }, + { month: 'Jul', status: 'not-started', actual: 0, target: 86 }, + { month: 'Aug', status: 'not-started', actual: 0, target: 86 }, + { month: 'Sep', status: 'not-started', actual: 0, target: 85 }, + { month: 'Oct', status: 'not-started', actual: 0, target: 85 }, + { month: 'Nov', status: 'not-started', actual: 0, target: 85 }, + { month: 'Dec', status: 'not-started', actual: 0, target: 85 } + ] + }, + { + objective: 'Customer Satisfaction 95%', + months: [ + { month: 'Jan', status: 'green', actual: 75, target: 75 }, + { month: 'Feb', status: 'green', actual: 78, target: 77 }, + { month: 'Mar', status: 'green', actual: 81, target: 80 }, + { month: 'Apr', status: 'green', actual: 84, target: 83 }, + { month: 'May', status: 'green', actual: 87, target: 86 }, + { month: 'Jun', status: 'not-started', actual: 0, target: 89 }, + { month: 'Jul', status: 'not-started', actual: 0, target: 91 }, + { month: 'Aug', status: 'not-started', actual: 0, target: 92 }, + { month: 'Sep', status: 'not-started', actual: 0, target: 93 }, + { month: 'Oct', status: 'not-started', actual: 0, target: 94 }, + { month: 'Nov', status: 'not-started', actual: 0, target: 94 }, + { month: 'Dec', status: 'not-started', actual: 0, target: 95 } + ] + } +] -const categoryColors = { - strategy: 'bg-accent/10 text-accent border-accent/30', - execution: 'bg-success/10 text-success border-success/30', - integration: 'bg-primary/10 text-primary border-primary/30', - analytics: 'bg-secondary/10 text-secondary border-secondary/30' -} +function ObjectivesView() { + const categoryColors = { + breakthrough: 'bg-accent/10 text-accent border-accent/30', + annual: 'bg-primary/10 text-primary border-primary/30', + improvement: 'bg-success/10 text-success border-success/30' + } + + const statusIcons = { + 'on-track': , + 'at-risk': , + 'completed': , + 'not-started': + } -function PhaseTimeline() { return ( -
-
-
- {roadmapData.map((phase, index) => { - const StatusIcon = phase.status === 'completed' ? CheckCircle : phase.status === 'in-progress' ? Circle : Circle - const statusColor = phase.status === 'completed' ? 'text-success' : phase.status === 'in-progress' ? 'text-accent' : 'text-muted-foreground' - const statusBg = phase.status === 'completed' ? 'bg-success' : phase.status === 'in-progress' ? 'bg-accent' : 'bg-muted' - - return ( -
-
- - - -
-
-
- - Phase {index + 1}: {phase.phase} +
+ {mockObjectives.map((objective) => ( + + +
+
+
+ + {objective.category} Goal + + {statusIcons[objective.status]} +
+ {objective.description} + +
+ Owner: {objective.owner} + Target: {new Date(objective.targetDate).toLocaleDateString()} +
+ +
+
+ + +
+

Key Metrics

+ {objective.metrics.map((metric) => { + const progressPercent = ((metric.current - metric.baseline) / (metric.target - metric.baseline)) * 100 + const isOnTrack = progressPercent >= 70 + + return ( +
+
+ {metric.name} +
+ + {metric.current}{metric.unit} / {metric.target}{metric.unit} + + + {Math.round(progressPercent)}% +
- - - {phase.quarter} - - - {phase.status === 'completed' ? 'Completed' : phase.status === 'in-progress' ? 'In Progress' : 'Planned'} - - +
+ +
+ Baseline: {metric.baseline}{metric.unit} + Updated: {new Date(metric.lastUpdated).toLocaleDateString()}
- - - {phase.capabilities.map((capability, capIndex) => { - const Icon = categoryIcons[capability.category] - return ( -
- {capIndex > 0 && } -
-
- - - {capability.category} - -
-

{capability.title}

-

{capability.description}

-
-
-
    - {capability.requirements.map((req, reqIndex) => ( -
  • - • - {req} -
    • - ))} -
-
-
- ) - })} - - + ) + })}
- ) - })} -
+ + + ))}
) } -function CapabilityMatrix() { - const categories = ['strategy', 'execution', 'integration', 'analytics'] as const - - const capabilitiesByCategory = categories.map(category => ({ - category, - capabilities: roadmapData.flatMap(phase => - phase.capabilities - .filter(cap => cap.category === category) - .map(cap => ({ - ...cap, - phase: phase.phase, - quarter: phase.quarter, - status: phase.status - })) - ) - })) +function MetricsView() { + const allMetrics = mockObjectives.flatMap(obj => + obj.metrics.map(m => ({ ...m, objective: obj.description })) + ) + + const trendIcons = { + improving: , + stable: →, + declining: + } return ( -
- {capabilitiesByCategory.map(({ category, capabilities }) => { - const Icon = categoryIcons[category] - return ( - - - - - {category} - - - {capabilities.length} {capabilities.length === 1 ? 'capability' : 'capabilities'} planned - - - - -
- {capabilities.map((cap, index) => ( -
- {index > 0 && } -
-
-

{cap.title}

- - {cap.quarter} - -
-

{cap.description}

-
- Phase: {cap.phase} -
+
+ + + Metrics Dashboard + Track all key performance indicators + + +
+ {allMetrics.map((metric) => { + const progressPercent = ((metric.current - metric.baseline) / (metric.target - metric.baseline)) * 100 + const variance = metric.current - metric.target + const variancePercent = (variance / metric.target) * 100 + + return ( +
+
+
+
+

{metric.name}

+ {trendIcons[metric.trend]}
+

{metric.objective}

+
+ + {metric.frequency} + +
+ +
+
+
Baseline
+
{metric.baseline}{metric.unit}
+
+
+
Current
+
{metric.current}{metric.unit}
+
+
+
Target
+
{metric.target}{metric.unit}
+
+
+ + + +
+ = 0 ? 'text-success' : 'text-destructive'}> + Variance: {variance > 0 ? '+' : ''}{variance.toFixed(1)}{metric.unit} ({variancePercent > 0 ? '+' : ''}{variancePercent.toFixed(1)}%) + + Last updated: {new Date(metric.lastUpdated).toLocaleDateString()} +
+
+ ) + })} +
+ + +
+ ) +} + +function BowlingChartView() { + const statusColors = { + green: 'bg-success', + yellow: 'bg-warning', + red: 'bg-destructive', + 'not-started': 'bg-muted' + } + + const statusLabels = { + green: 'On Track', + yellow: 'At Risk', + red: 'Off Track', + 'not-started': 'Not Started' + } + + return ( +
+ + + Bowling Chart - Monthly Tracking + Visual month-by-month progress tracking for strategic objectives + + +
+ {mockBowlingChart.map((item, idx) => ( +
+ {idx > 0 && } +

{item.objective}

+
+ {item.months.map((month, monthIdx) => ( +
+
+ {month.status !== 'not-started' && month.actual} +
+ {month.month}
))}
- - - - ) - })} +
+ ))} +
+ + + +
+ {Object.entries(statusLabels).map(([status, label]) => ( +
+
+ {label} +
+ ))} +
+ + +
+ ) +} + +function XMatrixView() { + return ( +
+ + + X-Matrix (Hoshin Kanri) + Strategic alignment matrix connecting objectives, strategies, tactics, and metrics + + +
+
+
+

Annual Objectives

+
+
+ 25% Revenue Growth +
+
+ 15% Cost Reduction +
+
+ 95% Customer Satisfaction +
+
+ Launch 3 New Products +
+
+
+ +
+

Strategic Initiatives

+
+
+ Market Expansion Program +
+
+ Process Automation +
+
+ Customer Experience Transformation +
+
+ Innovation Pipeline +
+
+
+ +
+

Key Metrics (KPIs)

+
+
+ Monthly Revenue Growth Rate +
+
+ Operating Cost Ratio +
+
+ Net Promoter Score +
+
+ Time to Market +
+
+
+
+ + + +
+

Improvement Tactics

+
+
+ Digital Marketing Campaign (Q1-Q2) +
+
+ Partnership Development (Q1-Q3) +
+
+ RPA Implementation (Q2-Q3) +
+
+ Lean Process Redesign (Q1-Q4) +
+
+ CX Training Program (Q1-Q2) +
+
+ Feedback System Redesign (Q2-Q3) +
+
+ R&D Investment Plan (Q1-Q4) +
+
+ Agile Product Development (Q2-Q4) +
+
+
+ +
+

+ Note: The X-Matrix creates strategic alignment by connecting Annual Objectives → Strategic Initiatives → Improvement Tactics → Key Metrics. + Each connection represents a cause-and-effect relationship ensuring all activities drive toward strategic goals. +

+
+
+ + +
+ ) +} + +function DashboardView() { + const overallHealth = { + onTrack: 2, + atRisk: 1, + offTrack: 0, + notStarted: 0 + } + + const total = Object.values(overallHealth).reduce((a, b) => a + b, 0) + const healthPercent = Math.round((overallHealth.onTrack / total) * 100) + + return ( +
+
+ + + Overall Health + + +
+
{healthPercent}%
+ +
+ + + + + + On Track + + +
+
{overallHealth.onTrack}
+ +
+ + + + + + At Risk + + +
+
{overallHealth.atRisk}
+ +
+ + + + + + Off Track + + +
+
{overallHealth.offTrack}
+ +
+ + +
+ +
+ + + Strategic Objectives Summary + Progress across all strategic goals + + + {mockObjectives.map((obj) => { + const avgProgress = obj.metrics.reduce((sum, m) => { + const progress = ((m.current - m.baseline) / (m.target - m.baseline)) * 100 + return sum + progress + }, 0) / obj.metrics.length + + return ( +
+
+ {obj.description} + + {Math.round(avgProgress)}% + +
+ +
+ ) + })} + + + + + + Metrics by Category + Performance across different goal types + + + {['breakthrough', 'annual', 'improvement'].map((category) => { + const objectives = mockObjectives.filter(obj => obj.category === category) + const allMetrics = objectives.flatMap(obj => obj.metrics) + const avgProgress = allMetrics.reduce((sum, m) => { + const progress = ((m.current - m.baseline) / (m.target - m.baseline)) * 100 + return sum + progress + }, 0) / allMetrics.length + + return ( +
+
+ {category} Goals +
+ {allMetrics.length} metrics + + {Math.round(avgProgress)}% + +
+
+ +
+ ) + })} + + +
+ + + + Recent Updates + Latest metric changes and milestones + + +
+
+ +
+

Revenue Growth on track

+

Current: 115%, Target: 125% - Ahead of Q1 milestone

+
+ 2 days ago +
+ +
+ +
+

Cost Reduction needs attention

+

Current: 92%, Target: 85% - Behind schedule, countermeasures required

+
+ 1 week ago +
+ +
+ +
+

Customer Satisfaction exceeding targets

+

NPS Score: 84pts, Target: 95pts - Strong upward trend

+
+ 3 days ago +
+
+ +
) } @@ -348,28 +688,52 @@ export default function Roadmap() { return (
-

Product Roadmap

-

Strategic development plan for StrategyOS platform

+

Strategic Roadmap

+

Hoshin Kanri planning and execution tracking

- - - - - Timeline View + + + + + Dashboard - - - Capability Matrix + + + Objectives + + + + Metrics + + + + Bowling Chart + + + + X-Matrix - - + + - - + + + + + + + + + + + + + +