subhajit.pal/sls
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: interview panel page

Browse Source
This commit is contained in:
kushal.saha 2026-08-11 12:03:30 +00:00
parent 2225e227e0
commit d1fbd99965
17 changed files with 2883 additions and 2501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/Http/Controllers/InterviewController.php
View File

@ -31,6 +31,23 @@ public function index()
return view('interview.index', compact('interviews', 'interviewers')); return view('interview.index', compact('interviews', 'interviewers'));
} }
/**
* Display a specific Candidate Interview Live Review & Call Session.
*/
public function show($id)
{
$user = Auth::user();
if (!$user->isAdmin() && strtolower($user->role) !== 'hr' && !$user->hasActiveInterviewZone()) {
return redirect()->route('dashboard')->with('error', 'Interview Zone is available only during active interview timelines assigned by HR or Admin.');
}
$interview = Interview::findOrFail($id);
$interviewers = User::orderBy('name', 'asc')->get();
return view('interview.show', compact('interview', 'interviewers'));
}
/** /**
* Store a new Candidate Interview session created by HR. * Store a new Candidate Interview session created by HR.
*/ */

2
resources/js/app.js
View File

@ -1,4 +1,5 @@
import { getMeteredIceServers, initMeteredIceServers, globalIceServers } from './metered.js'; import { getMeteredIceServers, initMeteredIceServers, globalIceServers } from './metered.js';
import './interview-call.js';
window.globalIceServers = globalIceServers; window.globalIceServers = globalIceServers;
window.getMeteredIceServers = getMeteredIceServers; window.getMeteredIceServers = getMeteredIceServers;
@ -8,3 +9,4 @@ window.initMeteredIceServers = initMeteredIceServers;
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
window.getMeteredIceServers(); window.getMeteredIceServers();
} }

1833
resources/js/interview-call.js Normal file
View File

File diff suppressed because it is too large Load Diff

55
resources/views/components/audit-log-item.blade.php Normal file
View File

@ -0,0 +1,55 @@
@props([
'type' => 'violation',
'details' => '',
'timestamp' => null,
'screenshotUrl' => null,
'aiVerdict' => null,
])
@php
$icoClass = 'amber';
$faIcon = 'fa-solid fa-window-restore';
$isFlag = false;
if ($type === 'focus_lost') {
$icoClass = 'amber'; $faIcon = 'fa-solid fa-window-restore';
} elseif (in_array($type, ['gaze_anomaly', 'gaze_fixed_staring'])) {
$icoClass = 'amber'; $faIcon = 'fa-solid fa-eye';
} elseif (in_array($type, ['gaze_lower_device', 'reading_external_device'])) {
$icoClass = 'red'; $faIcon = 'fa-solid fa-mobile-screen'; $isFlag = true;
} elseif (in_array($type, ['question_repeat_lower', 'question_repetition'])) {
$icoClass = 'red'; $faIcon = 'fa-solid fa-comments'; $isFlag = true;
} elseif ($type === 'talking_on_phone') {
$icoClass = 'red'; $faIcon = 'fa-solid fa-phone'; $isFlag = true;
} elseif ($type === 'external_ai_detected') {
$icoClass = 'red'; $faIcon = 'fa-solid fa-robot'; $isFlag = true;
} elseif ($type === 'tab_switch') {
$icoClass = 'amber'; $faIcon = 'fa-solid fa-window-restore';
}
$titleCap = ucfirst(str_replace('_', ' ', $type));
$timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');
@endphp
<div {{ $attributes->merge(['class' => 'log-item flex gap-2.5 p-3 border-b border-[#1b2233] last:border-b-0 ' . ($isFlag ? 'bg-[rgba(239,74,95,0.1)] flag' : '')]) }}>
<div class="log-ico w-6 h-6 rounded-md flex-shrink-0 flex items-center justify-center text-[11px] mt-0.5 {{ $icoClass === 'amber' ? 'bg-[rgba(240,169,57,0.12)] text-[#f0a939]' : 'bg-[rgba(239,74,95,0.1)] text-[#ef4a5f]' }}">
<i class="{{ $faIcon }}"></i>
</div>
<div>
<div class="log-text text-xs leading-relaxed text-slate-300">
<b class="text-white {{ $isFlag ? '!text-[#ef4a5f]' : '' }}">{{ $titleCap }}</b> &mdash; {{ $details }}
@if($screenshotUrl)
<a href="{{ $screenshotUrl }}" target="_blank" class="text-sky-400 underline ml-1 font-medium">[<i class="fa-solid fa-camera mr-0.5"></i> Screenshot]</a>
@endif
@if($aiVerdict)
@php
$confPct = round(($aiVerdict['confidence'] ?? 0.85) * 100);
$engineName = $aiVerdict['engine'] ?? 'AI Engine';
$toolName = !empty($aiVerdict['ai_tool_detected']) ? ' &bull; Detected: <strong>' . e($aiVerdict['ai_tool_detected']) . '</strong>' : '';
@endphp
<div class="mt-1 text-[11px] text-red-300"><b>AI inspector &middot; {{ $confPct }}% cheating confidence</b> ({!! $engineName . $toolName !!})</div>
@endif
</div>
<div class="log-time text-[10.5px] text-slate-500 mt-0.5">{{ $timeStr }}</div>
</div>
</div>

