- {/* Positioned items with dots and offset labels */}
+ {/* Positioned items with dots and leader lines */}
{items.length === 0 ? (
None
@@ -48,60 +392,66 @@ function Quadrant({
) : (
)}
+
{/* 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';
+ const pos = labelPositions[index];
+ if (!pos) return null;
+
+ // Truncate long names for display
+ const displayName = item.name.length > 14 ? item.name.slice(0, 12) + '…' : item.name;
+ const isSelected = selectedItem?.subcode === item.subcode;
return (
);
})}
@@ -109,11 +459,450 @@ function Quadrant({
);
}
+// Hover preview card
+function HoverCard({ item, position }: { item: OpportunityItem; position: { x: number; y: number } }) {
+ return (
+
+
+
+
+
{item.name}
+
{item.domain_name}
+
+
+
+
+
+ Negative
+ {item.negative_pct}%
+
+
+ {item.rating_impact && (
+
+ Rating impact
+ +{item.rating_impact}
+
+ )}
+
+
+
+ Click for details →
+
+
+ );
+}
+
+// Render stars for rating
+function RatingStars({ rating }: { rating: number }) {
+ return (
+
+ {[1, 2, 3, 4, 5].map((star) => (
+
+ ))}
+
+ );
+}
+
+// Normalize text for matching (handles spacing differences around punctuation)
+function normalizeForMatching(text: string): string {
+ return text
+ .toLowerCase()
+ .replace(/\s+([.,!?;:])/g, '$1') // Remove space before punctuation
+ .replace(/([.,!?;:])\s+/g, '$1 ') // Normalize space after punctuation
+ .replace(/\s+/g, ' ') // Multiple spaces to single
+ .trim();
+}
+
+// Find span in review using normalized matching, return original indices
+function findSpanInReview(reviewText: string, spanText: string): { start: number; end: number } | null {
+ // Try exact match first (case-insensitive)
+ const lowerReview = reviewText.toLowerCase();
+ const lowerSpan = spanText.toLowerCase();
+ let idx = lowerReview.indexOf(lowerSpan);
+ if (idx !== -1) {
+ return { start: idx, end: idx + spanText.length };
+ }
+
+ // Try normalized matching
+ const normReview = normalizeForMatching(reviewText);
+ const normSpan = normalizeForMatching(spanText);
+ const normIdx = normReview.indexOf(normSpan);
+
+ if (normIdx === -1) return null;
+
+ // Map normalized index back to original text
+ // Walk through original text, tracking normalized position
+ let origIdx = 0;
+ let normPos = 0;
+ const targetNormStart = normIdx;
+ const targetNormEnd = normIdx + normSpan.length;
+ let origStart = -1;
+ let origEnd = -1;
+
+ while (origIdx <= reviewText.length && normPos <= normReview.length) {
+ if (normPos === targetNormStart) origStart = origIdx;
+ if (normPos === targetNormEnd) {
+ origEnd = origIdx;
+ break;
+ }
+
+ if (origIdx < reviewText.length) {
+ const origChar = reviewText[origIdx];
+ const normChar = normReview[normPos];
+
+ // Skip characters that were removed in normalization
+ if (origChar.toLowerCase() === normChar) {
+ origIdx++;
+ normPos++;
+ } else if (/\s/.test(origChar)) {
+ origIdx++; // Skip extra whitespace in original
+ } else {
+ origIdx++;
+ normPos++;
+ }
+ } else {
+ break;
+ }
+ }
+
+ if (origStart !== -1 && origEnd === -1) {
+ origEnd = reviewText.length;
+ }
+
+ return origStart !== -1 ? { start: origStart, end: origEnd } : null;
+}
+
+// Highlight span text within review text
+function HighlightedReviewText({
+ reviewText,
+ spanText,
+ maxLength = 150,
+ expanded = false,
+}: {
+ reviewText: string;
+ spanText: string;
+ maxLength?: number;
+ expanded?: boolean;
+}) {
+ // Find the span within the review using fuzzy matching
+ const match = findSpanInReview(reviewText, spanText);
+
+ if (!match) {
+ // Span not found, just show truncated review
+ const displayText = expanded ? reviewText : reviewText.slice(0, maxLength);
+ return (
+
+ {displayText}
+ {!expanded && reviewText.length > maxLength && '...'}
+
+ );
+ }
+
+ const spanIndex = match.start;
+ const spanEnd = match.end;
+
+ // If span covers most of the review (>80%), highlight the whole thing
+ const spanCoverage = (spanEnd - spanIndex) / reviewText.length;
+ if (spanCoverage > 0.8) {
+ const displayText = expanded ? reviewText : reviewText.slice(0, maxLength);
+ return (
+
+ {displayText}
+ {!expanded && reviewText.length > maxLength && '...'}
+
+ );
+ }
+
+ // Calculate display window around the span
+ let displayStart = 0;
+ let displayEnd = reviewText.length;
+
+ if (!expanded) {
+ // Show context around the span
+ const contextBefore = 40;
+ const contextAfter = 60;
+ displayStart = Math.max(0, spanIndex - contextBefore);
+ displayEnd = Math.min(reviewText.length, spanEnd + contextAfter);
+
+ // Adjust to not cut words
+ if (displayStart > 0) {
+ const spaceIndex = reviewText.indexOf(' ', displayStart);
+ if (spaceIndex !== -1 && spaceIndex < spanIndex) {
+ displayStart = spaceIndex + 1;
+ }
+ }
+ if (displayEnd < reviewText.length) {
+ const spaceIndex = reviewText.lastIndexOf(' ', displayEnd);
+ if (spaceIndex !== -1 && spaceIndex > spanEnd) {
+ displayEnd = spaceIndex;
+ }
+ }
+ }
+
+ const before = reviewText.slice(displayStart, spanIndex);
+ const highlight = reviewText.slice(spanIndex, spanEnd);
+ const after = reviewText.slice(spanEnd, displayEnd);
+
+ return (
+
+ {displayStart > 0 && '...'}
+ {before}
+ {highlight}
+ {after}
+ {!expanded && displayEnd < reviewText.length && '...'}
+
+ );
+}
+
+// Google-style review card for customer feedback
+function SpanCard({
+ span,
+ onViewReview
+}: {
+ span: OpportunitySpan;
+ onViewReview?: (reviewId: string, spanId: string) => void;
+}) {
+ const [expanded, setExpanded] = useState(false);
+ const reviewText = span.review_text || span.span_text;
+ const isLongReview = reviewText.length > 150;
+
+ return (
+
+ {/* Header: Stars + Date + Expand button */}
+
+ {span.rating && }
+ {span.review_date && (
+ {span.review_date}
+ )}
+ {span.review_id && onViewReview && (
+
+ )}
+
+
+ {/* Review text with highlighted span */}
+
+ {span.review_text ? (
+
+ ) : (
+ "{span.span_text}"
+ )}
+ {isLongReview && !expanded && (
+
+ )}
+ {expanded && isLongReview && (
+
+ )}
+
+
+ );
+}
+
+// Detail panel component
+function DetailPanel({
+ item,
+ onClose,
+ onViewReview,
+}: {
+ item: OpportunityItem;
+ onClose: () => void;
+ onViewReview?: (reviewId: string, spanId: string) => void;
+}) {
+ return (
+
+ {/* Header */}
+
+
+
+
+
{item.name}
+
{item.domain_name} · {item.subcode}
+
+
+
+
+
+ {/* Metrics */}
+
+
+
Negative Sentiment
+
{item.negative_pct}%
+
{item.span_count} mentions
+
+ {item.rating_impact && (
+
+
+
+ If Fixed
+
+
+{item.rating_impact}
+
rating points
+
+ )}
+
+
+ {/* Complexity */}
+
+
+ Complexity:
+
+ {COMPLEXITY_LABELS[item.complexity] || item.complexity}
+
+
+
+ {/* Customer Feedback Spans (evidence of the problem) - expands to fill available space */}
+ {item.spans && item.spans.length > 0 && (
+
+
+
+ Customer Feedback ({item.spans.length})
+
+
+ {item.spans.map((span) => (
+
+ ))}
+
+
+ )}
+
+ {/* Solution */}
+ {item.solution && (
+
+
+ 💡 Suggested Solution
+
+
+ {item.solution}
+
+
+ )}
+
+ {/* Owner */}
+ {item.owner && (
+
+
+
+ Assign to: {item.owner}
+
+
+ )}
+
+ {/* CTA */}
+
+
+ );
+}
+
/**
* 2x2 Opportunity Matrix visualization.
* Shows issues categorized by frequency vs complexity with coordinate positioning.
*/
export function OpportunityMatrix({ matrix, onSubcodeClick }: OpportunityMatrixProps) {
+ const [selectedItem, setSelectedItem] = useState
(null);
+ const [hoveredItem, setHoveredItem] = useState(null);
+ const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+ const [gridSize, setGridSize] = useState(null);
+ const matrixRef = useRef(null);
+ const gridContainerRef = useRef(null);
+ const componentRef = useRef(null);
+ const [reviewModal, setReviewModal] = useState<{ reviewId: string; spanId: string } | null>(null);
+
+ // Calculate grid size based on available space
+ useEffect(() => {
+ const updateGridSize = () => {
+ // Calculate max available height for the grid (viewport - margins - header - labels - legend)
+ const maxAvailableHeight = window.innerHeight - 300;
+
+ // Get component width, then subtract detail panel min (280px) + y-axis label (40px) + gaps (32px)
+ const componentWidth = componentRef.current?.offsetWidth ?? window.innerWidth * 0.6;
+ const maxAvailableWidth = componentWidth - 280 - 40 - 32; // detail panel min + y-label + padding/gaps
+
+ // Grid must be square - use the smaller of available height or width
+ const size = Math.min(maxAvailableHeight, maxAvailableWidth);
+ setGridSize(Math.max(250, size));
+ };
+
+ // Delay initial calculation to allow layout to settle
+ const timeoutId = setTimeout(updateGridSize, 50);
+ window.addEventListener('resize', updateGridSize);
+
+ // Also observe component width changes
+ if (componentRef.current) {
+ const resizeObserver = new ResizeObserver(updateGridSize);
+ resizeObserver.observe(componentRef.current);
+ return () => {
+ clearTimeout(timeoutId);
+ window.removeEventListener('resize', updateGridSize);
+ resizeObserver.disconnect();
+ };
+ }
+
+ return () => {
+ clearTimeout(timeoutId);
+ window.removeEventListener('resize', updateGridSize);
+ };
+ }, []);
+
if (!matrix) {
return null;
}
@@ -128,9 +917,29 @@ export function OpportunityMatrix({ matrix, onSubcodeClick }: OpportunityMatrixP
return null;
}
+ const handleItemClick = (item: OpportunityItem) => {
+ setSelectedItem(item);
+ onSubcodeClick?.(item.subcode);
+ };
+
+ const handleItemHover = (item: OpportunityItem | null) => {
+ setHoveredItem(item);
+ };
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ setMousePos({ x: e.clientX, y: e.clientY });
+ };
+
return (
-
-
+
+
Opportunity Matrix
@@ -138,23 +947,36 @@ export function OpportunityMatrix({ matrix, onSubcodeClick }: OpportunityMatrixP
- {/* Matrix with L-shaped label area */}
-
- {/* Y-axis label column */}
-
+ {/* Main layout: Matrix + Detail Panel */}
+
+ {/* Matrix section */}
+
+ {/* Matrix with L-shaped label area */}
+
+ {/* Y-axis label column - height matches grid */}
+
Effort →
{/* Main matrix area */}
-
+
{/* Matrix with arrows */}
-
+
{/* Coordinate axes - L-shaped from bottom-left origin */}
-
+
{/* Unified coordinate grid overlay */}
-
+
{/* Top Row: Simple solutions */}
{/* Bottom Row: Complex solutions */}
@@ -276,7 +1109,9 @@ export function OpportunityMatrix({ matrix, onSubcodeClick }: OpportunityMatrixP
borderColor="border-purple-200"
textColor="text-purple-700"
iconBg="bg-purple-200"
- onItemClick={onSubcodeClick}
+ onItemClick={handleItemClick}
+ onItemHover={handleItemHover}
+ selectedItem={selectedItem}
/>
{/* X-axis label row */}
-
+
Frequency →
+
+ {/* Legend */}
+
+
+
+
+
+ {/* Detail Panel - expands horizontally, height matches grid + labels */}
+
+ {selectedItem ? (
+
setSelectedItem(null)}
+ onViewReview={(reviewId, spanId) => setReviewModal({ reviewId, spanId })}
+ />
+ ) : (
+
+
+
+
+
Select an opportunity
+
+ Click on any item in the matrix to see details and suggested actions
+
+
- {/* Legend */}
-
-
-
-
Quick Wins: Fix first
-
-
-
-
Critical: High impact
-
-
-
-
Strategic: Plan ahead
-
-
-
-
Nice to Have: Low priority
-
-
+ {/* Hover Card */}
+ {hoveredItem && !selectedItem && (
+
+ )}
+
+ {/* Review Modal */}
+ {reviewModal && (
+
setReviewModal(null)}
+ />
+ )}
);
}
diff --git a/web/components/reviewiq/insights/RatingSimulator.tsx b/web/components/reviewiq/insights/RatingSimulator.tsx
new file mode 100644
index 0000000..94099b9
--- /dev/null
+++ b/web/components/reviewiq/insights/RatingSimulator.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import { Star, TrendingUp, Award, Zap } from 'lucide-react';
+import type { RatingSimulator as RatingSimulatorType, WeaknessItem } from '../types';
+
+interface RatingSimulatorProps {
+ simulator: RatingSimulatorType | null;
+ topWeaknesses?: WeaknessItem[];
+}
+
+interface RatingStarProps {
+ rating: number;
+ label: string;
+ color: string;
+ isProjected?: boolean;
+}
+
+function RatingDisplay({ rating, label, color, isProjected }: RatingStarProps) {
+ const fullStars = Math.floor(rating);
+ const partialStar = rating - fullStars;
+ const emptyStars = 5 - Math.ceil(rating);
+
+ return (
+
+
{label}
+
+ {/* Full stars */}
+ {Array.from({ length: fullStars }).map((_, i) => (
+
+ ))}
+ {/* Partial star */}
+ {partialStar > 0 && (
+
+ )}
+ {/* Empty stars */}
+ {Array.from({ length: emptyStars }).map((_, i) => (
+
+ ))}
+
+
+ {rating.toFixed(2)}
+
+
+ );
+}
+
+/**
+ * Rating simulator showing potential rating improvements.
+ */
+export function RatingSimulator({ simulator, topWeaknesses = [] }: RatingSimulatorProps) {
+ if (!simulator || simulator.potential_gain <= 0) {
+ return null;
+ }
+
+ const { current_rating, if_fix_top_1, if_fix_top_3, potential_gain } = simulator;
+
+ // Calculate progress towards 5 stars
+ const currentProgress = (current_rating / 5) * 100;
+ const potentialProgress = ((current_rating + potential_gain) / 5) * 100;
+
+ return (
+
+
+
+
+
+
Rating Simulator
+
+
+ +{potential_gain.toFixed(2)} potential
+
+
+
+ {/* Rating Comparisons */}
+
+
+ {if_fix_top_1 && (
+
+ )}
+ {if_fix_top_3 && (
+
+ )}
+
+
+ {/* Progress Bar */}
+
+
+ Progress to 5 Stars
+ {Math.min(100, potentialProgress).toFixed(0)}% achievable
+
+
+ {/* Current rating progress */}
+
+ {/* Potential gain overlay */}
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ {/* Action Items */}
+ {topWeaknesses.length > 0 && (
+
+
+
+ Priority Fixes
+
+
+ {topWeaknesses.slice(0, 3).map((weakness, index) => (
+
+
+ {index + 1}
+
+
+
+ {weakness.subcode_name}
+
+
+ {weakness.negative_percentage.toFixed(0)}% negative
+ {weakness.projected_rating_impact && (
+
+ +{weakness.projected_rating_impact.toFixed(2)} if fixed
+
+ )}
+
+
+ {weakness.solution_complexity && (
+
+ {weakness.solution_complexity}
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {/* CTA */}
+
+
+
+
+ Fixing the top 3 issues could boost your rating by{' '}
+ {((if_fix_top_3 || current_rating) - current_rating).toFixed(2)} stars
+
+
+
+
+ );
+}
diff --git a/web/components/reviewiq/insights/StrengthsWeaknesses.tsx b/web/components/reviewiq/insights/StrengthsWeaknesses.tsx
new file mode 100644
index 0000000..d6ad655
--- /dev/null
+++ b/web/components/reviewiq/insights/StrengthsWeaknesses.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import { TrendingUp, TrendingDown, Lightbulb, Target, Megaphone, User } from 'lucide-react';
+import type { StrengthItem, WeaknessItem } from '../types';
+import { DOMAIN_COLORS, COMPLEXITY_LABELS } from '../types';
+import { getSubcodeDefinition } from '@/lib/taxonomy/data';
+
+interface StrengthsWeaknessesProps {
+ strengths: StrengthItem[];
+ weaknesses: WeaknessItem[];
+ onStrengthClick?: (subcode: string) => void;
+ onWeaknessClick?: (subcode: string) => void;
+}
+
+export function StrengthsWeaknesses({
+ strengths,
+ weaknesses,
+ onStrengthClick,
+ onWeaknessClick,
+}: StrengthsWeaknessesProps) {
+ const hasData = strengths.length > 0 || weaknesses.length > 0;
+
+ if (!hasData) {
+ return (
+
+
Not enough data to identify strengths and weaknesses.
+
More reviews are needed for analysis.
+
+ );
+ }
+
+ return (
+
+ {/* Strengths Panel */}
+
+
+
+
+
Your Strengths
+
+
Protect & amplify these
+
+
+
+ {strengths.length === 0 ? (
+
+ No strong positive patterns detected yet.
+
+ ) : (
+ strengths.map((strength) => (
+
+ ))
+ )}
+
+
+
+ {/* Weaknesses Panel */}
+
+
+
+
+
Areas to Improve
+
+
Fix these to boost rating
+
+
+
+ {weaknesses.length === 0 ? (
+
+ No significant issues detected. Great job!
+
+ ) : (
+ weaknesses.map((weakness) => (
+
+ ))
+ )}
+
+
+
+ );
+}
diff --git a/web/components/reviewiq/insights/index.ts b/web/components/reviewiq/insights/index.ts
new file mode 100644
index 0000000..c7f01a2
--- /dev/null
+++ b/web/components/reviewiq/insights/index.ts
@@ -0,0 +1,4 @@
+export { ExecutiveSummary } from './ExecutiveSummary';
+export { StrengthsWeaknesses } from './StrengthsWeaknesses';
+export { OpportunityMatrix } from './OpportunityMatrix';
+export { RatingSimulator } from './RatingSimulator';
diff --git a/web/components/reviewiq/kpi/DomainScores.tsx b/web/components/reviewiq/kpi/DomainScores.tsx
new file mode 100644
index 0000000..768e452
--- /dev/null
+++ b/web/components/reviewiq/kpi/DomainScores.tsx
@@ -0,0 +1,261 @@
+'use client';
+
+import { ThumbsUp, ThumbsDown, MessageSquare, Info } from 'lucide-react';
+import type { DomainScore, URTDomain } from '../types';
+import { DOMAIN_COLORS, DOMAIN_LABELS } from '../types';
+
+interface DomainScoresProps {
+ scores: DomainScore[];
+ overallIndex: number | null;
+ onDomainClick?: (domain: URTDomain) => void;
+ activeDomain?: URTDomain | null;
+}
+
+// Domain descriptions explaining what each measures
+const DOMAIN_DESCRIPTIONS: Record
= {
+ O: 'Product/service quality, features, and reliability',
+ P: 'Staff attitude, helpfulness, and professionalism',
+ J: 'Are appointments on time? Is the process smooth?',
+ E: 'Physical space, ambiance, cleanliness, and safety',
+ A: 'Can you get there? Location, open hours, parking',
+ V: 'Pricing fairness, value for money, and billing clarity',
+ R: 'Trust, consistency, care, and problem recovery',
+};
+
+// Get color based on score value
+function getScoreColor(score: number): string {
+ if (score >= 70) return '#22c55e'; // green-500
+ if (score >= 50) return '#eab308'; // yellow-500
+ return '#ef4444'; // red-500
+}
+
+// Get background color (lighter) based on score value
+function getScoreBgColor(score: number): string {
+ if (score >= 70) return '#dcfce7'; // green-100
+ if (score >= 50) return '#fef9c3'; // yellow-100
+ return '#fee2e2'; // red-100
+}
+
+// Get status label
+function getStatusLabel(score: number): string {
+ if (score >= 70) return 'Good';
+ if (score >= 50) return 'Needs Work';
+ return 'Critical';
+}
+
+// Get emoji for status
+function getStatusEmoji(score: number): string {
+ if (score >= 70) return '✓';
+ if (score >= 50) return '!';
+ return '✗';
+}
+
+export function DomainScores({
+ scores,
+ overallIndex,
+ onDomainClick,
+ activeDomain,
+}: DomainScoresProps) {
+ // Sort scores by domain order: O, P, J, E, A, V, R
+ const domainOrder = ['O', 'P', 'J', 'E', 'A', 'V', 'R'];
+ const sortedScores = [...scores].sort(
+ (a, b) => domainOrder.indexOf(a.domain) - domainOrder.indexOf(b.domain)
+ );
+
+ // Calculate totals
+ const totalPositive = scores.reduce((sum, s) => sum + s.positive_count, 0);
+ const totalNegative = scores.reduce((sum, s) => sum + s.negative_count, 0);
+ const totalMentions = scores.reduce((sum, s) => sum + s.total_count, 0);
+
+ return (
+
+ {/* Header Section */}
+
+
+
What Customers Talk About
+
+ How you're performing in each area of the customer experience
+
+
+
+ {/* Overall Experience Index */}
+ {overallIndex !== null && (
+
+
+ Overall Score
+
+
+
+ {overallIndex.toFixed(0)}
+
+ /100
+
+
+ )}
+
+
+ {/* Summary Stats */}
+
+
+
+
+
+
+
{totalPositive}
+
Happy comments
+
+
+
+
+
+
+
+
{totalNegative}
+
Complaints
+
+
+
+
+
+
+
+
{totalMentions}
+
Topics analyzed
+
+
+
+
+ {/* How to read this */}
+
+
+
+ Score = % positive feedback. Higher is better. Based on {totalMentions.toLocaleString()} things customers mentioned in their reviews.
+
+
+
+ {/* Domain Score Cards */}
+
+ {sortedScores.map((score) => {
+ const isActive = activeDomain === score.domain;
+ const scoreColor = getScoreColor(score.score);
+ const scoreBg = getScoreBgColor(score.score);
+ const positiveRatio = score.total_count > 0
+ ? Math.round((score.positive_count / score.total_count) * 100)
+ : 0;
+
+ return (
+
+ );
+ })}
+
+
+ {/* Threshold Legend */}
+
+
+ Click any area to filter the dashboard
+
+
+
+
{
+ if (e.key === 'Enter' || e.key === ' ') {
+ onClick?.();
+ }
+ }}
+ >
+
+
+
+ {title}
+
+ {isActive && (
+
+ ACTIVE
+
+ )}
+
+
{value}
+ {subtitle &&
{subtitle}
}
+
+ {/* Total Reviews */}
+
+
+ {/* Total Spans */}
+
+
+ {/* Open Issues */}
+
+
+ {/* Average Rating */}
+
+
+ {/* Positive Count */}
+ toggleSentiment('positive')}
+ isActive={positiveActive}
+ />
+
+ {/* Negative Count */}
+ toggleSentiment('negative')}
+ isActive={negativeActive}
+ />
+
+ {/* Neutral Count */}
+ toggleSentiment('neutral')}
+ isActive={filters.sentiment.includes('neutral')}
+ />
+
+ {/* Mixed Count */}
+
+
+ );
+}
diff --git a/web/components/reviewiq/tables/IssueDetailModal.tsx b/web/components/reviewiq/tables/IssueDetailModal.tsx
new file mode 100644
index 0000000..dca37a2
--- /dev/null
+++ b/web/components/reviewiq/tables/IssueDetailModal.tsx
@@ -0,0 +1,259 @@
+'use client';
+
+import { useState } from 'react';
+import { X, AlertTriangle, Layers, Calendar, Target, User, Lightbulb, FileText } from 'lucide-react';
+import type { IssueItem, SpanItem } from '../types';
+import { DOMAIN_LABELS, INTENSITY_LABELS, VALENCE_LABELS, VALENCE_COLORS } from '../types';
+import { useIssueSpans } from '@/hooks/useReviewIQAnalytics';
+import { ReviewModal } from './ReviewModal';
+
+interface IssueDetailModalProps {
+ issue: IssueItem;
+ onClose: () => void;
+}
+
+/**
+ * Modal showing issue details and related spans.
+ */
+export function IssueDetailModal({ issue, onClose }: IssueDetailModalProps) {
+ const { data: spans, loading, error } = useIssueSpans(issue.issue_id);
+ const [selectedReview, setSelectedReview] = useState<{
+ reviewId: string;
+ spanId: string;
+ } | null>(null);
+
+ return (
+
+
e.stopPropagation()}
+ >
+ {/* Header */}
+
+
+
+
+
+
+ {issue.subcode_name || issue.primary_subcode}
+
+ {issue.primary_subcode}
+
+
+ {issue.state.toUpperCase()}
+
+
+
+
+
+
+ {/* Content */}
+
+ {/* Issue Info Grid */}
+
+
+
+
+ URT Code
+
+
+ {issue.primary_subcode}
+
+
+
+
+
+
+ Domain
+
+
+ {DOMAIN_LABELS[issue.domain] || issue.domain}
+
+
+
+
+
+
+ {(issue.priority_score * 100).toFixed(0)}%
+
+
+
+
+
+
+ Intensity
+
+
+ {issue.max_intensity
+ ? INTENSITY_LABELS[issue.max_intensity] || issue.max_intensity
+ : 'N/A'}
+
+
+
+
+ {/* Entity */}
+ {issue.entity && (
+
+
Related Entity
+
{issue.entity}
+
+ )}
+
+ {/* Solution & Owner Section */}
+ {(issue.solution || issue.default_owner) && (
+
+ {issue.solution && (
+
+
+
+ Recommended Solution
+ {issue.solution_complexity && (
+
+ {issue.solution_complexity.charAt(0).toUpperCase() + issue.solution_complexity.slice(1)} Complexity
+
+ )}
+
+
{issue.solution}
+
+ )}
+
+ {issue.default_owner && (
+
+
+
+ Assign to:{' '}
+ {issue.default_owner}
+
+
+ )}
+
+ )}
+
+ {/* Related Spans */}
+
+
+
+ Related Spans ({issue.span_count})
+
+
+
+ {loading ? (
+
+ ) : error ? (
+
+ Failed to load spans: {error}
+
+ ) : spans.length === 0 ? (
+
+ No spans found for this issue
+
+ ) : (
+
+ {spans.map((span: SpanItem) => (
+
+
+
{span.span_text}
+
+ {span.valence && (
+
+ {VALENCE_LABELS[span.valence] || span.valence}
+
+ )}
+ {span.intensity && (
+
+ {INTENSITY_LABELS[span.intensity] || span.intensity}
+
+ )}
+
+
+
+
+ {span.urt_primary && (
+ {span.urt_primary}
+ )}
+ {span.review_time && (
+ {new Date(span.review_time).toLocaleDateString()}
+ )}
+ {span.entity && Entity: {span.entity}}
+
+ {/* View Full Review Button */}
+ {span.source_review_id && (
+
+ )}
+
+
+ ))}
+
+ )}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ {/* Review Modal for drill-down */}
+ {selectedReview && (
+
setSelectedReview(null)}
+ />
+ )}
+
+
+ {row.original.subcode_name || row.original.primary_subcode}
+
+
+ {row.original.primary_subcode}
+
+
+ ),
+ },
+ {
+ accessorKey: 'domain',
+ header: 'Domain',
+ cell: ({ row }) => (
+
+ {DOMAIN_LABELS[row.original.domain] || row.original.domain}
+
+ ),
+ },
+ {
+ accessorKey: 'default_owner',
+ header: 'Owner',
+ cell: ({ row }) => (
+
+ {row.original.default_owner || 'Unassigned'}
+
+ ),
+ },
+ {
+ accessorKey: 'state',
+ header: 'State',
+ cell: ({ row }) => (
+
+ {row.original.state.toUpperCase()}
+
+ ),
+ },
+ {
+ accessorKey: 'priority_score',
+ header: ({ column }) => (
+
+ ),
+ cell: ({ row }) => (
+
+ {(row.original.priority_score * 100).toFixed(0)}%
+
+ ),
+ },
+ {
+ accessorKey: 'span_count',
+ header: 'Spans',
+ cell: ({ row }) => (
+
+ {row.original.span_count}
+
+ ),
+ },
+ {
+ accessorKey: 'max_intensity',
+ header: 'Intensity',
+ cell: ({ row }) => (
+
+ {row.original.max_intensity
+ ? INTENSITY_LABELS[row.original.max_intensity] || row.original.max_intensity
+ : '-'}
+
+ ),
+ },
+ {
+ id: 'actions',
+ header: '',
+ cell: ({ row }) => (
+
+ ),
+ },
+ ],
+ []
+ );
+
+ const table = useReactTable({
+ data: issues.items,
+ columns,
+ state: { sorting },
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ initialState: {
+ pagination: { pageSize: 10 },
+ },
+ });
+
+ const totalPages = Math.ceil(issues.total / issues.page_size);
+
+ return (
+
+
+
+
Issues
+
+ {issues.total} total issues - Click row for details
+
+
+
+
+ {issues.items.length === 0 ? (
+
+ No issues found
+
+ ) : (
+ <>
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+ |
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ |
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+ setSelectedIssue(row.original)}
+ >
+ {row.getVisibleCells().map((cell) => (
+ |
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ |
+ ))}
+
+ ))}
+
+
+
+
+ {/* Pagination */}
+
+
+ Page {issues.page} of {totalPages} ({issues.total} issues)
+
+
+
+
+
+
+
+ )}
+
+ {/* Detail Modal */}
+ {selectedIssue && (
+
setSelectedIssue(null)}
+ />
+ )}
+
+
+ {/* Header */}
+
+
Full Review
+
+
+
+ {/* Content */}
+
+ {loading ? (
+
+
+
+ ) : error ? (
+
+ ) : review ? (
+
+ {/* Review Metadata */}
+
+
+ {/* Author */}
+ {review.author_name && (
+
+
+ {review.author_name}
+
+ )}
+ {/* Business */}
+ {review.business_name && (
+
+
+ {review.business_name}
+
+ )}
+ {/* Date */}
+ {review.review_time && (
+
+
+ {new Date(review.review_time).toLocaleDateString()}
+
+ )}
+
+
+ {/* Rating */}
+ {review.rating !== null && (
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ))}
+
+ )}
+
+
+ {/* Review Text with Highlighted Spans */}
+
+
+ {Array.isArray(highlightedText) ? (
+ highlightedText.map((segment, idx) =>
+ segment.span ? (
+
+ {segment.text}
+
+ ) : (
+ {segment.text}
+ )
+ )
+ ) : (
+ highlightedText
+ )}
+
+
+
+ {/* Legend */}
+
+
+
+ Positive
+
+
+
+ Neutral
+
+
+
+ Negative
+
+
|
+
Underline = URT Domain
+
+
+ {/* Classified Spans List */}
+
+
+ Classified Spans ({review.spans.length})
+
+
+ {review.spans.map((span) => (
+
+
+
+ “{span.span_text}”
+
+
+ {/* URT Code */}
+ {span.urt_primary && (
+
+ {span.urt_primary}
+
+ )}
+ {/* Valence */}
+ {span.valence && (
+
+ {VALENCE_LABELS[span.valence]}
+
+ )}
+ {/* Intensity */}
+ {span.intensity && (
+
+ {INTENSITY_LABELS[span.intensity]}
+
+ )}
+
+
+ {/* Domain label */}
+ {span.urt_primary && (
+
+ {DOMAIN_LABELS[span.urt_primary[0]]} Domain
+ {span.entity && ` · Entity: ${span.entity}`}
+
+ )}
+
+ ))}
+
+
+
+ {/* External Link */}
+ {review.review_url && (
+
+ )}
+
+ ) : null}
+
+
+
+
+ {row.original.span_text}
+
+
+
+
+
+ Full Text
+
+ {span.span_text}
+
+
+
+
+ Span ID
+ {span.span_id}
+
+
+ Review ID
+
+ {span.source_review_id || '-'}
+
+
+
+ Entity
+ {span.entity || '-'}
+
+
+ Domain
+
+ {span.urt_primary
+ ? DOMAIN_LABELS[span.urt_primary[0]] || span.urt_primary[0]
+ : '-'}
+
+
+
+ {/* View Full Review Button */}
+ {span.source_review_id && (
+
+
+
+ )}
+ |
+
+ );
+ };
+
+ return (
+
+
+
+
Classified Spans
+
+ {spans.total} total spans - Click row to expand
+
+
+
+
+ {spans.items.length === 0 ? (
+
+ No spans found
+
+ ) : (
+ <>
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+ |
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ |
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ row.toggleExpanded()}
+ >
+ {row.getVisibleCells().map((cell) => (
+ |
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ |
+ ))}
+
+ {row.getIsExpanded() && renderExpandedRow(row)}
+
+ ))}
+
+
+
+
+ {/* Pagination */}
+
+
+ Page {spans.page} of {totalPages} ({spans.total} spans)
+
+
+
+
+
+
+
+ )}
+
+ {/* Review Modal for drill-down */}
+
setSelectedReview(null)}
+ />
+