undefined / index.html
Flubbycoder's picture
Using this as a template, please give me a page to see candidates
ef1c511 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospitality ATS Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
hospitality: {
primary: '#2a5c8d',
secondary: '#e8a735',
accent: '#3ab795',
dark: '#1a365d',
light: '#f7fafc'
}
}
}
}
}
</script>
<style>
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.animated-progress {
transition: width 0.5s ease-in-out;
}
.applicant-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
</head>
<body class="bg-hospitality-light font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 bg-hospitality-dark border-r border-gray-700">
<div class="flex items-center justify-center h-16 px-4 bg-hospitality-primary">
<div class="flex items-center">
<i class="fas fa-concierge-bell text-white text-2xl mr-2"></i>
<span class="text-white font-bold text-xl">HospitalityPro</span>
</div>
</div>
<div class="flex flex-col flex-grow px-4 py-6 overflow-y-auto">
<nav class="space-y-2">
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/index.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-chart-pie mr-3"></i>
Dashboard
</a>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/manage_applications.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-user-friends mr-3"></i>
Kanban
</a>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/manage/manage_job_adverts.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-briefcase mr-3"></i>
Jobs
</a>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/interviews.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-calendar-alt mr-3"></i>
Interviews
</a>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/assessments.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-clipboard-check mr-3"></i>
Assessments
</a>
<a href="candidates_list.html" class="flex items-center px-3 py-2 text-sm font-medium text-white bg-hospitality-primary rounded-lg">
<i class="fas fa-users mr-3"></i>
Candidates
</a>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/inbox.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-envelope mr-3"></i>
Inbox
</a>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/reports.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-chart-line mr-3"></i>
Reports
</a>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/manage/settings.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
<i class="fas fa-cog mr-3"></i>
Settings
</a>
<br>
<a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/frontend/index.php" class="flex items-center px-3 py-2 text-sm font-medium text-white rounded-lg">
<i class="fas fa-desktop mr-3"></i>
Frontend
</a>
</nav>
<div class="mt-auto pt-6 pb-4">
<div class="flex items-center px-3 py-2 text-sm font-medium text-gray-300">
<div class="relative mr-3">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
<span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-white"></span>
</div>
<div>
<p class="text-white">Sarah Johnson</p>
<p class="text-xs text-gray-400">Hiring Manager</p>
</div>
<button class="ml-auto text-gray-400 hover:text-white">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="px-4 py-3 flex items-center justify-between">
<div class="flex items-center md:hidden">
<button class="text-gray-500 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
<span class="ml-3 font-semibold text-gray-700">HospitalityPro</span>
</div>
<div class="flex-1 max-w-xl mx-4">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
<input class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:ring-hospitality-primary focus:border-hospitality-primary" placeholder="Search candidates, jobs..." type="text">
</div>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="far fa-bell text-xl"></i>
</button>
<button class="text-gray-500 hover:text-gray-700 focus:outline-none md:hidden">
<i class="fas fa-user-circle text-xl"></i>
</button>
<button class="hidden md:block bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 focus:outline-none">
<i class="fas fa-plus mr-2"></i> New Job
</button>
</div>
</div>
</header> <!-- Interview Templates -->
<div class="bg-white p-4 rounded-lg shadow-sm mb-6 border border-gray-100">
<div class="flex items-center justify-between mb-4">
<div>
<h2 class="text-xl font-bold text-gray-800">Interview Templates</h2>
<p class="text-sm text-gray-500">Save time with reusable interview structures</p>
</div>
<!-- Wrap both buttons together -->
<div class="flex space-x-2">
<a href="manage/manage_assessments.php"
class="flex items-center bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 focus:outline-none">
<i class="fas fa-plus mr-2"></i> Manage Assessments
</a>
<a href="manage/manage_questions.php"
class="flex items-center bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 focus:outline-none">
<i class="fas fa-plus mr-2"></i> Manage Questions
</a>
</div>
</div>
</div>
<!-- Recent Activity & Upcoming Interviews -->
<div class="grid grid-cols-1 gap-6">
<!-- Recent Applicants -->
<div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-sm">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800">Recent Applicants</h2>
<button class="text-sm text-hospitality-primary hover:underline">View All</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Candidate</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Applied</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Maria Rodriguez</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">James Lee</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">David Kim</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Sophie Martin</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Lisa Thompson</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Michael Brown</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Emma Wilson</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Robert Garcia</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Daniel Martinez</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Test User</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Test User</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Test User</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">MAtt Taylor</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">MAtt Taylor</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Dick hole</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Dick hole</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Dick hole</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">asdfsafd safdsadfsaf</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">agsg sadgagsa</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Penelope Cheeseface</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">This is a real one Yup</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">sdfsafdsafsa fdsafsafd</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">daba adbasbasb</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Barry Bypass</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Blasting Past your checks</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Mat sdfs</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Matt Taylor</div>
<div class="text-sm text-gray-500">Front Desk Associate</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Front Desk Manager</div>
<div class="text-sm text-gray-500">Luxury Suites</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">James Wilson</div>
<div class="text-sm text-gray-500">Sous Chef</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Executive Chef</div>
<div class="text-sm text-gray-500">Gourmet Restaurant</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Assessment</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1 day ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Sophie Martin</div>
<div class="text-sm text-gray-500">Events Coordinator</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Banquet Manager</div>
<div class="text-sm text-gray-500">Grand Plaza Hotel</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Interview</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 days ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Pipeline Chart
const pipelineCtx = document.getElementById('pipelineChart').getContext('2d');
const pipelineChart = new Chart(pipelineCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'Applied',
data: [120, 190, 170, 220, 180, 250],
backgroundColor: '#3b82f6',
},
{
label: 'Screened',
data: [90, 150, 130, 180, 150, 200],
backgroundColor: '#8b5cf6',
},
{
label: 'Interview',
data: [60, 100, 80, 140, 110, 150],
backgroundColor: '#f59e0b',
},
{
label: 'Offer',
data: [20, 50, 40, 70, 60, 90],
backgroundColor: '#10b981',
},
{
label: 'Hired',
data: [15, 35, 30, 50, 45, 65],
backgroundColor: '#3ab795',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
grid: {
display: false
}
},
y: {
stacked: true,
beginAtZero: true,
ticks: {
stepSize: 50
}
}
},
plugins: {
legend: {
position: 'top',
labels: {
boxWidth: 12
}
}
}
}
});
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.md\\:hidden button');
const sidebar = document.querySelector('.hidden.md\\:flex');
mobileMenuButton.addEventListener('click', function() {
sidebar.classList.toggle('hidden');
sidebar.classList.toggle('absolute');
sidebar.classList.toggle('z-50');
sidebar.style.width = '16rem';
});
// Simulate loading for upcoming interviews
const tentativeInterview = document.querySelector('.border-l-4.border-gray-300');
setTimeout(() => {
tentativeInterview.classList.remove('opacity-70');
tentativeInterview.classList.add('border-hospitality-accent');
const statusBadge = tentativeInterview.querySelector('.bg-gray-100');
statusBadge.classList.remove('bg-gray-100', 'text-gray-800');
statusBadge.classList.add('bg-green-100', 'text-green-800');
statusBadge.textContent = 'Confirmed';
}, 3000);
});
</script>
</body>
</html>