Complete JSX Component Suite: AI Video Analysis Platform (Part 1)
Package: Complete stakeholder communication components
Technology: React 18 + Tailwind CSS + Recharts
Purpose: Internal & external education, sales, marketing, engineering
Component Index
Part 1 (This File):
- Executive Dashboard - C-suite KPI overview
- Technical Architecture Explorer - Interactive system diagram
- Customer Journey Visualizer - UX walkthrough
Part 2 (Next File): 4. Competitive Comparison Matrix 5. Development Roadmap Timeline 6. Cost Breakdown Analyzer 7. Feature Showcase Carousel 8. Integration Hub 9. Success Stories Gallery
Installation & Setup
# Install dependencies
npm install recharts lucide-react
# Or with yarn
yarn add recharts lucide-react
# Tailwind CSS required (assumes already H.P.009-CONFIGured)
1. Executive Dashboard Component
Purpose: C-suite overview with real-time KPIs, revenue projections, market segmentation
Audience: Executives, Board Members, Investors
Features: Revenue growth chart, customer acquisition, market breakdown, strategic initiatives
import React, { useState } from 'react';
import { LineChart, Line, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { TrendingUp, DollarSign, Users, Target, Clock, CheckCircle } from 'lucide-react';
const ExecutiveDashboard = () => {
// Revenue projections over 3 years
const revenueData = [
{ quarter: 'Q1 2026', arr: 0.5, newCustomers: 5, totalCustomers: 5 },
{ quarter: 'Q2 2026', arr: 1.2, newCustomers: 8, totalCustomers: 13 },
{ quarter: 'Q3 2026', arr: 2.1, newCustomers: 10, totalCustomers: 23 },
{ quarter: 'Q4 2026', arr: 3.7, newCustomers: 12, totalCustomers: 35 },
{ quarter: 'Q1 2027', arr: 4.8, newCustomers: 15, totalCustomers: 50 },
{ quarter: 'Q2 2027', arr: 6.2, newCustomers: 18, totalCustomers: 68 },
{ quarter: 'Q3 2027', arr: 7.8, newCustomers: 20, totalCustomers: 88 },
{ quarter: 'Q4 2027', arr: 9.6, newCustomers: 22, totalCustomers: 110 },
{ quarter: 'Q1 2028', arr: 11.5, newCustomers: 25, totalCustomers: 135 },
{ quarter: 'Q2 2028', arr: 13.2, newCustomers: 28, totalCustomers: 163 },
{ quarter: 'Q3 2028', arr: 14.6, newCustomers: 30, totalCustomers: 193 },
{ quarter: 'Q4 2028', arr: 15.0, newCustomers: 7, totalCustomers: 200 }
];
// Market segments
const marketData = [
{ name: 'L&D', value: 45, revenue: 6.75, color: '#4A90E2' },
{ name: 'Market Research', value: 30, revenue: 4.5, color: '#7ED321' },
{ name: 'Legal Tech', value: 15, revenue: 2.25, color: '#F5A623' },
{ name: 'Customer Success', value: 10, revenue: 1.5, color: '#BD10E0' }
];
// Key metrics
const kpis = [
{ label: 'ARR', value: '$15.0M', change: '+56%', trend: 'up', icon: DollarSign, color: 'green' },
{ label: 'Active Customers', value: '200', change: '+185', trend: 'up', icon: Users, color: 'blue' },
{ label: 'Gross Margin', value: '73%', change: '+3%', trend: 'up', icon: TrendingUp, color: 'purple' },
{ label: 'NPS Score', value: '68', change: '+12', trend: 'up', icon: Target, color: 'orange' },
{ label: 'Avg Payback', value: '11 days', change: '-2 days', trend: 'up', icon: Clock, color: 'teal' },
{ label: 'Success Rate', value: '97%', change: '+2%', trend: 'up', icon: CheckCircle, color: 'indigo' }
];
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-8">
<div className="mb-8">
<h1 className="text-4xl font-bold text-gray-900 mb-2">Executive Dashboard</h1>
<p className="text-gray-600">AI-Powered Video Analysis Platform - Strategic Overview</p>
</div>
{/* KPI Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
{kpis.map((kpi, index) => {
const Icon = kpi.icon;
return (
<div key={index} className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
<div className="flex items-center justify-between mb-2">
<Icon className={`w-8 h-8 text-${kpi.color}-500`} />
<span className={`text-sm font-medium ${kpi.trend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
{kpi.change}
</span>
</div>
<div className="text-3xl font-bold text-gray-900 mb-1">{kpi.value}</div>
<div className="text-sm text-gray-600">{kpi.label}</div>
</div>
);
})}
</div>
{/* Revenue Growth Chart */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<div className="bg-white rounded-xl shadow-lg p-6">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Revenue Growth Trajectory</h2>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={revenueData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="quarter" />
<YAxis label={{ value: 'ARR ($M)', angle: -90, position: 'insideLeft' }} />
<Tooltip formatter={(value) => `$${value}M`} />
<Legend />
<Line type="monotone" dataKey="arr" stroke="#4A90E2" strokeWidth={3} name="Annual Recurring Revenue" dot={{ fill: '#4A90E2', r: 6 }} />
</LineChart>
</ResponsiveContainer>
<div className="mt-4 p-4 bg-blue-50 rounded-lg">
<div className="text-sm text-blue-900">
<strong>Target:</strong> $15M ARR by Q4 2028 | <strong>Current:</strong> On track (104% of plan)
</div>
</div>
</div>
{/* Customer Growth Chart */}
<div className="bg-white rounded-xl shadow-lg p-6">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Customer Growth</h2>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={revenueData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="quarter" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="newCustomers" fill="#7ED321" name="New Customers" />
<Bar dataKey="totalCustomers" fill="#4A90E2" name="Total Customers" />
</BarChart>
</ResponsiveContainer>
<div className="mt-4 p-4 bg-green-50 rounded-lg">
<div className="text-sm text-green-900">
<strong>Churn Rate:</strong> 8% annually (industry avg: 15%) | <strong>LTV/CAC:</strong> 5.8x
</div>
</div>
</div>
</div>
{/* Market Segmentation & Strategic Initiatives */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<div className="bg-white rounded-xl shadow-lg p-6">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Revenue by Market Segment</h2>
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie data={marketData} cx="50%" cy="50%" labelLine={false} label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`} outerRadius={100} dataKey="value">
{marketData.map((entry, index) => <Cell key={`cell-${index}`} fill={entry.color} />)}
</Pie>
<Tooltip formatter={(value, name, props) => [`$${props.payload.revenue}M (${value}%)`, props.payload.name]} />
</PieChart>
</ResponsiveContainer>
<div className="mt-4 space-y-2">
{marketData.map((segment, index) => (
<div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded">
<div className="flex items-center gap-3">
<div className="w-4 h-4 rounded" style={{ backgroundColor: segment.color }}></div>
<span className="font-medium">{segment.name}</span>
</div>
<div className="text-right">
<div className="font-bold">${segment.revenue}M</div>
<div className="text-sm text-gray-600">{segment.value}%</div>
</div>
</div>
))}
</div>
</div>
{/* Strategic Initiatives */}
<div className="bg-white rounded-xl shadow-lg p-6">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Strategic Initiatives (2026)</h2>
<div className="space-y-4">
<div className="border-l-4 border-green-500 pl-4">
<div className="flex items-center justify-between mb-2">
<h3 className="font-bold text-lg">Pilot Program</h3>
<span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium">On Track</span>
</div>
<p className="text-gray-600 text-sm mb-2">5 pilot customers, 80% conversion to paid</p>
<div className="flex items-center gap-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div className="bg-green-500 h-2 rounded-full" style={{ width: '80%' }}></div>
</div>
<span className="text-sm font-medium">80%</span>
</div>
</div>
<div className="border-l-4 border-blue-500 pl-4">
<div className="flex items-center justify-between mb-2">
<h3 className="font-bold text-lg">Product Development</h3>
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">In Progress</span>
</div>
<p className="text-gray-600 text-sm mb-2">MVP launch + Phase 2 features (multi-language, SSIM)</p>
<div className="flex items-center gap-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div className="bg-blue-500 h-2 rounded-full" style={{ width: '65%' }}></div>
</div>
<span className="text-sm font-medium">65%</span>
</div>
</div>
<div className="border-l-4 border-purple-500 pl-4">
<div className="flex items-center justify-between mb-2">
<h3 className="font-bold text-lg">Partner Channel</h3>
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">Planning</span>
</div>
<p className="text-gray-600 text-sm mb-2">Accenture, Deloitte partnerships for enterprise sales</p>
<div className="flex items-center gap-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div className="bg-purple-500 h-2 rounded-full" style={{ width: '30%' }}></div>
</div>
<span className="text-sm font-medium">30%</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ExecutiveDashboard;
2. Technical Architecture Explorer
Purpose: Interactive exploration of system components with code examples
Audience: Engineers, Solutions Architects, Technical Decision Makers
Features: Layer selection, expandable components, code snippets, dependency tracking
import React, { useState } from 'react';
import { Server, Database, Cloud, Code, Cpu } from 'lucide-react';
const TechnicalArchitectureExplorer = () => {
const [selectedLayer, setSelectedLayer] = useState('processing');
const [expandedComponent, setExpandedComponent] = useState(null);
const architectureLayers = {
frontend: {
name: 'Frontend Layer',
icon: Code,
color: 'blue',
components: [
{
id: 'react-app',
name: 'React Application',
tech: 'React 18 + Tailwind CSS',
description: 'SPA with dashboard, job submission, status tracking',
code: `import React from 'react';
function Dashboard() {
return (
<div>
<JobSubmissionForm />
<JobStatusList />
</div>
);
}`
}
]
},
processing: {
name: 'Processing Layer',
icon: Cpu,
color: 'purple',
components: [
{
id: 'frame-extractor',
name: 'Frame Extractor',
tech: 'OpenCV + pHash deduplication',
description: 'Multi-strategy frame extraction with content deduplication',
strategies: ['Scene change', 'Slide detection', 'Fixed interval', 'Text density'],
deduplication: 'pHash + SSIM validation (43% reduction)',
code: `import cv2
import imagehash
def extract_unique_frames(video_path):
frames = []
seen_hashes = {}
# Multi-strategy extraction
all_frames = (
extract_scene_changes(video_path) +
extract_slides(video_path)
)
# Deduplicate with pHash
for frame in all_frames:
phash = imagehash.phash(frame)
if not any(phash - h <= 5
for h in seen_hashes.values()):
frames.append(frame)
seen_hashes[frame.id] = phash
return frames`
}
]
}
};
const currentLayer = architectureLayers[selectedLayer];
return (
<div className="min-h-screen bg-gray-50 p-8">
<div className="max-w-7xl mx-auto">
<h1 className="text-4xl font-bold text-gray-900 mb-2">Technical Architecture Explorer</h1>
<p className="text-gray-600 mb-8">Interactive guide to system components</p>
{/* Layer Selector */}
<div className="flex gap-4 mb-8">
{Object.entries(architectureLayers).map(([key, layer]) => {
const Icon = layer.icon;
return (
<button
key={key}
onClick={() => setSelectedLayer(key)}
className={`flex items-center gap-3 px-6 py-4 rounded-lg font-medium ${
selectedLayer === key
? `bg-${layer.color}-500 text-white shadow-lg`
: 'bg-white text-gray-700 hover:bg-gray-100'
}`}
>
<Icon className="w-5 h-5" />
{layer.name}
</button>
);
})}
</div>
{/* Component List */}
{currentLayer.components.map((component) => (
<div key={component.id} className="bg-white rounded-xl shadow-lg mb-4">
<div onClick={() => setExpandedComponent(expandedComponent === component.id ? null : component.id)} className="p-6 cursor-pointer">
<h3 className="text-xl font-bold mb-2">{component.name}</h3>
<p className="text-gray-600">{component.description}</p>
</div>
{expandedComponent === component.id && (
<div className="px-6 pb-6 border-t">
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg mt-4">
<code>{component.code}</code>
</pre>
</div>
)}
</div>
))}
</div>
</div>
);
};
export default TechnicalArchitectureExplorer;
3. Customer Journey Visualizer
Purpose: Step-by-step walkthrough of user experience
Audience: Product teams, UX designers, Sales demos
Features: Interactive timeline, animated simulation, detailed step breakdown
import React, { useState } from 'react';
import { Upload, Zap, Eye, FileText, CheckCircle, Clock } from 'lucide-react';
const CustomerJourneyVisualizer = () => {
const [activeStep, setActiveStep] = useState(0);
const journeySteps = [
{
id: 0,
title: 'Upload Video',
icon: Upload,
description: 'Provide YouTube URL or upload video file',
time: '5 seconds',
details: {
inputs: ['YouTube URL', 'Video file (MP4, AVI, MOV)'],
validations: ['Duration < 2 hours', 'Valid format']
}
},
{
id: 1,
title: 'Processing',
icon: Zap,
description: 'System begins automated analysis',
time: '2-5 minutes',
details: {
stages: ['Downloading video (30s)', 'Extracting audio (15s)', 'Transcribing (2min)']
}
},
{
id: 2,
title: 'AI Analysis',
icon: Eye,
description: 'Claude Vision analyzes visual content',
time: '3-8 minutes',
details: {
operations: ['Analyzing 85 unique frames', 'Extracting text from slides']
}
},
{
id: 3,
title: 'Synthesis',
icon: FileText,
description: 'Multi-agent AI generates insights',
time: '1-3 minutes',
details: {
H.P.001-AGENTS: ['Topic Identifier', 'Key Moment Extractor', 'Correlation Agent', 'Synthesis Agent']
}
},
{
id: 4,
title: 'Results Ready',
icon: CheckCircle,
description: 'Complete analysis available',
time: 'Instant',
details: {
outputs: ['Markdown report', 'Topics with timestamps', 'Extracted slides', 'Full transcript']
}
}
];
const currentStep = journeySteps[activeStep];
const StepIcon = currentStep.icon;
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-8">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<h1 className="text-5xl font-bold mb-4">Customer Journey</h1>
<p className="text-xl text-gray-600">From video upload to insights in minutes</p>
</div>
{/* Timeline */}
<div className="flex items-center justify-between mb-12">
{journeySteps.map((step, index) => {
const Icon = step.icon;
const isActive = index === activeStep;
const isComplete = index < activeStep;
return (
<React.Fragment key={step.id}>
<div onClick={() => setActiveStep(index)} className="flex flex-col items-center cursor-pointer">
<div className={`w-16 h-16 rounded-full flex items-center justify-center mb-2 ${
isActive ? 'bg-blue-600 text-white ring-4 ring-blue-200' :
isComplete ? 'bg-green-500 text-white' :
'bg-gray-200 text-gray-500'
}`}>
{isComplete ? <CheckCircle className="w-8 h-8" /> : <Icon className="w-8 h-8" />}
</div>
<div className="text-sm font-medium">{step.title}</div>
<div className="text-xs text-gray-500 flex items-center gap-1">
<Clock className="w-3 h-3" />
{step.time}
</div>
</div>
{index < journeySteps.length - 1 && (
<div className="flex-1 h-1 mx-2">
<div className={`h-full rounded ${isComplete ? 'bg-green-500' : 'bg-gray-300'}`}></div>
</div>
)}
</React.Fragment>
);
})}
</div>
{/* Step Details */}
<div className="bg-white rounded-xl shadow-2xl overflow-hidden">
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 p-8 text-white">
<div className="flex items-center gap-4 mb-4">
<div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
<StepIcon className="w-10 h-10" />
</div>
<div>
<div className="text-sm opacity-90">Step {activeStep + 1} of {journeySteps.length}</div>
<h2 className="text-3xl font-bold">{currentStep.title}</h2>
<p className="text-lg opacity-90 mt-2">{currentStep.description}</p>
</div>
</div>
</div>
<div className="p-8">
{/* Dynamic Details Rendering */}
{currentStep.details.inputs && (
<div className="mb-6">
<h4 className="font-bold mb-3">Accepted Inputs</h4>
<div className="grid grid-cols-3 gap-3">
{currentStep.details.inputs.map((input, i) => (
<div key={i} className="p-3 bg-blue-50 rounded-lg">
{input}
</div>
))}
</div>
</div>
)}
{currentStep.details.stages && (
<div className="mb-6">
<h4 className="font-bold mb-3">Processing Stages</h4>
{currentStep.details.stages.map((stage, i) => (
<div key={i} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg mb-2">
<div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center">
{i + 1}
</div>
<div>{stage}</div>
</div>
))}
</div>
)}
{/* Navigation */}
<div className="flex justify-between mt-8 pt-6 border-t">
<button
onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
disabled={activeStep === 0}
className="px-6 py-3 bg-gray-200 rounded-lg disabled:opacity-50"
>
← Previous
</button>
<button
onClick={() => setActiveStep(Math.min(journeySteps.length - 1, activeStep + 1))}
disabled={activeStep === journeySteps.length - 1}
className="px-6 py-3 bg-blue-600 text-white rounded-lg disabled:opacity-50"
>
Next →
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default CustomerJourneyVisualizer;
Usage Guide
Installation
npm install react recharts lucide-react tailwindcss
Import Components
import ExecutiveDashboard from './components/ExecutiveDashboard';
import TechnicalArchitectureExplorer from './components/TechnicalArchitectureExplorer';
import CustomerJourneyVisualizer from './components/CustomerJourneyVisualizer';
function App() {
return (
<div>
<ExecutiveDashboard />
<TechnicalArchitectureExplorer />
<CustomerJourneyVisualizer />
</div>
);
}
Customization
Colors: Update Tailwind classes throughout
Data: Modify data arrays in component state
Branding: Add logo images and update color schemes
Next: Part 2 with 6 additional components (Competitive Comparison, Roadmap, Cost Analyzer, Feature Showcase, Integration Hub, Success Stories)