feat: Add Opportunity Matrix with coordinate-based positioning
- Add 2x2 matrix visualization (Quick Wins, Critical, Strategic, Nice to Have) - Position items based on frequency/effort coordinates with dots and leader lines - Add L-shaped axes with arrows showing Frequency (X) and Effort (Y) directions - Include unified coordinate grid overlay across all quadrants - Add clickable subcode labels with hover effects Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
325
web/components/reviewiq/insights/OpportunityMatrix.tsx
Normal file
325
web/components/reviewiq/insights/OpportunityMatrix.tsx
Normal file
@@ -0,0 +1,325 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Target, Zap, Clock, LayoutGrid } from 'lucide-react';
|
||||||
|
import type { OpportunityMatrix as OpportunityMatrixType, OpportunityItem } from '../types';
|
||||||
|
|
||||||
|
interface OpportunityMatrixProps {
|
||||||
|
matrix: OpportunityMatrixType | null;
|
||||||
|
onSubcodeClick?: (subcode: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface QuadrantProps {
|
||||||
|
title: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
items: OpportunityItem[];
|
||||||
|
bgColor: string;
|
||||||
|
borderColor: string;
|
||||||
|
textColor: string;
|
||||||
|
iconBg: string;
|
||||||
|
onItemClick?: (subcode: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Quadrant({
|
||||||
|
title,
|
||||||
|
icon,
|
||||||
|
items,
|
||||||
|
bgColor,
|
||||||
|
borderColor,
|
||||||
|
textColor,
|
||||||
|
iconBg,
|
||||||
|
onItemClick,
|
||||||
|
}: QuadrantProps) {
|
||||||
|
return (
|
||||||
|
<div className={`${bgColor} rounded-lg border ${borderColor} aspect-square relative overflow-hidden`}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="absolute top-2 left-2 right-2 flex items-center gap-1.5 z-10">
|
||||||
|
<div className={`p-1 ${iconBg} rounded`}>{icon}</div>
|
||||||
|
<span className={`text-xs font-bold ${textColor}`}>{title}</span>
|
||||||
|
<span className="ml-auto text-xs font-semibold text-gray-500 bg-white/60 px-1.5 py-0.5 rounded">
|
||||||
|
{items.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Positioned items with dots and offset labels */}
|
||||||
|
{items.length === 0 ? (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span className="text-xs text-gray-400 italic">None</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<svg className="absolute inset-0 w-full h-full pointer-events-none z-10">
|
||||||
|
{items.map((item, index) => {
|
||||||
|
// Constrain coordinates to safe zone
|
||||||
|
const safeX = 15 + item.x * 70;
|
||||||
|
const safeY = 30 + item.y * 55;
|
||||||
|
|
||||||
|
// Offset label based on position to avoid clustering
|
||||||
|
// Items on left half get labels to the right, vice versa
|
||||||
|
const labelOffsetX = safeX < 50 ? 12 : -12;
|
||||||
|
const labelOffsetY = (index % 3 - 1) * 8; // Stagger vertically
|
||||||
|
|
||||||
|
return (
|
||||||
|
<g key={`${item.subcode}-${index}`}>
|
||||||
|
{/* Leader line */}
|
||||||
|
<line
|
||||||
|
x1={`${safeX}%`}
|
||||||
|
y1={`${safeY}%`}
|
||||||
|
x2={`${safeX + labelOffsetX * 0.6}%`}
|
||||||
|
y2={`${safeY + labelOffsetY * 0.3}%`}
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
opacity="0.3"
|
||||||
|
/>
|
||||||
|
{/* Dot at exact position */}
|
||||||
|
<circle
|
||||||
|
cx={`${safeX}%`}
|
||||||
|
cy={`${safeY}%`}
|
||||||
|
r="4"
|
||||||
|
fill="currentColor"
|
||||||
|
opacity="0.6"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
{/* Clickable labels */}
|
||||||
|
{items.length > 0 && items.map((item, index) => {
|
||||||
|
const safeX = 15 + item.x * 70;
|
||||||
|
const safeY = 30 + item.y * 55;
|
||||||
|
const labelOffsetX = safeX < 50 ? 8 : -8;
|
||||||
|
const labelOffsetY = (index % 3 - 1) * 6;
|
||||||
|
const anchorX = safeX < 50 ? 'left-0' : 'right-0';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={`label-${item.subcode}-${index}`}
|
||||||
|
onClick={() => onItemClick?.(item.subcode)}
|
||||||
|
className={`absolute px-1 py-0.5 text-[10px] font-mono font-bold rounded ${textColor} bg-white/90 hover:bg-white hover:scale-105 transition-all shadow-sm border border-current/20 z-20 whitespace-nowrap`}
|
||||||
|
style={{
|
||||||
|
left: `${safeX + labelOffsetX}%`,
|
||||||
|
top: `${safeY + labelOffsetY}%`,
|
||||||
|
transform: `translate(${safeX < 50 ? '0' : '-100%'}, -50%)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.subcode}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 2x2 Opportunity Matrix visualization.
|
||||||
|
* Shows issues categorized by frequency vs complexity with coordinate positioning.
|
||||||
|
*/
|
||||||
|
export function OpportunityMatrix({ matrix, onSubcodeClick }: OpportunityMatrixProps) {
|
||||||
|
if (!matrix) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalItems =
|
||||||
|
matrix.quick_wins.length +
|
||||||
|
matrix.critical.length +
|
||||||
|
matrix.nice_to_have.length +
|
||||||
|
matrix.strategic.length;
|
||||||
|
|
||||||
|
if (totalItems === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl p-4 shadow-md border-2 border-gray-200 max-w-2xl mx-auto">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<LayoutGrid className="w-5 h-5 text-indigo-600" />
|
||||||
|
<h3 className="text-lg font-bold text-gray-900">Opportunity Matrix</h3>
|
||||||
|
<span className="ml-auto text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
|
||||||
|
{totalItems} opportunities
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Matrix with L-shaped label area */}
|
||||||
|
<div className="flex">
|
||||||
|
{/* Y-axis label column */}
|
||||||
|
<div className="flex items-center justify-center w-8 mr-2">
|
||||||
|
<span className="-rotate-90 text-sm text-gray-600 font-semibold whitespace-nowrap">
|
||||||
|
Effort →
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main matrix area */}
|
||||||
|
<div className="flex-1 flex flex-col">
|
||||||
|
{/* Matrix with arrows */}
|
||||||
|
<div className="relative flex-1">
|
||||||
|
{/* Coordinate axes - L-shaped from bottom-left origin */}
|
||||||
|
<svg
|
||||||
|
className="absolute inset-0 w-full h-full pointer-events-none overflow-visible"
|
||||||
|
style={{ zIndex: 5 }}
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
{/* Horizontal arrowhead - points right */}
|
||||||
|
<marker
|
||||||
|
id="arrowhead-right"
|
||||||
|
markerWidth="6"
|
||||||
|
markerHeight="6"
|
||||||
|
refX="5"
|
||||||
|
refY="3"
|
||||||
|
orient="0"
|
||||||
|
markerUnits="strokeWidth"
|
||||||
|
>
|
||||||
|
<path d="M0,0 L6,3 L0,6 Z" fill="#6b7280" />
|
||||||
|
</marker>
|
||||||
|
{/* Vertical arrowhead - points up (pre-rotated triangle) */}
|
||||||
|
<marker
|
||||||
|
id="arrowhead-up"
|
||||||
|
markerWidth="6"
|
||||||
|
markerHeight="6"
|
||||||
|
refX="3"
|
||||||
|
refY="1"
|
||||||
|
orient="0"
|
||||||
|
markerUnits="strokeWidth"
|
||||||
|
>
|
||||||
|
<path d="M0,6 L3,0 L6,6 Z" fill="#6b7280" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
{/* X-axis (horizontal - frequency increases right) */}
|
||||||
|
<line
|
||||||
|
x1="-1" y1="102"
|
||||||
|
x2="99" y2="102"
|
||||||
|
stroke="#6b7280"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
markerEnd="url(#arrowhead-right)"
|
||||||
|
vectorEffect="non-scaling-stroke"
|
||||||
|
/>
|
||||||
|
{/* Y-axis (vertical - effort increases up) */}
|
||||||
|
<line
|
||||||
|
x1="-1" y1="102"
|
||||||
|
x2="-1" y2="1"
|
||||||
|
stroke="#6b7280"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
markerEnd="url(#arrowhead-up)"
|
||||||
|
vectorEffect="non-scaling-stroke"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div className="relative ml-3 mb-3">
|
||||||
|
{/* Unified coordinate grid overlay */}
|
||||||
|
<svg
|
||||||
|
className="absolute inset-0 w-full h-full pointer-events-none"
|
||||||
|
style={{ zIndex: 2 }}
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
>
|
||||||
|
{/* Vertical grid lines */}
|
||||||
|
{[12.5, 25, 37.5, 50, 62.5, 75, 87.5].map((x) => (
|
||||||
|
<line
|
||||||
|
key={`grid-v-${x}`}
|
||||||
|
x1={x}
|
||||||
|
y1="0"
|
||||||
|
x2={x}
|
||||||
|
y2="100"
|
||||||
|
stroke="#9ca3af"
|
||||||
|
strokeWidth="1"
|
||||||
|
opacity="0.15"
|
||||||
|
strokeDasharray="3 3"
|
||||||
|
vectorEffect="non-scaling-stroke"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{/* Horizontal grid lines */}
|
||||||
|
{[12.5, 25, 37.5, 50, 62.5, 75, 87.5].map((y) => (
|
||||||
|
<line
|
||||||
|
key={`grid-h-${y}`}
|
||||||
|
x1="0"
|
||||||
|
y1={y}
|
||||||
|
x2="100"
|
||||||
|
y2={y}
|
||||||
|
stroke="#9ca3af"
|
||||||
|
strokeWidth="1"
|
||||||
|
opacity="0.15"
|
||||||
|
strokeDasharray="3 3"
|
||||||
|
vectorEffect="non-scaling-stroke"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{/* Top Row: Simple solutions */}
|
||||||
|
<Quadrant
|
||||||
|
title="Nice to Have"
|
||||||
|
icon={<Clock className="w-3 h-3 text-gray-600" />}
|
||||||
|
items={matrix.nice_to_have}
|
||||||
|
bgColor="bg-gray-50"
|
||||||
|
borderColor="border-gray-200"
|
||||||
|
textColor="text-gray-700"
|
||||||
|
iconBg="bg-gray-200"
|
||||||
|
onItemClick={onSubcodeClick}
|
||||||
|
/>
|
||||||
|
<Quadrant
|
||||||
|
title="Quick Wins"
|
||||||
|
icon={<Zap className="w-3 h-3 text-green-600" />}
|
||||||
|
items={matrix.quick_wins}
|
||||||
|
bgColor="bg-green-50"
|
||||||
|
borderColor="border-green-200"
|
||||||
|
textColor="text-green-700"
|
||||||
|
iconBg="bg-green-200"
|
||||||
|
onItemClick={onSubcodeClick}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Bottom Row: Complex solutions */}
|
||||||
|
<Quadrant
|
||||||
|
title="Strategic"
|
||||||
|
icon={<Target className="w-3 h-3 text-purple-600" />}
|
||||||
|
items={matrix.strategic}
|
||||||
|
bgColor="bg-purple-50"
|
||||||
|
borderColor="border-purple-200"
|
||||||
|
textColor="text-purple-700"
|
||||||
|
iconBg="bg-purple-200"
|
||||||
|
onItemClick={onSubcodeClick}
|
||||||
|
/>
|
||||||
|
<Quadrant
|
||||||
|
title="Critical"
|
||||||
|
icon={<Target className="w-3 h-3 text-red-600" />}
|
||||||
|
items={matrix.critical}
|
||||||
|
bgColor="bg-red-50"
|
||||||
|
borderColor="border-red-200"
|
||||||
|
textColor="text-red-700"
|
||||||
|
iconBg="bg-red-200"
|
||||||
|
onItemClick={onSubcodeClick}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* X-axis label row */}
|
||||||
|
<div className="flex justify-center mt-4">
|
||||||
|
<span className="text-sm text-gray-600 font-semibold">
|
||||||
|
Frequency →
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Legend */}
|
||||||
|
<div className="mt-3 pt-3 border-t border-gray-100 flex flex-wrap gap-3 text-xs text-gray-500">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<div className="w-3 h-3 bg-green-200 rounded" />
|
||||||
|
<span>Quick Wins: Fix first</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<div className="w-3 h-3 bg-red-200 rounded" />
|
||||||
|
<span>Critical: High impact</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<div className="w-3 h-3 bg-purple-200 rounded" />
|
||||||
|
<span>Strategic: Plan ahead</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<div className="w-3 h-3 bg-gray-200 rounded" />
|
||||||
|
<span>Nice to Have: Low priority</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
366
web/components/reviewiq/types.ts
Normal file
366
web/components/reviewiq/types.ts
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
/**
|
||||||
|
* TypeScript types for ReviewIQ Dashboard.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ==================== API Response Types ====================
|
||||||
|
|
||||||
|
export interface OverviewStats {
|
||||||
|
total_reviews: number;
|
||||||
|
total_spans: number;
|
||||||
|
open_issues: number;
|
||||||
|
avg_rating: number | null;
|
||||||
|
positive_count: number;
|
||||||
|
negative_count: number;
|
||||||
|
neutral_count: number;
|
||||||
|
mixed_count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SentimentDataPoint {
|
||||||
|
valence: string;
|
||||||
|
count: number; // Span count (mentions)
|
||||||
|
review_count: number; // Distinct reviews
|
||||||
|
percentage: number; // Based on review_count
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SentimentTrendPoint {
|
||||||
|
period: string;
|
||||||
|
positive: number;
|
||||||
|
negative: number;
|
||||||
|
neutral: number;
|
||||||
|
mixed: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SentimentData {
|
||||||
|
distribution: SentimentDataPoint[];
|
||||||
|
trend: SentimentTrendPoint[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface URTDomainPoint {
|
||||||
|
domain: string;
|
||||||
|
domain_name: string;
|
||||||
|
count: number; // Span count (mentions)
|
||||||
|
review_count: number; // Distinct reviews affected
|
||||||
|
percentage: number; // Based on review_count
|
||||||
|
positive_count: number; // Positive spans
|
||||||
|
negative_count: number; // Negative spans
|
||||||
|
neutral_count: number; // Neutral spans
|
||||||
|
positive_reviews: number; // Reviews with positive sentiment
|
||||||
|
negative_reviews: number; // Reviews with negative sentiment
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IntensityPoint {
|
||||||
|
domain: string;
|
||||||
|
intensity: string;
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface URTData {
|
||||||
|
domains: URTDomainPoint[];
|
||||||
|
intensity_heatmap: IntensityPoint[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Domain Scores ====================
|
||||||
|
|
||||||
|
export interface DomainScore {
|
||||||
|
domain: string;
|
||||||
|
name: string;
|
||||||
|
score: number;
|
||||||
|
status: 'good' | 'warning' | 'critical';
|
||||||
|
trend: string | null;
|
||||||
|
positive_count: number;
|
||||||
|
negative_count: number;
|
||||||
|
total_count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Insights ====================
|
||||||
|
|
||||||
|
export interface StrengthItem {
|
||||||
|
rank: number;
|
||||||
|
subcode: string;
|
||||||
|
subcode_name: string;
|
||||||
|
domain: string;
|
||||||
|
domain_name: string;
|
||||||
|
positive_percentage: number;
|
||||||
|
span_count: number;
|
||||||
|
marketing_angle: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WeaknessItem {
|
||||||
|
rank: number;
|
||||||
|
issue_id: string | null;
|
||||||
|
subcode: string;
|
||||||
|
subcode_name: string;
|
||||||
|
domain: string;
|
||||||
|
domain_name: string;
|
||||||
|
negative_percentage: number;
|
||||||
|
span_count: number;
|
||||||
|
intensity: string | null;
|
||||||
|
solution: string | null;
|
||||||
|
solution_complexity: string | null;
|
||||||
|
projected_rating_impact: number | null;
|
||||||
|
owner: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RatingSimulator {
|
||||||
|
current_rating: number;
|
||||||
|
if_fix_top_1: number | null;
|
||||||
|
if_fix_top_3: number | null;
|
||||||
|
potential_gain: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OpportunityItem {
|
||||||
|
subcode: string;
|
||||||
|
x: number; // 0-1, frequency position within quadrant
|
||||||
|
y: number; // 0-1, effort position within quadrant
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OpportunityMatrix {
|
||||||
|
quick_wins: OpportunityItem[];
|
||||||
|
critical: OpportunityItem[];
|
||||||
|
nice_to_have: OpportunityItem[];
|
||||||
|
strategic: OpportunityItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Insights {
|
||||||
|
strengths: StrengthItem[];
|
||||||
|
weaknesses: WeaknessItem[];
|
||||||
|
rating_simulator: RatingSimulator | null;
|
||||||
|
opportunity_matrix: OpportunityMatrix | null;
|
||||||
|
executive_summary: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Issues (Enriched) ====================
|
||||||
|
|
||||||
|
export interface IssueItem {
|
||||||
|
issue_id: string;
|
||||||
|
primary_subcode: string;
|
||||||
|
subcode_name: string | null;
|
||||||
|
subcode_definition: string | null;
|
||||||
|
solution: string | null;
|
||||||
|
solution_complexity: string | null;
|
||||||
|
domain: string;
|
||||||
|
domain_name: string | null;
|
||||||
|
category_name: string | null;
|
||||||
|
default_owner: string | null;
|
||||||
|
negative_example: string | null;
|
||||||
|
entity: string | null;
|
||||||
|
state: string;
|
||||||
|
priority_score: number;
|
||||||
|
span_count: number;
|
||||||
|
max_intensity: string | null;
|
||||||
|
created_at: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaginatedIssues {
|
||||||
|
items: IssueItem[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
page_size: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Spans ====================
|
||||||
|
|
||||||
|
export interface SpanItem {
|
||||||
|
span_id: string;
|
||||||
|
span_text: string;
|
||||||
|
urt_primary: string | null;
|
||||||
|
valence: string | null;
|
||||||
|
intensity: string | null;
|
||||||
|
review_time: string | null;
|
||||||
|
source_review_id: string | null;
|
||||||
|
entity: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaginatedSpans {
|
||||||
|
items: SpanItem[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
page_size: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Full Review (Drill-Down) ====================
|
||||||
|
|
||||||
|
export interface ReviewSpan {
|
||||||
|
span_id: string;
|
||||||
|
span_text: string;
|
||||||
|
start_offset: number | null;
|
||||||
|
end_offset: number | null;
|
||||||
|
urt_primary: string | null;
|
||||||
|
urt_secondary: string[] | null;
|
||||||
|
valence: string | null;
|
||||||
|
intensity: string | null;
|
||||||
|
entity: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FullReview {
|
||||||
|
review_id: string;
|
||||||
|
source: string;
|
||||||
|
rating: number | null;
|
||||||
|
review_text: string | null;
|
||||||
|
text_normalized: string | null; // Text used for span offset calculation
|
||||||
|
review_time: string | null;
|
||||||
|
author_name: string | null;
|
||||||
|
author_url: string | null;
|
||||||
|
review_url: string | null;
|
||||||
|
business_name: string | null;
|
||||||
|
urt_primary: string | null;
|
||||||
|
urt_secondary: string[] | null;
|
||||||
|
spans: ReviewSpan[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Timeline ====================
|
||||||
|
|
||||||
|
export interface TimelinePoint {
|
||||||
|
date: string;
|
||||||
|
review_count: number;
|
||||||
|
span_count: number;
|
||||||
|
avg_rating: number | null;
|
||||||
|
positive_count: number;
|
||||||
|
negative_count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Main Response ====================
|
||||||
|
|
||||||
|
export interface ReviewIQAnalyticsResponse {
|
||||||
|
overview: OverviewStats;
|
||||||
|
sentiment: SentimentData;
|
||||||
|
urt: URTData;
|
||||||
|
domain_scores: DomainScore[];
|
||||||
|
overall_experience_index: number | null;
|
||||||
|
insights: Insights;
|
||||||
|
issues: PaginatedIssues;
|
||||||
|
spans: PaginatedSpans;
|
||||||
|
timeline: TimelinePoint[];
|
||||||
|
filters_applied: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Filter Types ====================
|
||||||
|
|
||||||
|
export type TimeRange = '7d' | '14d' | '30d' | '90d' | '1y' | 'all';
|
||||||
|
export type Sentiment = 'positive' | 'neutral' | 'negative';
|
||||||
|
export type URTDomain = 'O' | 'P' | 'J' | 'E' | 'A' | 'V' | 'R';
|
||||||
|
export type Intensity = 'I1' | 'I2' | 'I3';
|
||||||
|
export type SentimentView = 'all' | 'positive' | 'negative' | 'mixed';
|
||||||
|
|
||||||
|
export interface ReviewIQFilters {
|
||||||
|
timeRange: TimeRange;
|
||||||
|
sentiment: Sentiment[];
|
||||||
|
urtDomain: URTDomain | null;
|
||||||
|
intensity: Intensity[];
|
||||||
|
brushRange: { start: string; end: string } | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReviewIQFilterContextValue {
|
||||||
|
filters: ReviewIQFilters;
|
||||||
|
setFilters: React.Dispatch<React.SetStateAction<ReviewIQFilters>>;
|
||||||
|
toggleSentiment: (s: Sentiment) => void;
|
||||||
|
setURTDomain: (domain: URTDomain | null) => void;
|
||||||
|
toggleIntensity: (i: Intensity) => void;
|
||||||
|
setTimeRange: (range: TimeRange) => void;
|
||||||
|
setBrushRange: (range: { start: string; end: string } | null) => void;
|
||||||
|
clearFilters: () => void;
|
||||||
|
hasActiveFilters: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Chart Colors ====================
|
||||||
|
|
||||||
|
export const SENTIMENT_COLORS = {
|
||||||
|
positive: '#22c55e',
|
||||||
|
neutral: '#eab308',
|
||||||
|
negative: '#ef4444',
|
||||||
|
mixed: '#f97316',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const VALENCE_COLORS: Record<string, string> = {
|
||||||
|
'V+': '#22c55e',
|
||||||
|
'V0': '#eab308',
|
||||||
|
'V-': '#ef4444',
|
||||||
|
'V±': '#f97316',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DOMAIN_COLORS: Record<string, string> = {
|
||||||
|
O: '#f97316', // Offering - orange
|
||||||
|
P: '#3b82f6', // People - blue
|
||||||
|
J: '#8b5cf6', // Journey - purple
|
||||||
|
E: '#06b6d4', // Environment - cyan
|
||||||
|
A: '#10b981', // Access - green
|
||||||
|
V: '#ec4899', // Value - pink
|
||||||
|
R: '#f59e0b', // Relationship - amber
|
||||||
|
};
|
||||||
|
|
||||||
|
export const INTENSITY_COLORS: Record<string, string> = {
|
||||||
|
I1: '#fef08a', // Light yellow
|
||||||
|
I2: '#fbbf24', // Yellow
|
||||||
|
I3: '#f97316', // Orange
|
||||||
|
};
|
||||||
|
|
||||||
|
export const STATUS_COLORS: Record<string, string> = {
|
||||||
|
good: '#22c55e', // Green
|
||||||
|
warning: '#eab308', // Yellow
|
||||||
|
critical: '#ef4444', // Red
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== Display Mappings ====================
|
||||||
|
|
||||||
|
export const VALENCE_LABELS: Record<string, string> = {
|
||||||
|
'V+': 'Positive',
|
||||||
|
'V0': 'Neutral',
|
||||||
|
'V-': 'Negative',
|
||||||
|
'V±': 'Mixed',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DOMAIN_LABELS: Record<string, string> = {
|
||||||
|
O: 'Offering',
|
||||||
|
P: 'People',
|
||||||
|
J: 'Journey',
|
||||||
|
E: 'Environment',
|
||||||
|
A: 'Access',
|
||||||
|
V: 'Value',
|
||||||
|
R: 'Relationship',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DOMAIN_OWNERS: Record<string, string> = {
|
||||||
|
O: 'Operations / Product',
|
||||||
|
P: 'HR / Training',
|
||||||
|
J: 'Operations / Process',
|
||||||
|
E: 'Facilities / IT',
|
||||||
|
A: 'Compliance / Design',
|
||||||
|
V: 'Finance / Pricing',
|
||||||
|
R: 'Leadership / CX',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const INTENSITY_LABELS: Record<string, string> = {
|
||||||
|
I1: 'Low',
|
||||||
|
I2: 'Medium',
|
||||||
|
I3: 'High',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const COMPLEXITY_LABELS: Record<string, string> = {
|
||||||
|
simple: 'Quick Fix',
|
||||||
|
medium: 'Moderate Effort',
|
||||||
|
complex: 'Strategic Initiative',
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== Domain Thresholds (from C2-KPI-Mapping-Guide) ====================
|
||||||
|
|
||||||
|
export const DOMAIN_THRESHOLDS: Record<string, { green: number; yellow: number }> = {
|
||||||
|
O: { green: 80, yellow: 60 },
|
||||||
|
P: { green: 85, yellow: 70 },
|
||||||
|
J: { green: 75, yellow: 55 },
|
||||||
|
E: { green: 80, yellow: 65 },
|
||||||
|
A: { green: 85, yellow: 70 },
|
||||||
|
V: { green: 70, yellow: 50 },
|
||||||
|
R: { green: 80, yellow: 60 },
|
||||||
|
};
|
||||||
|
|
||||||
|
// ==================== OEI Weights (from C2-KPI-Mapping-Guide) ====================
|
||||||
|
|
||||||
|
export const DOMAIN_WEIGHTS: Record<string, number> = {
|
||||||
|
O: 0.20,
|
||||||
|
P: 0.18,
|
||||||
|
J: 0.15,
|
||||||
|
E: 0.12,
|
||||||
|
A: 0.10,
|
||||||
|
V: 0.12,
|
||||||
|
R: 0.13,
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user