-
-
{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]) => (
+
+ ))}
+
+
+ )
+}
+
+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
+
+
+
+
+
+
+
+
+ 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
-
-
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+