| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| import React, { useState, useRef } from 'react'; |
| import { |
| Eye, Activity, MessageSquare, Clock, Zap, |
| Video, Download, ChevronDown, ChevronUp, |
| CheckCircle, AlertTriangle, XCircle, Award, TrendingUp |
| } from 'lucide-react'; |
| import './PerformanceSummary.css'; |
|
|
| export default function PerformanceSummary({ summary, onClose, onDownloadVideo }) { |
| const [expandedSections, setExpandedSections] = useState({ |
| eyeContact: true, |
| posture: true, |
| fillerWords: false, |
| silence: false, |
| speed: true, |
| }); |
| const videoRef = useRef(null); |
|
|
| if (!summary) return null; |
|
|
| const toggleSection = (section) => { |
| setExpandedSections(prev => ({ |
| ...prev, |
| [section]: !prev[section] |
| })); |
| }; |
|
|
| const getGradeIcon = (grade) => { |
| if (grade === 'Excellent') return <CheckCircle size={18} className="grade-icon excellent" />; |
| if (grade === 'Good') return <CheckCircle size={18} className="grade-icon good" />; |
| if (grade === 'Fair') return <AlertTriangle size={18} className="grade-icon fair" />; |
| return <XCircle size={18} className="grade-icon poor" />; |
| }; |
|
|
| const getScoreColor = (score) => { |
| if (score >= 80) return 'excellent'; |
| if (score >= 60) return 'good'; |
| if (score >= 40) return 'fair'; |
| return 'poor'; |
| }; |
|
|
| const handleDownloadVideo = () => { |
| if (summary.video?.url) { |
| const a = document.createElement('a'); |
| a.href = summary.video.url; |
| a.download = `interview-recording-${new Date().toISOString().split('T')[0]}.webm`; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| } |
| }; |
|
|
| return ( |
| <div className="performance-summary-overlay"> |
| <div className="performance-summary-modal"> |
| {/* Header */} |
| <div className="summary-header"> |
| <div className="summary-title"> |
| <Award size={28} className="title-icon" /> |
| <div> |
| <h2>Interview Performance Analysis</h2> |
| <p className="summary-subtitle"> |
| {summary.mode === 'strict' ? 'Strict Mode' : 'High-Pressure Mode'} Interview Complete |
| </p> |
| </div> |
| </div> |
| <button className="close-btn" onClick={onClose}>×</button> |
| </div> |
| |
| {/* Overall Score */} |
| <div className="overall-score-section"> |
| <div className={`score-circle ${getScoreColor(summary.overallScore)}`}> |
| <span className="score-value">{summary.overallScore}</span> |
| <span className="score-label">Overall</span> |
| </div> |
| <div className="score-breakdown"> |
| <div className="breakdown-item"> |
| <Eye size={16} /> |
| <span>Eye Contact</span> |
| <span className={`score ${getScoreColor(summary.eyeContact?.percentage || 0)}`}> |
| {summary.eyeContact?.percentage || 0}% |
| </span> |
| </div> |
| <div className="breakdown-item"> |
| <Activity size={16} /> |
| <span>Stability</span> |
| <span className={`score ${getScoreColor(summary.posture?.stabilityScore || 0)}`}> |
| {summary.posture?.stabilityScore || 0}% |
| </span> |
| </div> |
| <div className="breakdown-item"> |
| <Zap size={16} /> |
| <span>Speed</span> |
| <span className="score">{summary.speed?.wordsPerMinute || 0} WPM</span> |
| </div> |
| </div> |
| </div> |
| |
| {/* Video Section */} |
| {summary.video?.available && summary.video?.url && ( |
| <div className="video-section"> |
| <div className="section-header"> |
| <Video size={20} /> |
| <h3>Your Interview Recording</h3> |
| <button className="download-btn" onClick={handleDownloadVideo}> |
| <Download size={16} /> Download |
| </button> |
| </div> |
| <div className="video-container"> |
| <video |
| ref={videoRef} |
| src={summary.video.url} |
| controls |
| className="interview-video" |
| /> |
| <p className="video-duration">Duration: {summary.video.duration}s</p> |
| </div> |
| </div> |
| )} |
| |
| {/* Detailed Metrics */} |
| <div className="metrics-sections"> |
| {/* Eye Contact */} |
| <div className={`metric-section ${expandedSections.eyeContact ? 'expanded' : ''}`}> |
| <div className="section-header clickable" onClick={() => toggleSection('eyeContact')}> |
| <div className="header-left"> |
| <Eye size={20} /> |
| <h3>Eye Contact Analysis</h3> |
| {getGradeIcon(summary.eyeContact?.grade)} |
| </div> |
| {expandedSections.eyeContact ? <ChevronUp size={20} /> : <ChevronDown size={20} />} |
| </div> |
| {expandedSections.eyeContact && ( |
| <div className="section-content"> |
| <div className="metric-grid"> |
| <div className="metric-item"> |
| <span className="metric-label">Eye Contact Time</span> |
| <span className={`metric-value ${getScoreColor(summary.eyeContact?.percentage)}`}> |
| {summary.eyeContact?.percentage}% |
| </span> |
| </div> |
| <div className="metric-item"> |
| <span className="metric-label">Grade</span> |
| <span className="metric-value">{summary.eyeContact?.grade}</span> |
| </div> |
| </div> |
| <div className="progress-bar"> |
| <div |
| className={`progress-fill ${getScoreColor(summary.eyeContact?.percentage)}`} |
| style={{ width: `${summary.eyeContact?.percentage}%` }} |
| /> |
| </div> |
| <p className="recommendation">{summary.eyeContact?.recommendation}</p> |
| </div> |
| )} |
| </div> |
| |
| {/* Posture/Stability */} |
| <div className={`metric-section ${expandedSections.posture ? 'expanded' : ''}`}> |
| <div className="section-header clickable" onClick={() => toggleSection('posture')}> |
| <div className="header-left"> |
| <Activity size={20} /> |
| <h3>Posture & Stability</h3> |
| {getGradeIcon(summary.posture?.grade)} |
| </div> |
| {expandedSections.posture ? <ChevronUp size={20} /> : <ChevronDown size={20} />} |
| </div> |
| {expandedSections.posture && ( |
| <div className="section-content"> |
| <div className="metric-grid"> |
| <div className="metric-item"> |
| <span className="metric-label">Stability Score</span> |
| <span className={`metric-value ${getScoreColor(summary.posture?.stabilityScore)}`}> |
| {summary.posture?.stabilityScore}% |
| </span> |
| </div> |
| <div className="metric-item"> |
| <span className="metric-label">Fidget Count</span> |
| <span className="metric-value">{summary.posture?.fidgetCount}</span> |
| </div> |
| </div> |
| <div className="progress-bar"> |
| <div |
| className={`progress-fill ${getScoreColor(summary.posture?.stabilityScore)}`} |
| style={{ width: `${summary.posture?.stabilityScore}%` }} |
| /> |
| </div> |
| <p className="recommendation">{summary.posture?.recommendation}</p> |
| </div> |
| )} |
| </div> |
| |
| {/* Filler Words */} |
| <div className={`metric-section ${expandedSections.fillerWords ? 'expanded' : ''}`}> |
| <div className="section-header clickable" onClick={() => toggleSection('fillerWords')}> |
| <div className="header-left"> |
| <MessageSquare size={20} /> |
| <h3>Filler Words</h3> |
| <span className={`count-badge ${summary.fillerWords?.totalCount > 10 ? 'warning' : 'good'}`}> |
| {summary.fillerWords?.totalCount || 0} found |
| </span> |
| </div> |
| {expandedSections.fillerWords ? <ChevronUp size={20} /> : <ChevronDown size={20} />} |
| </div> |
| {expandedSections.fillerWords && ( |
| <div className="section-content"> |
| <div className="filler-breakdown"> |
| {Object.entries(summary.fillerWords?.breakdown || {}).map(([word, count]) => ( |
| <div key={word} className="filler-item"> |
| <span className="filler-word">"{word}"</span> |
| <span className="filler-count">{count}x</span> |
| </div> |
| ))} |
| {Object.keys(summary.fillerWords?.breakdown || {}).length === 0 && ( |
| <p className="no-fillers">No filler words detected! 🎉</p> |
| )} |
| </div> |
| <p className="recommendation">{summary.fillerWords?.recommendation}</p> |
| </div> |
| )} |
| </div> |
| |
| {/* Silence Analysis */} |
| <div className={`metric-section ${expandedSections.silence ? 'expanded' : ''}`}> |
| <div className="section-header clickable" onClick={() => toggleSection('silence')}> |
| <div className="header-left"> |
| <Clock size={20} /> |
| <h3>Silence Analysis</h3> |
| <span className={`count-badge ${summary.silence?.instanceCount > 3 ? 'warning' : 'good'}`}> |
| {summary.silence?.instanceCount || 0} pauses |
| </span> |
| </div> |
| {expandedSections.silence ? <ChevronUp size={20} /> : <ChevronDown size={20} />} |
| </div> |
| {expandedSections.silence && ( |
| <div className="section-content"> |
| <div className="metric-grid"> |
| <div className="metric-item"> |
| <span className="metric-label">Total Silence</span> |
| <span className="metric-value">{summary.silence?.totalSilenceSeconds}s</span> |
| </div> |
| <div className="metric-item"> |
| <span className="metric-label">Longest Pause</span> |
| <span className="metric-value">{summary.silence?.longestSilenceSeconds}s</span> |
| </div> |
| </div> |
| <p className="recommendation">{summary.silence?.recommendation}</p> |
| </div> |
| )} |
| </div> |
| |
| {/* Speaking Speed */} |
| <div className={`metric-section ${expandedSections.speed ? 'expanded' : ''}`}> |
| <div className="section-header clickable" onClick={() => toggleSection('speed')}> |
| <div className="header-left"> |
| <TrendingUp size={20} /> |
| <h3>Speaking Speed</h3> |
| <span className={`speed-badge ${summary.speed?.grade === 'Excellent' ? 'excellent' : |
| summary.speed?.grade === 'Good' ? 'good' : 'warning' |
| }`}> |
| {summary.speed?.wordsPerMinute} WPM |
| </span> |
| </div> |
| {expandedSections.speed ? <ChevronUp size={20} /> : <ChevronDown size={20} />} |
| </div> |
| {expandedSections.speed && ( |
| <div className="section-content"> |
| <div className="speed-meter"> |
| <div className="speed-labels"> |
| <span>Too Slow</span> |
| <span>Optimal (120-160)</span> |
| <span>Too Fast</span> |
| </div> |
| <div className="speed-bar"> |
| <div |
| className="speed-marker" |
| style={{ left: `${Math.min(100, Math.max(0, (summary.speed?.wordsPerMinute - 60) / 1.8))}%` }} |
| /> |
| </div> |
| </div> |
| <p className="speed-grade">{summary.speed?.grade}</p> |
| <p className="recommendation">{summary.speed?.recommendation}</p> |
| </div> |
| )} |
| </div> |
| |
| {/* Timed Out Questions */} |
| {summary.timer?.timedOutQuestions > 0 && ( |
| <div className="metric-section warning-section"> |
| <div className="section-header"> |
| <div className="header-left"> |
| <AlertTriangle size={20} className="warning-icon" /> |
| <h3>Time Management</h3> |
| </div> |
| </div> |
| <div className="section-content"> |
| <p className="timeout-warning"> |
| ⚠️ You ran out of time on <strong>{summary.timer.timedOutQuestions}</strong> question(s). |
| </p> |
| <p className="recommendation"> |
| Practice giving concise answers. Aim to complete your response within the time limit. |
| </p> |
| </div> |
| </div> |
| )} |
| </div> |
| |
| {/* Footer */} |
| <div className="summary-footer"> |
| <p className="footer-note"> |
| 💡 These metrics help you improve your interview performance. |
| Practice makes perfect! |
| </p> |
| <button className="btn-primary" onClick={onClose}> |
| Continue to Results |
| </button> |
| </div> |
| </div> |
| </div> |
| ); |
| } |
|
|
