From 77ffbb3e1001fa7b2c235ada99736cba19f4658e Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 22:15:57 +0000 Subject: [PATCH] Generated by Spark: I think menu flow needs redesigning --- PRD.md | 16 ++- spark.meta.json | 7 +- src/App.tsx | 311 ++++++++++++++++++++++++++++++++---------------- 3 files changed, 226 insertions(+), 108 deletions(-) diff --git a/PRD.md b/PRD.md index a98d32d..74b4109 100644 --- a/PRD.md +++ b/PRD.md @@ -123,7 +123,7 @@ Animations should reinforce the sense of **authoritative transitions and data re - **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 + - **Sidebar Navigation** - Hierarchical left sidebar with grouped sections (Planning, Execution, Hoshin Kanri, Roadmaps, Reporting) replacing horizontal tabs for better scalability and visual organization - `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 @@ -140,32 +140,42 @@ Animations should reinforce the sense of **authoritative transitions and data re - 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 + - **Home Dashboard** - Landing view with categorized module cards for intuitive entry into different functional areas - **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 + - **Sidebar Items**: Default state with regular icon weight → Hover with accent background → Active with filled icon, primary background and shadow - 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**: + - `House` - Home dashboard navigation - `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 + - `Tree` - Traceability and connections - `Plus` - Create new cards/initiatives - `ArrowRight` - Drill-down and navigation - `Warning` - Risk flags and capacity alerts - `TrendUp/TrendDown` - KPI performance indicators + - `ArrowsLeftRight` - Strategy comparison + - `GridFour` - X-Matrix + - `Circle` - Bowling chart + - `MapTrifold` - Strategic roadmap + - `Rocket` - Product roadmap - **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 + - **Sidebar spacing**: `p-4` container padding; `space-y-6` between sections; `space-y-1` within sections - **Mobile**: - - Tab navigation converts to bottom sheet selector + - Sidebar converts to collapsible drawer with hamburger menu + - Home dashboard grid stacks to single column - 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 diff --git a/spark.meta.json b/spark.meta.json index 1d49b2a..fd74d91 100644 --- a/spark.meta.json +++ b/spark.meta.json @@ -1,3 +1,4 @@ -{ - "dbType": null - +{ + "templateVersion": 0, + "dbType": null +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index f7e5f17..a235f01 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,22 @@ import { useKV } from '@github/spark/hooks' import { useState } from 'react' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { Strategy, ChartBar, FolderOpen, Target, MapTrifold, Rocket, ChartLine, TrendUp, ArrowsLeftRight, Tree, GridFour, Circle } from '@phosphor-icons/react' +import { Card, CardContent } from '@/components/ui/card' +import { + Strategy, + ChartBar, + FolderOpen, + Target, + MapTrifold, + Rocket, + ChartLine, + TrendUp, + ArrowsLeftRight, + Tree, + GridFour, + Circle, + House +} from '@phosphor-icons/react' +import { cn } from '@/lib/utils' import StrategyCards from './components/StrategyCards' import Workbench from './components/Workbench' import Portfolios from './components/Portfolios' @@ -16,10 +31,84 @@ import XMatrix from './components/XMatrix' import BowlingChart from './components/BowlingChart' import type { StrategyCard, Initiative } from './types' +type NavigationItem = { + id: string + label: string + icon: React.ElementType + component: React.ComponentType +} + +type NavigationSection = { + id: string + label: string + items: NavigationItem[] +} + +const navigationSections: NavigationSection[] = [ + { + id: 'planning', + label: 'Planning', + items: [ + { id: 'strategy', label: 'Strategy Cards', icon: Strategy, component: StrategyCards }, + { id: 'comparison', label: 'Compare', icon: ArrowsLeftRight, component: StrategyComparison }, + { id: 'traceability', label: 'Traceability', icon: Tree, component: StrategyTraceability }, + ] + }, + { + id: 'execution', + label: 'Execution', + items: [ + { id: 'workbench', label: 'Workbench', icon: ChartBar, component: Workbench }, + { id: 'tracker', label: 'Initiative Tracker', icon: TrendUp, component: InitiativeTracker }, + { id: 'portfolios', label: 'Portfolios', icon: FolderOpen, component: Portfolios }, + ] + }, + { + id: 'hoshin', + label: 'Hoshin Kanri', + items: [ + { id: 'x-matrix', label: 'X-Matrix', icon: GridFour, component: XMatrix }, + { id: 'bowling', label: 'Bowling Chart', icon: Circle, component: BowlingChart }, + ] + }, + { + id: 'roadmaps', + label: 'Roadmaps', + items: [ + { id: 'roadmap', label: 'Strategic Roadmap', icon: MapTrifold, component: Roadmap }, + { id: 'product-roadmap', label: 'Product Roadmap', icon: Rocket, component: ProductRoadmap }, + ] + }, + { + id: 'reporting', + label: 'Reporting', + items: [ + { id: 'dashboard', label: 'Executive Dashboard', icon: Target, component: Dashboard }, + { id: 'kpi', label: 'KPI Scorecard', icon: ChartLine, component: KPIDashboard }, + ] + } +] + function App() { const [strategyCards] = useKV('strategy-cards', []) const [initiatives] = useKV('initiatives', []) - const [activeTab, setActiveTab] = useState('strategy') + const [activeView, setActiveView] = useState('strategy') + const [showHome, setShowHome] = useState(true) + + const handleNavigate = (viewId: string) => { + setActiveView(viewId) + setShowHome(false) + } + + const handleHomeClick = () => { + setShowHome(true) + } + + const activeItem = navigationSections + .flatMap(section => section.items) + .find(item => item.id === activeView) + + const ActiveComponent = activeItem?.component return (
@@ -48,110 +137,128 @@ function App() {
-
- - - - - Strategy - - - - Compare - - - - Trace - - - - Workbench - - - - Tracker - - - - KPIs - - - - X-Matrix - - - - Bowling - - - - Portfolios - - - - Dashboard - - - - Roadmap - - - - Product - - +
+ - - - +
+ {showHome ? ( +
+
+

+ Welcome to StrategyOS +

+

+ Select a module from the navigation to begin managing your strategic initiatives +

+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ {navigationSections.map(section => ( +
+

+ {section.label} +

+
+ {section.items.map(item => { + const Icon = item.icon + return ( + handleNavigate(item.id)} + > + +
+
+ +
+
+

+ {item.label} +

+

+ {getModuleDescription(item.id)} +

+
+
+ + + ) + })} +
+
+ ))} +
+
+ ) : ( +
+ {ActiveComponent && } +
+ )} +
+ ) } +function getModuleDescription(moduleId: string): string { + const descriptions: Record = { + 'strategy': 'Create and manage strategic frameworks using proven methodologies', + 'comparison': 'Compare multiple strategic options side-by-side', + 'traceability': 'Map relationships from goals to initiatives', + 'workbench': 'Execute and track strategic initiatives', + 'tracker': 'Monitor initiative progress with real-time status', + 'portfolios': 'Organize initiatives into strategic portfolios', + 'x-matrix': 'Align objectives using Hoshin Kanri methodology', + 'bowling': 'Track monthly progress with visual indicators', + 'roadmap': 'Visualize strategic timeline and milestones', + 'product-roadmap': 'Plan and track product development initiatives', + 'dashboard': 'Executive-level view of strategic performance', + 'kpi': 'Monitor key performance indicators and metrics', + } + return descriptions[moduleId] || 'Manage your strategic initiatives' +} + export default App