182 lines
10 KiB
PHP
182 lines
10 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
require_once 'db/config.php';
|
|
|
|
// --- Data based on the new text provided ---
|
|
|
|
$employee = [
|
|
'name' => 'Emily Davis',
|
|
'initials' => 'ED',
|
|
'title' => 'Product Designer',
|
|
'team' => 'Design Team',
|
|
'start_date' => 'Dec 15, 2024',
|
|
'manager' => 'Sarah Johnson',
|
|
'day' => 3,
|
|
'total_days' => 30,
|
|
'avatar_url' => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop'
|
|
];
|
|
|
|
$tasks = [
|
|
'in_progress' => [
|
|
['title' => 'I-9 Form', 'description' => 'Verify employment eligibility documentation', 'due' => 'Dec 10, 2024', 'assignee' => 'Emily Davis'],
|
|
['title' => 'Set Up Email Account', 'description' => 'Configure company email and Slack access', 'due' => 'Dec 11, 2024', 'assignee' => 'IT Team'],
|
|
['title' => 'Equipment Setup', 'description' => 'Receive and configure laptop and peripherals', 'due' => 'Dec 12, 2024', 'assignee' => 'IT Team'],
|
|
],
|
|
'upcoming' => [
|
|
['title' => 'Benefits Enrollment', 'description' => 'Review and select health insurance options', 'due' => 'Dec 20, 2024'],
|
|
['title' => 'Department Orientation', 'description' => 'Meet with design team and review processes', 'due' => 'Dec 22, 2024'],
|
|
['title' => 'Security Training', 'description' => 'Complete online security awareness course', 'due' => 'Dec 27, 2024'],
|
|
],
|
|
'completed' => [
|
|
['title' => 'Sign Offer Letter', 'description' => 'Completed by Emily Davis on Dec 5, 2024'],
|
|
['title' => 'Background Check', 'description' => 'Completed by HR Team on Dec 6, 2024'],
|
|
['title' => 'Upload Profile Photo', 'description' => 'Completed by Emily Davis on Dec 7, 2024'],
|
|
['title' => 'Emergency Contact Info', 'description' => 'Completed by Emily Davis on Dec 7, 2024'],
|
|
]
|
|
];
|
|
|
|
// Numbers from the user's text for summary
|
|
$completed_count_from_text = 12;
|
|
$total_tasks_from_text = 20;
|
|
$progressPercent = ($completed_count_from_text / $total_tasks_from_text) * 100;
|
|
|
|
function getStatusChip($status) {
|
|
switch ($status) {
|
|
case 'In Progress':
|
|
return '<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">In Progress</span>';
|
|
case 'Upcoming':
|
|
return '<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Upcoming</span>';
|
|
case 'Completed':
|
|
return '<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Completed</span>';
|
|
default:
|
|
return '<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full"></span>';
|
|
}
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Onboarding Tasks - 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 flex-col overflow-hidden">
|
|
<div class="flex-1 overflow-y-auto bg-[#fafafa] p-8">
|
|
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900">Onboarding Tasks</h1>
|
|
<p class="text-gray-600 mt-1">Manage and track employee onboarding progress</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Main Content: Task Lists -->
|
|
<div class="lg:col-span-2 space-y-8">
|
|
|
|
<!-- In Progress -->
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">In Progress <span class="text-base font-normal text-gray-500">(<?= count($tasks['in_progress']) ?>)</span></h2>
|
|
<div class="space-y-4">
|
|
<?php foreach ($tasks['in_progress'] as $task): ?>
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-start justify-between">
|
|
<div>
|
|
<h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
|
|
<p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
|
|
<p class="text-sm text-gray-500 mt-2">Due: <?= htmlspecialchars($task['due']) ?></p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Complete</span>
|
|
<p class="text-sm font-medium text-gray-600 mt-2"><?= htmlspecialchars($task['assignee']) ?></p>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upcoming -->
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">Upcoming <span class="text-base font-normal text-gray-500">(<?= count($tasks['upcoming']) ?>)</span></h2>
|
|
<div class="space-y-4">
|
|
<?php foreach ($tasks['upcoming'] as $task): ?>
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-start justify-between">
|
|
<div>
|
|
<h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
|
|
<p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="text-sm text-gray-500">Scheduled: <?= htmlspecialchars($task['due']) ?></span>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completed -->
|
|
<div>
|
|
<h2 class="text-xl font-semibold mb-4">Completed <span class="text-base font-normal text-gray-500">(<?= count($tasks['completed']) ?>)</span></h2>
|
|
<div class="space-y-4">
|
|
<?php foreach ($tasks['completed'] as $task): ?>
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
|
|
<h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
|
|
<p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar: Employee Overview -->
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
<h3 class="text-lg font-semibold mb-4">Employee Overview</h3>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center text-2xl font-bold">
|
|
<?= htmlspecialchars($employee['initials']) ?>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-lg"><?= htmlspecialchars($employee['name']) ?></p>
|
|
<p class="text-gray-600"><?= htmlspecialchars($employee['title']) ?> • <?= htmlspecialchars($employee['team']) ?></p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 pt-4 border-t border-gray-200 text-sm space-y-2">
|
|
<p><span class="font-semibold">Start Date:</span> <?= htmlspecialchars($employee['start_date']) ?></p>
|
|
<p><span class="font-semibold">Manager:</span> <?= htmlspecialchars($employee['manager']) ?></p>
|
|
<p class="text-gray-500 mt-1">Day <?= htmlspecialchars($employee['day']) ?> of <?= htmlspecialchars($employee['total_days']) ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
<h3 class="text-lg font-semibold mb-4">Overall Progress</h3>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm font-medium text-gray-700"><?= $completed_count_from_text ?> of <?= $total_tasks_from_text ?> tasks</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-blue-600 h-2.5 rounded-full" style="width: <?= $progressPercent ?>%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|