diff --git a/spark.meta.json b/spark.meta.json index 706a311..a277bc5 100644 --- a/spark.meta.json +++ b/spark.meta.json @@ -1,3 +1,4 @@ { - "templateVersion": 1 -} + "templateVersion": 1, + "dbType": "kv" +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 8af281d..785a664 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,12 @@ import { useKV } from '@github/spark/hooks' import { useState } from 'react' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { Strategy, ChartBar, FolderOpen, Target } from '@phosphor-icons/react' +import { Strategy, ChartBar, FolderOpen, Target, MapTrifold } from '@phosphor-icons/react' import StrategyCards from './components/StrategyCards' import Workbench from './components/Workbench' import Portfolios from './components/Portfolios' import Dashboard from './components/Dashboard' +import Roadmap from './components/Roadmap' import type { StrategyCard, Initiative } from './types' function App() { @@ -42,7 +43,7 @@ function App() {
- + Strategy Cards @@ -59,6 +60,10 @@ function App() { Dashboard + + + Roadmap + @@ -76,6 +81,10 @@ function App() { + + + +
diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx new file mode 100644 index 0000000..c9088b9 --- /dev/null +++ b/src/components/Roadmap.tsx @@ -0,0 +1,377 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +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 { ScrollArea } from '@/components/ui/scroll-area' + +interface RoadmapPhase { + id: string + phase: string + status: 'completed' | 'in-progress' | 'planned' + quarter: string + capabilities: RoadmapCapability[] +} + +interface RoadmapCapability { + title: string + description: string + category: 'strategy' | 'execution' | 'integration' | 'analytics' + requirements: string[] +} + +const roadmapData: RoadmapPhase[] = [ + { + id: 'phase-1', + phase: 'Foundation', + status: 'in-progress', + quarter: 'Q1 2025', + capabilities: [ + { + 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' + ] + }, + { + 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: 'phase-2', + phase: 'Alignment & Traceability', + status: 'planned', + quarter: 'Q2 2025', + capabilities: [ + { + 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' + ] + }, + { + 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: 'phase-3', + phase: 'Advanced Execution', + status: 'planned', + quarter: 'Q3 2025', + capabilities: [ + { + 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' + ] + } + ] + } +] + +const categoryIcons = { + strategy: Target, + execution: CheckCircle, + integration: LinkIcon, + analytics: ChartLine +} + +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 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} +
+ + + {phase.quarter} + + + {phase.status === 'completed' ? 'Completed' : phase.status === 'in-progress' ? 'In Progress' : 'Planned'} + + +
+
+ + + {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 + })) + ) + })) + + 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} +
+
+
+ ))} +
+ + + + ) + })} +
+ ) +} + +export default function Roadmap() { + return ( +
+
+

Product Roadmap

+

Strategic development plan for StrategyOS platform

+
+ + + + + + Timeline View + + + + Capability Matrix + + + + + + + + + + + +
+ ) +}