Spaces:
Running
Running
Using this as a template, please provide a page where the user can view a candidate and their application history and other metrics needed for an ats
488b51f
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Candidate Management | HospitalityPro</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"> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css"> | |
| <style> | |
| .status-screening { background-color: #93c5fd; color: #1e40af; } | |
| .status-interview { background-color: #fcd34d; color: #92400e; } | |
| .status-offer { background-color: #86efac; color: #065f46; } | |
| .status-hired { background-color: #6ee7b7; color: #047857; } | |
| .status-rejected { background-color: #fca5a5; color: #991b1b; } | |
| .candidate-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-hospitality-light font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar (same as template) --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-hospitality-dark border-r border-gray-700"> | |
| <!-- Sidebar content from template --> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top Navigation (same as template) --> | |
| <header class="bg-white shadow-sm"> | |
| <!-- Header content from template --> | |
| </header> | |
| <main class="p-6"> | |
| <!-- Candidate Management Header --> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Candidate Management</h1> | |
| <p class="text-gray-600">View, filter and manage all applicants</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="bg-hospitality-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-download mr-2"></i> Export Data | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Filters --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-hospitality-primary focus:border-hospitality-primary"> | |
| <option value="">All Statuses</option> | |
| <option value="screening">Screening</option> | |
| <option value="interview">Interview</option> | |
| <option value="offer">Offer</option> | |
| <option value="hired">Hired</option> | |
| <option value="rejected">Rejected</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Position</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-hospitality-primary focus:border-hospitality-primary"> | |
| <option value="">All Positions</option> | |
| <option>Front Desk Manager</option> | |
| <option>Executive Chef</option> | |
| <option>Housekeeping Supervisor</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Date Applied</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-hospitality-primary focus:border-hospitality-primary"> | |
| <option value="">Any Time</option> | |
| <option value="7">Last 7 Days</option> | |
| <option value="30">Last 30 Days</option> | |
| <option value="90">Last 90 Days</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full bg-hospitality-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-filter mr-2"></i> Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Candidate Table --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table id="candidatesTable" 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">Last Activity</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"> | |
| <!-- Sample Data Rows --> | |
| <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/44.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">sarah@example.com</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 status-screening">Screening</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Jun 12, 2023 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Today, 10:30 AM | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="candidate_profile.html" class="text-hospitality-primary hover:text-blue-800 mr-3"> | |
| <i class="fas fa-eye"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- More rows would go here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Candidate Details Modal (hidden by default) --> | |
| <div id="candidateModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"> | |
| <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-md bg-white"> | |
| <!-- Modal content --> | |
| <div class="flex justify-between items-center border-b pb-4"> | |
| <h3 class="text-xl font-semibold text-gray-900">Candidate Details</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="md:col-span-1"> | |
| <div class="flex flex-col items-center"> | |
| <img class="h-32 w-32 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Candidate"> | |
| <h4 class="text-lg font-semibold">Sarah Johnson</h4> | |
| <p class="text-gray-600">Front Desk Manager Applicant</p> | |
| <div class="mt-4 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"> | |
| Screening | |
| </div> | |
| </div> | |
| <div class="mt-6 space-y-4"> | |
| <div> | |
| <h5 class="text-sm font-medium text-gray-500">Contact</h5> | |
| <p class="mt-1 text-sm text-gray-900">sarah@example.com</p> | |
| <p class="mt-1 text-sm text-gray-900">(555) 123-4567</p> | |
| </div> | |
| <div> | |
| <h5 class="text-sm font-medium text-gray-500">Location</h5> | |
| <p class="mt-1 text-sm text-gray-900">New York, NY</p> | |
| </div> | |
| <div> | |
| <h5 class="text-sm font-medium text-gray-500">Application Date</h5> | |
| <p class="mt-1 text-sm text-gray-900">June 12, 2023</p> | |
| </div> | |
| <div> | |
| <h5 class="text-sm font-medium text-gray-500">Resume</h5> | |
| <a href="#" class="mt-1 text-sm text-hospitality-primary hover:underline">sarah_johnson_resume.pdf</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="md:col-span-2"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h5 class="text-lg font-medium mb-3">Application Timeline</h5> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-hospitality-primary flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Application Submitted</p> | |
| <p class="text-sm text-gray-500">June 12, 2023</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-hospitality-primary flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Resume Reviewed</p> | |
| <p class="text-sm text-gray-500">June 14, 2023 by John Smith</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center text-white"> | |
| <i class="fas fa-clock text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Phone Screening Scheduled</p> | |
| <p class="text-sm text-gray-500">June 15, 2023 at 2:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h5 class="text-lg font-medium mb-3">Notes & Comments</h5> | |
| <div class="bg-white border rounded-lg p-4"> | |
| <div class="mb-4 pb-4 border-b"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-medium">John Smith</span> | |
| <span class="text-xs text-gray-500">June 14, 2023</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Strong experience in luxury hotel settings. Excellent references from previous employer. Recommended for phone screening.</p> | |
| </div> | |
| <textarea class="w-full border rounded-lg p-3 text-sm focus:ring-hospitality-primary focus:border-hospitality-primary" placeholder="Add a new note..."></textarea> | |
| <button class="mt-2 bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition"> | |
| Add Note | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition"> | |
| Reject | |
| </button> | |
| <button class="px-4 py-2 bg-hospitality-primary text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition"> | |
| Move to Next Stage | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| // Initialize DataTable | |
| $('#candidatesTable').DataTable({ | |
| responsive: true, | |
| pageLength: 25, | |
| order: [[3, 'desc']] // Sort by application date descending | |
| }); | |
| // Modal toggle functionality | |
| $('button[data-modal-toggle="candidateModal"]').click(function() { | |
| $('#candidateModal').removeClass('hidden'); | |
| }); | |
| $('#closeModal').click(function() { | |
| $('#candidateModal').addClass('hidden'); | |
| }); | |
| // Status filter functionality | |
| $('.status-filter').click(function() { | |
| const status = $(this).data('status'); | |
| $('#candidatesTable').DataTable().column(2).search(status).draw(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |