From e994ade484d4ccd78d6bb047dc6a420395282600 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Thu, 22 Jan 2026 14:05:54 +0000 Subject: [PATCH] Generated by Spark: implement features needed for product roadmap --- src/components/ProductRoadmap.tsx | 1372 +++++++++++++++-------------- 1 file changed, 695 insertions(+), 677 deletions(-) diff --git a/src/components/ProductRoadmap.tsx b/src/components/ProductRoadmap.tsx index 0ffe6f1..03a6021 100644 --- a/src/components/ProductRoadmap.tsx +++ b/src/components/ProductRoadmap.tsx @@ -1,6 +1,5 @@ import { useKV } from '@github/spark/hooks' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' -import { Checkbox } from '@/components/ui/checkbox' import { Badge } from '@/components/ui/badge' import { Progress } from '@/components/ui/progress' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' @@ -10,545 +9,324 @@ 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 { CheckCircle, Circle, Target, ChartBar, Users, Database, Rocket, Shield, Plus, FunnelSimple, CalendarBlank, ChatCircleText } from '@phosphor-icons/react' -import { useState } from 'react' +import { + Plus, + FunnelSimple, + CalendarBlank, + Target, + Rocket, + Users, + GitBranch, + Flag, + Pencil, + Trash, + ArrowsDownUp, + Sparkle, + Lightning, + ChartLine, + Stack +} from '@phosphor-icons/react' +import { useState, useMemo } from 'react' import { toast } from 'sonner' +import type { StatusType, PriorityType } from '@/types' -interface RoadmapFeature { +interface ProductFeature { id: string - name: string + title: string description: string - category: 'strategy-cards' | 'workbench' | 'cross-product' | 'portfolio' | 'integration' | 'opex' | 'reporting' | 'non-functional' - priority: 'critical' | 'high' | 'medium' | 'low' - completed: boolean - estimatedDate?: string - completedDate?: string + category: 'core' | 'enhancement' | 'integration' | 'infrastructure' + status: StatusType + priority: PriorityType + owner: string + release: string + startDate: string + endDate: string + progress: number + dependencies: string[] + tags: string[] + effort: number + value: number notes?: string } -const initialFeatures: RoadmapFeature[] = [ - { - id: 'sc-1', - name: 'Strategy Framework Templates', - description: 'Support for proven frameworks (SWOT, Porter\'s 5 Forces, Blue Ocean, etc.)', - category: 'strategy-cards', - priority: 'critical', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Implemented comprehensive framework wizard with SWOT, Porter\'s Five Forces, and Blue Ocean Strategy templates with guided step-by-step creation process.' - }, - { - id: 'sc-2', - name: 'Strategy Exploration & Comparison', - description: 'Enable comparison and refinement of multiple strategic options', - category: 'strategy-cards', - priority: 'high', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Implemented comprehensive side-by-side strategy comparison tool that allows users to evaluate multiple strategic options across all key dimensions including vision, goals, metrics, and assumptions with detailed summary analysis.' - }, - { - id: 'sc-3', - name: 'Collaborative Workshops', - description: 'Real-time collaboration features for strategy workshops', - category: 'strategy-cards', - priority: 'high', - completed: false - }, - { - id: 'sc-4', - name: 'Rationale & Decision Capture', - description: 'Capture assumptions, rationale, and strategic decisions', - category: 'strategy-cards', - priority: 'medium', - completed: false - }, - { - id: 'sc-5', - name: 'Guided Strategy Creation', - description: 'Step-by-step wizard for strategy formulation', - category: 'strategy-cards', - priority: 'high', - completed: false - }, - { - id: 'wb-1', - name: 'Strategy-to-Execution Translation', - description: 'Convert strategic objectives into initiatives and projects', - category: 'workbench', - priority: 'critical', - completed: false - }, - { - id: 'wb-2', - name: 'Hoshin Kanri Support', - description: 'Full Hoshin Kanri methodology implementation', - category: 'workbench', - priority: 'high', - completed: false - }, - { - id: 'wb-3', - name: 'X-Matrix', - description: 'Interactive X-Matrix for breakthrough objectives and annual goals', - category: 'workbench', - priority: 'high', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Built complete X-Matrix tool supporting breakthrough objectives (3-5 year), annual objectives, metrics, and improvement actions with interactive relationship mapping using strong/medium/weak correlation indicators for strategic alignment visualization.' - }, - { - id: 'wb-4', - name: 'OKR Management', - description: 'Objectives and Key Results tracking and alignment', - category: 'workbench', - priority: 'medium', - completed: false - }, - { - id: 'wb-5', - name: 'KPI & Metrics Dashboard', - description: 'Real-time KPI tracking with visual scorecards', - category: 'workbench', - priority: 'critical', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Built comprehensive KPI dashboard with real-time tracking, trend analysis, category organization, and drill-down capability. Supports financial, operational, customer, and strategic metrics.' - }, - { - id: 'wb-6', - name: 'Bowling Chart', - description: 'Monthly progress tracking with red/yellow/green status', - category: 'workbench', - priority: 'high', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Implemented visual bowling chart with monthly tracking grid, red/yellow/green status indicators, actual vs target metrics for each month, and real-time status counts dashboard showing at-a-glance progress across all objectives.' - }, - { - id: 'wb-7', - name: 'Ownership & Accountability', - description: 'Clear owner assignment and responsibility tracking', - category: 'workbench', - priority: 'critical', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Implemented owner assignment with avatar display, progress update attribution, and accountability tracking through the Initiative Tracker.' - }, - { - id: 'wb-8', - name: 'Initiative Progress Tracking', - description: 'Real-time tracking of initiative status and progress', - category: 'workbench', - priority: 'critical', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Created comprehensive initiative tracker with status monitoring, progress updates, timeline tracking, budget visibility, and complete update history with notes.' - }, - { - id: 'cp-1', - name: 'Single Source of Truth', - description: 'Centralized repository for all strategy and execution data', - category: 'cross-product', - priority: 'critical', - completed: false - }, - { - id: 'cp-2', - name: 'End-to-End Traceability', - description: 'Link strategic goals to initiatives to KPIs to individual objectives', - category: 'cross-product', - priority: 'critical', - completed: true, - completedDate: new Date().toISOString().split('T')[0], - notes: 'Created comprehensive traceability visualization showing complete line of sight from strategy cards to linked initiatives with status tracking, orphan detection for unlinked initiatives and strategies, and detailed drill-down capability to explore strategic alignment.' - }, - { - id: 'cp-3', - name: 'Strategy Cards ↔ Workbench Integration', - description: 'Seamless data flow between strategy creation and execution', - category: 'cross-product', - priority: 'critical', - completed: false - }, - { - id: 'pf-1', - name: 'Strategic Portfolio Creation', - description: 'Group initiatives into portfolios (M&A, OpEx, ESG, etc.)', - category: 'portfolio', - priority: 'high', - completed: false - }, - { - id: 'pf-2', - name: 'Portfolio Alignment Analysis', - description: 'Assess strategic alignment and impact across portfolios', - category: 'portfolio', - priority: 'high', - completed: false - }, - { - id: 'pf-3', - name: 'Capacity & Demand Balancing', - description: 'Resource capacity planning and allocation', - category: 'portfolio', - priority: 'medium', - completed: false - }, - { - id: 'pf-4', - name: 'Dependency Management', - description: 'Track and visualize cross-initiative dependencies', - category: 'portfolio', - priority: 'medium', - completed: false - }, - { - id: 'pf-5', - name: 'Portfolio Governance', - description: 'Decision-making framework for prioritization and funding', - category: 'portfolio', - priority: 'high', - completed: false - }, - { - id: 'int-1', - name: 'Project Management Tool Integration', - description: 'Connect with Jira, Asana, Monday.com, etc.', - category: 'integration', - priority: 'medium', - completed: false - }, - { - id: 'int-2', - name: 'ERP System Integration', - description: 'Financial and operational data sync with ERP systems', - category: 'integration', - priority: 'medium', - completed: false - }, - { - id: 'int-3', - name: 'CRM Integration', - description: 'Customer and revenue data integration', - category: 'integration', - priority: 'low', - completed: false - }, - { - id: 'int-4', - name: 'API & Webhooks', - description: 'Extensible API for custom integrations', - category: 'integration', - priority: 'high', - completed: false - }, - { - id: 'ox-1', - name: 'Lean Process Support', - description: 'Lean methodology tools and templates', - category: 'opex', - priority: 'high', - completed: false - }, - { - id: 'ox-2', - name: 'Countermeasure Management', - description: 'Track improvement actions, not just KPI reporting', - category: 'opex', - priority: 'high', - completed: false - }, - { - id: 'ox-3', - name: 'PDCA Cycle Tracking', - description: 'Plan-Do-Check-Act continuous improvement cycles', - category: 'opex', - priority: 'medium', - completed: false - }, - { - id: 'ox-4', - name: 'Multi-Region Reporting', - description: 'Consistent reporting across global units', - category: 'opex', - priority: 'medium', - completed: false - }, - { - id: 'rp-1', - name: 'Executive Dashboard', - description: 'Portfolio-level dashboards for leadership', - category: 'reporting', - priority: 'critical', - completed: false - }, - { - id: 'rp-2', - name: 'Drill-Down Reporting', - description: 'Navigate from enterprise level to project details', - category: 'reporting', - priority: 'high', - completed: false - }, - { - id: 'rp-3', - name: 'Financial Outcome Tracking', - description: 'Link initiatives to financial results and savings', - category: 'reporting', - priority: 'critical', - completed: false - }, - { - id: 'rp-4', - name: 'Custom Scorecards', - description: 'Configurable scorecards with standard definitions', - category: 'reporting', - priority: 'medium', - completed: false - }, - { - id: 'rp-5', - name: 'Automated Report Generation', - description: 'Replace manual spreadsheet reporting', - category: 'reporting', - priority: 'high', - completed: false - }, - { - id: 'nf-1', - name: 'Intuitive UX Design', - description: 'Minimal training required, clear visual models', - category: 'non-functional', - priority: 'critical', - completed: false - }, - { - id: 'nf-2', - name: 'Global Scalability', - description: 'Support for global organizations with large datasets', - category: 'non-functional', - priority: 'high', - completed: false - }, - { - id: 'nf-3', - name: 'High Availability', - description: 'Enterprise-grade uptime and reliability', - category: 'non-functional', - priority: 'critical', - completed: false - }, - { - id: 'nf-4', - name: 'Multi-Language Support', - description: 'Support for multiple regions and languages', - category: 'non-functional', - priority: 'medium', - completed: false - }, - { - id: 'nf-5', - name: 'Role-Based Access Control', - description: 'Security and permissions management', - category: 'non-functional', - priority: 'high', - completed: false - }, - { - id: 'nf-6', - name: 'Audit Trail', - description: 'Complete change history and data integrity', - category: 'non-functional', - priority: 'medium', - completed: false - } -] - const categoryConfig = { - 'strategy-cards': { label: 'Strategy Cards', icon: Target, color: 'bg-blue-500' }, - 'workbench': { label: 'Workbench', icon: ChartBar, color: 'bg-purple-500' }, - 'cross-product': { label: 'Cross-Product', icon: Rocket, color: 'bg-accent' }, - 'portfolio': { label: 'Portfolio Management', icon: Database, color: 'bg-green-500' }, - 'integration': { label: 'Integration & APIs', icon: Database, color: 'bg-orange-500' }, - 'opex': { label: 'Operational Excellence', icon: Target, color: 'bg-teal-500' }, - 'reporting': { label: 'Reporting & Visibility', icon: ChartBar, color: 'bg-pink-500' }, - 'non-functional': { label: 'Platform & Infrastructure', icon: Shield, color: 'bg-gray-500' } + 'core': { label: 'Core Features', icon: Rocket, color: 'bg-blue-500' }, + 'enhancement': { label: 'Enhancements', icon: Sparkle, color: 'bg-purple-500' }, + 'integration': { label: 'Integrations', icon: GitBranch, color: 'bg-green-500' }, + 'infrastructure': { label: 'Infrastructure', icon: Stack, color: 'bg-orange-500' } } -const priorityColors = { - critical: 'destructive', - high: 'default', - medium: 'secondary', - low: 'outline' +const statusConfig = { + 'not-started': { label: 'Not Started', color: 'secondary' }, + 'on-track': { label: 'On Track', color: 'default' }, + 'at-risk': { label: 'At Risk', color: 'destructive' }, + 'blocked': { label: 'Blocked', color: 'destructive' }, + 'completed': { label: 'Completed', color: 'outline' } +} as const + +const priorityConfig = { + 'critical': { label: 'Critical', color: 'destructive', score: 4 }, + 'high': { label: 'High', color: 'default', score: 3 }, + 'medium': { label: 'Medium', color: 'secondary', score: 2 }, + 'low': { label: 'Low', color: 'outline', score: 1 } } as const export default function ProductRoadmap() { - const [features, setFeatures] = useKV('product-roadmap-features', initialFeatures) - const [selectedCategory, setSelectedCategory] = useState('all') - const [filterPriority, setFilterPriority] = useState('all') + const [features, setFeatures] = useKV('product-features', []) + const [releases, setReleases] = useKV('product-releases', ['Q1 2025', 'Q2 2025', 'Q3 2025', 'Q4 2025']) + const [selectedRelease, setSelectedRelease] = useState('all') + const [filterCategory, setFilterCategory] = useState('all') const [filterStatus, setFilterStatus] = useState('all') + const [viewMode, setViewMode] = useState<'kanban' | 'timeline' | 'list'>('kanban') const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) - const [editingFeature, setEditingFeature] = useState(null) - const [newFeature, setNewFeature] = useState({ - name: '', + const [editingFeature, setEditingFeature] = useState(null) + const [isReleaseDialogOpen, setIsReleaseDialogOpen] = useState(false) + const [newRelease, setNewRelease] = useState('') + + const releasesList = releases || ['Q1 2025', 'Q2 2025', 'Q3 2025', 'Q4 2025'] + + const [formData, setFormData] = useState>({ + title: '', description: '', - category: 'strategy-cards' as const, - priority: 'medium' as const, - estimatedDate: '', + category: 'core', + status: 'not-started', + priority: 'medium', + owner: '', + release: releasesList[0], + startDate: '', + endDate: '', + progress: 0, + dependencies: [], + tags: [], + effort: 3, + value: 3, notes: '' }) - const toggleFeature = (featureId: string) => { - setFeatures((current) => - (current || []).map(f => - f.id === featureId ? { - ...f, - completed: !f.completed, - completedDate: !f.completed ? new Date().toISOString().split('T')[0] : undefined - } : f - ) - ) - toast.success(features?.find(f => f.id === featureId)?.completed ? 'Feature reopened' : 'Feature completed!') + const resetForm = () => { + setFormData({ + title: '', + description: '', + category: 'core', + status: 'not-started', + priority: 'medium', + owner: '', + release: releasesList[0], + startDate: '', + endDate: '', + progress: 0, + dependencies: [], + tags: [], + effort: 3, + value: 3, + notes: '' + }) + setEditingFeature(null) } - const addFeature = () => { - if (!newFeature.name.trim() || !newFeature.description.trim()) { - toast.error('Please fill in name and description') + const handleAddFeature = () => { + if (!formData.title?.trim() || !formData.description?.trim()) { + toast.error('Please fill in title and description') return } - const feature: RoadmapFeature = { - id: `custom-${Date.now()}`, - name: newFeature.name, - description: newFeature.description, - category: newFeature.category, - priority: newFeature.priority, - completed: false, - estimatedDate: newFeature.estimatedDate || undefined, - notes: newFeature.notes || undefined + const feature: ProductFeature = { + id: `feat-${Date.now()}`, + title: formData.title, + description: formData.description, + category: formData.category || 'core', + status: formData.status || 'not-started', + priority: formData.priority || 'medium', + owner: formData.owner || 'Unassigned', + release: formData.release || releasesList[0], + startDate: formData.startDate || '', + endDate: formData.endDate || '', + progress: formData.progress || 0, + dependencies: formData.dependencies || [], + tags: formData.tags || [], + effort: formData.effort || 3, + value: formData.value || 3, + notes: formData.notes } setFeatures((current) => [...(current || []), feature]) setIsAddDialogOpen(false) - setNewFeature({ - name: '', - description: '', - category: 'strategy-cards', - priority: 'medium', - estimatedDate: '', - notes: '' - }) + resetForm() toast.success('Feature added to roadmap!') } - const updateFeatureNotes = (featureId: string, notes: string) => { + const handleUpdateFeature = () => { + if (!editingFeature) return + setFeatures((current) => - (current || []).map(f => - f.id === featureId ? { ...f, notes } : f + (current || []).map((f) => + f.id === editingFeature.id + ? { ...editingFeature, ...formData } + : f ) ) + setIsAddDialogOpen(false) + resetForm() + toast.success('Feature updated!') } - const filteredFeatures = (features || []).filter(f => { - if (filterPriority !== 'all' && f.priority !== filterPriority) return false - if (filterStatus === 'completed' && !f.completed) return false - if (filterStatus === 'in-progress' && f.completed) return false - return true - }) + const handleDeleteFeature = (id: string) => { + setFeatures((current) => (current || []).filter((f) => f.id !== id)) + toast.success('Feature deleted') + } - const categorizedFeatures = selectedCategory === 'all' - ? Object.keys(categoryConfig).map(cat => ({ - category: cat as keyof typeof categoryConfig, - features: filteredFeatures.filter(f => f.category === cat) - })) - : [{ - category: selectedCategory as keyof typeof categoryConfig, - features: filteredFeatures.filter(f => f.category === selectedCategory) - }] + const handleEditFeature = (feature: ProductFeature) => { + setEditingFeature(feature) + setFormData(feature) + setIsAddDialogOpen(true) + } - const totalFeatures = filteredFeatures.length - const completedFeatures = filteredFeatures.filter(f => f.completed).length - const completionPercentage = totalFeatures > 0 ? Math.round((completedFeatures / totalFeatures) * 100) : 0 - - const categoryProgress = Object.keys(categoryConfig).map(cat => { - const categoryFeatures = filteredFeatures.filter(f => f.category === cat) - const completed = categoryFeatures.filter(f => f.completed).length - const total = categoryFeatures.length - return { - category: cat as keyof typeof categoryConfig, - completed, - total, - percentage: total > 0 ? Math.round((completed / total) * 100) : 0 + const handleAddRelease = () => { + if (!newRelease.trim()) { + toast.error('Please enter a release name') + return } - }) + + setReleases((current) => [...(current || []), newRelease]) + setIsReleaseDialogOpen(false) + setNewRelease('') + toast.success('Release added!') + } + + const filteredFeatures = useMemo(() => { + return (features || []).filter((f) => { + if (selectedRelease !== 'all' && f.release !== selectedRelease) return false + if (filterCategory !== 'all' && f.category !== filterCategory) return false + if (filterStatus !== 'all' && f.status !== filterStatus) return false + return true + }) + }, [features, selectedRelease, filterCategory, filterStatus]) + + const releaseGroups = useMemo(() => { + const groups: Record = {} + + releasesList.forEach((release) => { + groups[release] = filteredFeatures.filter((f) => f.release === release) + }) + + return groups + }, [releasesList, filteredFeatures]) + + const statusGroups = useMemo(() => { + const groups: Record = { + 'not-started': [], + 'on-track': [], + 'at-risk': [], + 'blocked': [], + 'completed': [] + } + + filteredFeatures.forEach((feature) => { + groups[feature.status].push(feature) + }) + + return groups + }, [filteredFeatures]) + + const stats = useMemo(() => { + const total = filteredFeatures.length + const completed = filteredFeatures.filter((f) => f.status === 'completed').length + const inProgress = filteredFeatures.filter((f) => ['on-track', 'at-risk', 'blocked'].includes(f.status)).length + const avgProgress = total > 0 + ? Math.round(filteredFeatures.reduce((sum, f) => sum + f.progress, 0) / total) + : 0 + + return { total, completed, inProgress, avgProgress } + }, [filteredFeatures]) return (
-

StrategyOS Product Roadmap

+

Product Roadmap

- Track development progress of core features and capabilities + Plan and track product development features across releases

- - - Overall Progress - - -
-
- {completedFeatures} of {totalFeatures} - {completionPercentage}% + + + + + + + Add New Release + + Create a new release milestone for your roadmap + + +
+
+ + setNewRelease(e.target.value)} + placeholder="e.g., Q1 2025, v2.0, Sprint 10" + />
-
- - - + + + + + + + { + setIsAddDialogOpen(open) + if (!open) resetForm() + }}> - + - Add Custom Feature + {editingFeature ? 'Edit Feature' : 'Add New Feature'} - Add a new feature to your product roadmap + {editingFeature ? 'Update feature details' : 'Add a new feature to your product roadmap'}
- + setNewFeature({ ...newFeature, name: e.target.value })} - placeholder="e.g., Advanced Analytics Dashboard" + id="title" + value={formData.title} + onChange={(e) => setFormData({ ...formData, title: e.target.value })} + placeholder="e.g., User Authentication System" />
- +