December 16th,2025 V.10
This commit is contained in:
Flatlogic Bot
parent
4990fbd609
commit
a30194d0d0
226
onboarding.php
226
onboarding.php
@ -6,32 +6,56 @@ if (!isset($_SESSION['user_id'])) {
|
|||||||
}
|
}
|
||||||
require_once 'db/config.php';
|
require_once 'db/config.php';
|
||||||
|
|
||||||
// Template data from the React snippet
|
// --- Data based on the new text provided ---
|
||||||
$templateTasks = [
|
|
||||||
['name' => "Setup Development Environment", 'status' => "in-progress", 'category' => "IT"],
|
$employee = [
|
||||||
['name' => "Complete HR Documentation", 'status' => "completed", 'category' => "HR"],
|
'name' => 'Emily Davis',
|
||||||
['name' => "Benefits Enrollment", 'status' => "completed", 'category' => "HR"],
|
'initials' => 'ED',
|
||||||
['name' => "Team Introduction Meeting", 'status' => "pending", 'category' => "Manager"],
|
'title' => 'Product Designer',
|
||||||
['name' => "Assign First Project", 'status' => "pending", 'category' => "Manager"],
|
'team' => 'Design Team',
|
||||||
['name' => "Security Training", 'status' => "pending", 'category' => "IT"],
|
'start_date' => 'Dec 15, 2024',
|
||||||
['name' => "Code Review Process Training", 'status' => "pending", 'category' => "Manager"],
|
'manager' => 'Sarah Johnson',
|
||||||
['name' => "Setup Communication Tools", 'status' => "completed", 'category' => "IT"],
|
'day' => 3,
|
||||||
|
'total_days' => 30,
|
||||||
|
'avatar_url' => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop'
|
||||||
];
|
];
|
||||||
|
|
||||||
$completedTasks = count(array_filter($templateTasks, function($t) { return $t['status'] === "completed"; }));
|
$tasks = [
|
||||||
$progressPercent = ($completedTasks / count($templateTasks)) * 100;
|
'in_progress' => [
|
||||||
|
['title' => 'I-9 Form', 'description' => 'Verify employment eligibility documentation', 'due' => 'Dec 10, 2024', 'assignee' => 'Emily Davis'],
|
||||||
$status_map = [
|
['title' => 'Set Up Email Account', 'description' => 'Configure company email and Slack access', 'due' => 'Dec 11, 2024', 'assignee' => 'IT Team'],
|
||||||
'completed' => ['icon' => 'check-circle-2', 'color' => 'text-green-500', 'bg' => 'bg-green-100'],
|
['title' => 'Equipment Setup', 'description' => 'Receive and configure laptop and peripherals', 'due' => 'Dec 12, 2024', 'assignee' => 'IT Team'],
|
||||||
'in-progress' => ['icon' => 'clock', 'color' => 'text-blue-500', 'bg' => 'bg-blue-100'],
|
],
|
||||||
'pending' => ['icon' => 'file-text', 'color' => 'text-gray-500', 'bg' => 'bg-gray-100']
|
'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'],
|
||||||
|
]
|
||||||
];
|
];
|
||||||
|
|
||||||
$category_map = [
|
// Numbers from the user's text for summary
|
||||||
'IT' => 'text-red-500',
|
$completed_count_from_text = 12;
|
||||||
'HR' => 'text-blue-500',
|
$total_tasks_from_text = 20;
|
||||||
'Manager' => 'text-purple-500',
|
$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>
|
<!DOCTYPE html>
|
||||||
@ -39,7 +63,7 @@ $category_map = [
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Onboarding - FinMox</title>
|
<title>Onboarding Tasks - FinMox</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script src="https://unpkg.com/lucide@latest"></script>
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
</head>
|
</head>
|
||||||
@ -47,94 +71,104 @@ $category_map = [
|
|||||||
<div class="flex h-screen bg-gray-200">
|
<div class="flex h-screen bg-gray-200">
|
||||||
<?php include '_sidebar.php'; ?>
|
<?php include '_sidebar.php'; ?>
|
||||||
|
|
||||||
<main class="flex-1 flex overflow-hidden">
|
<main class="flex-1 flex flex-col overflow-hidden">
|
||||||
<div class="flex-1 overflow-y-auto bg-[#fafafa] p-8">
|
<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="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">
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content: Task Lists -->
|
||||||
<div class="lg:col-span-2 space-y-8">
|
<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 -->
|
<!-- In Progress -->
|
||||||
<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>
|
<div>
|
||||||
<p class="font-semibold">Sarah Kim</p>
|
<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>
|
||||||
<p class="text-sm text-gray-500">New Hire</p>
|
<div class="space-y-4">
|
||||||
</div>
|
<?php foreach ($tasks['in_progress'] as $task): ?>
|
||||||
</div>
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-start justify-between">
|
||||||
<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>
|
<div>
|
||||||
<p class="text-gray-500">Position</p>
|
<h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
|
||||||
<p class="font-medium">Senior Full-Stack Engineer</p>
|
<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>
|
||||||
</div>
|
<div class="text-right">
|
||||||
<div class="flex items-center gap-3">
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Complete</span>
|
||||||
<i data-lucide="mail" class="w-4 h-4 text-gray-500"></i>
|
<p class="text-sm font-medium text-gray-600 mt-2"><?= htmlspecialchars($task['assignee']) ?></p>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user