21
resources/views/components/audit-log.blade.php Normal file
View File

@ -0,0 +1,21 @@
@props([
'logs' => [],
])
<div {{ $attributes->merge(['class' => 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] max-h-[260px] overflow-y-auto']) }}>
@if(is_array($logs) && count($logs) > 0)
@foreach($logs as $log)
<x-audit-log-item
:type="$log['type'] ?? 'violation'"
:details="$log['details'] ?? ''"
:timestamp="$log['timestamp'] ?? null"
:screenshotUrl="$log['screenshot_url'] ?? null"
:aiVerdict="$log['ai_verdict'] ?? null"
/>
@endforeach
@else
<div class="p-4 text-center text-[#21c274] text-xs font-medium">
<i class="fa-solid fa-circle-check mr-1"></i> Zero proctoring violations recorded.
</div>
@endif
</div>

41
resources/views/components/button.blade.php Normal file
View File

@ -0,0 +1,41 @@
@props([
'variant' => 'primary', // primary, secondary, danger, warning, success, ghost
'size' => 'md', // sm, md, lg
'type' => 'button',
'icon' => null,
])
@php
$baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-medium text-xs transition-all duration-150 cursor-pointer select-none whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed';
$variants = [
'default' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
'secondary' => 'bg-[#0d1220] text-slate-300 border-[#232b3d] hover:bg-[#161d2d] hover:text-white hover:border-[#3a4257]',
'primary' => 'bg-[#4b82f7] text-white border-[#4b82f7] hover:bg-[#3d6fe0] shadow-sm',
'success' => 'bg-[#21c274] text-white border-[#21c274] hover:bg-[#1da865] shadow-sm',
'danger' => 'bg-[#ef4a5f] text-white border-[#ef4a5f] hover:bg-[#d63d51] shadow-sm',
'warning' => 'bg-[#f0a939] text-white border-[#f0a939] hover:bg-[#d8952d] shadow-sm',
'ghost' => 'bg-transparent text-slate-400 border-transparent hover:bg-white/5 hover:text-slate-200',
];
$sizes = [
'sm' => 'px-2.5 py-1.5 text-xs',
'md' => 'px-3 py-1.5 text-[12.5px]',
'lg' => 'px-4 py-2 text-sm',
];
$classes = implode(' ', [
$baseClasses,
$variants[$variant] ?? $variants['secondary'],
$sizes[$size] ?? $sizes['md'],
]);
@endphp
<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i class="{{ $icon }}"></i>
@endif
@if(trim($slot))
<span>{{ $slot }}</span>
@endif
</button>

28
resources/views/components/card.blade.php Normal file
View File

@ -0,0 +1,28 @@
@props([
'title' => null,
'icon' => null,
])
<div {{ $attributes->merge(['class' => 'bg-[#121826] border border-[#1b2233] rounded-[12px] mb-4 overflow-hidden']) }}>
@if($title || $icon || isset($headerExtra))
<div class="flex items-center justify-between px-5 py-3.5 border-b border-[#1b2233]">
<div class="flex items-center gap-2.5 font-semibold text-[14.5px] tracking-tight text-white">
@if($icon)
<i class="{{ $icon }} text-[#4b82f7] text-[13.5px]"></i>
@endif
@if($title)
<span>{{ $title }}</span>
@endif
</div>
@if(isset($headerExtra))
<div class="flex items-center gap-2">
{{ $headerExtra }}
</div>
@endif
</div>
@endif
<div>
{{ $slot }}
</div>
</div>

42
resources/views/components/chat-message.blade.php Normal file
View File

@ -0,0 +1,42 @@
@props([
'senderName' => 'Interviewer',
'isCandidate' => false,
'color' => '#6366f1',
'message' => '',
'timestamp' => null,
])
@php
$resolvedColor = $isCandidate ? '#38bdf8' : ($color ?? '#6366f1');
$timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');
// Hex to rgba helper for background opacity
$hex = ltrim($resolvedColor, '#');
if (strlen($hex) == 3) {
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
} else {
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));
}
$bgRgba = "rgba({$r}, {$g}, {$b}, 0.1)";
$borderRgba = "rgba({$r}, {$g}, {$b}, 0.35)";
@endphp
<div {{ $attributes->merge(['class' => 'chat-message mb-2 p-2.5 rounded-lg border-l-2 transition-all']) }} style="background: {{ $bgRgba }}; border-color: {{ $resolvedColor }};">
<div class="flex justify-between items-center mb-1 gap-2">
<div class="flex items-center gap-1.5 min-w-0">
<span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: {{ $resolvedColor }};"></span>
<strong class="text-xs truncate" style="color: {{ $resolvedColor }};">{{ $senderName }}</strong>
@if($isCandidate)
<span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-sky-500/20 text-sky-300 border border-sky-500/30 shrink-0">Candidate</span>
@else
<span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 shrink-0">Panelist</span>
@endif
</div>
<span class="text-[10.5px] text-slate-500 shrink-0 font-mono">{{ $timeStr }}</span>
</div>
<div class="text-slate-200 text-xs leading-relaxed font-medium pl-3 break-words">{{ $message }}</div>
</div>

44
resources/views/components/chat-panel.blade.php Normal file
View File

@ -0,0 +1,44 @@
@props([
'warnings' => [],
'candidateName' => 'Candidate',
])
@php
$interviewerColors = [
'#6366f1', // Indigo
'#10b981', // Emerald
'#f59e0b', // Amber
'#ec4899', // Pink
'#8b5cf6', // Purple
'#06b6d4', // Cyan
'#f97316', // Orange
];
@endphp
<div {{ $attributes->merge(['class' => 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] h-[150px] overflow-y-auto p-3 flex flex-col gap-2']) }}>
@if(count($warnings) > 0)
@foreach($warnings as $w)
@php
$isCand = is_null($w->sent_by);
$senderName = $isCand
? ($candidateName ?: 'Candidate')
: ($w->sender ? $w->sender->name : 'Interviewer');
$color = $isCand
? '#38bdf8'
: $interviewerColors[($w->sent_by ?? 1) % count($interviewerColors)];
@endphp
<x-chat-message
:senderName="$senderName"
:isCandidate="$isCand"
:color="$color"
:message="$w->message"
:timestamp="$w->created_at"
/>
@endforeach
@else
<div class="h-full w-full flex items-center justify-center text-xs text-[#5b637a] italic">
No chat history. Send a message below.
</div>
@endif
</div>

43
resources/views/components/modal.blade.php Normal file
View File

@ -0,0 +1,43 @@
@props([
'id',
'title' => null,
'maxWidth' => '2xl',
'onClose' => null,
])
@php
$maxWidths = [
'sm' => 'max-w-sm',
'md' => 'max-w-md',
'lg' => 'max-w-lg',
'xl' => 'max-w-xl',
'2xl' => 'max-w-2xl',
'5xl' => 'max-w-5xl',
'7xl' => 'max-w-7xl',
'full' => 'max-w-full mx-4',
];
$maxWidthClass = $maxWidths[$maxWidth] ?? $maxWidths['2xl'];
@endphp
<div id="{{ $id }}" {{ $attributes->merge(['class' => 'admin-modal fixed inset-0 w-screen h-screen bg-slate-950/85 backdrop-blur-md flex items-center justify-center z-[1000] opacity-0 pointer-events-none transition-opacity duration-300 [&.active]:opacity-100 [&.active]:pointer-events-auto']) }}>
<div class="admin-modal-content bg-slate-900 border border-slate-700/60 rounded-2xl w-[90%] {{ $maxWidthClass }} p-7 shadow-2xl text-white max-h-[90vh] overflow-y-auto">
@if($title || isset($headerActions))
<div class="flex items-center justify-between pb-4 mb-4 border-b border-white/10">
@if($title)
<h3 class="font-outfit text-xl font-bold text-white m-0">{{ $title }}</h3>
@endif
<div class="flex items-center gap-2">
@if(isset($headerActions))
{{ $headerActions }}
@endif
<button type="button" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}" class="bg-transparent border-none text-slate-400 hover:text-white text-2xl cursor-pointer leading-none px-1">&times;</button>
</div>
</div>
@endif
<div>
{{ $slot }}
</div>
</div>
</div>

41
resources/views/components/pill.blade.php Normal file
View File

@ -0,0 +1,41 @@
@props([
'variant' => 'info', // primary, secondary, success, danger, warning, info, ghost
'size' => 'md', // sm, md
'icon' => null,
])
@php
$baseClasses = 'inline-flex items-center gap-1.5 font-semibold text-[11px] tracking-wide px-2.5 py-1 rounded-full border transition-colors duration-150 whitespace-nowrap';
$variants = [
'blue' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
'primary' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
'info' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
'red' => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
'danger' => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
'success' => 'text-[#21c274] bg-[rgba(33,194,116,0.12)] border-[rgba(33,194,116,0.35)]',
'warning' => 'text-[#f0a939] bg-[rgba(240,169,57,0.12)] border-[rgba(240,169,57,0.35)]',
'secondary' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
'ghost' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
];
$sizes = [
'sm' => 'px-2 py-0.5 text-[10.5px]',
'md' => 'px-2.5 py-1 text-[11px]',
];
$classes = implode(' ', [
$baseClasses,
$variants[$variant] ?? $variants['ghost'],
$sizes[$size] ?? $sizes['md'],
]);
@endphp
<span {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i class="{{ $icon }}"></i>
@endif
@if(trim($slot))
<span>{{ $slot }}</span>
@endif
</span>

26
resources/views/components/tab-button.blade.php Normal file
View File

@ -0,0 +1,26 @@
@props([
'id' => null,
'active' => false,
'icon' => null,
'tabKey' => null,
])
@php
$baseClasses = 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-md transition-colors duration-150 cursor-pointer select-none border-none';
$activeClasses = $active
? 'bg-[#4b82f7] text-white shadow-sm active'
: 'bg-transparent text-slate-400 hover:text-slate-200';
@endphp
<button
@if($id) id="{{ $id }}" @endif
type="button"
@if($tabKey) data-tab="{{ $tabKey }}" @endif
{{ $attributes->merge(['class' => implode(' ', ['tab', $baseClasses, $activeClasses])]) }}>
@if($icon)
<i class="{{ $icon }} text-[11px]"></i>
@endif
@if(trim($slot))
<span>{{ $slot }}</span>
@endif
</button>

57
resources/views/components/video-tile.blade.php Normal file
View File

@ -0,0 +1,57 @@
@props([
'id',
'videoId',
'placeholderId',
'badgeText' => '',
'badgeId' => null,
'borderColor' => 'border-[#1b2233]',
'showZoom' => false,
'showFullscreen' => false,
'initials' => 'CD',
'avatarCircleId' => null,
'avatarNameId' => null,
'avatarTitle' => 'Video Stream',
'zoomInFn' => null,
'zoomOutFn' => null,
'zoomResetFn' => null,
'fullscreenFn' => null,
'containerId' => null,
'focused' => false,
])
<div id="{{ $id }}" {{ $attributes->merge(['class' => 'video-tile relative aspect-[16/11] bg-[#0d1220] border rounded-[10px] overflow-hidden flex flex-col items-center justify-center transition-all ' . ($focused ? 'border-[rgba(75,130,247,0.35)] shadow-[0_0_0_1px_rgba(75,130,247,0.35)]' : 'border-[#1b2233]')]) }}>
@if($showZoom || $showFullscreen)
<div class="tile-tools absolute top-2 right-2 z-20 flex gap-1">
@if($showZoom)
<button type="button" onclick="{{ $zoomInFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom In"><i class="fa-solid fa-magnifying-glass-plus"></i></button>
<button type="button" onclick="{{ $zoomOutFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Zoom Out"><i class="fa-solid fa-magnifying-glass-minus"></i></button>
<button type="button" onclick="{{ $zoomResetFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Reset Zoom"><i class="fa-solid fa-rotate-left"></i></button>
@endif
@if($showFullscreen)
<button type="button" onclick="{{ $fullscreenFn }}" class="w-6 h-6 rounded-md border border-[#232b3d] bg-[#0a0e17]/65 text-slate-400 hover:text-slate-200 text-[10.5px] cursor-pointer flex items-center justify-center" title="Fullscreen"><i class="fa-solid fa-expand"></i></button>
@endif
</div>
@endif
@if($containerId)
<div id="{{ $containerId }}" class="w-full h-full overflow-auto">
<video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-contain origin-top-left transition-transform duration-200"></video>
</div>
@else
<video id="{{ $videoId }}" autoplay playsinline class="w-full h-full object-cover origin-center transition-transform duration-200"></video>
@endif
<div id="{{ $placeholderId }}" class="absolute inset-0 flex flex-col items-center justify-center bg-[#0d1220]/95 text-slate-400 text-xs z-10 p-3">
<div id="{{ $avatarCircleId }}" class="av w-[58px] h-[58px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[19px] mb-2.5 shadow-md shadow-[#4b82f7]/20">
{{ $initials }}
</div>
<div id="{{ $avatarNameId }}" class="name text-[13.5px] font-semibold text-white">{{ $avatarTitle }}</div>
<div class="status text-[11.5px] text-[#5b637a] mt-1 text-center px-3">
{{ $slot->isNotEmpty() ? $slot : "Waiting for candidate&hellip;" }}
</div>
</div>
<span class="tile-tag absolute left-2.5 bottom-2.5 text-[10px] font-semibold tracking-wide px-2 py-1 rounded-md bg-black/35 text-slate-400 border border-[#1b2233] z-10">
{{ $badgeText }}
</span>
</div>

13
resources/views/interview/candidate_room.blade.php
View File

@ -1022,12 +1022,19 @@ function logViolation(type, details) {
'X-CSRF-TOKEN': '{{ csrf_token() }}' 'X-CSRF-TOKEN': '{{ csrf_token() }}'
}, },
body: JSON.stringify({ type: type, details: details }) body: JSON.stringify({ type: type, details: details })
}); })
.then(r => r.json())
// Post message over BroadcastChannel to alert interviewer dashboard real-time .then(res => {
if (typeof callSigChannel !== 'undefined' && callSigChannel) { if (typeof callSigChannel !== 'undefined' && callSigChannel) {
callSigChannel.postMessage({ type: 'violation_occurred', violation_type: type, details: details }); callSigChannel.postMessage({ type: 'violation_occurred', violation_type: type, details: details });
} }
if (typeof liveSyncChannel !== 'undefined' && liveSyncChannel) {
liveSyncChannel.postMessage({ type: 'violation_logged', violation_type: type, details: details });
}
if (typeof pollReviewData === 'function') {
pollReviewData();
}
});
} }
// --- CANDIDATE REAL-TIME CALL RINGTONE SYNTHESIZER --- // --- CANDIDATE REAL-TIME CALL RINGTONE SYNTHESIZER ---

