147 lines
8.1 KiB
PHP
147 lines
8.1 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
require_once 'db/config.php';
|
|
|
|
// Template data from the React snippet
|
|
$templateTasks = [
|
|
['name' => "Setup Development Environment", 'status' => "in-progress", 'category' => "IT"],
|
|
['name' => "Complete HR Documentation", 'status' => "completed", 'category' => "HR"],
|
|
['name' => "Benefits Enrollment", 'status' => "completed", 'category' => "HR"],
|
|
['name' => "Team Introduction Meeting", 'status' => "pending", 'category' => "Manager"],
|
|
['name' => "Assign First Project", 'status' => "pending", 'category' => "Manager"],
|
|
['name' => "Security Training", 'status' => "pending", 'category' => "IT"],
|
|
['name' => "Code Review Process Training", 'status' => "pending", 'category' => "Manager"],
|
|
['name' => "Setup Communication Tools", 'status' => "completed", 'category' => "IT"],
|
|
];
|
|
|
|
$completedTasks = count(array_filter($templateTasks, function($t) { return $t['status'] === "completed"; }));
|
|
$progressPercent = ($completedTasks / count($templateTasks)) * 100;
|
|
|
|
$status_map = [
|
|
'completed' => ['icon' => 'check-circle-2', 'color' => 'text-green-500', 'bg' => 'bg-green-100'],
|
|
'in-progress' => ['icon' => 'clock', 'color' => 'text-blue-500', 'bg' => 'bg-blue-100'],
|
|
'pending' => ['icon' => 'file-text', 'color' => 'text-gray-500', 'bg' => 'bg-gray-100']
|
|
];
|
|
|
|
$category_map = [
|
|
'IT' => 'text-red-500',
|
|
'HR' => 'text-blue-500',
|
|
'Manager' => 'text-purple-500',
|
|
];
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Onboarding - FinMox</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="flex h-screen bg-gray-200">
|
|
<?php include '_sidebar.php'; ?>
|
|
|
|
<main class="flex-1 flex overflow-hidden">
|
|
<div class="flex-1 overflow-y-auto bg-[#fafafa] p-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-8">Onboarding Plan for Sarah Kim</h1>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Main Content -->
|
|
<div class="lg:col-span-2 space-y-8">
|
|
<!-- Welcome Card -->
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
|
|
<h3 class="text-xl font-semibold mb-4">Welcome to the Team, Sarah!</h3>
|
|
<p class="text-gray-600">We're thrilled to have you on board. This onboarding plan is designed to help you get up to speed quickly and smoothly. Please review the checklist and let your manager know if you have any questions.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="w-full space-y-6">
|
|
<!-- Employee Info -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200">
|
|
<div class="p-6 space-y-4">
|
|
<h3 class="flex items-center gap-2 font-semibold">
|
|
<i data-lucide="user" class="w-5 h-5 text-[#3A66FF]"></i>
|
|
Employee Information
|
|
</h3>
|
|
<div class="flex items-center gap-3 pt-2">
|
|
<img class="w-16 h-16 rounded-full" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop" alt="Sarah Kim">
|
|
<div>
|
|
<p class="font-semibold">Sarah Kim</p>
|
|
<p class="text-sm text-gray-500">New Hire</p>
|
|
</div>
|
|
</div>
|
|
<div class="pt-4 border-t border-gray-200 space-y-3 text-sm">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="briefcase" class="w-4 h-4 text-gray-500"></i>
|
|
<div>
|
|
<p class="text-gray-500">Position</p>
|
|
<p class="font-medium">Senior Full-Stack Engineer</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="mail" class="w-4 h-4 text-gray-500"></i>
|
|
<div>
|
|
<p class="text-gray-500">Email</p>
|
|
<p class="font-medium">sarah.kim@finmox.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="calendar" class="w-4 h-4 text-gray-500"></i>
|
|
<div>
|
|
<p class="text-gray-500">Start Date</p>
|
|
<p class="font-medium">December 17, 2025</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onboarding Checklist -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200">
|
|
<div class="p-6">
|
|
<h3 class="flex items-center gap-2 font-semibold">
|
|
<i data-lucide="layers" class="w-5 h-5 text-[#3A66FF]"></i>
|
|
Onboarding Checklist
|
|
</h3>
|
|
<div class="mt-4">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm font-medium text-gray-700">Progress</span>
|
|
<span class="text-sm font-medium text-gray-700"><?= number_format($progressPercent, 0) ?>%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
|
<div class="bg-[#3A66FF] h-2.5 rounded-full" style="width: <?= $progressPercent ?>%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 space-y-4">
|
|
<?php foreach ($templateTasks as $task): ?>
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full <?= $status_map[$task['status']]['bg'] ?> flex items-center justify-center mt-1">
|
|
<i data-lucide="<?= $status_map[$task['status']]['icon'] ?>" class="w-4 h-4 <?= $status_map[$task['status']]['color'] ?>"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium"><?= htmlspecialchars($task['name']) ?></p>
|
|
<span class="text-xs font-semibold px-2 py-0.5 rounded-full <?= $category_map[$task['category']] ?? 'text-gray-500' ?> bg-gray-100 border"><?= htmlspecialchars($task['category']) ?></span>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|