kushal.saha
9f25fdd648
Interview module is refactored to use layouts and re-usable components along with domain components. Style remains identitical to previous design.
44 lines
2.2 KiB
PHP
44 lines
2.2 KiB
PHP
@props([
|
|
'metrics' => [],
|
|
])
|
|
|
|
@php
|
|
$tabSwitches = $metrics['tab_switches'] ?? 0;
|
|
$focusLosses = $metrics['focus_lost'] ?? 0;
|
|
$gazeAnomalies = $metrics['gaze_alerts'] ?? 0;
|
|
$pasteEvents = $metrics['paste_events'] ?? 0;
|
|
$lowerGaze = $metrics['lower_gaze'] ?? 0;
|
|
$questionRepeat = $metrics['question_repeat'] ?? 0;
|
|
@endphp
|
|
|
|
<div class="font-outfit text-base font-bold text-slate-900 mb-3 flex items-center gap-2">
|
|
🔍 Behavioral Audit & Proctoring Incident Breakdown
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-2.5 mb-5">
|
|
<div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
|
|
<div class="text-lg font-extrabold text-red-500">{{ $tabSwitches }}</div>
|
|
<div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Tab Switches</div>
|
|
</div>
|
|
<div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
|
|
<div class="text-lg font-extrabold text-amber-500">{{ $focusLosses }}</div>
|
|
<div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Focus Lost</div>
|
|
</div>
|
|
<div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
|
|
<div class="text-lg font-extrabold text-sky-500">{{ $gazeAnomalies }}</div>
|
|
<div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Gaze Anomalies</div>
|
|
</div>
|
|
<div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
|
|
<div class="text-lg font-extrabold text-indigo-500">{{ $pasteEvents }}</div>
|
|
<div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Code Pastes</div>
|
|
</div>
|
|
<div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
|
|
<div class="text-lg font-extrabold text-red-500">{{ $lowerGaze }}</div>
|
|
<div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">📱 Lower Gaze</div>
|
|
</div>
|
|
<div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
|
|
<div class="text-lg font-extrabold text-rose-500">{{ $questionRepeat }}</div>
|
|
<div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">🗣️ Question Repeat</div>
|
|
</div>
|
|
</div>
|