2627
resources/views/interview/index.blade.php
View File

File diff suppressed because it is too large Load Diff

423
resources/views/interview/show.blade.php Normal file
View File

@ -0,0 +1,423 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $interview->candidate_name }} - Assessment Review | SingleLogin</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
<script src="//cdn.metered.ca/sdk/video/1.4.6/sdk.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
:root {
--bg: #0a0e17;
--panel: #121826;
--panel-2: #0d1220;
--border: #232b3d;
--border-soft: #1b2233;
--text: #e8ebf3;
--text-dim: #9199ad;
--text-faint: #5b637a;
--accent: #4b82f7;
--accent-soft: rgba(75,130,247,0.12);
--accent-border: rgba(75,130,247,0.35);
--success: #21c274;
--danger: #ef4a5f;
--danger-soft: rgba(239,74,95,0.1);
--warning: #f0a939;
--warning-soft: rgba(240,169,57,0.12);
--radius: 12px;
--mono: 'JetBrains Mono', monospace;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background: radial-gradient(1200px 600px at 15% -10%, rgba(75,130,247,0.06), transparent 60%), var(--bg);
color: var(--text);
font-family: var(--sans);
}
/* Toggle switch */
.toggle {
width: 32px; height: 18px; border-radius: 20px; background: var(--panel-2);
border: 1px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0;
display: inline-block;
}
.toggle::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
border-radius: 50%; background: var(--text-faint); transition: left .15s ease;
}
.toggle.on { background: var(--accent-soft); border-color: var(--accent-border); }
.toggle.on::after { left: 16px; background: var(--accent); }
/* Accordion disclosure */
details.meta summary {
list-style: none; cursor: pointer; user-select: none;
}
details.meta summary::-webkit-details-marker { display: none; }
details.meta summary i.chev { transition: transform .15s ease; }
details.meta[open] summary i.chev { transform: rotate(180deg); }
</style>
</head>
<body class="min-h-screen flex flex-col antialiased">
<div class="max-w-[1320px] w-full mx-auto px-7 py-5 pb-16 flex-1">
<!-- Top bar -->
<div class="flex items-center justify-between pb-4 mb-4 border-b border-[#1b2233]">
<div class="flex items-center gap-3">
<a href="{{ route('interview.index') }}" class="w-9 h-9 rounded-xl bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-sm text-white shadow-[0_4px_14px_rgba(75,130,247,0.35)] no-underline">
<i class="fa-solid fa-bolt"></i>
</a>
<div>
<h1 class="text-base font-semibold text-white m-0 tracking-tight">Candidate Assessment Review</h1>
<p class="text-xs text-[#5b637a] m-0 mt-0.5">Live proctored session &amp; review room</p>
</div>
</div>
<div class="flex items-center gap-1.5">
<a href="{{ route('interview.index') }}">
<x-button variant="ghost" icon="fa-solid fa-arrow-left">Back to assessments</x-button>
</a>
@if(Auth::user()->isAdmin())
<a href="{{ route('admin.dashboard') }}">
<x-button variant="ghost" icon="fa-solid fa-sliders">Control panel</x-button>
</a>
@endif
<form action="{{ route('logout') }}" method="POST" id="logout-form" class="inline">
@csrf
<x-button type="button" onclick="interviewerLogoutAction()" variant="ghost" icon="fa-solid fa-arrow-right-from-bracket">Logout</x-button>
</form>
</div>
</div>
@if(session('success'))
<div class="mb-4 bg-[#21c274]/15 border border-[#21c274]/35 text-[#21c274] px-4 py-2.5 rounded-lg text-xs font-medium">
{{ session('success') }}
</div>
@endif
<!-- Session Panel -->
<div class="bg-[#121826] border border-[#1b2233] rounded-[12px] mb-4 overflow-hidden">
<div class="flex items-center justify-between p-5 gap-4 flex-wrap">
<div class="flex items-center gap-3.5">
@php
$parts = preg_split('/\s+/', trim($interview->candidate_name));
$candInitials = count($parts) >= 2 ? strtoupper(substr($parts[0],0,1).substr(end($parts),0,1)) : strtoupper(substr($interview->candidate_name,0,2));
@endphp
<div class="w-[42px] h-[42px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[15px] shrink-0">
{{ $candInitials }}
</div>
<div>
<h2 id="modal-cand-name" class="text-[15px] font-semibold text-white m-0 mb-0.5">{{ $interview->candidate_name }}</h2>
<div class="text-xs text-[#5b637a] font-mono">{{ $interview->candidate_email }} &middot; {{ $interview->candidate_phone }}</div>
</div>
</div>
<div class="flex items-center gap-1.5 flex-wrap">
@if($interview->isExpired())
<x-pill id="timeline-status-pill" variant="red" icon="fa-solid fa-circle">Expired</x-pill>
@elseif($interview->status === 'completed')
<x-pill id="timeline-status-pill" variant="success" icon="fa-solid fa-circle">Completed</x-pill>
@elseif($interview->call_status === 'active')
<x-pill id="timeline-status-pill" variant="blue" class="live" icon="fa-solid fa-circle">Call in progress</x-pill>
@elseif($interview->isActiveTimeline())
<x-pill id="timeline-status-pill" variant="blue" class="live" icon="fa-solid fa-circle">Timeline live</x-pill>
@else
<x-pill id="timeline-status-pill" variant="secondary" icon="fa-solid fa-clock">Scheduled</x-pill>
@endif
<div class="w-px h-[18px] bg-[#232b3d] mx-1"></div>
<div class="flex items-center gap-2 text-xs text-[#9199ad] cursor-pointer" onclick="toggleSosAutoTrigger()">
<span class="toggle on" id="sosToggle"></span> SOS auto-trigger
</div>
<div class="w-px h-[18px] bg-[#232b3d] mx-1"></div>
<x-button onclick="regenerateCandidatePassword()" variant="secondary" icon="fa-solid fa-key">Password</x-button>
<x-button onclick="openReportPage()" variant="secondary" icon="fa-solid fa-file-pdf">PDF report</x-button>
<x-button onclick="blockCandidateAction()" variant="secondary" icon="fa-solid fa-ban">Block</x-button>
</div>
</div>
<!-- Submission Details Disclosure Accordion -->
<details class="meta border-t border-[#1b2233]">
<summary class="flex items-center gap-2 px-5 py-2.5 text-xs text-[#5b637a] font-medium hover:text-[#9199ad] transition-colors">
<i class="fa-solid fa-chevron-down chev text-[10px]"></i> Show submission details
</summary>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2.5 px-5 pb-4">
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Submission ID</div>
<div id="modal-cand-uid" class="text-xs font-mono text-[#9199ad] break-all">{{ $interview->submission_unique_id }}</div>
</div>
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Temp Pass</div>
<div class="text-xs font-mono text-[#9199ad]">{{ $interview->temp_password }}</div>
</div>
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Language</div>
<div class="text-xs font-mono text-[#9199ad] uppercase">{{ $interview->language }}</div>
</div>
<div class="bg-[#0d1220] border border-[#1b2233] rounded-lg p-2.5">
<div class="text-[10.5px] text-[#5b637a] uppercase tracking-wider mb-1">Timeline</div>
<div class="text-xs font-mono text-[#9199ad]">{{ ($interview->scheduled_at ?? $interview->created_at)->format('M d, H:i') }} &ndash; {{ $interview->expires_at->format('H:i') }}</div>
</div>
</div>
</details>
</div>
<!-- Call Panel -->
<x-card>
<x-slot:headerExtra>
<div class="flex items-center gap-2">
<!-- 1. Mic Toggle (Icon Only) -->
<x-button id="btn-toggle-interviewer-mic" onclick="toggleInterviewerMic()" variant="ghost" icon="fa-solid fa-microphone" style="display: none;" title="Mic On / Mute"></x-button>
<!-- 2. Cam Toggle (Icon Only) -->
<x-button id="btn-toggle-interviewer-cam" onclick="toggleInterviewerCam()" variant="ghost" icon="fa-solid fa-video" style="display: none;" title="Cam On / Off"></x-button>
<!-- 3. Start / Join / Restart Call -->
<x-button id="btn-start-call" onclick="startInterviewerCall()" variant="primary" icon="fa-solid fa-phone">
Start / Join Call
</x-button>
<!-- 4. Record Call (Silent) -->
<x-button id="btn-start-recording" onclick="startCallRecording()" variant="secondary" icon="fa-solid fa-circle-dot">
Record Call (Silent)
</x-button>
<x-button id="btn-stop-recording" onclick="stopCallRecording()" variant="danger" icon="fa-solid fa-square" style="display: none;" class="animate-pulse" title="Stop &amp; Save Recording"></x-button>
<!-- 5. Leave Call -->
<x-button id="btn-leave-call" onclick="leaveInterviewerCall()" variant="secondary" icon="fa-solid fa-arrow-right-from-bracket" style="display: none;">
Leave Call
</x-button>
<!-- 6. End Call for All (Icon Only, Far Right) -->
<x-button id="btn-end-all-call" onclick="endCallForAll()" variant="danger" icon="fa-solid fa-phone-slash" style="display: none;" title="End Call for All"></x-button>
</div>
</x-slot:headerExtra>
<!-- Video Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3.5 p-5">
<!-- Candidate Video -->
<x-video-tile
id="cand-video-wrapper"
videoId="interviewer-cand-video"
placeholderId="cand-video-placeholder"
badgeText="Candidate video"
badgeId="cand-vid-zoom-badge"
showZoom="true"
zoomInFn="zoomCandVideo(0.25)"
zoomOutFn="zoomCandVideo(-0.25)"
zoomResetFn="zoomCandVideo(0)"
avatarCircleId="modal-cand-avatar-circle"
avatarNameId="cand-avatar-name"
avatarTitle="{{ $interview->candidate_name }}"
initials="{{ $candInitials }}">
Waiting for candidate&hellip;
</x-video-tile>
<!-- Candidate Shared Screen -->
<x-video-tile
id="screen-wrapper"
videoId="interviewer-screen-video"
placeholderId="screen-video-placeholder"
badgeText="Shared screen"
badgeId="zoom-level-badge"
focused="true"
showZoom="true"
showFullscreen="true"
zoomInFn="zoomScreen(0.25)"
zoomOutFn="zoomScreen(-0.25)"
zoomResetFn="resetZoomScreen()"
fullscreenFn="toggleFullscreenScreen()"
containerId="screen-zoom-container"
avatarTitle="Candidate live screen"
initials="CD">
Waiting for candidate to share screen&hellip;
</x-video-tile>
<!-- Panelist Self -->
@php
$usrWords = preg_split('/\s+/', trim(Auth::user()->name));
$usrInitials = count($usrWords) >= 2 ? strtoupper(substr($usrWords[0],0,1).substr(end($usrWords),0,1)) : strtoupper(substr(trim(Auth::user()->name),0,2));
@endphp
<x-video-tile
id="self-video-wrapper"
videoId="interviewer-self-video"
placeholderId="self-video-placeholder"
badgeText="Panelist self"
avatarTitle="{{ Auth::user()->name }}"
initials="{{ $usrInitials }}">
Panelist (self)
</x-video-tile>
</div>
<!-- Multi-Party Panelist Video Grid -->
<div id="panelist-mesh-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3.5 px-5 pb-5"></div>
</x-card>
<!-- Inspector Panel -->
<x-card>
<div class="inline-flex gap-1 p-1 bg-[#0d1220] border border-[#1b2233] rounded-[10px] mx-5 mt-4">
<x-tab-button id="tab-btn-code" tabKey="code" active="true" icon="fa-solid fa-code" onclick="switchIdeTab('code')">Live IDE code</x-tab-button>
<x-tab-button id="tab-btn-notes" tabKey="notes" active="false" icon="fa-solid fa-note-sticky" onclick="switchIdeTab('notes')">Candidate notepad</x-tab-button>
<x-tab-button id="tab-btn-drawing" tabKey="drawing" active="false" icon="fa-solid fa-pen" onclick="switchIdeTab('drawing')">Candidate drawing</x-tab-button>
<x-tab-button id="tab-btn-recordings" tabKey="recordings" active="false" icon="fa-solid fa-film" onclick="switchIdeTab('recordings')">Saved recordings</x-tab-button>
<x-tab-button id="tab-btn-screenshots" tabKey="screenshots" active="false" icon="fa-solid fa-image" onclick="switchIdeTab('screenshots')">Tab switch screenshots</x-tab-button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-5 gap-4 p-5">
<!-- Left 3 Cols: Tab Content -->
<div class="lg:col-span-3">
<!-- Tab 1: Live IDE Code -->
<div id="tab-content-code" class="block">
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Current code solution &mdash; visible even if candidate does not share screen</div>
<pre id="modal-code-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3.5 font-mono text-[13px] text-[#6ee7c9] min-h-[220px] max-h-[300px] overflow-y-auto whitespace-pre-wrap"></pre>
<div class="text-[11.5px] text-[#5b637a] mt-4 mb-2 font-medium">Execution stdout / stderr</div>
<pre id="modal-output-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 font-mono text-xs text-[#5b637a] max-h-[100px] overflow-y-auto whitespace-pre-wrap"></pre>
</div>
<!-- Tab 2: Candidate Notepad -->
<div id="tab-content-notes" class="hidden">
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Candidate live notepad notes (auto-synced)</div>
<pre id="modal-notes-display" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3.5 font-mono text-xs text-slate-200 min-h-[250px] max-h-[350px] overflow-y-auto whitespace-pre-wrap"></pre>
</div>
<!-- Tab 3: Candidate Canvas Drawing -->
<div id="tab-content-drawing" class="hidden">
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Candidate live drawing / architecture diagram</div>
<div class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 flex justify-center items-center min-h-[250px]">
<img id="modal-drawing-img" src="" alt="Candidate Drawing Board" class="max-w-full max-h-[320px] hidden rounded-lg border border-dashed border-[#232b3d]" />
<div id="no-drawing-placeholder" class="text-[#5b637a] text-xs">No drawing data submitted by candidate yet.</div>
</div>
</div>
<!-- Tab 4: Saved Video Recordings -->
<div id="tab-content-recordings" class="hidden">
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium">Saved candidate video sessions (sorted by newest first)</div>
<div id="modal-recordings-container" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 min-h-[250px] max-h-[420px] overflow-y-auto">
<div class="text-[#5b637a] text-xs text-center pt-10">No video recordings saved for this candidate yet.</div>
</div>
</div>
<!-- Tab 5: Tab-Switch Screenshots -->
<div id="tab-content-screenshots" class="hidden">
<div class="text-[11.5px] text-[#5b637a] mb-2 font-medium flex justify-between items-center">
<span>Candidate tab-switch captured screenshots</span>
<div class="flex items-center gap-2">
<span class="text-xs text-[#9199ad]">Admin Screenshot Capture:</span>
<x-button id="modal-toggle-screenshot-btn" onclick="toggleTabScreenshotCapture()" variant="success" size="sm" icon="fa-solid fa-camera">
ENABLED
</x-button>
</div>
</div>
<div id="modal-screenshots-container" class="bg-[#0d1220] border border-[#1b2233] rounded-[9px] p-3 min-h-[250px] max-h-[420px] overflow-y-auto">
<div class="text-[#5b637a] text-xs text-center pt-10">No tab-switch screenshots captured for this candidate yet.</div>
</div>
</div>
</div>
<!-- Right 2 Cols: Audit Log & Chat -->
<div class="lg:col-span-2">
<h3 class="text-[12.5px] font-semibold text-white mb-2.5 flex items-center gap-2 m-0">
Proctoring logs
</h3>
<x-audit-log id="modal-logs-display" :logs="$interview->proctor_logs ?? []" />
<div class="mt-4">
<h3 class="text-[12.5px] font-semibold text-white mb-2.5 flex items-center gap-2 m-0">
Live Chat
</h3>
<x-chat-panel id="interviewer-chat-history" class="mb-2.5" :warnings="$interview->warnings ?? []" :candidateName="$interview->candidate_name" />
<div class="flex gap-2">
<input type="text" id="warning-input" placeholder="Type message to candidate&hellip;" onkeydown="if(event.key==='Enter') sendSilentWarning()" class="flex-1 bg-[#0d1220] border border-[#232b3d] rounded-lg px-3 py-2 text-white text-xs outline-none focus:border-[rgba(75,130,247,0.35)] placeholder-[#5b637a]">
<x-button onclick="sendSilentWarning()" variant="primary" icon="fa-solid fa-paper-plane">Send</x-button>
</div>
</div>
</div>
</div>
</x-card>
</div>
<!-- SOS CHEATING ALERT MODAL -->
<x-modal id="sos-modal" title="candidate might cheating" maxWidth="lg" onClose="stopSosAlarm">
<div id="sos-violation-list" class="bg-[rgba(239,74,95,0.1)] border border-[rgba(239,74,95,0.32)] rounded-lg p-3.5 text-xs text-[#ef4a5f] mb-4 max-h-[180px] overflow-y-auto">
Violation details loading...
</div>
<div class="flex justify-end gap-2">
<x-button onclick="stopSosAlarm()" variant="secondary" size="md" icon="fa-solid fa-xmark">
Close
</x-button>
<x-button onclick="stopSosAlarm()" variant="danger" size="md" icon="fa-solid fa-bell-slash">
Acknowledge &amp; Stop SOS Alarm
</x-button>
</div>
</x-modal>
<!-- INCOMING CALL RING MODAL -->
<x-modal id="incoming-call-modal" maxWidth="md">
<div class="text-center p-2">
<div class="relative w-[90px] h-[90px] mx-auto mb-5 flex items-center justify-center">
<div class="absolute -inset-4 rounded-full border-2 border-[#21c274]/60 animate-ping"></div>
<div class="w-20 h-20 rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-3xl font-extrabold text-white shadow-xl shadow-[#4b82f7]/50 z-10">
<i class="fa-solid fa-phone"></i>
</div>
</div>
<div class="text-xs uppercase tracking-wider text-[#21c274] font-extrabold mb-1">
⚡ INCOMING INTERVIEW CALL
</div>
<h3 id="incoming-cand-name" class="font-outfit text-2xl font-extrabold text-white mb-1">
{{ $interview->candidate_name }}
</h3>
<div id="incoming-starter-info" class="text-xs text-[#4b82f7] mb-4">
Initiated by Panelist
</div>
<div class="bg-white/5 border border-white/10 rounded-xl p-3 text-xs text-slate-300 mb-6 leading-relaxed">
Another interviewer has started calling the candidate. Click <strong>Accept Call</strong> to join live, or <strong>Decline</strong> if busy.
</div>
<div class="flex gap-3 justify-center">
<x-button id="incoming-decline-btn" onclick="declineIncomingCall()" variant="danger" size="md" icon="fa-solid fa-xmark" class="flex-1">
Decline / Miss
</x-button>
<x-button id="incoming-accept-btn" onclick="acceptIncomingCall()" variant="success" size="md" icon="fa-solid fa-phone" class="flex-[1.3] font-extrabold animate-pulse">
Accept Call
</x-button>
</div>
</div>
</x-modal>
<!-- Page Initialization Script -->
<script>
window.currentUserId = {{ Auth::id() }};
window.currentUserName = "{{ addslashes(Auth::user()->name) }}";
window.currentUserRole = "{{ Auth::user()->is_admin ? 'admin' : 'interviewer' }}";
window.csrfToken = "{{ csrf_token() }}";
document.addEventListener('DOMContentLoaded', function() {
openReviewModal(
{{ $interview->id }},
"{{ addslashes($interview->candidate_name) }}",
"{{ $interview->submission_unique_id }}",
{{ request('join_call') == '1' ? 'true' : 'false' }}
);
});
</script>
</body>
</html>

1
routes/web.php
View File

@ -74,6 +74,7 @@
// Candidate Assessment Management for HR & Panelists // Candidate Assessment Management for HR & Panelists
Route::get('/interviews', [InterviewController::class, 'index'])->name('interview.index'); Route::get('/interviews', [InterviewController::class, 'index'])->name('interview.index');
Route::get('/interviews/active-calls', [InterviewController::class, 'getActiveCalls'])->name('interview.active-calls'); Route::get('/interviews/active-calls', [InterviewController::class, 'getActiveCalls'])->name('interview.active-calls');
Route::get('/interviews/{id}', [InterviewController::class, 'show'])->name('interview.show');
Route::post('/interviews', [InterviewController::class, 'store'])->name('interview.store'); Route::post('/interviews', [InterviewController::class, 'store'])->name('interview.store');
Route::post('/interviews/{id}/warning', [InterviewController::class, 'sendWarning'])->name('interview.warning'); Route::post('/interviews/{id}/warning', [InterviewController::class, 'sendWarning'])->name('interview.warning');
Route::get('/interviews/{id}/poll', [InterviewController::class, 'getPollData'])->name('interview.poll'); Route::get('/interviews/{id}/poll', [InterviewController::class, 'getPollData'])->name('interview.poll');