From d0072d0e4a49d02567014f9096b45746f6760395 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 20:46:28 +0000 Subject: [PATCH] Generated by Spark: 1. Product Scope & Positioning 1.1 Product Portfolio MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The product suite SHALL consist of two tightly integrated products: Strategy Cards — strategy creation and alignment Workbench — strategy execution, tracking, and governance Each product MUST be independently usable but deliver maximum value when combined. 2. Core Product Outcomes 2.1 Primary Outcomes The system MUST enable organizations to: Create clear, shared strategic intent Translate strategy into executable initiatives Track progress against goals in real time Maintain a single authoritative view of strategy execution 2.2 Target Users The product MUST support: Executives and senior leaders Strategy offices / PMOs Operational excellence teams Portfolio and program managers Project owners and contributors 3. Strategy Cards — Design Criteria 3.1 Strategy Creation Strategy Cards MUST: Support structured strategy creation using proven frameworks Enable exploration, comparison, and refinement of strategic options Reduce reliance on slides, spreadsheets, and ad-hoc documents 3.2 Alignment & Collaboration Strategy Cards MUST: Enable collaborative workshops and facilitated discussions Promote shared understanding across teams Capture rationale, assumptions, and decisions 3.3 Usability & Speed Strategy Cards MUST: Minimize time spent on blank or unstructured work Guide users step-by-step through strategy formulation Enable rapid iteration and refinement 4. Workbench — Design Criteria 4.1 Strategy Execution Workbench MUST: Translate strategic objectives into initiatives, projects, and actions Link strategy directly to delivery mechanisms Support execution methodologies including: Strategic Portfolio Management Hoshin Kanri Operational Excellence OKRs 4.2 Tracking & Measurement Workbench MUST: Provide real-time tracking of initiatives and projects Support KPI, metric, and scorecard management Enable visibility from enterprise level down to individual ownership 4.3 Governance & Accountability Workbench MUST: Clearly define ownership and accountability Support portfolio-level governance and prioritization Enable decision-making based on impact, capacity, and alignment 5. Cross-Product System Capabilities 5.1 Single Source of Truth The system MUST: Centralize all strategy, execution, metrics, and reporting Eliminate fragmented tools and duplicate data Provide one undisputed, authoritative view of progress 5.2 Traceability The system MUST provide end-to-end traceability between: Strategic goals Initiatives and projects KPIs and financial outcomes Individual and team objectives 6. Portfolio Management Criteria 6.1 Portfolio Structuring The system MUST: Support grouping of initiatives into strategic portfolios Allow portfolios to reflect business-specific structures Support domains such as: M&A Operational Excellence Financial Transformation ESG Private Equity portfolios 6.2 Portfolio Analysis The system MUST enable: Alignment and impact assessment Capacity and demand balancing Dependency and delivery risk analysis Funding and resource evaluation 7. Integration & Extensibility 7.1 External Systems The platform MUST integrate with: Project management tools ERP systems CRM systems Other enterprise data sources 7.2 Configurability The system MUST: Adapt to organizational language, processes, and structures Support multiple regions, languages, and operating models Avoid forcing rigid or prescriptive workflows 8. Operational Excellence & Continuous Improvement 8.1 Process Enablement The system MUST: Support Lean, Hoshin Kanri, and continuous improvement methods Enable consistent reporting across units and regions Encourage countermeasure-driven improvement, not just KPI reporting 8.2 Automation The system MUST: Automate manual reporting and reconciliation Reduce time spent maintaining spreadsheets Free users to focus on execution and improvement 9. Reporting & Visibility 9.1 Reporting Capabilities The system MUST provide: Portfolio-level dashboards Scorecards with consistent definitions Drill-down from enterprise to project level Real-time status visibility 9.2 Financial Visibility The system MUST: Link improvement activity to financial outcomes Provide shared visibility between Operations and Finance Support savings tracking and value realization 10. Non-Functional Design Criteria 10.1 Usability Intuitive for non-technical users Minimal training required for core workflows Clear visual models of strategy and execution 10.2 Scalability Support global organizations Scale across portfolios, regions, and users Maintain performance with large datasets 10.3 Reliability High availability for executive-critical reporting Data integrity across integrated systems 11. Success Criteria The product SHALL be considered successful if it: Replaces spreadsheet-based strategy execution Improves alignment across teams and functions Increases execution confidence for leadership Demonstrably improves delivery of strategic initiatives --- .spark-initial-sha | 1 + PRD.md | 145 ++++++++++ index.html | 3 +- src/App.tsx | 84 +++++- src/components/Dashboard.tsx | 279 ++++++++++++++++++ src/components/Portfolios.tsx | 211 ++++++++++++++ src/components/StrategyCards.tsx | 358 +++++++++++++++++++++++ src/components/Workbench.tsx | 475 +++++++++++++++++++++++++++++++ src/index.css | 84 +++++- src/types/index.ts | 48 ++++ 10 files changed, 1684 insertions(+), 4 deletions(-) create mode 100644 .spark-initial-sha create mode 100644 PRD.md create mode 100644 src/components/Dashboard.tsx create mode 100644 src/components/Portfolios.tsx create mode 100644 src/components/StrategyCards.tsx create mode 100644 src/components/Workbench.tsx create mode 100644 src/types/index.ts diff --git a/.spark-initial-sha b/.spark-initial-sha new file mode 100644 index 0000000..ffea877 --- /dev/null +++ b/.spark-initial-sha @@ -0,0 +1 @@ +HEAD diff --git a/PRD.md b/PRD.md new file mode 100644 index 0000000..89768c2 --- /dev/null +++ b/PRD.md @@ -0,0 +1,145 @@ +# Planning Guide + +An integrated strategy management platform that enables organizations to create, align, execute, and track strategic initiatives from conception to delivery, replacing fragmented spreadsheets with a unified source of truth. + +**Experience Qualities**: +1. **Authoritative** - Every view, metric, and decision point radiates confidence and clarity, positioning this as the definitive system of record for strategic execution. +2. **Structured yet Flexible** - Guided frameworks accelerate strategy creation while adapting to diverse methodologies (Hoshin Kanri, OKRs, Portfolio Management) without rigid constraints. +3. **Traceable** - Crystal-clear visibility from enterprise goals down to individual initiatives, with instant drill-down and relationship mapping that eliminates ambiguity. + +**Complexity Level**: Complex Application (advanced functionality, likely with multiple views) +This is an enterprise-grade platform requiring multiple interconnected views (Strategy Cards creation, Workbench execution tracking, Portfolio management, KPI dashboards), role-based workflows, real-time data relationships, and sophisticated visualization of strategic hierarchies and dependencies. + +## Essential Features + +### Strategy Card Creation +- **Functionality**: Structured strategy formulation using proven frameworks (SWOT, Value Disciplines, Strategic Pillars) +- **Purpose**: Eliminate blank-page paralysis and ensure comprehensive strategic thinking +- **Trigger**: User clicks "Create Strategy Card" or "New Strategic Initiative" +- **Progression**: Select framework → Fill guided sections (Vision, Goals, Assumptions) → Add metrics → Review & Publish → Link to Workbench initiatives +- **Success criteria**: User can create a complete strategy card in under 10 minutes; all critical strategic elements are captured with clear rationale + +### Initiative Execution Tracking +- **Functionality**: Translate strategic objectives into trackable initiatives with owners, timelines, and KPIs +- **Purpose**: Bridge the gap between strategy and execution with clear accountability +- **Trigger**: User creates initiative from Strategy Card or Workbench portfolio view +- **Progression**: Define initiative → Assign owner → Set timeline & budget → Link strategic goals → Define KPIs → Track status updates +- **Success criteria**: Every initiative clearly traces to strategic goals; real-time status is always current; owners receive clear accountability signals + +### Portfolio Management & Governance +- **Functionality**: Group initiatives into portfolios (M&A, OpEx, ESG) with capacity planning and impact analysis +- **Purpose**: Enable enterprise-level prioritization and resource allocation decisions +- **Trigger**: User navigates to "Portfolios" and creates/manages portfolio groups +- **Progression**: Create portfolio → Add initiatives → Analyze capacity vs demand → Assess alignment score → Prioritize → Review governance dashboard +- **Success criteria**: Leadership can assess entire strategic portfolio at a glance; capacity conflicts are immediately visible; prioritization decisions are data-informed + +### Real-Time KPI Dashboard +- **Functionality**: Multi-level scorecards from enterprise to initiative with drill-down capability +- **Purpose**: Provide unified visibility into strategic progress and financial outcomes +- **Trigger**: User accesses Dashboard or clicks metric in any view +- **Progression**: View enterprise scorecard → Select portfolio or initiative → Drill into specific KPI → View trend & targets → Navigate to related initiatives +- **Success criteria**: No ambiguity about performance; financial and operational metrics connected; accessible to all stakeholders + +### Strategy-to-Execution Traceability +- **Functionality**: Visual relationship mapping showing how initiatives link to strategic goals and outcomes +- **Purpose**: Ensure every activity directly supports strategic intent; identify gaps +- **Trigger**: User clicks "View Connections" or "Trace to Strategy" on any initiative +- **Progression**: Select initiative or goal → View relationship map → Identify gaps or misalignments → Create new links or initiatives +- **Success criteria**: Complete line of sight from daily work to enterprise strategy; no orphaned initiatives + +## Edge Case Handling + +- **Orphaned Initiatives** - Display warnings when initiatives lack strategic linkage; suggest potential connections +- **Capacity Overload** - Flag portfolios exceeding resource capacity with visual indicators; recommend rebalancing +- **Stale Data** - Highlight KPIs and initiatives not updated within defined thresholds; send gentle reminders to owners +- **Conflicting Priorities** - Surface initiatives competing for same resources with conflict resolution workflow +- **Incomplete Strategy Cards** - Auto-save drafts; provide completion checklist; allow progressive elaboration +- **Access Control** - Role-based visibility ensuring executives see enterprise view while contributors focus on their initiatives + +## Design Direction + +The design should evoke **executive confidence, operational precision, and strategic clarity**. This is a tool for serious decisions—it must feel authoritative without being bureaucratic, data-rich without overwhelming, and sophisticated yet accessible. Visual language should suggest enterprise-grade reliability (think Bloomberg Terminal meets modern SaaS), with clear hierarchies, purposeful data density, and confident use of space to signal importance. + +## Color Selection + +**Deep Navy & Gold Executive Palette** - Conveys authority, strategic thinking, and high-stakes decision-making appropriate for C-suite and strategy offices. + +- **Primary Color**: Deep Navy `oklch(0.28 0.05 250)` - Strategic authority and executive presence; used for primary navigation, key actions, and strategic elements +- **Secondary Colors**: + - Slate `oklch(0.42 0.02 250)` - Supporting structure for secondary actions and containers + - Cool Gray `oklch(0.92 0.01 250)` - Subtle backgrounds and dividers maintaining visual hierarchy +- **Accent Color**: Rich Gold `oklch(0.72 0.14 85)` - Strategic focus and achievement; highlights critical metrics, success states, and high-priority initiatives +- **Foreground/Background Pairings**: + - Primary Navy (oklch(0.28 0.05 250)): White text (oklch(0.99 0 0)) - Ratio 11.2:1 ✓ + - Slate (oklch(0.42 0.02 250)): White text (oklch(0.99 0 0)) - Ratio 6.8:1 ✓ + - Gold Accent (oklch(0.72 0.14 85)): Deep Navy text (oklch(0.28 0.05 250)) - Ratio 4.9:1 ✓ + - Background (oklch(0.98 0.005 250)): Foreground text (oklch(0.25 0.02 250)) - Ratio 13.4:1 ✓ + +## Font Selection + +Typography should communicate **executive gravitas, analytical precision, and structured thinking**—appropriate for strategy documents and financial reporting while remaining highly scannable for dashboard views. + +- **Typographic Hierarchy**: + - H1 (Strategic Section Headers): Outfit Bold / 32px / tight (-0.02em) - Commands attention for major sections + - H2 (Portfolio/Card Titles): Outfit SemiBold / 24px / tight (-0.01em) - Clear hierarchical signaling + - H3 (Initiative Titles): Outfit Medium / 18px / normal - Balanced weight for scannability + - Body (Descriptions/Content): Inter Regular / 15px / relaxed (1.6) - Exceptional readability for detailed content + - Data/Metrics: JetBrains Mono Medium / 14px / normal - Precision and clarity for numbers, KPIs, dates + - Captions/Labels: Inter Medium / 13px / wide (0.01em) / uppercase - Clear visual separation for metadata + +## Animations + +Animations should reinforce the sense of **authoritative transitions and data relationships**, never frivolous. Use purposeful motion to guide attention during navigation between strategy levels (enterprise → portfolio → initiative), smooth drill-downs that maintain spatial context, and subtle highlights when metrics update or thresholds are crossed. Strategic elements should feel weighty—cards and modals transition with slight deceleration suggesting substance and importance. + +## Component Selection + +- **Components**: + - `Card` - Primary container for Strategy Cards, initiative summaries, and portfolio groups; add subtle shadow and border treatment for depth + - `Tabs` - Navigation between Strategy Cards and Workbench; styled with underline indicator and bold active state + - `Dialog` - Full-screen modals for creating/editing Strategy Cards and initiatives with structured forms + - `Table` - Initiative lists, KPI scorecards, and portfolio views with sortable columns and row hover states + - `Badge` - Status indicators (On Track, At Risk, Blocked), priority levels, and portfolio tags with semantic colors + - `Progress` - Visual representation of initiative completion, capacity utilization, and KPI achievement + - `Select` - Framework selection, owner assignment, portfolio categorization with clear dropdown styling + - `Button` - Primary actions use solid navy with gold hover accent; secondary actions use outline style + - `Separator` - Clear visual breaks between strategy sections and dashboard panels + - `Avatar` - Owner identification with fallback initials + - `ScrollArea` - Smooth scrolling for long strategy content and initiative lists + +- **Customizations**: + - Strategy Card component with collapsible framework sections (Vision, Goals, Metrics, Assumptions) + - Traceability visualization using connected cards or tree view showing goal → initiative relationships + - Portfolio capacity gauge combining Progress with numeric indicators + - KPI scorecard component with trend indicators (up/down arrows) and target comparison + - Initiative timeline component showing milestones and current progress + +- **States**: + - Buttons: Navy default → Gold hover → Pressed with slight scale → Disabled with reduced opacity + - Cards: Subtle hover elevation; active state with gold left border; selected state with gold outline + - Table rows: Hover with light slate background; selected with stronger slate background + - Status badges: Green (On Track), Amber (At Risk), Red (Blocked), Gray (Not Started) + +- **Icon Selection**: + - `Strategy` - Use structured grid or layers icon for Strategy Cards + - `ChartBar` - Workbench and execution tracking + - `FolderOpen` - Portfolio management + - `Target` - Goals and KPIs + - `Link` - Traceability and connections + - `Plus` - Create new cards/initiatives + - `ArrowRight` - Drill-down and navigation + - `Warning` - Risk flags and capacity alerts + - `TrendUp/TrendDown` - KPI performance indicators + +- **Spacing**: + - Page margins: `p-8` for generous breathing room around main content + - Card padding: `p-6` for substantial internal space + - Section gaps: `gap-6` between major sections; `gap-4` between related elements + - List items: `py-3` for comfortable touch targets and scannability + +- **Mobile**: + - Tab navigation converts to bottom sheet selector + - Strategy Cards stack vertically with collapsible sections expanded one at a time + - Tables transform to card-based lists with key data prioritized + - Portfolio dashboard shows one metric card at a time with horizontal swipe + - Create/Edit dialogs use full viewport with simplified forms + - Reduce typographic scale by 10-15% for mobile readability diff --git a/index.html b/index.html index f62002d..a84cfb5 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,10 @@ - + StrategyOS - Strategy Management Platform + diff --git a/src/App.tsx b/src/App.tsx index 98ef973..8af281d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,85 @@ +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 StrategyCards from './components/StrategyCards' +import Workbench from './components/Workbench' +import Portfolios from './components/Portfolios' +import Dashboard from './components/Dashboard' +import type { StrategyCard, Initiative } from './types' + function App() { - return
+ const [strategyCards] = useKV('strategy-cards', []) + const [initiatives] = useKV('initiatives', []) + const [activeTab, setActiveTab] = useState('strategy') + + return ( +
+
+
+
+
+

+ StrategyOS +

+

+ Strategy Management Platform +

+
+
+
+ Cards + {strategyCards?.length || 0} +
+
+ Initiatives + {initiatives?.length || 0} +
+
+
+
+
+ +
+ + + + + Strategy Cards + + + + Workbench + + + + Portfolios + + + + Dashboard + + + + + + + + + + + + + + + + + + + +
+
+ ) } -export default App \ No newline at end of file +export default App diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx new file mode 100644 index 0000000..908482c --- /dev/null +++ b/src/components/Dashboard.tsx @@ -0,0 +1,279 @@ +import { useKV } from '@github/spark/hooks' +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Badge } from '@/components/ui/badge' +import { Progress } from '@/components/ui/progress' +import { Separator } from '@/components/ui/separator' +import { Target, TrendUp, TrendDown, Minus, CheckCircle, Warning, Link as LinkIcon } from '@phosphor-icons/react' +import type { Initiative, StrategyCard } from '@/types' + +export default function Dashboard() { + const [initiatives] = useKV('initiatives', []) + const [strategyCards] = useKV('strategy-cards', []) + + const totalInitiatives = initiatives?.length || 0 + const totalBudget = initiatives?.reduce((sum, i) => sum + i.budget, 0) || 0 + const avgProgress = totalInitiatives > 0 + ? Math.round((initiatives?.reduce((sum, i) => sum + i.progress, 0) || 0) / totalInitiatives) + : 0 + + const statusBreakdown = { + onTrack: initiatives?.filter(i => i.status === 'on-track').length || 0, + atRisk: initiatives?.filter(i => i.status === 'at-risk').length || 0, + blocked: initiatives?.filter(i => i.status === 'blocked').length || 0, + notStarted: initiatives?.filter(i => i.status === 'not-started').length || 0, + completed: initiatives?.filter(i => i.status === 'completed').length || 0, + } + + const strategicAlignment = strategyCards?.map(card => { + const linkedInitiatives = initiatives?.filter(i => i.strategyCardId === card.id) || [] + const totalLinkedBudget = linkedInitiatives.reduce((sum, i) => sum + i.budget, 0) + const avgLinkedProgress = linkedInitiatives.length > 0 + ? Math.round(linkedInitiatives.reduce((sum, i) => sum + i.progress, 0) / linkedInitiatives.length) + : 0 + + return { + card, + initiativeCount: linkedInitiatives.length, + totalBudget: totalLinkedBudget, + avgProgress: avgLinkedProgress, + } + }) || [] + + const kpiMockData = [ + { name: 'Cost Reduction', current: 8.2, target: 10, unit: 'M USD', trend: 'up' as const }, + { name: 'Cycle Time Improvement', current: 18, target: 25, unit: '%', trend: 'up' as const }, + { name: 'Customer Satisfaction', current: 87, target: 90, unit: 'NPS', trend: 'up' as const }, + { name: 'Revenue Growth', current: 12.5, target: 15, unit: '%', trend: 'up' as const }, + ] + + const getTrendIcon = (trend: string) => { + switch (trend) { + case 'up': return TrendUp + case 'down': return TrendDown + default: return Minus + } + } + + const getKPIProgress = (current: number, target: number) => { + return Math.min((current / target) * 100, 100) + } + + return ( +
+
+

Executive Dashboard

+

Real-time view of strategic execution

+
+ +
+ + + Total Initiatives + {totalInitiatives} + + +
+ {statusBreakdown.onTrack} On Track + {statusBreakdown.atRisk > 0 && ( + {statusBreakdown.atRisk} At Risk + )} +
+ + + + + + Total Investment + + ${(totalBudget / 1000000).toFixed(1)}M + + + +

+ Across {strategyCards?.length || 0} strategic themes +

+ + + + + + Average Progress + {avgProgress}% + + + + + + + + + Completion Rate + + {totalInitiatives > 0 ? Math.round((statusBreakdown.completed / totalInitiatives) * 100) : 0}% + + + +

+ {statusBreakdown.completed} of {totalInitiatives} completed +

+ + +
+ +
+ + + + + Initiative Status Breakdown + + + +
+
+ On Track +
+ 0 ? (statusBreakdown.onTrack / totalInitiatives) * 100 : 0} className="w-32 h-2" /> + {statusBreakdown.onTrack} +
+
+
+ At Risk +
+ 0 ? (statusBreakdown.atRisk / totalInitiatives) * 100 : 0} className="w-32 h-2" /> + {statusBreakdown.atRisk} +
+
+
+ Blocked +
+ 0 ? (statusBreakdown.blocked / totalInitiatives) * 100 : 0} className="w-32 h-2" /> + {statusBreakdown.blocked} +
+
+
+ Not Started +
+ 0 ? (statusBreakdown.notStarted / totalInitiatives) * 100 : 0} className="w-32 h-2" /> + {statusBreakdown.notStarted} +
+
+
+ Completed +
+ 0 ? (statusBreakdown.completed / totalInitiatives) * 100 : 0} className="w-32 h-2" /> + {statusBreakdown.completed} +
+
+
+ + {statusBreakdown.atRisk + statusBreakdown.blocked > 0 && ( + <> + +
+ + + {statusBreakdown.atRisk + statusBreakdown.blocked} {statusBreakdown.atRisk + statusBreakdown.blocked === 1 ? 'initiative requires' : 'initiatives require'} attention + +
+ + )} + + + + + + + + Key Performance Indicators + + + + {kpiMockData.map((kpi) => { + const TrendIcon = getTrendIcon(kpi.trend) + const progress = getKPIProgress(kpi.current, kpi.target) + const isOnTarget = progress >= 80 + + return ( +
+
+ {kpi.name} +
+ + + {kpi.current} / {kpi.target} {kpi.unit} + +
+
+ +
+ ) + })} + + +
+ + + + + + Strategic Alignment & Traceability + + + View how initiatives map to strategic goals + + + + {strategicAlignment.length === 0 ? ( +
+

Create strategy cards to view strategic alignment

+
+ ) : ( +
+ {strategicAlignment.map(({ card, initiativeCount, totalBudget, avgProgress }) => ( +
+
+
+

{card.title}

+

+ {card.framework.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')} +

+
+ + {initiativeCount} {initiativeCount === 1 ? 'Initiative' : 'Initiatives'} + +
+ + {initiativeCount > 0 ? ( +
+
+

Investment

+

+ ${(totalBudget / 1000000).toFixed(2)}M +

+
+
+

Avg Progress

+

{avgProgress}%

+
+
+

Goals Defined

+

{card.goals.length}

+
+
+ ) : ( +
+

+ No initiatives linked yet - create initiatives in the Workbench +

+
+ )} +
+ ))} +
+ )} + + +
+ ) +} diff --git a/src/components/Portfolios.tsx b/src/components/Portfolios.tsx new file mode 100644 index 0000000..7b5bb28 --- /dev/null +++ b/src/components/Portfolios.tsx @@ -0,0 +1,211 @@ +import { useKV } from '@github/spark/hooks' +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Progress } from '@/components/ui/progress' +import { Badge } from '@/components/ui/badge' +import { FolderOpen, ChartBar, Warning, TrendUp } from '@phosphor-icons/react' +import type { Initiative, Portfolio as PortfolioType } from '@/types' + +const portfolioDefinitions: PortfolioType[] = [ + { + type: 'operational-excellence', + name: 'Operational Excellence', + description: 'Lean, Hoshin Kanri, and continuous improvement initiatives', + capacity: 100, + utilized: 0, + }, + { + type: 'ma', + name: 'M&A', + description: 'Merger and acquisition integration programs', + capacity: 100, + utilized: 0, + }, + { + type: 'financial-transformation', + name: 'Financial Transformation', + description: 'Finance operations and systems modernization', + capacity: 100, + utilized: 0, + }, + { + type: 'esg', + name: 'ESG', + description: 'Environmental, Social, and Governance programs', + capacity: 100, + utilized: 0, + }, + { + type: 'innovation', + name: 'Innovation', + description: 'New products, services, and business models', + capacity: 100, + utilized: 0, + }, +] + +export default function Portfolios() { + const [initiatives] = useKV('initiatives', []) + + const getPortfolioMetrics = (portfolioType: string) => { + const portfolioInitiatives = initiatives?.filter(i => i.portfolio === portfolioType) || [] + const totalBudget = portfolioInitiatives.reduce((sum, i) => sum + i.budget, 0) + const avgProgress = portfolioInitiatives.length > 0 + ? portfolioInitiatives.reduce((sum, i) => sum + i.progress, 0) / portfolioInitiatives.length + : 0 + + const statusCounts = { + onTrack: portfolioInitiatives.filter(i => i.status === 'on-track').length, + atRisk: portfolioInitiatives.filter(i => i.status === 'at-risk').length, + blocked: portfolioInitiatives.filter(i => i.status === 'blocked').length, + } + + const capacityUsed = portfolioInitiatives.length * 20 + + return { + count: portfolioInitiatives.length, + totalBudget, + avgProgress: Math.round(avgProgress), + statusCounts, + capacityUsed: Math.min(capacityUsed, 100), + } + } + + return ( +
+
+
+

Portfolio Management

+

Strategic portfolio analysis and governance

+
+
+ +
+ {portfolioDefinitions.map((portfolio) => { + const metrics = getPortfolioMetrics(portfolio.type) + const hasRisks = metrics.statusCounts.atRisk > 0 || metrics.statusCounts.blocked > 0 + + return ( + + +
+
+
+
+ +
+
+ {portfolio.name} + {portfolio.description} +
+
+
+
+ + {metrics.count} {metrics.count === 1 ? 'Initiative' : 'Initiatives'} + + {hasRisks && ( + + + Attention Required + + )} +
+
+ + +
+
+
+ + Total Budget +
+

+ ${(metrics.totalBudget / 1000000).toFixed(1)}M +

+
+ +
+
+ + Avg Progress +
+

+ {metrics.avgProgress}% +

+
+ +
+

Status Summary

+
+ {metrics.statusCounts.onTrack > 0 && ( + + {metrics.statusCounts.onTrack} On Track + + )} + {metrics.statusCounts.atRisk > 0 && ( + + {metrics.statusCounts.atRisk} At Risk + + )} + {metrics.statusCounts.blocked > 0 && ( + + {metrics.statusCounts.blocked} Blocked + + )} +
+
+ +
+

Capacity

+
+
+ + {metrics.capacityUsed}% + + 80 ? 'text-warning' : 'text-muted-foreground'}`}> + {metrics.capacityUsed > 80 ? 'High utilization' : 'Available'} + +
+ +
+
+
+ + {metrics.count === 0 && ( +
+

+ No initiatives in this portfolio yet +

+
+ )} + + + ) + })} +
+ + + + Portfolio Governance Notes + + +
+ • +

Capacity Planning: Each portfolio shows utilization based on active initiatives (estimated 20% capacity per initiative)

+
+
+ • +

Risk Flags: Portfolios with at-risk or blocked initiatives receive attention markers

+
+
+ • +

Resource Balancing: Monitor capacity utilization to avoid portfolio overload and ensure delivery success

+
+ + +
+ ) +} diff --git a/src/components/StrategyCards.tsx b/src/components/StrategyCards.tsx new file mode 100644 index 0000000..1b12778 --- /dev/null +++ b/src/components/StrategyCards.tsx @@ -0,0 +1,358 @@ +import { useKV } from '@github/spark/hooks' +import { useState } from 'react' +import { Button } from '@/components/ui/button' +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Textarea } from '@/components/ui/textarea' +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' +import { Badge } from '@/components/ui/badge' +import { Separator } from '@/components/ui/separator' +import { ScrollArea } from '@/components/ui/scroll-area' +import { Plus, Target, Lightbulb, ChartLineUp } from '@phosphor-icons/react' +import { toast } from 'sonner' +import type { StrategyCard } from '@/types' + +const frameworks = [ + { value: 'swot', label: 'SWOT Analysis', description: 'Strengths, Weaknesses, Opportunities, Threats' }, + { value: 'value-disciplines', label: 'Value Disciplines', description: 'Operational Excellence, Product Leadership, Customer Intimacy' }, + { value: 'strategic-pillars', label: 'Strategic Pillars', description: 'Core strategic themes and priorities' }, + { value: 'hoshin-kanri', label: 'Hoshin Kanri', description: 'Policy deployment and strategic alignment' }, + { value: 'okr', label: 'OKR Framework', description: 'Objectives and Key Results' }, +] + +export default function StrategyCards() { + const [strategyCards, setStrategyCards] = useKV('strategy-cards', []) + const [isDialogOpen, setIsDialogOpen] = useState(false) + const [selectedCard, setSelectedCard] = useState(null) + + const [formData, setFormData] = useState({ + title: '', + framework: '', + vision: '', + goals: '', + metrics: '', + assumptions: '', + }) + + const handleCreate = () => { + if (!formData.title || !formData.framework || !formData.vision) { + toast.error('Please fill in required fields') + return + } + + const newCard: StrategyCard = { + id: `card-${Date.now()}`, + title: formData.title, + framework: formData.framework, + vision: formData.vision, + goals: formData.goals.split('\n').filter(g => g.trim()), + metrics: formData.metrics.split('\n').filter(m => m.trim()), + assumptions: formData.assumptions.split('\n').filter(a => a.trim()), + createdAt: Date.now(), + updatedAt: Date.now(), + } + + setStrategyCards((current) => [...(current || []), newCard]) + toast.success('Strategy Card created successfully') + setIsDialogOpen(false) + resetForm() + } + + const resetForm = () => { + setFormData({ + title: '', + framework: '', + vision: '', + goals: '', + metrics: '', + assumptions: '', + }) + } + + const handleCardClick = (card: StrategyCard) => { + setSelectedCard(card) + } + + return ( +
+
+
+

Strategy Cards

+

Create and manage strategic frameworks

+
+ + + + + + + Create New Strategy Card + + Use a proven framework to structure your strategic thinking + + + +
+
+ + setFormData({ ...formData, title: e.target.value })} + /> +
+ +
+ + +
+ + + +
+ +