feat(frontend): Add BusinessReport component for 6-section €60 report
- Create BusinessReport.tsx with 6 sections: 1. Executive Summary (health score, rating, momentum) 2. Risk Scorecard (indicators with colors/trends) 3. Critical Issues (evidence, solutions, timelines) 4. Strengths to Protect (quotes, leverage actions) 5. Action Matrix (effort/impact quadrants) 6. 90-Day Tracking (KPI targets table) - Update types.ts with new interfaces: - SynthesisV2 for new report format - LegacySynthesis for backwards compatibility - Type guard isSynthesisV2() for runtime detection - Update ReportTab to auto-detect synthesis version - Update AnalystReport, ReviewIQDashboard, StoryView for backwards compatibility with union type Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
587
web/components/reviewiq/AnalystReport.tsx
Normal file
587
web/components/reviewiq/AnalystReport.tsx
Normal file
@@ -0,0 +1,587 @@
|
||||
'use client';
|
||||
|
||||
import { Star, TrendingUp, TrendingDown, Minus, AlertTriangle, CheckCircle, Quote, ArrowRight, Zap, Clock, Target, Users, MessageSquare, Trophy, Megaphone } from 'lucide-react';
|
||||
import type {
|
||||
LegacySynthesis,
|
||||
SentimentDataPoint,
|
||||
URTDomainPoint,
|
||||
TimelinePoint,
|
||||
OverviewStats,
|
||||
ReportAction,
|
||||
ReportEvidence,
|
||||
ReportStrength,
|
||||
} from './types';
|
||||
|
||||
// Domain config
|
||||
const DOMAINS: Record<string, { emoji: string; label: string }> = {
|
||||
P: { emoji: '👥', label: 'Staff & Service' },
|
||||
V: { emoji: '💰', label: 'Pricing & Value' },
|
||||
J: { emoji: '⏱️', label: 'Speed & Process' },
|
||||
O: { emoji: '🛍️', label: 'Product Quality' },
|
||||
A: { emoji: '📍', label: 'Availability' },
|
||||
E: { emoji: '🏢', label: 'Facilities' },
|
||||
R: { emoji: '🤝', label: 'Trust & Ethics' },
|
||||
};
|
||||
|
||||
interface AnalystReportProps {
|
||||
synthesis: LegacySynthesis;
|
||||
overview: OverviewStats;
|
||||
sentiment: SentimentDataPoint[];
|
||||
domains: URTDomainPoint[];
|
||||
timeline: TimelinePoint[];
|
||||
}
|
||||
|
||||
/**
|
||||
* The Analyst Report - A consultant-quality business narrative.
|
||||
* Replaces widget soup with a flowing, story-driven report.
|
||||
*/
|
||||
export function AnalystReport({
|
||||
synthesis,
|
||||
overview,
|
||||
sentiment,
|
||||
domains,
|
||||
timeline
|
||||
}: AnalystReportProps) {
|
||||
const positivePct = sentiment.find(s => s.valence === 'V+')?.percentage || 0;
|
||||
const negativePct = sentiment.find(s => s.valence === 'V-')?.percentage || 0;
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-8 pb-12">
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
THE VERDICT
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
<section className="bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl p-8 text-white">
|
||||
{/* Rating Display */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-5xl font-bold">
|
||||
{synthesis.current_rating.toFixed(1)}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className={`w-5 h-5 ${
|
||||
star <= Math.round(synthesis.current_rating)
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'text-slate-600'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-slate-400 text-sm mt-1">
|
||||
{overview.total_reviews.toLocaleString()} reviews
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rating Potential */}
|
||||
{synthesis.rating_gap > 0 && (
|
||||
<div className="text-right">
|
||||
<div className="flex items-center gap-2 text-emerald-400">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
<span className="text-2xl font-bold">
|
||||
+{synthesis.rating_gap.toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-slate-400 text-sm">
|
||||
potential if fixed
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<h1 className="text-2xl md:text-3xl font-bold mb-3 leading-tight">
|
||||
{synthesis.headline}
|
||||
</h1>
|
||||
|
||||
{/* Verdict */}
|
||||
<p className="text-slate-300 text-lg mb-4">
|
||||
{synthesis.verdict}
|
||||
</p>
|
||||
|
||||
{/* Momentum Indicator */}
|
||||
{synthesis.momentum && synthesis.momentum_detail && (
|
||||
<MomentumBadge momentum={synthesis.momentum} detail={synthesis.momentum_detail} />
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
THE STORY
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
<section className="bg-white rounded-2xl p-8 shadow-sm border border-slate-200">
|
||||
<h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wide mb-4">
|
||||
Executive Summary
|
||||
</h2>
|
||||
<div className="prose prose-slate max-w-none">
|
||||
{synthesis.narrative.split('\n\n').map((paragraph, i) => (
|
||||
<p key={i} className="text-slate-700 leading-relaxed mb-4 last:mb-0">
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
THE DIAGNOSIS
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
{synthesis.primary_problem && (
|
||||
<section className="bg-red-50 rounded-2xl p-8 border border-red-100">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-red-100 rounded-xl">
|
||||
<AlertTriangle className="w-6 h-6 text-red-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-sm font-semibold text-red-800 uppercase tracking-wide mb-2">
|
||||
Primary Issue
|
||||
</h2>
|
||||
<p className="text-xl font-semibold text-red-900 mb-2">
|
||||
{synthesis.primary_problem}
|
||||
</p>
|
||||
{synthesis.root_cause && (
|
||||
<p className="text-red-700">
|
||||
<span className="font-medium">Root cause:</span> {synthesis.root_cause}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
THE STRENGTHS (What to Protect)
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
{synthesis.strengths && synthesis.strengths.length > 0 && (
|
||||
<StrengthsSection strengths={synthesis.strengths} />
|
||||
)}
|
||||
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
THE EVIDENCE
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
{synthesis.evidence.length > 0 && (
|
||||
<section className="bg-white rounded-2xl p-8 shadow-sm border border-slate-200">
|
||||
<h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wide mb-6">
|
||||
What Customers Are Saying
|
||||
</h2>
|
||||
<div className="grid gap-4">
|
||||
{synthesis.evidence.map((item, i) => (
|
||||
<EvidenceCard key={i} evidence={item} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
THE DATA (Visual Support)
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
<section className="bg-white rounded-2xl p-8 shadow-sm border border-slate-200">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Sentiment */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900 mb-1">
|
||||
{synthesis.sentiment_headline || 'Sentiment Breakdown'}
|
||||
</h3>
|
||||
<div className="mt-4">
|
||||
<SentimentBar positive={positivePct} negative={negativePct} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900 mb-1">
|
||||
{synthesis.category_headline || 'Category Performance'}
|
||||
</h3>
|
||||
<div className="mt-4 space-y-2">
|
||||
{domains.slice(0, 4).map((d) => (
|
||||
<DomainRow key={d.domain} domain={d} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
THE ACTION PLAN (Enhanced)
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
{synthesis.actions.length > 0 && (
|
||||
<ActionPlanSection actions={synthesis.actions} ratingGap={synthesis.rating_gap} />
|
||||
)}
|
||||
|
||||
{/* ══════════════════════════════════════════════════════════════════
|
||||
FOOTER
|
||||
══════════════════════════════════════════════════════════════════ */}
|
||||
<footer className="text-center text-sm text-slate-400 pt-4">
|
||||
Report generated {new Date(synthesis.generated_at).toLocaleDateString()}
|
||||
{' · '}{synthesis.review_count} reviews · {synthesis.insight_count} insights extracted
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Momentum Badge
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function MomentumBadge({ momentum, detail }: { momentum: string; detail: string }) {
|
||||
const config = {
|
||||
improving: {
|
||||
icon: <TrendingUp className="w-4 h-4" />,
|
||||
bg: 'bg-emerald-500/20',
|
||||
text: 'text-emerald-300',
|
||||
label: 'Improving',
|
||||
},
|
||||
declining: {
|
||||
icon: <TrendingDown className="w-4 h-4" />,
|
||||
bg: 'bg-red-500/20',
|
||||
text: 'text-red-300',
|
||||
label: 'Declining',
|
||||
},
|
||||
stable: {
|
||||
icon: <Minus className="w-4 h-4" />,
|
||||
bg: 'bg-slate-500/20',
|
||||
text: 'text-slate-300',
|
||||
label: 'Stable',
|
||||
},
|
||||
};
|
||||
|
||||
const c = config[momentum as keyof typeof config] || config.stable;
|
||||
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full ${c.bg} ${c.text}`}>
|
||||
{c.icon}
|
||||
<span className="text-sm font-medium">{c.label}</span>
|
||||
<span className="text-sm opacity-75">· {detail}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Strengths Section
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function StrengthsSection({ strengths }: { strengths: ReportStrength[] }) {
|
||||
return (
|
||||
<section className="bg-emerald-50 rounded-2xl p-8 border border-emerald-100">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-3 bg-emerald-100 rounded-xl">
|
||||
<Trophy className="w-6 h-6 text-emerald-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-emerald-800 uppercase tracking-wide">
|
||||
Your Strengths
|
||||
</h2>
|
||||
<p className="text-emerald-600 text-sm">Protect and leverage these competitive advantages</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{strengths.map((strength, i) => (
|
||||
<StrengthCard key={i} strength={strength} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StrengthCard({ strength }: { strength: ReportStrength }) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl p-4 border border-emerald-200">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="font-semibold text-slate-900">{strength.title}</h3>
|
||||
<span className="px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full text-sm font-medium">
|
||||
{strength.mention_count} mentions
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
{strength.quote && (
|
||||
<div className="flex items-start gap-2 mb-3">
|
||||
<Quote className="w-4 h-4 text-emerald-400 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm text-slate-600 italic">"{strength.quote}"</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Marketing Angle */}
|
||||
{strength.marketing_angle && (
|
||||
<div className="flex items-start gap-2 bg-amber-50 rounded-lg px-3 py-2">
|
||||
<Megaphone className="w-4 h-4 text-amber-600 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm text-amber-800">
|
||||
<span className="font-medium">Marketing:</span> {strength.marketing_angle}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Action Plan Section (Enhanced)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function ActionPlanSection({ actions, ratingGap }: { actions: ReportAction[]; ratingGap: number }) {
|
||||
// Group actions by effort/timeline
|
||||
const quickWins = actions.filter(a => a.effort === 'quick_win');
|
||||
const moderate = actions.filter(a => a.effort === 'moderate');
|
||||
const strategic = actions.filter(a => a.effort === 'strategic');
|
||||
|
||||
// Calculate totals
|
||||
const totalImpact = actions.reduce((sum, a) => sum + (a.impact_stars || 0), 0);
|
||||
const totalComplaints = actions.reduce((sum, a) => sum + (a.complaint_count || 0), 0);
|
||||
|
||||
return (
|
||||
<section className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
{/* Header with Impact Summary */}
|
||||
<div className="bg-gradient-to-r from-slate-900 to-slate-800 p-6 text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wide mb-1">
|
||||
Action Plan
|
||||
</h2>
|
||||
<p className="text-2xl font-bold">
|
||||
{actions.length} actions to gain +{totalImpact.toFixed(1)}★
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center gap-2 text-slate-400 text-sm">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
<span>Addresses {totalComplaints} complaints</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Impact Progress Bar */}
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="text-slate-400">Potential Impact</span>
|
||||
<div className="flex-1 h-2 bg-slate-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full transition-all"
|
||||
style={{ width: `${Math.min(100, (totalImpact / Math.max(ratingGap, 1)) * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-emerald-400 font-medium">+{totalImpact.toFixed(1)}★</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Groups */}
|
||||
<div className="p-6 space-y-8">
|
||||
{/* Quick Wins */}
|
||||
{quickWins.length > 0 && (
|
||||
<ActionGroup
|
||||
title="Quick Wins"
|
||||
subtitle="Implement this week"
|
||||
icon={<Zap className="w-5 h-5" />}
|
||||
iconBg="bg-amber-100 text-amber-600"
|
||||
actions={quickWins}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* This Quarter */}
|
||||
{moderate.length > 0 && (
|
||||
<ActionGroup
|
||||
title="This Quarter"
|
||||
subtitle="Plan and execute over 1-3 months"
|
||||
icon={<Clock className="w-5 h-5" />}
|
||||
iconBg="bg-blue-100 text-blue-600"
|
||||
actions={moderate}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Strategic */}
|
||||
{strategic.length > 0 && (
|
||||
<ActionGroup
|
||||
title="Strategic Initiatives"
|
||||
subtitle="Long-term investments"
|
||||
icon={<Target className="w-5 h-5" />}
|
||||
iconBg="bg-purple-100 text-purple-600"
|
||||
actions={strategic}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionGroup({
|
||||
title,
|
||||
subtitle,
|
||||
icon,
|
||||
iconBg,
|
||||
actions,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
icon: React.ReactNode;
|
||||
iconBg: string;
|
||||
actions: ReportAction[];
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
{/* Group Header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className={`p-2 rounded-lg ${iconBg}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900">{title}</h3>
|
||||
<p className="text-sm text-slate-500">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3 pl-12">
|
||||
{actions.map((action, i) => (
|
||||
<EnhancedActionCard key={i} action={action} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EnhancedActionCard({ action }: { action: ReportAction }) {
|
||||
const priorityConfig = {
|
||||
critical: { bg: 'bg-red-50 border-red-200', badge: 'bg-red-100 text-red-700', label: 'Critical' },
|
||||
high: { bg: 'bg-orange-50 border-orange-200', badge: 'bg-orange-100 text-orange-700', label: 'High' },
|
||||
medium: { bg: 'bg-slate-50 border-slate-200', badge: 'bg-slate-100 text-slate-700', label: 'Medium' },
|
||||
};
|
||||
|
||||
const config = priorityConfig[action.priority as keyof typeof priorityConfig] || priorityConfig.medium;
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-xl border ${config.bg} transition-all hover:shadow-md`}>
|
||||
{/* Action Title */}
|
||||
<p className="font-semibold text-slate-900 mb-3">
|
||||
{action.action}
|
||||
</p>
|
||||
|
||||
{/* Meta Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3">
|
||||
{/* Priority */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${config.badge}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Owner */}
|
||||
<div className="flex items-center gap-1.5 text-sm text-slate-600">
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
<span>{action.owner}</span>
|
||||
</div>
|
||||
|
||||
{/* Impact */}
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
<TrendingUp className="w-3.5 h-3.5 text-emerald-500" />
|
||||
<span className="text-emerald-600 font-medium">{action.impact}</span>
|
||||
</div>
|
||||
|
||||
{/* Complaints */}
|
||||
{action.complaint_count > 0 && (
|
||||
<div className="flex items-center gap-1.5 text-sm text-slate-600">
|
||||
<MessageSquare className="w-3.5 h-3.5" />
|
||||
<span>{action.complaint_count} complaints</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Evidence Quote */}
|
||||
{action.evidence && (
|
||||
<div className="flex items-start gap-2 text-sm text-slate-500 italic border-l-2 border-slate-300 pl-3 mb-3">
|
||||
<span>"{action.evidence}"</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Metric */}
|
||||
{action.success_metric && (
|
||||
<div className="flex items-center gap-2 text-sm bg-emerald-50 text-emerald-700 rounded-lg px-3 py-2">
|
||||
<CheckCircle className="w-4 h-4 flex-shrink-0" />
|
||||
<span><span className="font-medium">Success:</span> {action.success_metric}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Sub-components
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function EvidenceCard({ evidence }: { evidence: ReportEvidence }) {
|
||||
const isDamaging = evidence.sentiment === 'damaging';
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-xl border-l-4 ${
|
||||
isDamaging
|
||||
? 'bg-red-50 border-red-400'
|
||||
: 'bg-emerald-50 border-emerald-400'
|
||||
}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<Quote className={`w-5 h-5 mt-0.5 flex-shrink-0 ${
|
||||
isDamaging ? 'text-red-400' : 'text-emerald-400'
|
||||
}`} />
|
||||
<div>
|
||||
<p className={`font-medium ${isDamaging ? 'text-red-900' : 'text-emerald-900'}`}>
|
||||
"{evidence.quote}"
|
||||
</p>
|
||||
<p className={`text-sm mt-1 ${isDamaging ? 'text-red-600' : 'text-emerald-600'}`}>
|
||||
{evidence.context}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SentimentBar({ positive, negative }: { positive: number; negative: number }) {
|
||||
const neutral = Math.max(0, 100 - positive - negative);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="h-4 rounded-full overflow-hidden flex bg-slate-100">
|
||||
<div
|
||||
className="bg-emerald-500 transition-all"
|
||||
style={{ width: `${positive}%` }}
|
||||
/>
|
||||
<div
|
||||
className="bg-slate-300 transition-all"
|
||||
style={{ width: `${neutral}%` }}
|
||||
/>
|
||||
<div
|
||||
className="bg-red-500 transition-all"
|
||||
style={{ width: `${negative}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between mt-2 text-sm">
|
||||
<span className="text-emerald-600 font-medium">{positive.toFixed(0)}% positive</span>
|
||||
<span className="text-red-600 font-medium">{negative.toFixed(0)}% negative</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DomainRow({ domain }: { domain: URTDomainPoint }) {
|
||||
const config = DOMAINS[domain.domain] || { emoji: '📊', label: domain.domain_name };
|
||||
const total = domain.positive_count + domain.negative_count;
|
||||
const negativePct = total > 0 ? (domain.negative_count / total) * 100 : 0;
|
||||
|
||||
const status = negativePct > 40 ? 'critical' : negativePct > 25 ? 'warning' : 'good';
|
||||
const statusColors = {
|
||||
critical: 'text-red-600',
|
||||
warning: 'text-orange-600',
|
||||
good: 'text-emerald-600',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-lg">{config.emoji}</span>
|
||||
<span className="flex-1 text-sm text-slate-700">{config.label}</span>
|
||||
<span className={`text-sm font-medium ${statusColors[status]}`}>
|
||||
{negativePct.toFixed(0)}% issues
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
649
web/components/reviewiq/BusinessReport.tsx
Normal file
649
web/components/reviewiq/BusinessReport.tsx
Normal file
@@ -0,0 +1,649 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Star,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Minus,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Quote,
|
||||
Zap,
|
||||
Clock,
|
||||
Target,
|
||||
Users,
|
||||
Trophy,
|
||||
Megaphone,
|
||||
AlertCircle,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
Shield,
|
||||
Activity,
|
||||
BarChart3,
|
||||
} from 'lucide-react';
|
||||
import type {
|
||||
SynthesisV2,
|
||||
ExecutiveSummary,
|
||||
RiskScorecard,
|
||||
RiskIndicator,
|
||||
CriticalIssue,
|
||||
StrengthToProtect,
|
||||
ActionMatrixItem,
|
||||
TrackingKPI,
|
||||
} from './types';
|
||||
|
||||
interface BusinessReportProps {
|
||||
synthesis: SynthesisV2;
|
||||
}
|
||||
|
||||
/**
|
||||
* The €60 Business Reputation Report - 6-Section Format
|
||||
* A productized, high-value report for SMB owners.
|
||||
*/
|
||||
export function BusinessReport({ synthesis }: BusinessReportProps) {
|
||||
const { executive_summary, risk_scorecard, critical_issues, strengths, action_matrix, tracking_kpis } = synthesis;
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-8 pb-12">
|
||||
{/* Report Header */}
|
||||
<header className="text-center py-4">
|
||||
<h1 className="text-2xl font-bold text-slate-900">{synthesis.report_title}</h1>
|
||||
<p className="text-slate-500">{synthesis.report_date} · {synthesis.analysis_period}</p>
|
||||
</header>
|
||||
|
||||
{/* Section 1: Executive Summary */}
|
||||
<ExecutiveSummarySection summary={executive_summary} reviewCount={synthesis.review_count} />
|
||||
|
||||
{/* Section 2: Risk Scorecard */}
|
||||
<RiskScorecardSection scorecard={risk_scorecard} />
|
||||
|
||||
{/* Section 3: Critical Issues */}
|
||||
{critical_issues.length > 0 && (
|
||||
<CriticalIssuesSection issues={critical_issues} />
|
||||
)}
|
||||
|
||||
{/* Section 4: Strengths to Protect */}
|
||||
{strengths.length > 0 && (
|
||||
<StrengthsSection strengths={strengths} />
|
||||
)}
|
||||
|
||||
{/* Section 5: Action Matrix */}
|
||||
{action_matrix.length > 0 && (
|
||||
<ActionMatrixSection actions={action_matrix} />
|
||||
)}
|
||||
|
||||
{/* Section 6: 90-Day Tracking */}
|
||||
{tracking_kpis.length > 0 && (
|
||||
<TrackingSection kpis={tracking_kpis} />
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="text-center text-sm text-slate-400 pt-4 border-t border-slate-200">
|
||||
<p>Report generated {new Date(synthesis.generated_at).toLocaleDateString()}</p>
|
||||
<p>{synthesis.review_count} reviews · {synthesis.insight_count} insights analyzed</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Section 1: Executive Summary
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function ExecutiveSummarySection({ summary, reviewCount }: { summary: ExecutiveSummary; reviewCount: number }) {
|
||||
const healthColor = summary.health_score >= 70 ? 'emerald' : summary.health_score >= 50 ? 'amber' : 'red';
|
||||
|
||||
return (
|
||||
<section className="bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl p-8 text-white">
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
{/* Health Score Gauge */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
<svg className="w-24 h-24 transform -rotate-90">
|
||||
<circle
|
||||
cx="48"
|
||||
cy="48"
|
||||
r="40"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
fill="none"
|
||||
className="text-slate-700"
|
||||
/>
|
||||
<circle
|
||||
cx="48"
|
||||
cy="48"
|
||||
r="40"
|
||||
stroke="currentColor"
|
||||
strokeWidth="8"
|
||||
fill="none"
|
||||
strokeDasharray={`${(summary.health_score / 100) * 251.2} 251.2`}
|
||||
className={`text-${healthColor}-400`}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-2xl font-bold">{summary.health_score}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={`inline-block px-3 py-1 rounded-full text-sm font-medium bg-${healthColor}-500/20 text-${healthColor}-300 mb-2`}>
|
||||
{summary.health_label}
|
||||
</div>
|
||||
<div className="text-slate-400 text-sm">{reviewCount.toLocaleString()} reviews analyzed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rating Display */}
|
||||
<div className="text-right">
|
||||
<div className="flex items-center justify-end gap-2 mb-1">
|
||||
<span className="text-4xl font-bold">{summary.current_rating.toFixed(1)}</span>
|
||||
<div className="flex">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className={`w-5 h-5 ${
|
||||
star <= Math.round(summary.current_rating)
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'text-slate-600'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{summary.rating_gap > 0 && (
|
||||
<div className="flex items-center justify-end gap-2 text-emerald-400">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span className="font-medium">→ {summary.potential_rating.toFixed(1)}★ potential</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* One-liner */}
|
||||
<h2 className="text-xl font-semibold mb-3">{summary.one_liner}</h2>
|
||||
|
||||
{/* Key Insight */}
|
||||
<p className="text-slate-300 mb-4">{summary.key_insight}</p>
|
||||
|
||||
{/* Revenue at Risk + Momentum */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-700">
|
||||
<div className="flex items-center gap-2 text-red-400">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span className="font-medium">{summary.estimated_revenue_at_risk} at risk</span>
|
||||
</div>
|
||||
<MomentumBadge momentum={summary.momentum} detail={summary.momentum_detail} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Section 2: Risk Scorecard
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function RiskScorecardSection({ scorecard }: { scorecard: RiskScorecard }) {
|
||||
const riskColors = {
|
||||
low: 'emerald',
|
||||
medium: 'amber',
|
||||
high: 'orange',
|
||||
critical: 'red',
|
||||
};
|
||||
const riskColor = riskColors[scorecard.overall_risk] || 'amber';
|
||||
|
||||
return (
|
||||
<section className="bg-white rounded-2xl p-8 shadow-sm border border-slate-200">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-slate-100 rounded-xl">
|
||||
<Shield className="w-6 h-6 text-slate-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-900">Risk Scorecard</h2>
|
||||
<p className="text-sm text-slate-500">Health indicators by area</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`px-4 py-2 rounded-full bg-${riskColor}-100 text-${riskColor}-700 font-semibold text-sm uppercase`}>
|
||||
{scorecard.overall_risk} Risk
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Risk Indicators Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
{scorecard.indicators.map((indicator, i) => (
|
||||
<RiskIndicatorCard key={i} indicator={indicator} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Immediate Attention */}
|
||||
{scorecard.immediate_attention && (
|
||||
<div className="flex items-start gap-3 bg-red-50 rounded-xl p-4 border border-red-100">
|
||||
<AlertCircle className="w-5 h-5 text-red-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium text-red-900">Immediate Attention Required</p>
|
||||
<p className="text-sm text-red-700">{scorecard.immediate_attention}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function RiskIndicatorCard({ indicator }: { indicator: RiskIndicator }) {
|
||||
const colorMap = {
|
||||
green: { bg: 'bg-emerald-50', border: 'border-emerald-200', text: 'text-emerald-700', bar: 'bg-emerald-500' },
|
||||
yellow: { bg: 'bg-amber-50', border: 'border-amber-200', text: 'text-amber-700', bar: 'bg-amber-500' },
|
||||
red: { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-700', bar: 'bg-red-500' },
|
||||
};
|
||||
const colors = colorMap[indicator.color] || colorMap.yellow;
|
||||
|
||||
const TrendIcon = indicator.trend === 'improving' ? TrendingUp : indicator.trend === 'declining' ? TrendingDown : Minus;
|
||||
|
||||
return (
|
||||
<div className={`${colors.bg} ${colors.border} border rounded-xl p-4`}>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-slate-700">{indicator.name}</span>
|
||||
<TrendIcon className={`w-4 h-4 ${colors.text}`} />
|
||||
</div>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className={`text-2xl font-bold ${colors.text}`}>{indicator.score}</span>
|
||||
<span className="text-slate-400 text-sm mb-1">/10</span>
|
||||
</div>
|
||||
<div className="mt-2 h-1.5 bg-slate-200 rounded-full overflow-hidden">
|
||||
<div className={`h-full ${colors.bar} rounded-full`} style={{ width: `${indicator.score * 10}%` }} />
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-2">{indicator.complaint_count} complaints</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Section 3: Critical Issues
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function CriticalIssuesSection({ issues }: { issues: CriticalIssue[] }) {
|
||||
return (
|
||||
<section className="bg-white rounded-2xl p-8 shadow-sm border border-slate-200">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-3 bg-red-100 rounded-xl">
|
||||
<AlertTriangle className="w-6 h-6 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-900">Critical Issues</h2>
|
||||
<p className="text-sm text-slate-500">Top problems requiring immediate action</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{issues.map((issue) => (
|
||||
<CriticalIssueCard key={issue.rank} issue={issue} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CriticalIssueCard({ issue }: { issue: CriticalIssue }) {
|
||||
const effortColors = {
|
||||
quick_win: 'bg-emerald-100 text-emerald-700',
|
||||
moderate: 'bg-blue-100 text-blue-700',
|
||||
strategic: 'bg-purple-100 text-purple-700',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-slate-200 rounded-xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="bg-slate-50 px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-8 h-8 rounded-full bg-red-500 text-white flex items-center justify-center font-bold">
|
||||
{issue.rank}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900">{issue.title}</h3>
|
||||
<p className="text-sm text-slate-500">{issue.urt_code} · {issue.complaint_count} complaints</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-red-600 font-semibold">{issue.revenue_impact}</p>
|
||||
<span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${effortColors[issue.effort] || effortColors.moderate}`}>
|
||||
{issue.effort.replace('_', ' ')} · {issue.timeline}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-4 space-y-4">
|
||||
{/* Root Cause */}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500 mb-1">Root Cause</p>
|
||||
<p className="text-slate-700">{issue.root_cause}</p>
|
||||
</div>
|
||||
|
||||
{/* Evidence */}
|
||||
{issue.evidence.length > 0 && (
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500 mb-2">Customer Evidence</p>
|
||||
<div className="space-y-2">
|
||||
{issue.evidence.slice(0, 2).map((quote, i) => (
|
||||
<div key={i} className="flex items-start gap-2 bg-red-50 rounded-lg px-3 py-2">
|
||||
<Quote className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm text-red-800 italic">"{quote}"</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Solution */}
|
||||
<div className="bg-emerald-50 rounded-lg p-4 border border-emerald-100">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium text-emerald-900">Recommended Solution</p>
|
||||
<p className="text-sm text-emerald-700 mt-1">{issue.solution}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Section 4: Strengths to Protect
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function StrengthsSection({ strengths }: { strengths: StrengthToProtect[] }) {
|
||||
return (
|
||||
<section className="bg-emerald-50 rounded-2xl p-8 border border-emerald-100">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-3 bg-emerald-100 rounded-xl">
|
||||
<Trophy className="w-6 h-6 text-emerald-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-emerald-900">Protect Your Strengths</h2>
|
||||
<p className="text-sm text-emerald-600">Competitive advantages to leverage</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{strengths.map((strength, i) => (
|
||||
<StrengthCard key={i} strength={strength} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StrengthCard({ strength }: { strength: StrengthToProtect }) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl p-5 border border-emerald-200">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="font-semibold text-slate-900">{strength.title}</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full text-sm font-medium">
|
||||
{strength.mention_count} mentions
|
||||
</span>
|
||||
<span className="text-emerald-600 font-medium">{strength.percentage.toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quotes */}
|
||||
{strength.top_quotes.length > 0 && (
|
||||
<div className="space-y-2 mb-4">
|
||||
{strength.top_quotes.slice(0, 2).map((quote, i) => (
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<Quote className="w-4 h-4 text-emerald-400 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm text-slate-600 italic">"{quote.slice(0, 100)}{quote.length > 100 ? '...' : ''}"</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risk of Loss */}
|
||||
{strength.risk_of_loss && (
|
||||
<div className="flex items-start gap-2 text-sm text-amber-700 bg-amber-50 rounded-lg px-3 py-2 mb-3">
|
||||
<AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>{strength.risk_of_loss}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leverage Action */}
|
||||
{strength.leverage_action && (
|
||||
<div className="flex items-start gap-2 bg-blue-50 rounded-lg px-3 py-2">
|
||||
<Megaphone className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-sm text-blue-800">
|
||||
<span className="font-medium">Leverage:</span> {strength.leverage_action}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Section 5: Action Matrix
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function ActionMatrixSection({ actions }: { actions: ActionMatrixItem[] }) {
|
||||
const quickWins = actions.filter(a => a.quadrant === 'quick_win');
|
||||
const majorProjects = actions.filter(a => a.quadrant === 'major_project');
|
||||
const others = actions.filter(a => !['quick_win', 'major_project'].includes(a.quadrant));
|
||||
|
||||
return (
|
||||
<section className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-slate-900 to-slate-800 p-6 text-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white/10 rounded-lg">
|
||||
<BarChart3 className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Action Matrix</h2>
|
||||
<p className="text-slate-400 text-sm">{actions.length} prioritized actions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-8">
|
||||
{/* Quick Wins */}
|
||||
{quickWins.length > 0 && (
|
||||
<ActionGroup
|
||||
title="Quick Wins"
|
||||
subtitle="Low effort, high impact - do these first"
|
||||
icon={<Zap className="w-5 h-5" />}
|
||||
iconBg="bg-amber-100 text-amber-600"
|
||||
actions={quickWins}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Major Projects */}
|
||||
{majorProjects.length > 0 && (
|
||||
<ActionGroup
|
||||
title="Major Projects"
|
||||
subtitle="High effort, high impact - plan carefully"
|
||||
icon={<Target className="w-5 h-5" />}
|
||||
iconBg="bg-blue-100 text-blue-600"
|
||||
actions={majorProjects}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Others */}
|
||||
{others.length > 0 && (
|
||||
<ActionGroup
|
||||
title="Other Actions"
|
||||
subtitle="Consider as resources allow"
|
||||
icon={<Clock className="w-5 h-5" />}
|
||||
iconBg="bg-slate-100 text-slate-600"
|
||||
actions={others}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionGroup({
|
||||
title,
|
||||
subtitle,
|
||||
icon,
|
||||
iconBg,
|
||||
actions,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
icon: React.ReactNode;
|
||||
iconBg: string;
|
||||
actions: ActionMatrixItem[];
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className={`p-2 rounded-lg ${iconBg}`}>{icon}</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900">{title}</h3>
|
||||
<p className="text-sm text-slate-500">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3 pl-12">
|
||||
{actions.map((action, i) => (
|
||||
<ActionCard key={i} action={action} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionCard({ action }: { action: ActionMatrixItem }) {
|
||||
return (
|
||||
<div className="bg-slate-50 rounded-xl p-4 border border-slate-200 hover:shadow-md transition-all">
|
||||
<p className="font-medium text-slate-900 mb-3">{action.action}</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3">
|
||||
<div className="flex items-center gap-1.5 text-sm text-slate-600">
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
<span>{action.owner}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-sm text-slate-600">
|
||||
<Calendar className="w-3.5 h-3.5" />
|
||||
<span>{action.deadline}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
<TrendingUp className="w-3.5 h-3.5 text-emerald-500" />
|
||||
<span className="text-emerald-600 font-medium">{action.expected_lift}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-sm text-slate-600">
|
||||
<Activity className="w-3.5 h-3.5" />
|
||||
<span>{action.effort} effort</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{action.success_metric && (
|
||||
<div className="flex items-center gap-2 text-sm bg-emerald-50 text-emerald-700 rounded-lg px-3 py-2">
|
||||
<CheckCircle className="w-4 h-4 flex-shrink-0" />
|
||||
<span><span className="font-medium">Success:</span> {action.success_metric}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Section 6: 90-Day Tracking
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function TrackingSection({ kpis }: { kpis: TrackingKPI[] }) {
|
||||
return (
|
||||
<section className="bg-white rounded-2xl p-8 shadow-sm border border-slate-200">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-3 bg-purple-100 rounded-xl">
|
||||
<Calendar className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-900">90-Day Tracking Framework</h2>
|
||||
<p className="text-sm text-slate-500">Monitor these KPIs monthly</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200">
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-slate-600">Metric</th>
|
||||
<th className="text-center py-3 px-4 text-sm font-semibold text-slate-600">Current</th>
|
||||
<th className="text-center py-3 px-4 text-sm font-semibold text-slate-600">30-Day</th>
|
||||
<th className="text-center py-3 px-4 text-sm font-semibold text-slate-600">60-Day</th>
|
||||
<th className="text-center py-3 px-4 text-sm font-semibold text-slate-600">90-Day</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{kpis.map((kpi, i) => (
|
||||
<tr key={i} className="border-b border-slate-100 last:border-0">
|
||||
<td className="py-4 px-4">
|
||||
<p className="font-medium text-slate-900">{kpi.metric}</p>
|
||||
<p className="text-xs text-slate-500">{kpi.measurement}</p>
|
||||
</td>
|
||||
<td className="text-center py-4 px-4">
|
||||
<span className="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm font-medium">
|
||||
{kpi.current_value}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-4">
|
||||
<span className="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium">
|
||||
{kpi.target_30_day}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-4">
|
||||
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
|
||||
{kpi.target_60_day}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-4">
|
||||
<span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm font-medium">
|
||||
{kpi.target_90_day}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// Shared Components
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function MomentumBadge({ momentum, detail }: { momentum: string; detail: string }) {
|
||||
const config = {
|
||||
improving: {
|
||||
icon: <TrendingUp className="w-4 h-4" />,
|
||||
bg: 'bg-emerald-500/20',
|
||||
text: 'text-emerald-300',
|
||||
label: 'Improving',
|
||||
},
|
||||
declining: {
|
||||
icon: <TrendingDown className="w-4 h-4" />,
|
||||
bg: 'bg-red-500/20',
|
||||
text: 'text-red-300',
|
||||
label: 'Declining',
|
||||
},
|
||||
stable: {
|
||||
icon: <Minus className="w-4 h-4" />,
|
||||
bg: 'bg-slate-500/20',
|
||||
text: 'text-slate-300',
|
||||
label: 'Stable',
|
||||
},
|
||||
};
|
||||
|
||||
const c = config[momentum as keyof typeof config] || config.stable;
|
||||
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full ${c.bg} ${c.text}`}>
|
||||
{c.icon}
|
||||
<span className="text-sm font-medium">{c.label}</span>
|
||||
{detail && <span className="text-sm opacity-75">· {detail}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
web/components/reviewiq/ReportTab.tsx
Normal file
101
web/components/reviewiq/ReportTab.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import { Loader2, FileWarning } from 'lucide-react';
|
||||
import { useReviewIQAnalytics } from '@/hooks/useReviewIQAnalytics';
|
||||
import { AnalystReport } from './AnalystReport';
|
||||
import { BusinessReport } from './BusinessReport';
|
||||
import { isSynthesisV2 } from './types';
|
||||
import type { ReviewIQFilters, LegacySynthesis, SynthesisV2 } from './types';
|
||||
|
||||
interface ReportTabProps {
|
||||
jobId?: string;
|
||||
businessId?: string;
|
||||
}
|
||||
|
||||
// Default filters for Report view - uses 'all' time range for comprehensive analysis
|
||||
const defaultFilters: ReviewIQFilters = {
|
||||
timeRange: 'all',
|
||||
sentiment: [],
|
||||
urtDomain: null,
|
||||
intensity: [],
|
||||
brushRange: null,
|
||||
};
|
||||
|
||||
/**
|
||||
* Report Tab - Wraps report components with data fetching.
|
||||
* Automatically detects report version and renders appropriate component.
|
||||
*/
|
||||
export function ReportTab({ jobId, businessId }: ReportTabProps) {
|
||||
const { data, loading, error } = useReviewIQAnalytics({
|
||||
jobId,
|
||||
businessId,
|
||||
filters: defaultFilters,
|
||||
});
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-indigo-600" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
|
||||
<p className="text-red-700">{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// No data state
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-6 text-center">
|
||||
<p className="text-slate-600">No data available for this report.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// No synthesis - AI report not generated yet
|
||||
if (!data.synthesis) {
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto mt-12">
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-2xl p-8 text-center">
|
||||
<FileWarning className="w-12 h-12 text-amber-500 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-amber-900 mb-2">
|
||||
AI Report Not Generated Yet
|
||||
</h3>
|
||||
<p className="text-amber-700 mb-4">
|
||||
The AI-powered analyst report hasn't been generated for this dataset.
|
||||
Run the pipeline with the "synthesize" stage to generate the report.
|
||||
</p>
|
||||
<div className="text-sm text-amber-600 bg-amber-100 rounded-lg p-3 font-mono">
|
||||
Stage 5: Synthesize → Generates narratives, actions & insights
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render the appropriate report based on synthesis version
|
||||
if (isSynthesisV2(data.synthesis)) {
|
||||
// New 6-section Business Report (v2.0)
|
||||
return <BusinessReport synthesis={data.synthesis} />;
|
||||
}
|
||||
|
||||
// Legacy Analyst Report (v1.x)
|
||||
return (
|
||||
<AnalystReport
|
||||
synthesis={data.synthesis}
|
||||
overview={data.overview}
|
||||
sentiment={data.sentiment.distribution}
|
||||
domains={data.urt.domains}
|
||||
timeline={data.timeline}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportTab;
|
||||
@@ -1,19 +1,30 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { RefreshCw, BarChart3 } from 'lucide-react';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { ReviewIQFilterProvider, useReviewIQFilters } from '@/contexts/ReviewIQFilterContext';
|
||||
import { useReviewIQAnalytics } from '@/hooks/useReviewIQAnalytics';
|
||||
import { FilterBar } from './FilterBar';
|
||||
import { DashboardSkeleton, DashboardError, DashboardEmpty } from './DashboardSkeleton';
|
||||
import { FilterBar } from './FilterBar';
|
||||
import { SentimentPie } from './charts/SentimentPie';
|
||||
import { IntensityHeatmap } from './charts/IntensityHeatmap';
|
||||
import { TimelineChart } from './charts/TimelineChart';
|
||||
import { IssuesTable } from './tables/IssuesTable';
|
||||
import { SpansTable } from './tables/SpansTable';
|
||||
import { ExecutiveSummary } from './insights/ExecutiveSummary';
|
||||
import { OpportunityMatrix } from './insights/OpportunityMatrix';
|
||||
import type { URTDomain } from './types';
|
||||
import { ExplorerView } from './ExplorerView';
|
||||
import type { URTDomain, Synthesis, LegacySynthesis } from './types';
|
||||
import { isSynthesisV2 } from './types';
|
||||
|
||||
// Helper to extract legacy fields from either synthesis format
|
||||
function getLegacyInsight(synthesis: Synthesis | null | undefined, field: keyof LegacySynthesis): string | undefined {
|
||||
if (!synthesis) return undefined;
|
||||
if (isSynthesisV2(synthesis)) {
|
||||
// V2 doesn't have these fields, return undefined
|
||||
return undefined;
|
||||
}
|
||||
return (synthesis as LegacySynthesis)[field] as string | undefined;
|
||||
}
|
||||
|
||||
interface ReviewIQDashboardProps {
|
||||
jobId?: string | null;
|
||||
@@ -22,13 +33,7 @@ interface ReviewIQDashboardProps {
|
||||
|
||||
/**
|
||||
* Inner dashboard component that uses the filter context.
|
||||
*
|
||||
* Streamlined flow (no redundancy):
|
||||
* 1. Hero: Executive Summary (rating, AI insights, #1 problem/strength, top complaints)
|
||||
* 2. Explore: Sentiment + Category Heatmap (side by side)
|
||||
* 3. Action: Opportunity Matrix (what to fix)
|
||||
* 4. Trends: Timeline
|
||||
* 5. Deep Dive: Issues & Spans tables
|
||||
* Shows data exploration view with charts, tables, and trend explorer.
|
||||
*/
|
||||
function ReviewIQDashboardInner({ jobId, businessId }: ReviewIQDashboardProps) {
|
||||
const { filters, setURTDomain } = useReviewIQFilters();
|
||||
@@ -45,9 +50,6 @@ function ReviewIQDashboardInner({ jobId, businessId }: ReviewIQDashboardProps) {
|
||||
spansPageSize: 10,
|
||||
});
|
||||
|
||||
const handleIssuesPageChange = (page: number) => setIssuesPage(page);
|
||||
const handleSpansPageChange = (page: number) => setSpansPage(page);
|
||||
|
||||
// No job selected
|
||||
if (!jobId && !businessId) {
|
||||
return <DashboardEmpty />;
|
||||
@@ -68,106 +70,110 @@ function ReviewIQDashboardInner({ jobId, businessId }: ReviewIQDashboardProps) {
|
||||
return <DashboardEmpty />;
|
||||
}
|
||||
|
||||
// Handle domain click for filtering
|
||||
const handleDomainClick = (domain: URTDomain) => {
|
||||
setURTDomain(filters.urtDomain === domain ? null : domain);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* ═══════════════════════════════════════════════════════════════
|
||||
HEADER
|
||||
═══════════════════════════════════════════════════════════════ */}
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">ReviewIQ Analytics</h1>
|
||||
<h1 className="text-xl font-semibold text-gray-900">Data Explorer</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
{data.overview.total_reviews.toLocaleString()} reviews • {data.overview.total_spans.toLocaleString()} insights extracted
|
||||
{data.overview.total_reviews.toLocaleString()} reviews · {data.overview.total_spans.toLocaleString()} insights
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={refetch}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors flex items-center gap-2 disabled:opacity-50"
|
||||
className="px-4 py-2 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800 transition-colors flex items-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active Filters Bar */}
|
||||
{/* Data View */}
|
||||
<DataView
|
||||
data={data}
|
||||
filters={filters}
|
||||
setURTDomain={setURTDomain}
|
||||
issuesPage={issuesPage}
|
||||
spansPage={spansPage}
|
||||
setIssuesPage={setIssuesPage}
|
||||
setSpansPage={setSpansPage}
|
||||
jobId={jobId || undefined}
|
||||
businessId={businessId || undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Data view - the detailed charts and tables
|
||||
*/
|
||||
function DataView({
|
||||
data,
|
||||
filters,
|
||||
setURTDomain,
|
||||
issuesPage,
|
||||
spansPage,
|
||||
setIssuesPage,
|
||||
setSpansPage,
|
||||
jobId,
|
||||
businessId,
|
||||
}: {
|
||||
data: NonNullable<ReturnType<typeof useReviewIQAnalytics>['data']>;
|
||||
filters: ReturnType<typeof useReviewIQFilters>['filters'];
|
||||
setURTDomain: ReturnType<typeof useReviewIQFilters>['setURTDomain'];
|
||||
issuesPage: number;
|
||||
spansPage: number;
|
||||
setIssuesPage: (page: number) => void;
|
||||
setSpansPage: (page: number) => void;
|
||||
jobId?: string;
|
||||
businessId?: string;
|
||||
}) {
|
||||
const handleDomainClick = (domain: URTDomain) => {
|
||||
setURTDomain(filters.urtDomain === domain ? null : domain);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Filters */}
|
||||
<FilterBar />
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════
|
||||
SECTION 1: EXECUTIVE SUMMARY (Hero)
|
||||
Rating, AI summary, #1 Problem, #1 Strength, Top Complaints
|
||||
═══════════════════════════════════════════════════════════════ */}
|
||||
<ExecutiveSummary
|
||||
insights={data.insights}
|
||||
avgRating={data.overview.avg_rating}
|
||||
domainScores={data.domain_scores}
|
||||
onDomainClick={handleDomainClick}
|
||||
synthesis={data.synthesis}
|
||||
/>
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════
|
||||
SECTION 2: EXPLORE (Sentiment + Categories)
|
||||
Side-by-side: How customers feel + What they talk about
|
||||
═══════════════════════════════════════════════════════════════ */}
|
||||
{/* Sentiment + Categories */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<SentimentPie
|
||||
data={data.sentiment.distribution}
|
||||
insight={data.synthesis?.sentiment_insight}
|
||||
insight={getLegacyInsight(data.synthesis, 'sentiment_headline')}
|
||||
/>
|
||||
<IntensityHeatmap
|
||||
data={data.urt.domains}
|
||||
insight={data.synthesis?.category_insight}
|
||||
highlightDomain={data.synthesis?.priority_domain}
|
||||
insight={getLegacyInsight(data.synthesis, 'category_headline')}
|
||||
highlightDomain={getLegacyInsight(data.synthesis, 'primary_problem_code')?.charAt(0)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════
|
||||
SECTION 3: ACTION (Opportunity Matrix)
|
||||
What to fix - prioritized by impact vs effort
|
||||
═══════════════════════════════════════════════════════════════ */}
|
||||
{/* Opportunity Matrix */}
|
||||
<OpportunityMatrix matrix={data.insights.opportunity_matrix} />
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════
|
||||
SECTION 4: TRENDS (Timeline)
|
||||
How things change over time
|
||||
═══════════════════════════════════════════════════════════════ */}
|
||||
{/* Timeline */}
|
||||
<TimelineChart
|
||||
data={data.timeline}
|
||||
insight={data.synthesis?.timeline_insight}
|
||||
annotations={data.synthesis?.timeline_annotations}
|
||||
insight={getLegacyInsight(data.synthesis, 'timeline_headline')}
|
||||
granularity={(data.filters_applied?.granularity as 'day' | 'week' | 'month' | 'year') || 'week'}
|
||||
/>
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════
|
||||
SECTION 5: DEEP DIVE (Tables)
|
||||
Detailed issues and individual mentions
|
||||
═══════════════════════════════════════════════════════════════ */}
|
||||
{/* Tables */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<IssuesTable issues={data.issues} onPageChange={handleIssuesPageChange} />
|
||||
<SpansTable spans={data.spans} onPageChange={handleSpansPageChange} />
|
||||
<IssuesTable issues={data.issues} onPageChange={setIssuesPage} />
|
||||
<SpansTable spans={data.spans} onPageChange={setSpansPage} />
|
||||
</div>
|
||||
|
||||
{/* Debug Info (dev only) */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<details className="bg-gray-100 rounded-lg p-4 text-sm">
|
||||
<summary className="cursor-pointer font-semibold text-gray-700">
|
||||
Debug: Filters Applied
|
||||
</summary>
|
||||
<pre className="mt-2 bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
|
||||
{JSON.stringify(data.filters_applied, null, 2)}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
{/* Trend Explorer */}
|
||||
<div className="mt-8">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Trend Explorer</h2>
|
||||
<ExplorerView jobId={jobId} businessId={businessId} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
830
web/components/reviewiq/StoryView.tsx
Normal file
830
web/components/reviewiq/StoryView.tsx
Normal file
@@ -0,0 +1,830 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Cell,
|
||||
ReferenceLine,
|
||||
} from 'recharts';
|
||||
import {
|
||||
ReviewIQAnalyticsResponse,
|
||||
TimelinePoint,
|
||||
StrengthItem,
|
||||
WeaknessItem,
|
||||
ReportAction,
|
||||
DOMAIN_FRIENDLY,
|
||||
Synthesis,
|
||||
LegacySynthesis,
|
||||
isSynthesisV2,
|
||||
} from './types';
|
||||
|
||||
// Helper to safely get legacy synthesis fields
|
||||
function getLegacyField<K extends keyof LegacySynthesis>(
|
||||
synthesis: Synthesis | null | undefined,
|
||||
field: K
|
||||
): LegacySynthesis[K] | undefined {
|
||||
if (!synthesis) return undefined;
|
||||
if (isSynthesisV2(synthesis)) return undefined;
|
||||
return (synthesis as LegacySynthesis)[field];
|
||||
}
|
||||
import { useReviewIQAnalytics } from '@/hooks/useReviewIQAnalytics';
|
||||
import type { ReviewIQFilters } from './types';
|
||||
|
||||
// Default filters for Story view - uses 'all' time range for comprehensive narrative
|
||||
const defaultFilters: ReviewIQFilters = {
|
||||
timeRange: 'all',
|
||||
sentiment: [],
|
||||
urtDomain: null,
|
||||
intensity: [],
|
||||
brushRange: null,
|
||||
};
|
||||
|
||||
// ==================== Props ====================
|
||||
|
||||
interface StoryViewProps {
|
||||
jobId?: string;
|
||||
businessId?: string;
|
||||
}
|
||||
|
||||
// ==================== Helper Functions ====================
|
||||
|
||||
interface StoryPoint {
|
||||
date: string;
|
||||
rating: number | null;
|
||||
type: 'peak' | 'valley' | 'normal';
|
||||
change: number;
|
||||
reviewCount: number;
|
||||
}
|
||||
|
||||
function identifyStoryPoints(timeline: TimelinePoint[]): StoryPoint[] {
|
||||
if (timeline.length < 3) {
|
||||
return timeline.map((t) => ({
|
||||
date: t.date,
|
||||
rating: t.avg_rating,
|
||||
type: 'normal' as const,
|
||||
change: 0,
|
||||
reviewCount: t.review_count,
|
||||
}));
|
||||
}
|
||||
|
||||
const points: StoryPoint[] = [];
|
||||
|
||||
for (let i = 0; i < timeline.length; i++) {
|
||||
const current = timeline[i];
|
||||
const prev = timeline[i - 1];
|
||||
const next = timeline[i + 1];
|
||||
|
||||
let type: 'peak' | 'valley' | 'normal' = 'normal';
|
||||
let change = 0;
|
||||
|
||||
if (current.avg_rating !== null) {
|
||||
if (prev && prev.avg_rating !== null) {
|
||||
change = current.avg_rating - prev.avg_rating;
|
||||
}
|
||||
|
||||
// Identify peaks and valleys
|
||||
if (prev && next && prev.avg_rating !== null && next.avg_rating !== null) {
|
||||
if (current.avg_rating > prev.avg_rating && current.avg_rating > next.avg_rating) {
|
||||
type = 'peak';
|
||||
} else if (current.avg_rating < prev.avg_rating && current.avg_rating < next.avg_rating) {
|
||||
type = 'valley';
|
||||
}
|
||||
}
|
||||
|
||||
// Also mark significant changes (> 0.3 stars)
|
||||
if (Math.abs(change) > 0.3) {
|
||||
type = change > 0 ? 'peak' : 'valley';
|
||||
}
|
||||
}
|
||||
|
||||
points.push({
|
||||
date: current.date,
|
||||
rating: current.avg_rating,
|
||||
type,
|
||||
change,
|
||||
reviewCount: current.review_count,
|
||||
});
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
|
||||
}
|
||||
|
||||
function getEmotionalHook(currentRating: number, potentialRating: number): string {
|
||||
const gap = potentialRating - currentRating;
|
||||
|
||||
if (gap >= 0.5) {
|
||||
return "You're leaving stars on the table. Let's get them back.";
|
||||
} else if (gap >= 0.3) {
|
||||
return "Small changes can unlock big improvements.";
|
||||
} else if (gap >= 0.1) {
|
||||
return "You're close to excellence. Let's close the gap.";
|
||||
} else {
|
||||
return "Maintain your momentum and protect what you've built.";
|
||||
}
|
||||
}
|
||||
|
||||
function getPriorityColor(priority: string): string {
|
||||
switch (priority) {
|
||||
case 'critical':
|
||||
return 'bg-red-500';
|
||||
case 'high':
|
||||
return 'bg-orange-500';
|
||||
case 'medium':
|
||||
return 'bg-yellow-500';
|
||||
default:
|
||||
return 'bg-gray-500';
|
||||
}
|
||||
}
|
||||
|
||||
function getEffortLabel(effort: string): string {
|
||||
switch (effort) {
|
||||
case 'quick_win':
|
||||
return 'Quick Win';
|
||||
case 'moderate':
|
||||
return 'Moderate Effort';
|
||||
case 'strategic':
|
||||
return 'Strategic';
|
||||
default:
|
||||
return effort;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Section Components ====================
|
||||
|
||||
interface HookSectionProps {
|
||||
headline: string;
|
||||
currentRating: number;
|
||||
potentialRating: number;
|
||||
emotionalHook: string;
|
||||
}
|
||||
|
||||
function HookSection({ headline, currentRating, potentialRating, emotionalHook }: HookSectionProps) {
|
||||
const gap = potentialRating - currentRating;
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-8 md:p-12">
|
||||
{/* Background decorative elements */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-24 -right-24 h-96 w-96 rounded-full bg-blue-500/10 blur-3xl" />
|
||||
<div className="absolute -bottom-24 -left-24 h-96 w-96 rounded-full bg-purple-500/10 blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-white mb-6 leading-tight">
|
||||
{headline}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-8 mb-8">
|
||||
{/* Current Rating */}
|
||||
<div className="text-center">
|
||||
<div className="text-5xl font-bold text-white mb-1">
|
||||
{currentRating.toFixed(1)}
|
||||
</div>
|
||||
<div className="text-slate-400 text-sm uppercase tracking-wider">
|
||||
Current Rating
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-0.5 w-12 bg-gradient-to-r from-slate-600 to-emerald-500" />
|
||||
<svg className="w-6 h-6 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Potential Rating */}
|
||||
<div className="text-center">
|
||||
<div className="text-5xl font-bold text-emerald-400 mb-1">
|
||||
{potentialRating.toFixed(1)}
|
||||
</div>
|
||||
<div className="text-slate-400 text-sm uppercase tracking-wider">
|
||||
Potential Rating
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gap Badge */}
|
||||
{gap > 0 && (
|
||||
<div className="ml-auto">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-500/20 border border-emerald-500/30">
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
<span className="text-emerald-400 font-semibold">+{gap.toFixed(1)} stars possible</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xl text-slate-300 italic">
|
||||
“{emotionalHook}”
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface TimelineSectionProps {
|
||||
storyPoints: StoryPoint[];
|
||||
timelineHeadline?: string;
|
||||
}
|
||||
|
||||
function TimelineSection({ storyPoints, timelineHeadline }: TimelineSectionProps) {
|
||||
const significantPoints = storyPoints.filter((p) => p.type !== 'normal' || p.reviewCount > 0);
|
||||
const displayPoints = significantPoints.length > 0 ? significantPoints : storyPoints.slice(0, 6);
|
||||
|
||||
// Prepare chart data - take last 12 points
|
||||
const chartData = storyPoints.slice(-12).map((point) => ({
|
||||
date: formatDate(point.date),
|
||||
rating: point.rating ?? 0,
|
||||
reviews: point.reviewCount,
|
||||
type: point.type,
|
||||
change: point.change,
|
||||
}));
|
||||
|
||||
// Calculate average rating for reference line
|
||||
const avgRating = chartData.reduce((sum, p) => sum + p.rating, 0) / chartData.length;
|
||||
|
||||
// Get bar color based on type
|
||||
const getBarColor = (type: string) => {
|
||||
if (type === 'peak') return '#10b981'; // emerald-500
|
||||
if (type === 'valley') return '#ef4444'; // red-500
|
||||
return '#3b82f6'; // blue-500
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
The Rise & Fall
|
||||
</h2>
|
||||
{timelineHeadline ? (
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-6">{timelineHeadline}</p>
|
||||
) : (
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-6">
|
||||
Your rating journey over time - peaks show your best moments, valleys reveal opportunities.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Recharts Bar Chart */}
|
||||
<div className="h-72">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData} margin={{ top: 20, right: 20, left: 0, bottom: 40 }}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fontSize: 11, fill: '#64748b' }}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[1, 5]}
|
||||
tick={{ fontSize: 11, fill: '#64748b' }}
|
||||
tickCount={5}
|
||||
/>
|
||||
<Tooltip
|
||||
content={({ active, payload }) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload[0].payload;
|
||||
return (
|
||||
<div className="bg-slate-900 text-white text-sm rounded-lg px-3 py-2 shadow-lg">
|
||||
<div className="font-medium">{data.date}</div>
|
||||
<div className="text-slate-300">
|
||||
{data.rating.toFixed(1)} ★ • {data.reviews} reviews
|
||||
</div>
|
||||
{data.change !== 0 && (
|
||||
<div className={data.change > 0 ? 'text-emerald-400' : 'text-red-400'}>
|
||||
{data.change > 0 ? '↑' : '↓'} {Math.abs(data.change).toFixed(2)} stars
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
<ReferenceLine
|
||||
y={avgRating}
|
||||
stroke="#94a3b8"
|
||||
strokeDasharray="5 5"
|
||||
label={{ value: `Avg: ${avgRating.toFixed(1)}`, fill: '#94a3b8', fontSize: 11 }}
|
||||
/>
|
||||
<Bar dataKey="rating" radius={[4, 4, 0, 0]}>
|
||||
{chartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={getBarColor(entry.type)} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Chapter markers - significant events */}
|
||||
{displayPoints.filter((p) => p.type !== 'normal').length > 0 && (
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
{displayPoints
|
||||
.filter((p) => p.type !== 'normal')
|
||||
.slice(0, 4)
|
||||
.map((point, index) => (
|
||||
<div
|
||||
key={point.date}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg
|
||||
${point.type === 'peak'
|
||||
? 'bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800'
|
||||
: 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm
|
||||
${point.type === 'peak' ? 'bg-emerald-500' : 'bg-red-500'}
|
||||
`}>
|
||||
{point.type === 'peak' ? '↑' : '↓'}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-slate-900 dark:text-white">
|
||||
{formatDate(point.date)}
|
||||
</div>
|
||||
<div className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{point.rating?.toFixed(1)} ★
|
||||
{point.change !== 0 && (
|
||||
<span className={point.change > 0 ? 'text-emerald-600' : 'text-red-600'}>
|
||||
{' '}({point.change > 0 ? '+' : ''}{point.change.toFixed(2)})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface BattleSectionProps {
|
||||
strengths: StrengthItem[];
|
||||
weaknesses: WeaknessItem[];
|
||||
strengthsHeadline?: string;
|
||||
}
|
||||
|
||||
function BattleSection({ strengths, weaknesses, strengthsHeadline }: BattleSectionProps) {
|
||||
// Calculate total "force" on each side
|
||||
const strengthForce = strengths.reduce((sum, s) => sum + s.span_count, 0);
|
||||
const weaknessForce = weaknesses.reduce((sum, w) => sum + w.span_count, 0);
|
||||
const totalForce = strengthForce + weaknessForce || 1;
|
||||
|
||||
const strengthPercent = (strengthForce / totalForce) * 100;
|
||||
const weaknessPercent = (weaknessForce / totalForce) * 100;
|
||||
|
||||
return (
|
||||
<section className="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
The Battle for Stars
|
||||
</h2>
|
||||
{strengthsHeadline && (
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-6">{strengthsHeadline}</p>
|
||||
)}
|
||||
|
||||
{/* Tug of war visualization */}
|
||||
<div className="relative mb-8">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="text-emerald-600 dark:text-emerald-400 font-bold text-lg">
|
||||
Strengths
|
||||
</div>
|
||||
<div className="flex-1 h-8 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden flex">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-emerald-400 to-emerald-500 transition-all duration-1000 flex items-center justify-end pr-3"
|
||||
style={{ width: `${strengthPercent}%` }}
|
||||
>
|
||||
<span className="text-white text-sm font-bold">{strengthPercent.toFixed(0)}%</span>
|
||||
</div>
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-red-500 to-red-400 transition-all duration-1000 flex items-center pl-3"
|
||||
style={{ width: `${weaknessPercent}%` }}
|
||||
>
|
||||
<span className="text-white text-sm font-bold">{weaknessPercent.toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-red-600 dark:text-red-400 font-bold text-lg">
|
||||
Weaknesses
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center marker */}
|
||||
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-slate-400 dark:bg-slate-500 rounded mt-10" />
|
||||
</div>
|
||||
|
||||
{/* Two columns: Strengths vs Weaknesses */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Strengths Column */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-emerald-600 dark:text-emerald-400 mb-4 flex items-center gap-2">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Forces Pulling Rating UP
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{strengths.slice(0, 5).map((strength, index) => {
|
||||
const domainInfo = DOMAIN_FRIENDLY[strength.domain] || { emoji: '', label: strength.domain_name };
|
||||
return (
|
||||
<div
|
||||
key={strength.subcode}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-emerald-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-slate-900 dark:text-white">
|
||||
{strength.subcode_name}
|
||||
</div>
|
||||
<div className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{domainInfo.emoji} {domainInfo.label} | {strength.span_count} mentions
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-emerald-600 dark:text-emerald-400 font-bold">
|
||||
+{strength.positive_percentage.toFixed(0)}%
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Weaknesses Column */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-4 flex items-center gap-2">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Forces Pulling Rating DOWN
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{weaknesses.slice(0, 5).map((weakness, index) => {
|
||||
const domainInfo = DOMAIN_FRIENDLY[weakness.domain] || { emoji: '', label: weakness.domain_name };
|
||||
return (
|
||||
<div
|
||||
key={weakness.subcode}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-red-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-slate-900 dark:text-white">
|
||||
{weakness.subcode_name}
|
||||
</div>
|
||||
<div className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{domainInfo.emoji} {domainInfo.label} | {weakness.span_count} mentions
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-red-600 dark:text-red-400 font-bold">
|
||||
-{weakness.negative_percentage.toFixed(0)}%
|
||||
</div>
|
||||
{weakness.projected_rating_impact !== null && (
|
||||
<div className="text-xs text-slate-500">
|
||||
{weakness.projected_rating_impact > 0 ? '+' : ''}{weakness.projected_rating_impact.toFixed(2)} stars if fixed
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CustomerVoicesSectionProps {
|
||||
weaknesses: WeaknessItem[];
|
||||
}
|
||||
|
||||
function CustomerVoicesSection({ weaknesses }: CustomerVoicesSectionProps) {
|
||||
// Collect all example spans from weaknesses
|
||||
const allQuotes = weaknesses
|
||||
.filter((w) => w.example_spans && w.example_spans.length > 0)
|
||||
.flatMap((w) =>
|
||||
(w.example_spans || []).map((span) => ({
|
||||
text: span.span_text,
|
||||
fullReview: span.review_text,
|
||||
rating: span.rating,
|
||||
date: span.review_date,
|
||||
issue: w.subcode_name,
|
||||
domain: w.domain_name,
|
||||
}))
|
||||
)
|
||||
.slice(0, 6);
|
||||
|
||||
if (allQuotes.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="bg-gradient-to-br from-slate-100 to-slate-50 dark:from-slate-800 dark:to-slate-900 rounded-2xl p-8 shadow-lg">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Customer Voices
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-8">
|
||||
Real feedback from your customers - their words tell the story.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{allQuotes.map((quote, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow"
|
||||
>
|
||||
{/* Quote mark */}
|
||||
<div className="absolute -top-3 -left-2 text-6xl text-red-200 dark:text-red-900 font-serif leading-none">
|
||||
“
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<p className="text-slate-700 dark:text-slate-300 mb-4 italic line-clamp-4">
|
||||
{quote.text}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
{quote.rating !== null && (
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < quote.rating! ? 'text-yellow-400' : 'text-slate-300 dark:text-slate-600'
|
||||
}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="px-2 py-1 rounded-full text-xs bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400">
|
||||
{quote.issue}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{quote.date && (
|
||||
<div className="mt-2 text-xs text-slate-500 dark:text-slate-500">
|
||||
{new Date(quote.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ActionPlanSectionProps {
|
||||
actions: ReportAction[];
|
||||
}
|
||||
|
||||
function ActionPlanSection({ actions }: ActionPlanSectionProps) {
|
||||
if (actions.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
The Action Plan
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-8">
|
||||
Prioritized actions to improve your rating - tackle these in order for maximum impact.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{actions.map((action, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`
|
||||
relative overflow-hidden rounded-xl border-l-4
|
||||
${action.priority === 'critical' ? 'border-red-500 bg-red-50 dark:bg-red-900/20' :
|
||||
action.priority === 'high' ? 'border-orange-500 bg-orange-50 dark:bg-orange-900/20' :
|
||||
'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'}
|
||||
`}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Priority indicator */}
|
||||
<div className={`
|
||||
flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center text-white font-bold
|
||||
${getPriorityColor(action.priority)}
|
||||
`}>
|
||||
{index + 1}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap items-center gap-3 mb-2">
|
||||
<h3 className="font-semibold text-lg text-slate-900 dark:text-white">
|
||||
{action.action}
|
||||
</h3>
|
||||
<span className={`
|
||||
px-2 py-0.5 rounded-full text-xs font-medium uppercase
|
||||
${action.priority === 'critical' ? 'bg-red-500 text-white' :
|
||||
action.priority === 'high' ? 'bg-orange-500 text-white' :
|
||||
'bg-yellow-500 text-slate-900'}
|
||||
`}>
|
||||
{action.priority}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">
|
||||
{getEffortLabel(action.effort)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-4">
|
||||
{action.evidence}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-slate-500 dark:text-slate-500 uppercase text-xs tracking-wider mb-1">
|
||||
Owner
|
||||
</div>
|
||||
<div className="font-medium text-slate-900 dark:text-white">
|
||||
{action.owner}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-500 dark:text-slate-500 uppercase text-xs tracking-wider mb-1">
|
||||
Impact
|
||||
</div>
|
||||
<div className="font-medium text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
|
||||
+{action.impact_stars.toFixed(2)} stars
|
||||
<svg className="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-500 dark:text-slate-500 uppercase text-xs tracking-wider mb-1">
|
||||
Complaints
|
||||
</div>
|
||||
<div className="font-medium text-slate-900 dark:text-white">
|
||||
{action.complaint_count} affected
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-500 dark:text-slate-500 uppercase text-xs tracking-wider mb-1">
|
||||
Success Metric
|
||||
</div>
|
||||
<div className="font-medium text-slate-900 dark:text-white">
|
||||
{action.success_metric}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress indicator decoration */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-slate-200 dark:bg-slate-700">
|
||||
<div
|
||||
className={`h-full ${getPriorityColor(action.priority)} transition-all duration-1000`}
|
||||
style={{ width: `${Math.min(100, (action.impact_stars / 0.5) * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ==================== Main Component ====================
|
||||
|
||||
export function StoryView({ jobId, businessId }: StoryViewProps) {
|
||||
// Fetch data using the shared hook with default filters
|
||||
const { data, loading, error } = useReviewIQAnalytics({
|
||||
jobId,
|
||||
businessId,
|
||||
filters: defaultFilters,
|
||||
});
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-indigo-600" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
|
||||
<p className="text-red-700">{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// No data state
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-6 text-center">
|
||||
<p className="text-slate-600">No data available for this view.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Extract key data
|
||||
const synthesis = data.synthesis;
|
||||
const insights = data.insights;
|
||||
const timeline = data.timeline;
|
||||
|
||||
// Compute story points from timeline
|
||||
const storyPoints = identifyStoryPoints(timeline);
|
||||
|
||||
// Get rating values (support both v1 and v2 synthesis)
|
||||
const currentRating = getLegacyField(synthesis, 'current_rating') ?? data.overview.avg_rating ?? 0;
|
||||
const potentialRating = getLegacyField(synthesis, 'potential_rating') ?? (currentRating + (insights.rating_simulator?.potential_gain ?? 0));
|
||||
|
||||
// Generate headline and emotional hook
|
||||
const headline = getLegacyField(synthesis, 'headline') ?? "Your Customer Intelligence Story";
|
||||
const emotionalHook = getEmotionalHook(currentRating, potentialRating);
|
||||
|
||||
// Get actions (only available in legacy format)
|
||||
const actions = getLegacyField(synthesis, 'actions') ?? [];
|
||||
|
||||
// Get generated_at (available in both formats but in different locations)
|
||||
const generatedAt = synthesis ? (isSynthesisV2(synthesis) ? synthesis.generated_at : synthesis.generated_at) : undefined;
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-fade-in">
|
||||
{/* Section 1: The Hook */}
|
||||
<HookSection
|
||||
headline={headline}
|
||||
currentRating={currentRating}
|
||||
potentialRating={potentialRating}
|
||||
emotionalHook={emotionalHook}
|
||||
/>
|
||||
|
||||
{/* Section 2: The Rise & Fall (Timeline) */}
|
||||
{timeline.length > 0 && (
|
||||
<TimelineSection
|
||||
storyPoints={storyPoints}
|
||||
timelineHeadline={getLegacyField(synthesis, 'timeline_headline')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Section 3: The Battle (Strengths vs Weaknesses) */}
|
||||
{(insights.strengths.length > 0 || insights.weaknesses.length > 0) && (
|
||||
<BattleSection
|
||||
strengths={insights.strengths}
|
||||
weaknesses={insights.weaknesses}
|
||||
strengthsHeadline={getLegacyField(synthesis, 'strengths_headline')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Section 4: Customer Voices */}
|
||||
<CustomerVoicesSection weaknesses={insights.weaknesses} />
|
||||
|
||||
{/* Section 5: The Action Plan */}
|
||||
{actions.length > 0 && (
|
||||
<ActionPlanSection actions={actions} />
|
||||
)}
|
||||
|
||||
{/* Footer metadata */}
|
||||
<div className="text-center text-sm text-slate-500 dark:text-slate-500 py-4">
|
||||
<p>
|
||||
Analysis based on {data.overview.total_reviews.toLocaleString()} reviews
|
||||
{generatedAt && (
|
||||
<> | Generated {new Date(generatedAt).toLocaleDateString()}</>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs mt-1 opacity-75">
|
||||
Job ID: {jobId} | Business ID: {businessId}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default StoryView;
|
||||
@@ -152,56 +152,211 @@ export interface Insights {
|
||||
executive_summary: string;
|
||||
}
|
||||
|
||||
// ==================== AI Synthesis (Stage 4 Output) ====================
|
||||
// ==================== Report Synthesis v2.0 (6-Section Business Report) ====================
|
||||
|
||||
export interface ActionItem {
|
||||
id: string;
|
||||
title: string;
|
||||
why: string; // Root cause from reviews
|
||||
what: string; // Specific action to take
|
||||
who: string; // Department/role responsible
|
||||
impact: string; // Expected outcome
|
||||
evidence: string[]; // Example review quotes
|
||||
estimated_rating_lift: number | null;
|
||||
complexity: 'quick' | 'medium' | 'complex';
|
||||
priority: 'critical' | 'high' | 'medium' | 'low';
|
||||
timeline: string; // e.g., "This week", "This month"
|
||||
related_subcode: string; // URT subcode this addresses
|
||||
// Section 1: Executive Summary
|
||||
export interface ExecutiveSummary {
|
||||
health_score: number; // 1-100 overall health
|
||||
health_label: string; // "Needs Attention" | "Stable" | "Strong"
|
||||
one_liner: string; // Single sentence verdict
|
||||
current_rating: number; // 3.71
|
||||
potential_rating: number; // 4.2
|
||||
rating_gap: number; // 0.49
|
||||
estimated_revenue_at_risk: string; // "€15,000/month"
|
||||
key_insight: string; // The most important finding
|
||||
momentum: 'improving' | 'declining' | 'stable';
|
||||
momentum_detail: string; // Explanation
|
||||
}
|
||||
|
||||
export interface TimelineAnnotation {
|
||||
date: string;
|
||||
// Section 2: Risk Scorecard
|
||||
export interface RiskIndicator {
|
||||
name: string; // "Staff Behavior"
|
||||
score: number; // 1-10 (10 = excellent, 1 = critical)
|
||||
trend: 'improving' | 'declining' | 'stable';
|
||||
complaint_count: number; // Number of related complaints
|
||||
color: 'green' | 'yellow' | 'red';
|
||||
}
|
||||
|
||||
export interface RiskScorecard {
|
||||
overall_risk: 'low' | 'medium' | 'high' | 'critical';
|
||||
indicators: RiskIndicator[];
|
||||
highest_risk_area: string; // "Value Perception"
|
||||
immediate_attention: string; // What needs fixing NOW
|
||||
}
|
||||
|
||||
// Section 3: Critical Issues
|
||||
export interface CriticalIssue {
|
||||
rank: number; // 1, 2, or 3
|
||||
title: string; // "Hidden Fees Destroying Trust"
|
||||
urt_code: string; // "V1.03"
|
||||
complaint_count: number; // 94
|
||||
revenue_impact: string; // "€12,000/month at risk"
|
||||
evidence: string[]; // 2-3 damning quotes
|
||||
root_cause: string; // Why this keeps happening
|
||||
solution: string; // Specific fix
|
||||
effort: 'quick_win' | 'moderate' | 'strategic';
|
||||
timeline: string; // "1 week" | "2-4 weeks" | "1-2 months"
|
||||
}
|
||||
|
||||
// Section 4: Strengths to Protect
|
||||
export interface StrengthToProtect {
|
||||
title: string; // "Exceptional Staff Service"
|
||||
mention_count: number; // 168
|
||||
percentage: number; // 42.0 (% of positive reviews)
|
||||
top_quotes: string[]; // 2-3 best quotes
|
||||
risk_of_loss: string; // What could erode this strength
|
||||
leverage_action: string; // How to amplify in marketing
|
||||
}
|
||||
|
||||
// Section 5: Action Matrix
|
||||
export interface ActionMatrixItem {
|
||||
action: string; // What to do (imperative)
|
||||
owner: string; // Who owns it
|
||||
effort: 'low' | 'medium' | 'high';
|
||||
impact: 'low' | 'medium' | 'high';
|
||||
quadrant: 'quick_win' | 'major_project' | 'fill_in' | 'deprioritize';
|
||||
expected_lift: string; // "+0.3★"
|
||||
deadline: string; // "Week 1" | "Week 2-4" | "Month 2-3"
|
||||
success_metric: string; // Measurable KPI
|
||||
}
|
||||
|
||||
// Section 6: 90-Day Tracking
|
||||
export interface TrackingKPI {
|
||||
metric: string; // "Deposit Complaints"
|
||||
current_value: string; // "47/month"
|
||||
target_30_day: string; // "< 25/month"
|
||||
target_60_day: string; // "< 15/month"
|
||||
target_90_day: string; // "< 5/month"
|
||||
measurement: string; // How to measure this
|
||||
}
|
||||
|
||||
// Chart Data Types
|
||||
export interface ChartDataPoint {
|
||||
label: string;
|
||||
description: string;
|
||||
type: 'positive' | 'negative' | 'neutral' | 'event';
|
||||
value: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface Synthesis {
|
||||
// Narrative insights for each section
|
||||
executive_narrative: string; // Main story for exec summary
|
||||
sentiment_insight: string; // Why sentiment is this way
|
||||
category_insight: string; // Pattern in categories
|
||||
timeline_insight: string; // What's changing over time
|
||||
export interface TimeSeriesPoint {
|
||||
month: string; // "Jan", "Feb", etc.
|
||||
month_date: string; // "2025-01" for sorting
|
||||
value: number;
|
||||
}
|
||||
|
||||
// Highlights and focus areas
|
||||
priority_domain: string | null; // Domain needing most attention
|
||||
priority_issue: string | null; // Issue to fix first
|
||||
export interface DualSeriesPoint {
|
||||
month: string;
|
||||
month_date: string;
|
||||
positive: number;
|
||||
negative: number;
|
||||
}
|
||||
|
||||
// Actionable recommendations
|
||||
action_plan: ActionItem[]; // Prioritized actions
|
||||
issue_actions: Record<string, string>; // issue_id → recommended action
|
||||
export interface ReportCharts {
|
||||
rating_gauge: {
|
||||
current: number;
|
||||
target: number;
|
||||
min: number;
|
||||
max: number;
|
||||
};
|
||||
sentiment_pie: ChartDataPoint[];
|
||||
issues_pie: ChartDataPoint[];
|
||||
rating_distribution: ChartDataPoint[];
|
||||
complaints_trend: TimeSeriesPoint[];
|
||||
rating_trend: TimeSeriesPoint[];
|
||||
momentum_trend: DualSeriesPoint[];
|
||||
}
|
||||
|
||||
// Timeline context
|
||||
timeline_annotations: TimelineAnnotation[];
|
||||
// Legacy types for backwards compatibility (v1.x reports)
|
||||
export interface ReportAction {
|
||||
priority: 'critical' | 'high' | 'medium';
|
||||
action: string;
|
||||
owner: string;
|
||||
impact: string;
|
||||
impact_stars: number;
|
||||
effort: 'quick_win' | 'moderate' | 'strategic';
|
||||
evidence: string;
|
||||
complaint_count: number;
|
||||
success_metric: string;
|
||||
}
|
||||
|
||||
// Marketing opportunities
|
||||
marketing_angles: string[]; // Ways to promote strengths
|
||||
export interface ReportEvidence {
|
||||
quote: string;
|
||||
context: string;
|
||||
sentiment: 'damaging' | 'praising';
|
||||
weight: 'critical' | 'notable';
|
||||
}
|
||||
|
||||
// Competitor context (if available)
|
||||
competitor_context: string | null;
|
||||
export interface ReportStrength {
|
||||
title: string;
|
||||
mention_count: number;
|
||||
quote: string;
|
||||
marketing_angle: string;
|
||||
}
|
||||
|
||||
// Generated at
|
||||
// Legacy Synthesis Interface (v1.x - for backwards compatibility)
|
||||
export interface LegacySynthesis {
|
||||
headline: string;
|
||||
verdict: string;
|
||||
current_rating: number;
|
||||
potential_rating: number;
|
||||
rating_gap: number;
|
||||
narrative: string;
|
||||
sentiment_headline: string;
|
||||
category_headline: string;
|
||||
timeline_headline: string;
|
||||
strengths_headline: string;
|
||||
primary_problem: string;
|
||||
primary_problem_code: string;
|
||||
root_cause: string;
|
||||
actions: ReportAction[];
|
||||
evidence: ReportEvidence[];
|
||||
strengths: ReportStrength[];
|
||||
momentum: 'improving' | 'declining' | 'stable';
|
||||
momentum_detail: string;
|
||||
generated_at: string;
|
||||
review_count: number;
|
||||
insight_count: number;
|
||||
}
|
||||
|
||||
// New Synthesis Interface (v2.0 - 6-Section Report)
|
||||
export interface SynthesisV2 {
|
||||
// Report metadata
|
||||
report_version?: string; // "2.0"
|
||||
report_title: string; // "Reputation Health Report: Soho Club"
|
||||
report_date: string; // "January 2026"
|
||||
business_name: string;
|
||||
generated_at: string;
|
||||
review_count: number;
|
||||
insight_count: number;
|
||||
analysis_period: string; // "Last 12 months"
|
||||
|
||||
// Section 1: Executive Summary
|
||||
executive_summary: ExecutiveSummary;
|
||||
|
||||
// Section 2: Risk Scorecard
|
||||
risk_scorecard: RiskScorecard;
|
||||
|
||||
// Section 3: Critical Issues (Top 3)
|
||||
critical_issues: CriticalIssue[];
|
||||
|
||||
// Section 4: Protect Your Strengths
|
||||
strengths: StrengthToProtect[];
|
||||
|
||||
// Section 5: Action Matrix
|
||||
action_matrix: ActionMatrixItem[];
|
||||
|
||||
// Section 6: 90-Day Tracking Framework
|
||||
tracking_kpis: TrackingKPI[];
|
||||
|
||||
// Charts data for visualization
|
||||
charts?: ReportCharts;
|
||||
}
|
||||
|
||||
// Union type that supports both formats
|
||||
export type Synthesis = LegacySynthesis | SynthesisV2;
|
||||
|
||||
// Type guard to check if synthesis is v2 format
|
||||
export function isSynthesisV2(synthesis: Synthesis): synthesis is SynthesisV2 {
|
||||
return 'executive_summary' in synthesis && synthesis.executive_summary !== undefined;
|
||||
}
|
||||
|
||||
// ==================== Issues (Enriched) ====================
|
||||
@@ -314,6 +469,7 @@ export interface ReviewIQAnalyticsResponse {
|
||||
// ==================== Filter Types ====================
|
||||
|
||||
export type TimeRange = '7d' | '14d' | '30d' | '90d' | '1y' | 'all';
|
||||
export type Granularity = 'day' | 'week' | 'month' | 'year';
|
||||
export type Sentiment = 'positive' | 'neutral' | 'negative';
|
||||
export type URTDomain = 'O' | 'P' | 'J' | 'E' | 'A' | 'V' | 'R';
|
||||
export type Intensity = 'I1' | 'I2' | 'I3';
|
||||
|
||||
Reference in New Issue
Block a user