import React, { useState, useRef, useEffect } from 'react';
import {
AlertTriangle, TrendingUp, Users, Target, Zap, Database, GitBranch, Shield,
DollarSign, Calendar, CheckCircle, Clock, AlertCircle, XCircle, ChevronDown,
ChevronRight, Menu, X, Home, BarChart3, Lightbulb, Wrench, Map, UserCheck,
FileText, ArrowRight, Activity, Layers, Settings, Award, TrendingDown, Package,
Briefcase, MapPin, Phone, Mail, Building, BookOpen, Calculator, Scale, Leaf,
Network, PieChart, LineChart, Grid, Info, ExternalLink, Play, Pause, RotateCcw,
Gauge, Navigation, Compass, Cpu, Box, Crosshair, Binary, RefreshCw, Star,
Gem, Crown, TrendingUp as Trend, ArrowUpRight, Sparkles, Eye, MousePointer,
ChevronLeft, Circle, Diamond, Hexagon, Triangle, Square
} from 'lucide-react';
// =============================================================================
// NATIONAL GRID BRAND COLORS - ENHANCED PALETTE
// =============================================================================
const colors = {
// Primary Navy Gradient
navy: '#0A1628',
navyMid: '#152238',
navyLight: '#1B2B5B',
// Accent Colors
cyan: '#00A3E0',
cyanLight: '#4FC3F7',
cyanDark: '#0288D1',
teal: '#00B5AD',
green: '#22C55E',
greenLight: '#4ADE80',
orange: '#FF6B35',
orangeLight: '#FF8A5B',
yellow: '#FFC107',
gold: '#FFD700',
red: '#EF4444',
purple: '#8B5CF6',
// Neutrals
gray50: '#F9FAFB',
gray100: '#F3F4F6',
gray200: '#E5E7EB',
gray300: '#D1D5DB',
gray400: '#9CA3AF',
gray500: '#6B7280',
gray600: '#4B5563',
gray700: '#374151',
gray800: '#1F2937',
gray900: '#111827',
white: '#FFFFFF',
black: '#000000'
};
// =============================================================================
// GRIDVISION OVERVIEW DATA
// =============================================================================
const GRIDVISION_OVERVIEW = {
title: "GridVision",
tagline: "Where Strategy Meets Execution",
mission: "AI-powered decision support for maintenance optimization at the intersection of strategic planning and operational reality",
core_problem: {
headline: "The 25% Problem",
stat: "25%",
stat_label: "Current plan adherence",
target: "75%",
target_label: "A2A target",
description: `Year-ahead maintenance plans are developed 12-18 months in advance. But operational
reality shifts constantly--storms, hot joints, equipment delays, contractor constraints, and
evolving priorities mean that what was planned rarely matches what can be delivered.`,
insight: `When disruptions hit, planners must reprioritize dozens of work orders in
capacity-constrained outage windows--all without a common framework for making defensible decisions.`
},
two_phases: {
phases: [
{
number: "1",
name: "North Star Metric",
subtitle: "Net Capacity Uplift Framework",
timeline: "Q1 2026",
status: "In Progress",
description: `A unified measurement framework that creates organizational alignment by placing
capacity added and capacity safeguarded on a single value scale.`
},
{
number: "2",
name: "Outage Optimization Platform",
subtitle: "GridVision Decision Support",
timeline: "Q2 2026",
status: "Planned",
description: `An AI-powered platform that operationalizes the North Star metric, enabling
real-time work prioritization during capacity-constrained outages.`
}
]
}
};
// =============================================================================
// NORTH STAR METRIC - COMPREHENSIVE CONTENT
// =============================================================================
const NORTH_STAR_CONTENT = {
hero: {
title: "North Star Metric",
subtitle: "Net Capacity Uplift",
tagline: "A unified framework for measuring network value delivery",
essence: `Establishes parity between new connections and maintenance on a single value scale--
creating balance between network growth and investments in reliability, while making outages
a valuable commodity.`
},
strategic_imperative: {
title: "Strategic Imperative",
subtitle: "Mission-critical to NGET's RIIO-T3 commitments",
commitments: [
{ metric: "2×", label: "Network Capacity", description: "Double network capacity to enable Clean Power 2030" },
{ metric: "99.999998%", label: "Reliability Target", description: "Maintain reliability despite unprecedented construction activity" },
{ metric: "50%", label: "Emissions Reduction", description: "Achieve significant emissions reduction across operations" },
{ metric: ">8,000", label: "Acres BNG", description: "Biodiversity net gain commitment" },
{ metric: "40%", label: "Outage Reduction", description: "Reduce outages while executing program" },
{ metric: "£24.2B", label: "Program Value", description: "Total RIIO-T3 investment program" }
]
},
executive_priority: {
title: "Executive Priority",
sponsor: "Alice Delahunty",
sponsor_role: "Divisional President, NGET",
mandate: `Maximize value from every constrained outage window--treating outage time like "gold"
and the strategic asset it is.`,
principle: {
title: "Core Principle",
content: `You can only manage what you measure. Without unified metrics, maintenance and growth
compete on unequal footing, resulting in suboptimal decisions and regulatory scrutiny.`
}
},
outages_as_gold: {
title: "Outages as Gold",
subtitle: "Transforming constrained windows into strategic opportunities",
narrative: `Every planned outage represents a precious, non-renewable resource. When equipment is
de-energized, there's a finite window to accomplish work. Today, these windows are often
underutilized--work gets cancelled, priorities shift, and value leaks away.
The North Star Metric reframes outages as strategic assets to be optimized, not administrative
burdens to be managed. By measuring the value delivered per unit of outage burden, we create
incentives to maximize every hour of constrained access.`,
transformation: [
{ before: "Outages as scheduling problem", after: "Outages as value delivery opportunity" },
{ before: "Work cancelled = problem avoided", after: "Work cancelled = value lost" },
{ before: "Fill the window", after: "Maximize the value" },
{ before: "Complete the tasks", after: "Deliver the outcomes" }
]
},
harmonizing: {
title: "Harmonizing Planning & Implementation",
subtitle: "Bridging the gap between strategy and tactics",
narrative: `Today, planning and implementation operate in parallel universes. Year-ahead plans
are built on strategic priorities and idealized resource assumptions. Day-to-day execution
responds to ground-level realities and immediate pressures. The two rarely align.
The North Star Metric creates a shared language that flows from boardroom to field:
• Strategic plans express targets in Net Capacity Uplift terms
• Outage schedules are optimized to maximize uplift delivery
• Real-time decisions during outages use the same value framework
• Performance is tracked using consistent, unified metrics
This creates a through-line from RIIO-T3 commitments to individual work orders, ensuring that
tactical decisions aggregate to strategic outcomes.`,
layers: [
{ level: "Strategic", description: "RIIO-T3 commitments, annual targets, portfolio optimization" },
{ level: "Planning", description: "Year-ahead schedules, outage allocation, resource planning" },
{ level: "Operational", description: "Real-time prioritization, work package optimization" },
{ level: "Execution", description: "Field decisions, task sequencing, performance capture" }
]
},
problem_solved: {
title: "The Problem It Solves",
problems: [
{
problem: "Maintenance Deprioritization",
description: "Maintenance was systematically deprioritized against customer connections with no mechanism to restore balance.",
icon: "TrendingDown"
},
{
problem: "No Common Language",
description: "No way to compare capacity loss prevention vs. capacity addition--apples and oranges in every prioritization discussion.",
icon: "Scale"
},
{
problem: "Plan Adherence Failure",
description: "75% of year-ahead outage plans not adhered to--strategic intent dissolved into reactive firefighting.",
icon: "AlertTriangle"
},
{
problem: "Regulatory Rejection",
description: "Ofgem rejected 38% of engineering justifications for inadequate multi-criteria analysis.",
icon: "XCircle"
}
],
impact_statement: "Impact: Deferred maintenance, unplanned outages, wasted outage windows, and regulatory penalties."
},
expected_impact: {
title: "Expected Impact",
categories: [
{
category: "Organizational",
icon: "Building",
color: colors.cyan,
impacts: [
{ title: "Single Decision Language", description: "Eliminates priority debates with unified value framework" },
{ title: "KPI & Compensation Linkage", description: "Enables performance metrics tied to value delivery" },
{ title: "Portfolio Optimization", description: "Demonstrates multi-criteria analysis Ofgem demands" }
]
},
{
category: "Operational",
icon: "Wrench",
color: colors.green,
impacts: [
{ title: "Real-Time Prioritization", description: "GridVision enables live work prioritization during outages" },
{ title: "Plan Adherence", description: "Increases adherence from 25% toward 75% A2A target" },
{ title: "Strategic Outages", description: "Transforms every outage hour into a strategic opportunity" }
]
},
{
category: "Strategic",
icon: "Target",
color: colors.purple,
impacts: [
{ title: "RIIO-T3 Compliance", description: "Measurable load/non-load trade-off documentation" },
{ title: "Board Transparency", description: "Clear visibility on capacity delivery at executive level" },
{ title: "Cultural Shift", description: "Maintenance reframed as capacity safeguarding" }
]
}
]
},
implementation: {
title: "Implementation Approach",
principle: {
title: "Core Principle",
content: "Must be in-house developed--core business infrastructure cannot be vendor-owned."
},
foundation: {
title: "Foundation",
items: [
{ item: "Value Framework Integration", description: "Integrates with NARM 2.0 value framework for regulatory alignment" },
{ item: "Technical Bridge", description: "Sean Marden (IT&D) bridges the Value Framework and GridVision data science" },
{ item: "Quantification Framework", description: "Balances accuracy with operational scalability" }
]
},
execution: {
title: "Execution Model",
roles: [
{ role: "NGP", responsibility: "Product management and cross-functional facilitation" },
{ role: "NGET", responsibility: "Methodology ownership and business socialization" },
{ role: "Validation", responsibility: "GridVision maintenance prioritization prototype" }
]
},
positioning: "Facilitator and catalyst for internal capability--not external vendor. Ensures sustainable adoption."
},
ngp_value: {
title: "NGP Strategic Value",
subtitle: "Why This Matters",
points: [
{ title: "Presidential Sponsorship", description: "Direct mandate via Alice Delahunty and Kate Davis (Strategy Lead)" },
{ title: "Organizational Reach", description: "Touches all NGET business units through unified metrics" },
{ title: "GridVision Enablement", description: "Fills the prioritization logic gap that makes Phase 2 possible" },
{ title: "Credibility Through Delivery", description: "Mission-critical contribution establishes NGP as strategic partner" }
]
}
};
// =============================================================================
// POVI TECHNICAL CONTENT
// =============================================================================
const POVI_CONTENT = {
title: "Planned Outage Value Index (POVI)",
subtitle: "The quantitative heart of the North Star Metric",
tagline: "Prioritize work inside an outage + track value delivery over time",
core_concept: {
title: "Core Concept: Value Density",
tagline: "How much good we get from an activity for the disruption it causes",
formula: "Value Density = Activity Value ÷ Burden Required",
analogy: '"Bang for your buck"',
numerator: { name: "Activity Value", description: "Total system benefit from performing activity during the outage" },
denominator: { name: "Burden Required", description: "The time, risk, and system impact incurred from the activity" }
},
formula: {
title: "The POVI Formula",
equation: "Activity Value = wᴿ×R + wᶠ×F + wᴱ×E + wᴺ×N",
description: "Weighted combination of four value dimensions",
components: [
{
symbol: "R",
name: "Reliability & Risk Reduction",
color: colors.cyan,
description: "Load loss prevention, cascading failure risk, safety improvements",
formula: "R = (P_fail,before - P_fail,after) × S_consequence × H_persistence",
example: "Replacing aging CT: reduces failure 15%→2%, 500MW load, factor 8, 10yr = 10.4"
},
{
symbol: "F",
name: "Financial & Market Value",
color: colors.green,
description: "Capacity added (GW), reduced curtailment risk, regulatory exposure",
formula: "F = (F_GW_added - F_curtailment - F_regulatory) × H_persistence"
},
{
symbol: "E",
name: "Environmental & Sustainability",
color: colors.teal,
description: "SF6 removal, PCB elimination, spill risk, biodiversity",
formula: "E = (E_sf6 + E_pcb + E_other) × H_persistence"
},
{
symbol: "N",
name: "Network Readiness",
color: colors.purple,
description: "Capacity headroom, flexibility enabled, future connections",
formula: "N = θ₁×Capacity_Headroom + θ₂×Flexibility_Enabled",
note: "Does not persist--represents enabling value"
}
]
},
optimization: {
title: "Optimization Engine",
objective: "Maximize total realized value within fixed outage capacity",
formula: "Maximize Σ(Value_Density_i × x_i) subject to Σ(B_i × x_i) ≤ B_outage",
process: [
"Calculate Activity Value for each candidate using POVI formula",
"Calculate Value Density = Activity Value ÷ Burden Required",
"Rank activities by Value Density (highest first)",
"Select in rank order until outage burden budget exhausted"
]
},
kpi: {
title: "Outage Value Index KPI",
formula: "POVI = Realized Outage Value ÷ Total Outage Burden",
burden: {
formula: "Burden = T_outage × GW_at_risk × κ_system",
components: [
{ var: "T_outage", desc: "Duration in hours" },
{ var: "GW_at_risk", desc: "Critical load exposed" },
{ var: "κ_system", desc: "Stress multiplier (1-2)" }
]
}
},
scoring_methods: [
{ name: "Linear", formula: "V = wᴿR + wᶠF + wᴱE + wᴺN", desc: "Simple, transparent weighted sum" },
{ name: "Quadrature", formula: "V = √(wᴿR² + wᶠF² + wᴱE² + wᴺN²)", desc: "Rewards balanced improvements" },
{ name: "Cobb-Douglas", formula: "V = R^α × F^β × E^γ × N^δ", desc: "Diminishing returns, penalizes zeros" },
{ name: "CES", formula: "V = [Σwᵢxᵢᵖ]^(ν/ρ)", desc: "Most flexible, tunable parameters" }
],
rating_matrix: {
title: "3×3 Rating Matrix",
rows: ["Minor", "Moderate", "Major"],
cols: ["Small", "Contributes", "Significant"],
values: [[1, 2, 3], [2, 4, 6], [3, 6, 9]]
}
};
// =============================================================================
// PHASE 2: OUTAGE OPTIMIZATION PLATFORM
// =============================================================================
const PLATFORM_CONTENT = {
title: "Outage Optimization Platform",
subtitle: "Decision Support for Capacity-Constrained Outages",
tagline: "The critical point where strategic plans meet ground-level implementation",
narrative: `GridVision operationalizes the North Star metric. While Phase 1 defines how to measure
value, Phase 2 provides the platform that applies this framework in real-time decision-making.
When outages need reprioritization, planners gather information from multiple sources--asset health,
resource availability, work orders, constraints--and manually synthesize a prioritized list.
GridVision consolidates this into a single interface with automatic POVI scoring and optimal
work package recommendations.`,
capabilities: [
{ title: "Information Consolidation", description: "Unified view of work orders, asset health, resources, and constraints", icon: "Database" },
{ title: "Automatic POVI Scoring", description: "Real-time value density calculation for every candidate activity", icon: "Calculator" },
{ title: "Optimal Recommendations", description: "AI-powered work package optimization within capacity constraints", icon: "Target" },
{ title: "Trade-off Visualization", description: "Clear view of what you gain and give up with each decision", icon: "Scale" },
{ title: "Scenario Analysis", description: "What-if modeling for duration, resource, and constraint changes", icon: "GitBranch" },
{ title: "Audit Trail", description: "Full traceability for every decision--regulatory defensibility built-in", icon: "FileText" }
],
workflow: [
{ step: 1, title: "Select Outage", description: "Choose the window needing reprioritization" },
{ step: 2, title: "Review Scores", description: "See automatic POVI scoring for all activities" },
{ step: 3, title: "View Recommendation", description: "Platform suggests optimal work package" },
{ step: 4, title: "Explore Trade-offs", description: "Understand included vs excluded activities" },
{ step: 5, title: "Run Scenarios", description: "Test alternative constraints and assumptions" },
{ step: 6, title: "Commit & Document", description: "Finalize with full audit trail" }
],
before_after: {
before: [
"Hours gathering context from multiple systems",
"Ad-hoc prioritization based on judgment",
"Implicit, invisible trade-offs",
"Hard to defend decisions to regulators",
"No consistent value tracking"
],
after: [
"Information consolidated in single interface",
"Systematic value-based prioritization",
"Explicit, quantified trade-offs",
"Full audit trail for defensibility",
"Every outage generates POVI score"
]
},
integrations: [
{ source: "E-NARMS", description: "Year-ahead plan, work orders" },
{ source: "Asset Health Systems", description: "Condition indices, failure probability" },
{ source: "Resource Management", description: "Contractor availability, SAP capacity" },
{ source: "Outage Management", description: "Windows, duration, GW at risk" },
{ source: "CopperLeaf", description: "Investment planning context" },
{ source: "NESO Interface", description: "System constraints, approvals" }
]
};
// =============================================================================
// SUCCESS METRICS
// =============================================================================
const METRICS_CONTENT = {
primary: {
title: "Primary Metric: Plan Adherence",
definition: "% of year-ahead planned work completed in planned window",
baseline: "~25%",
target: "~40%",
ultimate: "75%",
hypothesis: "GridVision improves adherence by improving triage, collating context, and enabling focus on work-to-be-done.",
secondary: [
"% slipped to later windows",
"% cancelled late",
"Schedule variance",
"% blocked at start"
]
},
opex: {
title: "OPEX & Value Reporting",
signals: [
"Overtime hours/cost",
"Expedite events",
"Crew inefficiency from blocked jobs",
"Planned vs unplanned mix"
],
conversion: "£ moved from late to on-time × reactive premium factor (2-3×)"
},
effectiveness: {
title: "Planning Effectiveness (Self-Reported)",
dimensions: [
"Time spent triaging",
"Ease finding context",
"Confidence plan executable",
"Confidence priorities right",
"Reduction in firefighting"
]
}
};
// =============================================================================
// PROJECT DETAILS
// =============================================================================
const PROJECT_CONTENT = {
timeline: [
{
phase: "Q1 2026",
name: "Phase 1: North Star Metric",
status: "In Progress",
milestones: [
"Finalize POVI methodology with SME validation",
"Calibrate weights across R, F, E, N dimensions",
"Pilot scoring on sample outages",
"Establish governance for weight adjustments"
]
},
{
phase: "Q2 2026",
name: "Phase 2: Outage Optimization Platform",
status: "Planned",
milestones: [
"Define product requirements with pilot users",
"Build prioritization tool for intra-outage work",
"Integrate with E-NARMS and asset health systems",
"Pilot with selected regions/substations"
]
},
{
phase: "H2 2026",
name: "Scale & Enhance",
status: "Future",
milestones: [
"Roll out to additional regions",
"Enhance optimization engine",
"Add advanced scenario analysis",
"Continuous improvement feedback loop"
]
}
],
stakeholders: {
executive: { name: "Alice Delahunty", role: "Divisional President, NGET" },
strategy: { name: "Kate Davis", role: "Strategy Lead" },
technical: { name: "Sean Marden", role: "IT&D Technical Lead" },
product: { name: "Matt Golden", role: "Entrepreneur in Residence, NGP" }
},
discovery: "60+ conversations across NGET--from substation engineers to senior leadership"
};
// =============================================================================
// UI COMPONENTS
// =============================================================================
// Animated Counter
const AnimatedCounter = ({ value, suffix = '', duration = 2000 }) => {
const [count, setCount] = useState(0);
const numValue = parseFloat(value.replace(/[^0-9.]/g, ''));
useEffect(() => {
let start = 0;
const end = numValue;
const increment = end / (duration / 16);
const timer = setInterval(() => {
start += increment;
if (start >= end) {
setCount(end);
clearInterval(timer);
} else {
setCount(start);
}
}, 16);
return () => clearInterval(timer);
}, [numValue, duration]);
const displayValue = value.includes('.') ? count.toFixed(value.split('.')[1]?.replace(/[^0-9]/g, '').length || 0) : Math.floor(count);
const prefix = value.match(/^[^0-9]*/)?.[0] || '';
const originalSuffix = value.match(/[^0-9.]*$/)?.[0] || '';
return {prefix}{displayValue}{originalSuffix}{suffix};
};
// Tooltip
const Tooltip = ({ children, content }) => {
const [show, setShow] = useState(false);
return (
);
};
// Modal
const Modal = ({ isOpen, onClose, title, subtitle, children, size = 'lg' }) => {
if (!isOpen) return null;
const sizeClasses = { sm: 'max-w-md', md: 'max-w-xl', lg: 'max-w-3xl', xl: 'max-w-5xl', full: 'max-w-7xl' };
return (
);
};
// Accordion
const Accordion = ({ title, children, defaultOpen = false, icon: Icon, accentColor = colors.cyan }) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
return (
);
};
// Stat Card with hover effect
const StatCard = ({ stat, label, description, color = colors.cyan, icon: Icon }) => (
{Icon && (
);
// ==========================================================================
// SECTION: TIMELINE
// ==========================================================================
const renderTimeline = () => (
{/* Timeline */}
);
// ==========================================================================
// RENDER SECTION
// ==========================================================================
const renderSection = () => {
switch (activeSection) {
case 'overview': return renderOverview();
case 'challenge': return renderChallenge();
case 'northstar': return renderNorthStar();
case 'povi': return renderPOVI();
case 'platform': return renderPlatform();
case 'metrics': return renderMetrics();
case 'timeline': return renderTimeline();
default: return renderOverview();
}
};
// ==========================================================================
// MAIN RENDER
// ==========================================================================
return (
setShow(true)} onMouseLeave={() => setShow(false)}>
{children}
{show && (
{content}
)}
e.stopPropagation()}>
{title}
{subtitle &&{subtitle}
}
{children}
{children}
{stat}
{label}
{description && {description}
}
{/* Hero */}
);
// ==========================================================================
// SECTION: THE CHALLENGE
// ==========================================================================
const renderChallenge = () => (
{/* Animated background elements */}
{/* Grid pattern overlay */}
{/* The 25% Problem - Visual Impact */}
{GRIDVISION_OVERVIEW.title}
{GRIDVISION_OVERVIEW.tagline}
{GRIDVISION_OVERVIEW.mission}
{GRIDVISION_OVERVIEW.core_problem.headline}
{GRIDVISION_OVERVIEW.core_problem.description}
{GRIDVISION_OVERVIEW.core_problem.insight}
25%
Current Plan Adherence
Where we are today
75%
A2A Target
Where we need to be
Two Phases, One Vision
GridVision delivers through two interconnected phases that build organizational capability
{GRIDVISION_OVERVIEW.two_phases.phases.map((phase, i) => (
setActiveSection(i === 0 ? 'northstar' : 'platform')}
className="group bg-white rounded-2xl shadow-xl overflow-hidden cursor-pointer hover:shadow-2xl transition-all duration-300 hover:-translate-y-2"
>
))}
{phase.number}
{phase.status}
{phase.name}
{phase.subtitle}
{phase.description}
{/* Hero */}
{/* Narrative */}
{/* Problems Grid */}
);
// ==========================================================================
// SECTION: NORTH STAR METRIC
// ==========================================================================
const renderNorthStar = () => (
The Challenge GridVision Solves
When Plans Meet Reality
Every year, NGET develops a comprehensive maintenance plan 12-18 months in advance. This plan represents careful analysis of asset health, regulatory requirements, customer commitments, and network needs.
But by the time outages arrive, the world has changed.
Storms damage equipment. Hot joints appear unexpectedly. Contractor availability shifts. Long-lead-time parts don't arrive. Priorities evolve. The carefully constructed plan no longer reflects reality.
Symptoms of the Problem
{NORTH_STAR_CONTENT.problem_solved.problems.map((item, i) => (
))}
{getIcon(item.icon, "w-7 h-7", { color: colors.orange })}
{item.problem}
{item.description}
{NORTH_STAR_CONTENT.problem_solved.impact_statement}
{/* Hero */}
{/* Harmonizing Planning & Implementation */}
{/* Expected Impact */}
{/* Implementation */}
{/* NGP Strategic Value */}
{/* Link to POVI Technical */}
);
// ==========================================================================
// SECTION: POVI TECHNICAL
// ==========================================================================
const renderPOVI = () => (
{NORTH_STAR_CONTENT.hero.title}
{NORTH_STAR_CONTENT.hero.subtitle}
{NORTH_STAR_CONTENT.hero.tagline}
{NORTH_STAR_CONTENT.hero.essence}
{NORTH_STAR_CONTENT.strategic_imperative.title}
{NORTH_STAR_CONTENT.strategic_imperative.subtitle}
{NORTH_STAR_CONTENT.strategic_imperative.commitments.map((item, i) => (
))}
{item.metric}
{item.label}
{item.description}
{NORTH_STAR_CONTENT.executive_priority.title}
{NORTH_STAR_CONTENT.executive_priority.sponsor}, {NORTH_STAR_CONTENT.executive_priority.sponsor_role}
"{NORTH_STAR_CONTENT.executive_priority.mandate}"
{NORTH_STAR_CONTENT.executive_priority.principle.title}
{NORTH_STAR_CONTENT.executive_priority.principle.content}
{NORTH_STAR_CONTENT.outages_as_gold.subtitle}
{NORTH_STAR_CONTENT.outages_as_gold.narrative.split('\n\n').map((para, i) => (
{para.trim()}
))}The Transformation
{NORTH_STAR_CONTENT.outages_as_gold.transformation.map((item, i) => (
{item.before}
{item.after}
{NORTH_STAR_CONTENT.harmonizing.subtitle}
{NORTH_STAR_CONTENT.harmonizing.narrative.split('\n\n').map((para, i) => (
{para.trim()}
))}Value Flow Across Layers
{NORTH_STAR_CONTENT.harmonizing.layers.map((layer, i) => (
))}
{i + 1}
{layer.level}:
{layer.description}
{NORTH_STAR_CONTENT.expected_impact.title}
{NORTH_STAR_CONTENT.expected_impact.categories.map((cat, i) => (
))}
{getIcon(cat.icon, "w-6 h-6", { color: colors.white })}
{cat.category}
{cat.impacts.map((impact, j) => (
))}
{impact.title}
{impact.description}
{NORTH_STAR_CONTENT.implementation.principle.title}: {NORTH_STAR_CONTENT.implementation.principle.content}
{NORTH_STAR_CONTENT.implementation.foundation.title}
{NORTH_STAR_CONTENT.implementation.foundation.items.map((item, i) => (
{item.item}
))}
{item.description}
{NORTH_STAR_CONTENT.implementation.execution.title}
{NORTH_STAR_CONTENT.implementation.execution.roles.map((item, i) => (
{item.role}
))}
{item.responsibility}
{NORTH_STAR_CONTENT.implementation.positioning}
{NORTH_STAR_CONTENT.ngp_value.title}
{NORTH_STAR_CONTENT.ngp_value.subtitle}
{NORTH_STAR_CONTENT.ngp_value.points.map((point, i) => (
))}
{point.title}
{point.description}
{/* Header */}
{/* KPI */}
{/* Scoring Methods */}
{/* Rating Matrix */}
);
// ==========================================================================
// SECTION: PLATFORM
// ==========================================================================
const renderPlatform = () => (
{POVI_CONTENT.title}
{POVI_CONTENT.subtitle}
{POVI_CONTENT.tagline}
{POVI_CONTENT.core_concept.title}
{POVI_CONTENT.core_concept.tagline}
{POVI_CONTENT.core_concept.formula}
{POVI_CONTENT.core_concept.analogy}
{POVI_CONTENT.core_concept.numerator.name}
{POVI_CONTENT.core_concept.numerator.description}
{POVI_CONTENT.core_concept.denominator.name}
{POVI_CONTENT.core_concept.denominator.description}
{POVI_CONTENT.formula.title}
{POVI_CONTENT.formula.equation}
{POVI_CONTENT.formula.description}
{POVI_CONTENT.formula.components.map((comp, i) => (
{comp.example && (
))}
{comp.symbol}
{comp.name}
{comp.description}
{comp.formula}
Example: {comp.example}
)} {comp.note && (Note: {comp.note}
)}{POVI_CONTENT.optimization.objective}
{POVI_CONTENT.optimization.formula}
-
{POVI_CONTENT.optimization.process.map((step, i) => (
- {i + 1} {step} ))}
{POVI_CONTENT.kpi.formula}
Outage Burden Calculation
{POVI_CONTENT.kpi.burden.formula}
{POVI_CONTENT.kpi.burden.components.map((c, i) => (
{c.var}
))}
{c.desc}
{POVI_CONTENT.scoring_methods.map((m, i) => (
))}
{m.name}
{m.formula}
{m.desc}
Pragmatic scoring using expert input on Impact (rows) vs Importance (columns)
| Impact / Importance | {POVI_CONTENT.rating_matrix.cols.map((c, i) => ({c} | ))}
|---|---|
| {r} | {POVI_CONTENT.rating_matrix.values[i].map((v, j) => (= 6 ? colors.green : v >= 3 ? colors.cyan : colors.gray500 }}>{v} | ))}
{/* Hero */}
{/* Integrations */}
);
// ==========================================================================
// SECTION: METRICS
// ==========================================================================
const renderMetrics = () => (
{PLATFORM_CONTENT.title}
{PLATFORM_CONTENT.subtitle}
{PLATFORM_CONTENT.tagline}
{PLATFORM_CONTENT.narrative.split('\n\n').map((para, i) => (
{para.trim()}
))}Platform Capabilities
{PLATFORM_CONTENT.capabilities.map((cap, i) => (
))}
{getIcon(cap.icon, "w-7 h-7", { color: colors.cyan })}
{cap.title}
{cap.description}
How Planners Use GridVision
{PLATFORM_CONTENT.workflow.map((step, i) => (
))}
{step.step}
{step.title}
{step.description}
-
{PLATFORM_CONTENT.before_after.before.map((item, i) => (
- {item} ))}
-
{PLATFORM_CONTENT.before_after.after.map((item, i) => (
-
{item}
))}
{PLATFORM_CONTENT.integrations.map((int, i) => (
))}
{int.source}
{int.description}
How We Measure Success
GridVision Success Metrics
{METRICS_CONTENT.primary.title}
{METRICS_CONTENT.primary.definition}
Hypothesis: {METRICS_CONTENT.primary.hypothesis}
Operational Signals
-
{METRICS_CONTENT.opex.signals.map((s, i) => (
-
{s}
))}
Conversion: {METRICS_CONTENT.opex.conversion}
Monthly pulse survey (1-5 scale)
-
{METRICS_CONTENT.effectiveness.dimensions.map((d, i) => (
-
{d}
))}
Project Timeline & Team
Roadmap, stakeholders, and governance
{PROJECT_CONTENT.timeline.map((phase, i) => {
const statusColors = { 'In Progress': colors.cyan, 'Planned': colors.orange, 'Future': colors.gray500 };
return (
);
})}
{/* Stakeholders */}
{phase.phase}
{phase.status}
{phase.name}
-
{phase.milestones.map((m, j) => (
-
{m}
))}
Key Stakeholders
{Object.entries(PROJECT_CONTENT.stakeholders).map(([key, person], i) => (
))}
{person.name.split(' ').map(n => n[0]).join('')}
{person.name}
{person.role}
{PROJECT_CONTENT.discovery}
{/* Progress Bar */}
{/* Navigation */}
{/* Main Content */}
{renderSection()}
{/* Footer */}
);
};
export default GridVisionPortal;