+ {/* Video feed area */}
+
+ );
+}
diff --git a/404jobnotfound-remi-ai/frontend/src/components/ScoreBar.tsx b/404jobnotfound-remi-ai/frontend/src/components/ScoreBar.tsx
new file mode 100644
index 0000000..452b921
--- /dev/null
+++ b/404jobnotfound-remi-ai/frontend/src/components/ScoreBar.tsx
@@ -0,0 +1,80 @@
+interface ScoreBarProps {
+ label: string;
+ value: number;
+ max?: number;
+ color?: string;
+}
+
+function getScoreColor(score: number): string {
+ if (score >= 75) return 'from-emerald-500 to-green-400';
+ if (score >= 60) return 'from-amber-500 to-yellow-400';
+ return 'from-rose-500 to-red-400';
+}
+
+export function ScoreBar({ label, value, max = 100, color }: ScoreBarProps) {
+ const pct = Math.min(100, Math.round((value / max) * 100));
+ const gradClass = color ?? getScoreColor(value);
+
+ return (
+
+ {/* Background */}
+ 
+ {/* Lottie avatar */}
+
+
+
+
+ {/* Speaking indicator */}
+ {isSpeaking && (
+
+
+ )}
+
+ {/* Listening overlay */}
+ {isListening && (
+
+ {[35, 70, 100, 55, 90].map((h, i) => (
+
+ ))}
+
+
+
+ )}
+
+ {/* Thinking overlay */}
+ {isThinking && (
+
+
+
+
+ )}
+
+ {/* Name tag */}
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
+
+ {name}
+
+
+
+ );
+}
+
+interface ScoreCircleProps {
+ score: number;
+ size?: number;
+ label?: string;
+}
+
+export function ScoreCircle({ score, size = 120, label }: ScoreCircleProps) {
+ const radius = (size - 16) / 2;
+ const circumference = 2 * Math.PI * radius;
+ const offset = circumference - (score / 100) * circumference;
+
+ const strokeColor =
+ score >= 75 ? '#10b981' : score >= 60 ? '#f59e0b' : '#ef4444';
+
+ return (
+
+ {label}
+ {Math.round(value)}
+
+
+
+
+
+
+ );
+}
diff --git a/404jobnotfound-remi-ai/frontend/src/components/Webcam.tsx b/404jobnotfound-remi-ai/frontend/src/components/Webcam.tsx
new file mode 100644
index 0000000..e701a19
--- /dev/null
+++ b/404jobnotfound-remi-ai/frontend/src/components/Webcam.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react';
+
+interface WebcamProps {
+ videoRef?: React.RefObject
+
+
+ {label && {label}}
+
+ {Math.round(score)}
+
+
+ {/* Background */}
+
+ );
+}
diff --git a/404jobnotfound-remi-ai/frontend/src/pages/CompletionPage.tsx b/404jobnotfound-remi-ai/frontend/src/pages/CompletionPage.tsx
new file mode 100644
index 0000000..c4588b9
--- /dev/null
+++ b/404jobnotfound-remi-ai/frontend/src/pages/CompletionPage.tsx
@@ -0,0 +1,25 @@
+interface CompletionPageProps {
+ candidateName: string;
+}
+
+export default function CompletionPage({ candidateName }: CompletionPageProps) {
+ return (
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+ Remi AI
+ /
+ Briefing candidat
+
+ {/* Left column */}
+
+
+ {/* Profile card */}
+
+
+ {/* Right column */}
+
+
+
+ {/* Job offer summary */}
+ {(jobOffer?.title || targetJob?.target_role) && (
+
+
+
+
+ {initials}
+
+
+
+
+
+
+
+
+
+ {brief.seniority}
+
+ {brief.candidate_name}
+{brief.current_title || 'Titre non renseigné'}
+
+
+
+
+
+ Compétences clés
+
+ {brief.top_skills.slice(0, 8).map((skill) => (
+
+ {skill}
+
+ ))}
+
+
+
+ )}
+
+ {/* Experiences */}
+ {profile.experiences.length > 0 && (
+
+
+
+
+
+
+ {(jobOffer?.top_skills ?? targetJob?.target_skills ?? []).length > 0 && (
+ + {jobOffer?.title ?? targetJob?.target_role} +
+ {(() => { + const company = jobOffer?.company ?? targetJob?.target_company; + return company && company !== 'jobs' ? ( +
+
+
+ )}
+
+ {targetJob?.key_requirements && targetJob.key_requirements.length > 0 && (
+ Compétences recherchées
+
+ {(jobOffer?.top_skills ?? targetJob?.target_skills ?? []).map((skill) => (
+
+ {skill}
+
+ ))}
+
+
+
+ )}
+
+
-
+ {targetJob.key_requirements.slice(0, 4).map((req, i) => (
+
- + • + {req} + + ))} +
+
+ )}
+
+
+ {profile.experiences.slice(0, 3).map((exp, i) => (
+
+
+
+ ))}
+
+
+ {i < Math.min(profile.experiences.length, 3) - 1 && (
+
+ )}
+
+
+
+ {exp.title}
+{exp.company} · {Math.round(exp.duration_years * 10) / 10} ans
+ {exp.summary && ( +{exp.summary}
+ )} +
+ {/* Interview structure */}
+
+
+
+
+ {/* Permissions + instructions */}
+
+
+ Déroulé de l'entretien
+
+ {INTERVIEW_STEPS.map((step, i) => (
+
+
+
+ ))}
+
+ {i + 1}
+
+
+
+
+
+ {step.label}
+ + {step.lang} + +{step.desc}
+
+
+
+ {/* CTA */}
+
+
+ + Avant de commencer +
+-
+
-
+
- • Installez-vous dans un endroit calme +
- • Répondez clairement et avec des exemples précis +
- • 3 questions, prenez votre temps +
+ Durée estimée : 10–15 minutes +
+
+
+ );
+}
diff --git a/404jobnotfound-remi-ai/frontend/src/pages/HRDashboard.tsx b/404jobnotfound-remi-ai/frontend/src/pages/HRDashboard.tsx
new file mode 100644
index 0000000..14c81f3
--- /dev/null
+++ b/404jobnotfound-remi-ai/frontend/src/pages/HRDashboard.tsx
@@ -0,0 +1,362 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+ BrainCircuit, Users, RefreshCw, ChevronRight, ArrowLeft,
+ CheckCircle2, ThumbsUp, AlertTriangle, ThumbsDown, Loader2,
+ AlertCircle, Trophy, BarChart3, ArrowUpDown, ArrowUp, ArrowDown,
+} from 'lucide-react';
+import { listInterviews, getHRReport } from '../api';
+import type { InterviewSummary, Report } from '../types';
+import ReportPage from './ReportPage';
+
+interface HRDashboardProps {
+ onBack: () => void;
+}
+
+const REC_CONFIG: Record<
+ string,
+ { label: string; icon: React.ReactNode; badgeClass: string }
+> = {
+ strong_yes: {
+ label: 'Vivement recommandé',
+ icon:
+
+
+
+
+
+
+ + Merci {candidateName} ! +
++ Votre entretien est terminé. Nous avons bien enregistré vos réponses et nous vous contacterons prochainement. +
+
+ {/* Background gradient orbs */}
+
+ );
+}
diff --git a/404jobnotfound-remi-ai/frontend/src/pages/InterviewPage.tsx b/404jobnotfound-remi-ai/frontend/src/pages/InterviewPage.tsx
new file mode 100644
index 0000000..5a3bb42
--- /dev/null
+++ b/404jobnotfound-remi-ai/frontend/src/pages/InterviewPage.tsx
@@ -0,0 +1,541 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import {
+ Mic, MicOff, Send, ChevronRight, AlertCircle, Loader2, Volume2, VolumeX,
+ PhoneOff,
+} from 'lucide-react';
+import Avatar from '../components/Avatar';
+import Webcam from '../components/Webcam';
+import { startInterview, submitAnswer, getReport, textToSpeech, playAudio, submitGazeSummary } from '../api';
+import { useElevenLabsSTT } from '../hooks/useElevenLabsSTT';
+import { useGazeTracking } from '../hooks/useGazeTracking';
+import type { SessionData, Question, Evaluation, Report } from '../types';
+
+type InterviewState =
+ | 'loading'
+ | 'speaking'
+ | 'ready_to_record'
+ | 'listening'
+ | 'submitting'
+ | 'evaluated'
+ | 'fetching_report'
+ | 'error';
+
+const CATEGORY_LABELS: Record
+
+
+
+
+
+ {/* Header */}
+
+
+
+ {/* Page title */}
+
+
+
+ {/* Stats bar */}
+ {interviews.length > 0 && (
+
+
+ )}
+
+ {/* Content */}
+
+ {error && (
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Remi AI
+ Tableau de bord RH
+
+
+
+ Entretiens réalisés
++ Retrouvez l'ensemble des entretiens IA complétés et consultez les rapports détaillés. +
+
+ {[
+ {
+ label: 'Total entretiens',
+ value: interviews.length,
+ icon:
+
+
+ ))}
+
+ {icon}
+
+
+
+ {value}
+{label}
+
+
+ )}
+
+ {loading ? (
+
+
+ ) : interviews.length === 0 ? (
+
+
+ ) : (
+ <>
+ {/* Sort controls */}
+
+
+
+
+ Aucun entretien réalisé
++ Les rapports apparaîtront ici une fois les premiers entretiens complétés. +
+
+ Trier par :
+ {(
+ [
+ { field: 'date' as SortField, label: 'Date' },
+ { field: 'score' as SortField, label: 'Score' },
+ { field: 'name' as SortField, label: 'Nom' },
+ ] as { field: SortField; label: string }[]
+ ).map(({ field, label }) => {
+ const active = sortField === field;
+ const Icon = active ? (sortDir === 'asc' ? ArrowUp : ArrowDown) : ArrowUpDown;
+ return (
+
+ );
+ })}
+
+
+
+ {sortedInterviews.map((interview) => {
+ const rec = REC_CONFIG[interview.recommendation] ?? REC_CONFIG.no;
+ const isLoadingThis = loadingReport === interview.session_id;
+ return (
+
+ );
+ })}
+
+
+ )}
+
+
+ );
+ }
+
+ if (state === 'loading') {
+ return (
+
+
+ {error}
+ +
+
+ );
+ }
+
+ if (state === 'fetching_report') {
+ return (
+
+
+ Connexion à l'entretien...
+
+
+ );
+ }
+
+ // --- Evaluated state: simple confirmation, no scores shown to candidate ---
+ if (state === 'evaluated' && evaluation) {
+ const nextQuestion = lastAnswerRes.current?.next_question;
+ const nextIsEnglish = nextQuestion?.category === 'language_proficiency';
+ return (
+
+
+ Génération de votre rapport...
+
+
+ );
+ }
+
+ // --- Main interview: Zoom-like layout ---
+ return (
+
+
+
+
+ Réponse enregistrée
+ {nextIsEnglish && ( +
+
+ )}
+
+ La prochaine question est en anglais
+Vous devrez répondre en anglais. Prenez un moment pour vous préparer.
+
+
+ {/* Top bar - Zoom style */}
+
+
+
+ {/* Video grid */}
+
+
+ Entretien en cours
+ |
+
+ Q{currentIndex + 1}/{TOTAL_QUESTIONS} — {currentQuestion ? (CATEGORY_LABELS[currentQuestion.category] || currentQuestion.category) : ''}
+
+
+
+ {/* Gaze warning */}
+ {isLookingAway && (
+
+
+ Regardez la caméra
+
+ )}
+
+ {/* Progress dots */}
+
+ {Array.from({ length: TOTAL_QUESTIONS }).map((_, i) => (
+
+ ))}
+
+
+
+ {/* Interviewer tile (main / large) */}
+
+ {/* Avatar area */}
+
+
+ {/* Right column: transcript + webcam as separate tiles */}
+
+
+
+ {/* Question subtitle bar */}
+ {currentQuestion && (
+
+
+ )}
+ + {currentQuestion.question} +
+ {state === 'ready_to_record' && Array.isArray(currentQuestion.expected_signals) && currentQuestion.expected_signals.length > 0 && ( ++ Conseil : {currentQuestion.expected_signals.slice(0, 2).join(', ')} +
+ )} +
+
+ {/* Transcript tile */}
+
+ {(state === 'ready_to_record' || state === 'listening' || state === 'submitting') ? (
+
+ {!speechSupported && !useManualInput && (
+
+ Reconnaissance vocale non supportée. Utilisez la saisie texte. +
+ )} + + {/* Transcript display */} + {!useManualInput ? ( +
+ {isListening && (
+
+ ) : (
+
+
+ REC
+
+ )}
+ {isTranscribing && (
+
+
+ )}
+ + {activeTranscript || ( + + {isListening ? 'Parlez maintenant...' : isTranscribing ? 'Traitement...' : 'Votre réponse apparaîtra ici'} + + )} +
+