772 lines
35 KiB
PHP
772 lines
35 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Onboarding & Offboarding Portal | 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=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- jQuery & Select2 CDN -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #0b0f19;
|
|
--card-bg: rgba(15, 23, 42, 0.65);
|
|
--card-border: rgba(255, 255, 255, 0.22);
|
|
--accent-primary: #6366f1;
|
|
--accent-secondary: #0078d4;
|
|
--text-main: #ffffff;
|
|
--text-muted: #d1d5db;
|
|
--success-color: #10b981;
|
|
--error-color: #ef4444;
|
|
--info-color: #06b6d4;
|
|
}
|
|
|
|
/* Modern Custom Scrollbars */
|
|
html, body, *, ::-webkit-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(15, 23, 42, 0.35);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Instrument Sans', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Ambient Glowing Background Effects */
|
|
body::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10%;
|
|
left: -10%;
|
|
width: 50%;
|
|
height: 50%;
|
|
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(0,0,0,0) 70%);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10%;
|
|
right: -10%;
|
|
width: 50%;
|
|
height: 50%;
|
|
background: radial-gradient(circle, rgba(0, 120, 212, 0.15) 0%, rgba(0,0,0,0) 70%);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Navbar Header */
|
|
.navbar {
|
|
height: 70px;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border-bottom: 1px solid var(--card-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 4%;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
|
|
.nav-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.btn-nav {
|
|
color: #e5e7eb;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--card-border);
|
|
transition: all 0.25s ease;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.btn-nav:hover {
|
|
color: var(--text-main);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Stats Cards */
|
|
.ob-stat-card {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.ob-tab-btn {
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.ob-tab-btn.active {
|
|
background: var(--accent-primary);
|
|
color: white;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
|
|
}
|
|
|
|
.ob-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
padding: 28px;
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Table Styling */
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.users-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.users-table th {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--card-border);
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.users-table td {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.users-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border-radius: 9999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: 1px solid var(--card-border);
|
|
background: rgba(255,255,255,0.05);
|
|
color: white;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.action-btn-delete {
|
|
color: #ef4444;
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
background: rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.action-btn-delete:hover {
|
|
background: rgba(239, 68, 68, 0.25);
|
|
color: white;
|
|
}
|
|
|
|
.checklist-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checklist-item input[type="checkbox"] {
|
|
accent-color: #10b981;
|
|
width: 14px;
|
|
height: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Modal Backdrop & Overlay */
|
|
.admin-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(11, 15, 25, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.admin-modal.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.admin-modal-content {
|
|
background-color: #151b2c;
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
width: 90%;
|
|
max-width: 550px;
|
|
padding: 28px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
|
|
transform: scale(0.95);
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
color: white;
|
|
}
|
|
|
|
.admin-modal.active .admin-modal-content {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: white;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.btn-cancel {
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
color: white;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Top Navbar -->
|
|
<header class="navbar">
|
|
<div class="nav-logo">
|
|
<div style="width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #6366f1 0%, #0078d4 100%); display: flex; align-items: center; justify-content: center;">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px; fill: white;">
|
|
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M11,7V11H7V13H11V17H13V13H17V11H13V7H11Z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div>Onboarding & Offboarding Hub</div>
|
|
<div style="font-size: 0.7rem; color: var(--text-muted); font-weight: 400;">Candidate Provisioning & Access Revocation</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-actions">
|
|
@if(Auth::user()->isAdmin())
|
|
<a href="{{ route('admin.dashboard') }}" class="btn-nav" style="border-color: #818cf8; color: #818cf8;">Control Panel</a>
|
|
@endif
|
|
<a href="{{ route('dashboard') }}" class="btn-nav">User Portal</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main style="max-width: 1400px; width: 100%; margin: 30px auto; padding: 0 4%; flex: 1; z-index: 10;">
|
|
@if(session('success'))
|
|
<div style="margin-bottom: 24px; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; padding: 12px 20px; border-radius: 12px; font-size: 0.9rem;">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
@if(session('error'))
|
|
<div style="margin-bottom: 24px; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; padding: 12px 20px; border-radius: 12px; font-size: 0.9rem;">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Stats Grid -->
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 30px;">
|
|
<div class="ob-stat-card">
|
|
<div style="width: 44px; height: 44px; border-radius: 12px; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); display: flex; align-items: center; justify-content: center; color: #818cf8; font-weight: 700; font-size: 1.1rem;">
|
|
{{ $stats['preboarding_count'] }}
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">Preboarding Candidates</div>
|
|
<div style="font-size: 1.05rem; font-weight: 700; color: white;">Pending Day-1</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ob-stat-card">
|
|
<div style="width: 44px; height: 44px; border-radius: 12px; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); display: flex; align-items: center; justify-content: center; color: #34d399; font-weight: 700; font-size: 1.1rem;">
|
|
{{ $stats['active_interns_count'] }}
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">Active Interns</div>
|
|
<div style="font-size: 1.05rem; font-weight: 700; color: white;">SSO Provisioned</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ob-stat-card">
|
|
<div style="width: 44px; height: 44px; border-radius: 12px; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); display: flex; align-items: center; justify-content: center; color: #fca5a5; font-weight: 700; font-size: 1.1rem;">
|
|
{{ $stats['offboarded_count'] }}
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">Offboarded History</div>
|
|
<div style="font-size: 1.05rem; font-weight: 700; color: white;">Access Revoked</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ob-stat-card">
|
|
<div style="width: 44px; height: 44px; border-radius: 12px; background: rgba(6,182,212,0.15); border: 1px solid rgba(6,182,212,0.3); display: flex; align-items: center; justify-content: center; color: #22d3ee; font-weight: 700; font-size: 1.1rem;">
|
|
{{ $stats['total_managed'] }}
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">Total Lifecycle Profiles</div>
|
|
<div style="font-size: 1.05rem; font-weight: 700; color: white;">Managed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Tabs & Primary Action -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px;">
|
|
<div style="display: flex; gap: 8px; background: rgba(255,255,255,0.03); padding: 4px; border-radius: 12px; border: 1px solid var(--card-border);">
|
|
<button class="ob-tab-btn active" onclick="switchObTab('tab-onboarding', this)">
|
|
🚀 Onboarding Candidates & Interns
|
|
</button>
|
|
<button class="ob-tab-btn" onclick="switchObTab('tab-offboarding', this)">
|
|
🛡️ 1-Click Offboarding & Revocation
|
|
</button>
|
|
</div>
|
|
|
|
<button onclick="document.getElementById('add-candidate-modal').classList.add('active')" class="btn-nav" style="background-color: var(--accent-primary); color: white; border-color: var(--accent-primary); font-weight: 600; padding: 10px 18px; cursor: pointer;">
|
|
+ Add Onboarding Candidate / Intern
|
|
</button>
|
|
</div>
|
|
|
|
<!-- TAB 1: ONBOARDING CANDIDATES & INTERNS -->
|
|
<div id="tab-onboarding" class="ob-card">
|
|
<h3 style="font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: white; margin-top: 0; margin-bottom: 16px;">
|
|
Active Candidate & Intern Onboarding Pipeline
|
|
</h3>
|
|
|
|
<div class="table-responsive">
|
|
<table class="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Candidate / Intern</th>
|
|
<th>Type & Department</th>
|
|
<th>Status</th>
|
|
<th>Pre-Approved Services</th>
|
|
<th>Onboarding Checklist</th>
|
|
<th style="text-align: right;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($onboardings->where('status', '!=', 'offboarded') as $ob)
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<strong style="color: white; font-size: 0.9rem;">{{ $ob->name }}</strong>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">{{ $ob->email }}</div>
|
|
@if($ob->join_date)
|
|
<div style="font-size: 0.7rem; color: #38bdf8; margin-top: 2px;">Join Date: {{ $ob->join_date->format('Y-m-d') }}</div>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge" style="background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); text-transform: uppercase;">
|
|
{{ $ob->type }}
|
|
</span>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 4px;">{{ $ob->department ?? 'General' }}</div>
|
|
</td>
|
|
<td>
|
|
@if($ob->status === 'active')
|
|
<span class="badge" style="background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3);">
|
|
Active Day-1
|
|
</span>
|
|
@else
|
|
<span class="badge" style="background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3);">
|
|
Preboarding
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px;">
|
|
@if(!empty($ob->assigned_apps))
|
|
@foreach($apps->whereIn('id', $ob->assigned_apps) as $a)
|
|
<span class="badge" style="background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.15); font-size: 0.65rem;">
|
|
{{ $a->name }}
|
|
</span>
|
|
@endforeach
|
|
@else
|
|
<span style="font-size: 0.75rem; color: var(--text-muted);">Default Roles</span>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
<td>
|
|
@php $chk = $ob->checklist ?? []; @endphp
|
|
<div style="display: flex; flex-direction: column; gap: 2px;">
|
|
<label class="checklist-item">
|
|
<input type="checkbox" onchange="toggleChecklist({{ $ob->id }}, 'document_verified', this.checked)" {{ !empty($chk['document_verified']) ? 'checked' : '' }}>
|
|
Document Verified
|
|
</label>
|
|
<label class="checklist-item">
|
|
<input type="checkbox" onchange="toggleChecklist({{ $ob->id }}, 'email_created', this.checked)" {{ !empty($chk['email_created']) ? 'checked' : '' }}>
|
|
Email Account Set
|
|
</label>
|
|
<label class="checklist-item">
|
|
<input type="checkbox" onchange="toggleChecklist({{ $ob->id }}, 'sso_bundle_granted', this.checked)" {{ !empty($chk['sso_bundle_granted']) ? 'checked' : '' }}>
|
|
SSO Granted
|
|
</label>
|
|
</div>
|
|
</td>
|
|
<td style="text-align: right; white-space: nowrap;">
|
|
@if($ob->status !== 'active')
|
|
<form action="{{ route('onboarding.activate', $ob->id) }}" method="POST" style="display: inline;">
|
|
@csrf
|
|
<button type="submit" class="action-btn" style="color: #10b981; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); margin-right: 4px;">
|
|
Activate & Provision SSO
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
<form action="{{ route('onboarding.destroy', $ob->id) }}" method="POST" onsubmit="return confirm('Remove onboarding profile?')" style="display: inline;">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="action-btn action-btn-delete">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" style="text-align: center; color: var(--text-muted); padding: 30px;">
|
|
No active onboarding candidates or interns. Click "+ Add Onboarding Candidate" above to create one.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB 2: 1-CLICK OFFBOARDING & REVOCATION -->
|
|
<div id="tab-offboarding" class="ob-card" style="display: none;">
|
|
<h3 style="font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: white; margin-top: 0; margin-bottom: 16px;">
|
|
1-Click Offboarding & Instant Access Revocation
|
|
</h3>
|
|
|
|
<div style="margin-bottom: 24px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); border-radius: 14px; padding: 16px; font-size: 0.8rem; color: #fca5a5;">
|
|
<strong>🛡️ Offboarding Protocol:</strong> Clicking "1-Click Offboard" instantly blocks the user account, terminates Microsoft OAuth sessions, and revokes all active SSO service apps.
|
|
</div>
|
|
|
|
<h4 style="font-size: 0.95rem; color: white; margin-bottom: 12px;">Active System Users (Initiate Exit)</h4>
|
|
<div class="table-responsive" style="margin-bottom: 30px;">
|
|
<table class="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>User Account</th>
|
|
<th>Assigned Roles</th>
|
|
<th>Account Status</th>
|
|
<th style="text-align: right;">Offboarding Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($activeUsers as $u)
|
|
<tr>
|
|
<td>
|
|
<strong style="color: white;">{{ $u->name }}</strong>
|
|
<div style="font-size: 0.75rem; color: var(--text-muted);">{{ $u->email }}</div>
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 4px;">
|
|
@foreach($u->roles as $r)
|
|
<span class="badge" style="background: rgba(99,102,241,0.1); color: #818cf8; font-size: 0.65rem;">{{ $r->name }}</span>
|
|
@endforeach
|
|
</div>
|
|
</td>
|
|
<td>
|
|
@if($u->is_blocked)
|
|
<span class="badge" style="background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3);">Blocked / Offboarded</span>
|
|
@else
|
|
<span class="badge" style="background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.25);">Active Access</span>
|
|
@endif
|
|
</td>
|
|
<td style="text-align: right;">
|
|
@if(!$u->is_blocked)
|
|
<form action="{{ route('onboarding.offboard', $u->id) }}" method="POST" onsubmit="return confirm('WARNING: Are you sure you want to 1-Click Offboard {{ addslashes($u->name) }}? This will instantly block their account and terminate all SSO service access.')" style="display: inline;">
|
|
@csrf
|
|
<button type="submit" class="action-btn action-btn-delete" style="font-weight: 700; padding: 6px 14px;">
|
|
🛡️ 1-Click Offboard & Revoke
|
|
</button>
|
|
</form>
|
|
@else
|
|
<span style="font-size: 0.75rem; color: var(--text-muted);">Account Already Revoked</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h4 style="font-size: 0.95rem; color: white; margin-bottom: 12px;">Offboarded Audit Log & Compliance History</h4>
|
|
<div class="table-responsive">
|
|
<table class="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Offboarded Entity</th>
|
|
<th>Exit Timestamp</th>
|
|
<th>Authorized By</th>
|
|
<th>Revocation Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($onboardings->where('status', 'offboarded') as $off)
|
|
<tr>
|
|
<td>
|
|
<strong style="color: white;">{{ $off->name }}</strong>
|
|
<div style="font-size: 0.7rem; color: var(--text-muted);">{{ $off->email }}</div>
|
|
</td>
|
|
<td>
|
|
<span style="color: var(--text-muted);">{{ $off->offboarded_at ? $off->offboarded_at->format('Y-m-d H:i') : 'N/A' }}</span>
|
|
</td>
|
|
<td>
|
|
<span style="color: #38bdf8;">{{ $off->offboarder->name ?? 'Admin / HR System' }}</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge" style="background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3);">
|
|
Account Blocked & SSO Access Terminated
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" style="text-align: center; color: var(--text-muted); padding: 20px;">
|
|
No offboarding records in audit log.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modal: Add Candidate / Intern -->
|
|
<div id="add-candidate-modal" class="admin-modal">
|
|
<div class="admin-modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Onboard New Candidate / Intern</h3>
|
|
<button class="modal-close" onclick="document.getElementById('add-candidate-modal').classList.remove('active')">×</button>
|
|
</div>
|
|
<form action="{{ route('onboarding.store') }}" method="POST">
|
|
@csrf
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;">
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Full Name <span style="color:#ef4444;">*</span></label>
|
|
<input type="text" name="name" required placeholder="e.g. Alex Morgan" class="form-input">
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Email Address <span style="color:#ef4444;">*</span></label>
|
|
<input type="email" name="email" required placeholder="alex@company.com" class="form-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;">
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Position Type <span style="color:#ef4444;">*</span></label>
|
|
<select name="type" required class="form-input" style="background: #151b2c;">
|
|
<option value="intern">Intern</option>
|
|
<option value="candidate">Candidate</option>
|
|
<option value="employee">Full-time Employee</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Department</label>
|
|
<input type="text" name="department" placeholder="e.g. Engineering, HR" class="form-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 14px;">
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; font-weight:500;">Target Join Date</label>
|
|
<input type="date" name="join_date" class="form-input" style="color-scheme: dark;">
|
|
</div>
|
|
|
|
<div style="margin-bottom: 14px;">
|
|
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Pre-Approved Services Access (SSO Bundle)</label>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 140px; overflow-y: auto; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; border: 1px solid var(--card-border);">
|
|
@foreach($apps as $app)
|
|
<label style="display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: white; cursor: pointer;">
|
|
<input type="checkbox" name="assigned_apps[]" value="{{ $app->id }}" style="accent-color: #6366f1; width: 14px; height: 14px;">
|
|
{{ $app->name }}
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn-cancel" onclick="document.getElementById('add-candidate-modal').classList.remove('active')">Cancel</button>
|
|
<button type="submit" class="btn-nav" style="background-color: var(--accent-primary); color: white; border-color: transparent; font-weight: 600;">Create Profile</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchObTab(tabId, btn) {
|
|
document.querySelectorAll('.ob-card').forEach(c => c.style.display = 'none');
|
|
document.querySelectorAll('.ob-tab-btn').forEach(b => b.classList.remove('active'));
|
|
|
|
document.getElementById(tabId).style.display = 'block';
|
|
btn.classList.add('active');
|
|
}
|
|
|
|
function toggleChecklist(id, key, val) {
|
|
fetch(`{{ route('onboarding.checklist', ':id') }}`.replace(':id', id), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ key: key, val: val })
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|