212 lines
11 KiB
PHP
212 lines
11 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
require_once 'db/config.php';
|
|
// Note: The following PHP variables are placeholders and not currently used in the new design.
|
|
// They can be integrated later when making the dashboard dynamic.
|
|
/*
|
|
$pdo = db();
|
|
$total_candidates = $pdo->query("SELECT COUNT(*) FROM candidates")->fetchColumn();
|
|
$total_tasks = $pdo->query("SELECT COUNT(*) FROM tasks")->fetchColumn();
|
|
$completed_tasks = $pdo->query("SELECT COUNT(*) FROM tasks WHERE status = 'Completed'")->fetchColumn();
|
|
$completion_rate = ($total_tasks > 0) ? ($completed_tasks / $total_tasks) * 100 : 0;
|
|
$open_cases = 12;
|
|
*/
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - FinMox</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
* {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
body {
|
|
background-color: #fafafa;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.stat-card .percentage.positive { color: #22c55e; }
|
|
.stat-card .percentage.negative { color: #ef4444; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="flex h-screen bg-gray-200">
|
|
<?php include '_sidebar.php'; ?>
|
|
|
|
<!-- Main content -->
|
|
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#fafafa]">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900">HR Dashboard</h1>
|
|
<p class="text-gray-600 mt-1">Overview of recruiting, onboarding, and HR operations</p>
|
|
</div>
|
|
|
|
<!-- Key Metrics -->
|
|
<div class="mb-8">
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-4">Key Metrics</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<p class="text-gray-500 text-sm">Active Candidates</p>
|
|
<div class="flex items-baseline space-x-2 mt-1">
|
|
<p class="text-3xl font-bold text-gray-900">47</p>
|
|
<p class="percentage positive text-sm font-semibold">+12%</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<p class="text-gray-500 text-sm">Open Cases</p>
|
|
<div class="flex items-baseline space-x-2 mt-1">
|
|
<p class="text-3xl font-bold text-gray-900">23</p>
|
|
<p class="percentage negative text-sm font-semibold">-8%</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<p class="text-gray-500 text-sm">Onboarding Tasks</p>
|
|
<div class="flex items-baseline space-x-2 mt-1">
|
|
<p class="text-3xl font-bold text-gray-900">156</p>
|
|
<p class="percentage positive text-sm font-semibold">+5%</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<p class="text-gray-500 text-sm">Completion Rate</p>
|
|
<div class="flex items-baseline space-x-2 mt-1">
|
|
<p class="text-3xl font-bold text-gray-900">94%</p>
|
|
<p class="percentage positive text-sm font-semibold">+2%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Hiring Funnel (Left Column) -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Hiring Funnel</h3>
|
|
<div class="h-80">
|
|
<canvas id="hiringFunnelChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity (Right Column) -->
|
|
<div>
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-center">
|
|
<div class="p-2 bg-blue-100 rounded-full"><i data-lucide="user-plus" class="w-5 h-5 text-blue-600"></i></div>
|
|
<div class="ml-3"><p class="text-sm text-gray-700">New candidate profile created</p><p class="text-xs text-gray-500">5 minutes ago</p></div>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 bg-yellow-100 rounded-full"><i data-lucide="file-text" class="w-5 h-5 text-yellow-600"></i></div>
|
|
<div class="ml-3"><p class="text-sm text-gray-700">Case updated</p><p class="text-xs text-gray-500">23 minutes ago</p></div>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 bg-green-100 rounded-full"><i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i></div>
|
|
<div class="ml-3"><p class="text-sm text-gray-700">Onboarding task completed</p><p class="text-xs text-gray-500">1 hour ago</p></div>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 bg-red-100 rounded-full"><i data-lucide="clock" class="w-5 h-5 text-red-600"></i></div>
|
|
<div class="ml-3"><p class="text-sm text-gray-700">Deadline approaching</p><p class="text-xs text-gray-500">2 hours ago</p></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Open HR Cases -->
|
|
<div class="mt-8">
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Open HR Cases</h3>
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr>
|
|
<th class="p-2 text-sm font-semibold text-gray-600">Case</th>
|
|
<th class="p-2 text-sm font-semibold text-gray-600">Priority</th>
|
|
<th class="p-2 text-sm font-semibold text-gray-600">Assignee</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-t border-gray-200">
|
|
<td class="p-3 text-sm text-gray-800">Performance Review - Marcus Chen</td>
|
|
<td class="p-3"><span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">High</span></td>
|
|
<td class="p-3 text-sm text-gray-800">John Doe</td>
|
|
</tr>
|
|
<tr class="border-t border-gray-200">
|
|
<td class="p-3 text-sm text-gray-800">Background Check - Sarah Johnson</td>
|
|
<td class="p-3"><span class="px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">Medium</span></td>
|
|
<td class="p-3 text-sm text-gray-800">Jane Smith</td>
|
|
</tr>
|
|
<tr class="border-t border-gray-200">
|
|
<td class="p-3 text-sm text-gray-800">Onboarding Checklist - Emily Davis</td>
|
|
<td class="p-3"><span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Low</span></td>
|
|
<td class="p-3 text-sm text-gray-800">Alice Johnson</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
const ctx = document.getElementById('hiringFunnelChart').getContext('2d');
|
|
const hiringFunnelChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Applications', 'Screening', 'Interviews', 'Offers', 'Hires'],
|
|
datasets: [{
|
|
label: 'Candidates',
|
|
data: [150, 100, 60, 30, 15],
|
|
backgroundColor: '#3b82f6',
|
|
borderRadius: 4,
|
|
barThickness: 30,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: '#e5e7eb',
|
|
borderDash: [2, 4],
|
|
},
|
|
ticks: {
|
|
color: '#6b7280'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
color: '#6b7280'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|