Hugging Face's logo

Spaces:
Flubbycoder
/
undefined
Running

App Files Community
Flubbycoder commited on
Commit
c708fe9
·
verified ·
1 Parent(s): c0a4924

Using this as a template, please provide a page where an adminstrator can view, manage and see history of candidates who have applied to an online ats

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. candidates.html +292 -0
  3. index.html +1124 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🏢
4
- colorFrom: green
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: pink
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
candidates.html ADDED
@@ -0,0 +1,292 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Candidate Management | HospitalityPro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
10
+ <style>
11
+ .status-screening { background-color: #93c5fd; color: #1e40af; }
12
+ .status-interview { background-color: #fcd34d; color: #92400e; }
13
+ .status-offer { background-color: #86efac; color: #065f46; }
14
+ .status-hired { background-color: #6ee7b7; color: #047857; }
15
+ .status-rejected { background-color: #fca5a5; color: #991b1b; }
16
+ .candidate-card:hover {
17
+ transform: translateY(-3px);
18
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-hospitality-light font-sans">
23
+ <div class="flex h-screen overflow-hidden">
24
+ <!-- Sidebar (same as template) -->
25
+ <div class="hidden md:flex md:flex-shrink-0">
26
+ <div class="flex flex-col w-64 bg-hospitality-dark border-r border-gray-700">
27
+ <!-- Sidebar content from template -->
28
+ </div>
29
+ </div>
30
+
31
+ <!-- Main Content -->
32
+ <div class="flex-1 overflow-auto">
33
+ <!-- Top Navigation (same as template) -->
34
+ <header class="bg-white shadow-sm">
35
+ <!-- Header content from template -->
36
+ </header>
37
+
38
+ <main class="p-6">
39
+ <!-- Candidate Management Header -->
40
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
41
+ <div>
42
+ <h1 class="text-2xl font-bold text-gray-800">Candidate Management</h1>
43
+ <p class="text-gray-600">View, filter and manage all applicants</p>
44
+ </div>
45
+ <div class="mt-4 md:mt-0">
46
+ <button class="bg-hospitality-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
47
+ <i class="fas fa-download mr-2"></i> Export Data
48
+ </button>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Filters -->
53
+ <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
54
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
55
+ <div>
56
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
57
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-hospitality-primary focus:border-hospitality-primary">
58
+ <option value="">All Statuses</option>
59
+ <option value="screening">Screening</option>
60
+ <option value="interview">Interview</option>
61
+ <option value="offer">Offer</option>
62
+ <option value="hired">Hired</option>
63
+ <option value="rejected">Rejected</option>
64
+ </select>
65
+ </div>
66
+ <div>
67
+ <label class="block text-sm font-medium text-gray-700 mb-1">Position</label>
68
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-hospitality-primary focus:border-hospitality-primary">
69
+ <option value="">All Positions</option>
70
+ <option>Front Desk Manager</option>
71
+ <option>Executive Chef</option>
72
+ <option>Housekeeping Supervisor</option>
73
+ </select>
74
+ </div>
75
+ <div>
76
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date Applied</label>
77
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-hospitality-primary focus:border-hospitality-primary">
78
+ <option value="">Any Time</option>
79
+ <option value="7">Last 7 Days</option>
80
+ <option value="30">Last 30 Days</option>
81
+ <option value="90">Last 90 Days</option>
82
+ </select>
83
+ </div>
84
+ <div class="flex items-end">
85
+ <button class="w-full bg-hospitality-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
86
+ <i class="fas fa-filter mr-2"></i> Apply Filters
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Candidate Table -->
93
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
94
+ <div class="overflow-x-auto">
95
+ <table id="candidatesTable" class="min-w-full divide-y divide-gray-200">
96
+ <thead class="bg-gray-50">
97
+ <tr>
98
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Candidate</th>
99
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
100
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
101
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Applied</th>
102
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
103
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
104
+ </tr>
105
+ </thead>
106
+ <tbody class="bg-white divide-y divide-gray-200">
107
+ <!-- Sample Data Rows -->
108
+ <tr class="hover:bg-gray-50">
109
+ <td class="px-6 py-4 whitespace-nowrap">
110
+ <div class="flex items-center">
111
+ <div class="flex-shrink-0 h-10 w-10">
112
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
113
+ </div>
114
+ <div class="ml-4">
115
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
116
+ <div class="text-sm text-gray-500">sarah@example.com</div>
117
+ </div>
118
+ </div>
119
+ </td>
120
+ <td class="px-6 py-4 whitespace-nowrap">
121
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
122
+ <div class="text-sm text-gray-500">Luxury Suites</div>
123
+ </td>
124
+ <td class="px-6 py-4 whitespace-nowrap">
125
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full status-screening">Screening</span>
126
+ </td>
127
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
128
+ Jun 12, 2023
129
+ </td>
130
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
131
+ Today, 10:30 AM
132
+ </td>
133
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
134
+ <button class="text-hospitality-primary hover:text-blue-800 mr-3">
135
+ <i class="fas fa-eye"></i>
136
+ </button>
137
+ <button class="text-gray-500 hover:text-gray-700">
138
+ <i class="fas fa-ellipsis-v"></i>
139
+ </button>
140
+ </td>
141
+ </tr>
142
+ <!-- More rows would go here -->
143
+ </tbody>
144
+ </table>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Candidate Details Modal (hidden by default) -->
149
+ <div id="candidateModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
150
+ <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">
151
+ <!-- Modal content -->
152
+ <div class="flex justify-between items-center border-b pb-4">
153
+ <h3 class="text-xl font-semibold text-gray-900">Candidate Details</h3>
154
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
155
+ <i class="fas fa-times"></i>
156
+ </button>
157
+ </div>
158
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-6">
159
+ <!-- Left Column -->
160
+ <div class="md:col-span-1">
161
+ <div class="flex flex-col items-center">
162
+ <img class="h-32 w-32 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Candidate">
163
+ <h4 class="text-lg font-semibold">Sarah Johnson</h4>
164
+ <p class="text-gray-600">Front Desk Manager Applicant</p>
165
+ <div class="mt-4 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
166
+ Screening
167
+ </div>
168
+ </div>
169
+ <div class="mt-6 space-y-4">
170
+ <div>
171
+ <h5 class="text-sm font-medium text-gray-500">Contact</h5>
172
+ <p class="mt-1 text-sm text-gray-900">sarah@example.com</p>
173
+ <p class="mt-1 text-sm text-gray-900">(555) 123-4567</p>
174
+ </div>
175
+ <div>
176
+ <h5 class="text-sm font-medium text-gray-500">Location</h5>
177
+ <p class="mt-1 text-sm text-gray-900">New York, NY</p>
178
+ </div>
179
+ <div>
180
+ <h5 class="text-sm font-medium text-gray-500">Application Date</h5>
181
+ <p class="mt-1 text-sm text-gray-900">June 12, 2023</p>
182
+ </div>
183
+ <div>
184
+ <h5 class="text-sm font-medium text-gray-500">Resume</h5>
185
+ <a href="#" class="mt-1 text-sm text-hospitality-primary hover:underline">sarah_johnson_resume.pdf</a>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Right Column -->
191
+ <div class="md:col-span-2">
192
+ <div class="bg-gray-50 p-4 rounded-lg">
193
+ <h5 class="text-lg font-medium mb-3">Application Timeline</h5>
194
+ <div class="space-y-4">
195
+ <div class="flex">
196
+ <div class="flex-shrink-0 mr-3">
197
+ <div class="h-8 w-8 rounded-full bg-hospitality-primary flex items-center justify-center text-white">
198
+ <i class="fas fa-check text-xs"></i>
199
+ </div>
200
+ </div>
201
+ <div>
202
+ <p class="text-sm font-medium">Application Submitted</p>
203
+ <p class="text-sm text-gray-500">June 12, 2023</p>
204
+ </div>
205
+ </div>
206
+ <div class="flex">
207
+ <div class="flex-shrink-0 mr-3">
208
+ <div class="h-8 w-8 rounded-full bg-hospitality-primary flex items-center justify-center text-white">
209
+ <i class="fas fa-check text-xs"></i>
210
+ </div>
211
+ </div>
212
+ <div>
213
+ <p class="text-sm font-medium">Resume Reviewed</p>
214
+ <p class="text-sm text-gray-500">June 14, 2023 by John Smith</p>
215
+ </div>
216
+ </div>
217
+ <div class="flex">
218
+ <div class="flex-shrink-0 mr-3">
219
+ <div class="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
220
+ <i class="fas fa-clock text-xs"></i>
221
+ </div>
222
+ </div>
223
+ <div>
224
+ <p class="text-sm font-medium">Phone Screening Scheduled</p>
225
+ <p class="text-sm text-gray-500">June 15, 2023 at 2:00 PM</p>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="mt-6">
232
+ <h5 class="text-lg font-medium mb-3">Notes & Comments</h5>
233
+ <div class="bg-white border rounded-lg p-4">
234
+ <div class="mb-4 pb-4 border-b">
235
+ <div class="flex justify-between items-start mb-2">
236
+ <span class="text-sm font-medium">John Smith</span>
237
+ <span class="text-xs text-gray-500">June 14, 2023</span>
238
+ </div>
239
+ <p class="text-sm text-gray-700">Strong experience in luxury hotel settings. Excellent references from previous employer. Recommended for phone screening.</p>
240
+ </div>
241
+ <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>
242
+ <button class="mt-2 bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition">
243
+ Add Note
244
+ </button>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="mt-6 flex justify-end space-x-3">
249
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
250
+ Reject
251
+ </button>
252
+ <button class="px-4 py-2 bg-hospitality-primary text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition">
253
+ Move to Next Stage
254
+ </button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </main>
261
+ </div>
262
+ </div>
263
+
264
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
265
+ <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
266
+ <script>
267
+ $(document).ready(function() {
268
+ // Initialize DataTable
269
+ $('#candidatesTable').DataTable({
270
+ responsive: true,
271
+ pageLength: 25,
272
+ order: [[3, 'desc']] // Sort by application date descending
273
+ });
274
+
275
+ // Modal toggle functionality
276
+ $('button[data-modal-toggle="candidateModal"]').click(function() {
277
+ $('#candidateModal').removeClass('hidden');
278
+ });
279
+
280
+ $('#closeModal').click(function() {
281
+ $('#candidateModal').addClass('hidden');
282
+ });
283
+
284
+ // Status filter functionality
285
+ $('.status-filter').click(function() {
286
+ const status = $(this).data('status');
287
+ $('#candidatesTable').DataTable().column(2).search(status).draw();
288
+ });
289
+ });
290
+ </script>
291
+ </body>
292
+ </html>
index.html CHANGED
@@ -1,19 +1,1124 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+
3
+ <!DOCTYPE html>
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="UTF-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Hospitality ATS Dashboard</title>
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ hospitality: {
17
+ primary: '#2a5c8d',
18
+ secondary: '#e8a735',
19
+ accent: '#3ab795',
20
+ dark: '#1a365d',
21
+ light: '#f7fafc'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .scrollbar-hide::-webkit-scrollbar {
30
+ display: none;
31
+ }
32
+
33
+ .scrollbar-hide {
34
+ -ms-overflow-style: none;
35
+ scrollbar-width: none;
36
+ }
37
+
38
+ .animated-progress {
39
+ transition: width 0.5s ease-in-out;
40
+ }
41
+
42
+ .applicant-card:hover {
43
+ transform: translateY(-5px);
44
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ @keyframes pulse {
48
+ 0%, 100% {
49
+ opacity: 1;
50
+ }
51
+ 50% {
52
+ opacity: 0.5;
53
+ }
54
+ }
55
+
56
+ .animate-pulse-slow {
57
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
58
+ }
59
+ </style>
60
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
61
+
62
+ </head>
63
+ <body class="bg-hospitality-light font-sans">
64
+ <div class="flex h-screen overflow-hidden">
65
+ <!-- Sidebar -->
66
+ <div class="hidden md:flex md:flex-shrink-0">
67
+ <div class="flex flex-col w-64 bg-hospitality-dark border-r border-gray-700">
68
+ <div class="flex items-center justify-center h-16 px-4 bg-hospitality-primary">
69
+ <div class="flex items-center">
70
+ <i class="fas fa-concierge-bell text-white text-2xl mr-2"></i>
71
+ <span class="text-white font-bold text-xl">HospitalityPro</span>
72
+ </div>
73
+ </div>
74
+ <div class="flex flex-col flex-grow px-4 py-6 overflow-y-auto">
75
+ <nav class="space-y-2">
76
+ <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">
77
+ <i class="fas fa-chart-pie mr-3"></i>
78
+ Dashboard
79
+ </a>
80
+ <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">
81
+ <i class="fas fa-user-friends mr-3"></i>
82
+ Kanban
83
+ </a>
84
+ <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">
85
+ <i class="fas fa-briefcase mr-3"></i>
86
+ Jobs
87
+ </a>
88
+ <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">
89
+ <i class="fas fa-calendar-alt mr-3"></i>
90
+ Interviews
91
+ </a>
92
+ <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">
93
+ <i class="fas fa-clipboard-check mr-3"></i>
94
+ Assessments
95
+ </a>
96
+ <a href="candidates.html" class="flex items-center px-3 py-2 text-sm font-medium text-white bg-hospitality-primary rounded-lg">
97
+ <i class="fas fa-users mr-3"></i>
98
+ Candidates
99
+ </a>
100
+ <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">
101
+ <i class="fas fa-envelope mr-3"></i>
102
+ Inbox
103
+ </a>
104
+ <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">
105
+ <i class="fas fa-chart-line mr-3"></i>
106
+ Reports
107
+ </a>
108
+ <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">
109
+ <i class="fas fa-cog mr-3"></i>
110
+ Settings
111
+ </a>
112
+ <br>
113
+ <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">
114
+ <i class="fas fa-desktop mr-3"></i>
115
+ Frontend
116
+ </a>
117
+ </nav>
118
+ <div class="mt-auto pt-6 pb-4">
119
+ <div class="flex items-center px-3 py-2 text-sm font-medium text-gray-300">
120
+ <div class="relative mr-3">
121
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
122
+ <span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-white"></span>
123
+ </div>
124
+ <div>
125
+ <p class="text-white">Sarah Johnson</p>
126
+ <p class="text-xs text-gray-400">Hiring Manager</p>
127
+ </div>
128
+ <button class="ml-auto text-gray-400 hover:text-white">
129
+ <i class="fas fa-ellipsis-v"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Main Content -->
138
+ <div class="flex-1 overflow-auto">
139
+ <!-- Top Navigation -->
140
+ <header class="bg-white shadow-sm">
141
+ <div class="px-4 py-3 flex items-center justify-between">
142
+ <div class="flex items-center md:hidden">
143
+ <button class="text-gray-500 focus:outline-none">
144
+ <i class="fas fa-bars text-xl"></i>
145
+ </button>
146
+ <span class="ml-3 font-semibold text-gray-700">HospitalityPro</span>
147
+ </div>
148
+
149
+ <div class="flex-1 max-w-xl mx-4">
150
+ <div class="relative">
151
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
152
+ <i class="fas fa-search text-gray-400"></i>
153
+ </div>
154
+ <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">
155
+ </div>
156
+ </div>
157
+
158
+ <div class="flex items-center space-x-4">
159
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
160
+ <i class="far fa-bell text-xl"></i>
161
+ </button>
162
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none md:hidden">
163
+ <i class="fas fa-user-circle text-xl"></i>
164
+ </button>
165
+ <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">
166
+ <i class="fas fa-plus mr-2"></i> New Job
167
+ </button>
168
+ </div>
169
+ </div>
170
+ </header> <!-- Interview Templates -->
171
+ <div class="bg-white p-4 rounded-lg shadow-sm mb-6 border border-gray-100">
172
+ <div class="flex items-center justify-between mb-4">
173
+ <div>
174
+ <h2 class="text-xl font-bold text-gray-800">Interview Templates</h2>
175
+ <p class="text-sm text-gray-500">Save time with reusable interview structures</p>
176
+ </div>
177
+
178
+ <!-- Wrap both buttons together -->
179
+ <div class="flex space-x-2">
180
+ <a href="manage/manage_assessments.php"
181
+ 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">
182
+ <i class="fas fa-plus mr-2"></i> Manage Assessments
183
+ </a>
184
+ <a href="manage/manage_questions.php"
185
+ 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">
186
+ <i class="fas fa-plus mr-2"></i> Manage Questions
187
+ </a>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Recent Activity & Upcoming Interviews -->
193
+ <div class="grid grid-cols-1 gap-6">
194
+ <!-- Recent Applicants -->
195
+ <div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-sm">
196
+ <div class="flex items-center justify-between mb-4">
197
+ <h2 class="text-lg font-semibold text-gray-800">Recent Applicants</h2>
198
+ <button class="text-sm text-hospitality-primary hover:underline">View All</button>
199
+ </div>
200
+ <div class="overflow-x-auto">
201
+ <table class="min-w-full divide-y divide-gray-200">
202
+ <thead class="bg-gray-50">
203
+ <tr>
204
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Candidate</th>
205
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
206
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
207
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Applied</th>
208
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
209
+ </tr>
210
+ </thead>
211
+ <tbody class="bg-white divide-y divide-gray-200">
212
+ <tr class="hover:bg-gray-50">
213
+ <td class="px-6 py-4 whitespace-nowrap">
214
+ <div class="flex items-center">
215
+ <div class="flex-shrink-0 h-10 w-10">
216
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
217
+ </div>
218
+ <div class="ml-4">
219
+ <div class="text-sm font-medium text-gray-900">Maria Rodriguez</div>
220
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
221
+ </div>
222
+ </div>
223
+ </td>
224
+ <td class="px-6 py-4 whitespace-nowrap">
225
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
226
+ <div class="text-sm text-gray-500">Luxury Suites</div>
227
+ </td>
228
+ <td class="px-6 py-4 whitespace-nowrap">
229
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
230
+ </td>
231
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
232
+ 2 hours ago
233
+ </td>
234
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
235
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
236
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
237
+ </td>
238
+ </tr>
239
+ <tr class="hover:bg-gray-50">
240
+ <td class="px-6 py-4 whitespace-nowrap">
241
+ <div class="flex items-center">
242
+ <div class="flex-shrink-0 h-10 w-10">
243
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
244
+ </div>
245
+ <div class="ml-4">
246
+ <div class="text-sm font-medium text-gray-900">James Lee</div>
247
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
248
+ </div>
249
+ </div>
250
+ </td>
251
+ <td class="px-6 py-4 whitespace-nowrap">
252
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
253
+ <div class="text-sm text-gray-500">Luxury Suites</div>
254
+ </td>
255
+ <td class="px-6 py-4 whitespace-nowrap">
256
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
257
+ </td>
258
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
259
+ 2 hours ago
260
+ </td>
261
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
262
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
263
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
264
+ </td>
265
+ </tr>
266
+ <tr class="hover:bg-gray-50">
267
+ <td class="px-6 py-4 whitespace-nowrap">
268
+ <div class="flex items-center">
269
+ <div class="flex-shrink-0 h-10 w-10">
270
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
271
+ </div>
272
+ <div class="ml-4">
273
+ <div class="text-sm font-medium text-gray-900">David Kim</div>
274
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
275
+ </div>
276
+ </div>
277
+ </td>
278
+ <td class="px-6 py-4 whitespace-nowrap">
279
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
280
+ <div class="text-sm text-gray-500">Luxury Suites</div>
281
+ </td>
282
+ <td class="px-6 py-4 whitespace-nowrap">
283
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
284
+ </td>
285
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
286
+ 2 hours ago
287
+ </td>
288
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
289
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
290
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
291
+ </td>
292
+ </tr>
293
+ <tr class="hover:bg-gray-50">
294
+ <td class="px-6 py-4 whitespace-nowrap">
295
+ <div class="flex items-center">
296
+ <div class="flex-shrink-0 h-10 w-10">
297
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
298
+ </div>
299
+ <div class="ml-4">
300
+ <div class="text-sm font-medium text-gray-900">Sophie Martin</div>
301
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
302
+ </div>
303
+ </div>
304
+ </td>
305
+ <td class="px-6 py-4 whitespace-nowrap">
306
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
307
+ <div class="text-sm text-gray-500">Luxury Suites</div>
308
+ </td>
309
+ <td class="px-6 py-4 whitespace-nowrap">
310
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
311
+ </td>
312
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
313
+ 2 hours ago
314
+ </td>
315
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
316
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
317
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
318
+ </td>
319
+ </tr>
320
+ <tr class="hover:bg-gray-50">
321
+ <td class="px-6 py-4 whitespace-nowrap">
322
+ <div class="flex items-center">
323
+ <div class="flex-shrink-0 h-10 w-10">
324
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
325
+ </div>
326
+ <div class="ml-4">
327
+ <div class="text-sm font-medium text-gray-900">Lisa Thompson</div>
328
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
329
+ </div>
330
+ </div>
331
+ </td>
332
+ <td class="px-6 py-4 whitespace-nowrap">
333
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
334
+ <div class="text-sm text-gray-500">Luxury Suites</div>
335
+ </td>
336
+ <td class="px-6 py-4 whitespace-nowrap">
337
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
338
+ </td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
340
+ 2 hours ago
341
+ </td>
342
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
343
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
344
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
345
+ </td>
346
+ </tr>
347
+ <tr class="hover:bg-gray-50">
348
+ <td class="px-6 py-4 whitespace-nowrap">
349
+ <div class="flex items-center">
350
+ <div class="flex-shrink-0 h-10 w-10">
351
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
352
+ </div>
353
+ <div class="ml-4">
354
+ <div class="text-sm font-medium text-gray-900">Michael Brown</div>
355
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
356
+ </div>
357
+ </div>
358
+ </td>
359
+ <td class="px-6 py-4 whitespace-nowrap">
360
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
361
+ <div class="text-sm text-gray-500">Luxury Suites</div>
362
+ </td>
363
+ <td class="px-6 py-4 whitespace-nowrap">
364
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
365
+ </td>
366
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
367
+ 2 hours ago
368
+ </td>
369
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
370
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
371
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
372
+ </td>
373
+ </tr>
374
+ <tr class="hover:bg-gray-50">
375
+ <td class="px-6 py-4 whitespace-nowrap">
376
+ <div class="flex items-center">
377
+ <div class="flex-shrink-0 h-10 w-10">
378
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
379
+ </div>
380
+ <div class="ml-4">
381
+ <div class="text-sm font-medium text-gray-900">Emma Wilson</div>
382
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
383
+ </div>
384
+ </div>
385
+ </td>
386
+ <td class="px-6 py-4 whitespace-nowrap">
387
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
388
+ <div class="text-sm text-gray-500">Luxury Suites</div>
389
+ </td>
390
+ <td class="px-6 py-4 whitespace-nowrap">
391
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
392
+ </td>
393
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
394
+ 2 hours ago
395
+ </td>
396
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
397
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
398
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
399
+ </td>
400
+ </tr>
401
+ <tr class="hover:bg-gray-50">
402
+ <td class="px-6 py-4 whitespace-nowrap">
403
+ <div class="flex items-center">
404
+ <div class="flex-shrink-0 h-10 w-10">
405
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
406
+ </div>
407
+ <div class="ml-4">
408
+ <div class="text-sm font-medium text-gray-900">Robert Garcia</div>
409
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
410
+ </div>
411
+ </div>
412
+ </td>
413
+ <td class="px-6 py-4 whitespace-nowrap">
414
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
415
+ <div class="text-sm text-gray-500">Luxury Suites</div>
416
+ </td>
417
+ <td class="px-6 py-4 whitespace-nowrap">
418
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
419
+ </td>
420
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
421
+ 2 hours ago
422
+ </td>
423
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
424
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
425
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
426
+ </td>
427
+ </tr>
428
+ <tr class="hover:bg-gray-50">
429
+ <td class="px-6 py-4 whitespace-nowrap">
430
+ <div class="flex items-center">
431
+ <div class="flex-shrink-0 h-10 w-10">
432
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
433
+ </div>
434
+ <div class="ml-4">
435
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
436
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
437
+ </div>
438
+ </div>
439
+ </td>
440
+ <td class="px-6 py-4 whitespace-nowrap">
441
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
442
+ <div class="text-sm text-gray-500">Luxury Suites</div>
443
+ </td>
444
+ <td class="px-6 py-4 whitespace-nowrap">
445
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
446
+ </td>
447
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
448
+ 2 hours ago
449
+ </td>
450
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
451
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
452
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
453
+ </td>
454
+ </tr>
455
+ <tr class="hover:bg-gray-50">
456
+ <td class="px-6 py-4 whitespace-nowrap">
457
+ <div class="flex items-center">
458
+ <div class="flex-shrink-0 h-10 w-10">
459
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
460
+ </div>
461
+ <div class="ml-4">
462
+ <div class="text-sm font-medium text-gray-900">Daniel Martinez</div>
463
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
464
+ </div>
465
+ </div>
466
+ </td>
467
+ <td class="px-6 py-4 whitespace-nowrap">
468
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
469
+ <div class="text-sm text-gray-500">Luxury Suites</div>
470
+ </td>
471
+ <td class="px-6 py-4 whitespace-nowrap">
472
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
473
+ </td>
474
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
475
+ 2 hours ago
476
+ </td>
477
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
478
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
479
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
480
+ </td>
481
+ </tr>
482
+ <tr class="hover:bg-gray-50">
483
+ <td class="px-6 py-4 whitespace-nowrap">
484
+ <div class="flex items-center">
485
+ <div class="flex-shrink-0 h-10 w-10">
486
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
487
+ </div>
488
+ <div class="ml-4">
489
+ <div class="text-sm font-medium text-gray-900">Test User</div>
490
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
491
+ </div>
492
+ </div>
493
+ </td>
494
+ <td class="px-6 py-4 whitespace-nowrap">
495
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
496
+ <div class="text-sm text-gray-500">Luxury Suites</div>
497
+ </td>
498
+ <td class="px-6 py-4 whitespace-nowrap">
499
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
500
+ </td>
501
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
502
+ 2 hours ago
503
+ </td>
504
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
505
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
506
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
507
+ </td>
508
+ </tr>
509
+ <tr class="hover:bg-gray-50">
510
+ <td class="px-6 py-4 whitespace-nowrap">
511
+ <div class="flex items-center">
512
+ <div class="flex-shrink-0 h-10 w-10">
513
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
514
+ </div>
515
+ <div class="ml-4">
516
+ <div class="text-sm font-medium text-gray-900">Test User</div>
517
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
518
+ </div>
519
+ </div>
520
+ </td>
521
+ <td class="px-6 py-4 whitespace-nowrap">
522
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
523
+ <div class="text-sm text-gray-500">Luxury Suites</div>
524
+ </td>
525
+ <td class="px-6 py-4 whitespace-nowrap">
526
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
527
+ </td>
528
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
529
+ 2 hours ago
530
+ </td>
531
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
532
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
533
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
534
+ </td>
535
+ </tr>
536
+ <tr class="hover:bg-gray-50">
537
+ <td class="px-6 py-4 whitespace-nowrap">
538
+ <div class="flex items-center">
539
+ <div class="flex-shrink-0 h-10 w-10">
540
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
541
+ </div>
542
+ <div class="ml-4">
543
+ <div class="text-sm font-medium text-gray-900">Test User</div>
544
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
545
+ </div>
546
+ </div>
547
+ </td>
548
+ <td class="px-6 py-4 whitespace-nowrap">
549
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
550
+ <div class="text-sm text-gray-500">Luxury Suites</div>
551
+ </td>
552
+ <td class="px-6 py-4 whitespace-nowrap">
553
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
554
+ </td>
555
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
556
+ 2 hours ago
557
+ </td>
558
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
559
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
560
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
561
+ </td>
562
+ </tr>
563
+ <tr class="hover:bg-gray-50">
564
+ <td class="px-6 py-4 whitespace-nowrap">
565
+ <div class="flex items-center">
566
+ <div class="flex-shrink-0 h-10 w-10">
567
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
568
+ </div>
569
+ <div class="ml-4">
570
+ <div class="text-sm font-medium text-gray-900">MAtt Taylor</div>
571
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
572
+ </div>
573
+ </div>
574
+ </td>
575
+ <td class="px-6 py-4 whitespace-nowrap">
576
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
577
+ <div class="text-sm text-gray-500">Luxury Suites</div>
578
+ </td>
579
+ <td class="px-6 py-4 whitespace-nowrap">
580
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
581
+ </td>
582
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
583
+ 2 hours ago
584
+ </td>
585
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
586
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
587
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
588
+ </td>
589
+ </tr>
590
+ <tr class="hover:bg-gray-50">
591
+ <td class="px-6 py-4 whitespace-nowrap">
592
+ <div class="flex items-center">
593
+ <div class="flex-shrink-0 h-10 w-10">
594
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
595
+ </div>
596
+ <div class="ml-4">
597
+ <div class="text-sm font-medium text-gray-900">MAtt Taylor</div>
598
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
599
+ </div>
600
+ </div>
601
+ </td>
602
+ <td class="px-6 py-4 whitespace-nowrap">
603
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
604
+ <div class="text-sm text-gray-500">Luxury Suites</div>
605
+ </td>
606
+ <td class="px-6 py-4 whitespace-nowrap">
607
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
608
+ </td>
609
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
610
+ 2 hours ago
611
+ </td>
612
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
613
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
614
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
615
+ </td>
616
+ </tr>
617
+ <tr class="hover:bg-gray-50">
618
+ <td class="px-6 py-4 whitespace-nowrap">
619
+ <div class="flex items-center">
620
+ <div class="flex-shrink-0 h-10 w-10">
621
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
622
+ </div>
623
+ <div class="ml-4">
624
+ <div class="text-sm font-medium text-gray-900">Dick hole</div>
625
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
626
+ </div>
627
+ </div>
628
+ </td>
629
+ <td class="px-6 py-4 whitespace-nowrap">
630
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
631
+ <div class="text-sm text-gray-500">Luxury Suites</div>
632
+ </td>
633
+ <td class="px-6 py-4 whitespace-nowrap">
634
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
635
+ </td>
636
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
637
+ 2 hours ago
638
+ </td>
639
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
640
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
641
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
642
+ </td>
643
+ </tr>
644
+ <tr class="hover:bg-gray-50">
645
+ <td class="px-6 py-4 whitespace-nowrap">
646
+ <div class="flex items-center">
647
+ <div class="flex-shrink-0 h-10 w-10">
648
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
649
+ </div>
650
+ <div class="ml-4">
651
+ <div class="text-sm font-medium text-gray-900">Dick hole</div>
652
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
653
+ </div>
654
+ </div>
655
+ </td>
656
+ <td class="px-6 py-4 whitespace-nowrap">
657
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
658
+ <div class="text-sm text-gray-500">Luxury Suites</div>
659
+ </td>
660
+ <td class="px-6 py-4 whitespace-nowrap">
661
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
662
+ </td>
663
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
664
+ 2 hours ago
665
+ </td>
666
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
667
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
668
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
669
+ </td>
670
+ </tr>
671
+ <tr class="hover:bg-gray-50">
672
+ <td class="px-6 py-4 whitespace-nowrap">
673
+ <div class="flex items-center">
674
+ <div class="flex-shrink-0 h-10 w-10">
675
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
676
+ </div>
677
+ <div class="ml-4">
678
+ <div class="text-sm font-medium text-gray-900">Dick hole</div>
679
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
680
+ </div>
681
+ </div>
682
+ </td>
683
+ <td class="px-6 py-4 whitespace-nowrap">
684
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
685
+ <div class="text-sm text-gray-500">Luxury Suites</div>
686
+ </td>
687
+ <td class="px-6 py-4 whitespace-nowrap">
688
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
689
+ </td>
690
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
691
+ 2 hours ago
692
+ </td>
693
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
694
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
695
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
696
+ </td>
697
+ </tr>
698
+ <tr class="hover:bg-gray-50">
699
+ <td class="px-6 py-4 whitespace-nowrap">
700
+ <div class="flex items-center">
701
+ <div class="flex-shrink-0 h-10 w-10">
702
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
703
+ </div>
704
+ <div class="ml-4">
705
+ <div class="text-sm font-medium text-gray-900">asdfsafd safdsadfsaf</div>
706
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
707
+ </div>
708
+ </div>
709
+ </td>
710
+ <td class="px-6 py-4 whitespace-nowrap">
711
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
712
+ <div class="text-sm text-gray-500">Luxury Suites</div>
713
+ </td>
714
+ <td class="px-6 py-4 whitespace-nowrap">
715
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
716
+ </td>
717
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
718
+ 2 hours ago
719
+ </td>
720
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
721
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
722
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
723
+ </td>
724
+ </tr>
725
+ <tr class="hover:bg-gray-50">
726
+ <td class="px-6 py-4 whitespace-nowrap">
727
+ <div class="flex items-center">
728
+ <div class="flex-shrink-0 h-10 w-10">
729
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
730
+ </div>
731
+ <div class="ml-4">
732
+ <div class="text-sm font-medium text-gray-900">agsg sadgagsa</div>
733
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
734
+ </div>
735
+ </div>
736
+ </td>
737
+ <td class="px-6 py-4 whitespace-nowrap">
738
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
739
+ <div class="text-sm text-gray-500">Luxury Suites</div>
740
+ </td>
741
+ <td class="px-6 py-4 whitespace-nowrap">
742
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
743
+ </td>
744
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
745
+ 2 hours ago
746
+ </td>
747
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
748
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
749
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
750
+ </td>
751
+ </tr>
752
+ <tr class="hover:bg-gray-50">
753
+ <td class="px-6 py-4 whitespace-nowrap">
754
+ <div class="flex items-center">
755
+ <div class="flex-shrink-0 h-10 w-10">
756
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
757
+ </div>
758
+ <div class="ml-4">
759
+ <div class="text-sm font-medium text-gray-900">Penelope Cheeseface</div>
760
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
761
+ </div>
762
+ </div>
763
+ </td>
764
+ <td class="px-6 py-4 whitespace-nowrap">
765
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
766
+ <div class="text-sm text-gray-500">Luxury Suites</div>
767
+ </td>
768
+ <td class="px-6 py-4 whitespace-nowrap">
769
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
770
+ </td>
771
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
772
+ 2 hours ago
773
+ </td>
774
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
775
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
776
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
777
+ </td>
778
+ </tr>
779
+ <tr class="hover:bg-gray-50">
780
+ <td class="px-6 py-4 whitespace-nowrap">
781
+ <div class="flex items-center">
782
+ <div class="flex-shrink-0 h-10 w-10">
783
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
784
+ </div>
785
+ <div class="ml-4">
786
+ <div class="text-sm font-medium text-gray-900">This is a real one Yup</div>
787
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
788
+ </div>
789
+ </div>
790
+ </td>
791
+ <td class="px-6 py-4 whitespace-nowrap">
792
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
793
+ <div class="text-sm text-gray-500">Luxury Suites</div>
794
+ </td>
795
+ <td class="px-6 py-4 whitespace-nowrap">
796
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
797
+ </td>
798
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
799
+ 2 hours ago
800
+ </td>
801
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
802
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
803
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
804
+ </td>
805
+ </tr>
806
+ <tr class="hover:bg-gray-50">
807
+ <td class="px-6 py-4 whitespace-nowrap">
808
+ <div class="flex items-center">
809
+ <div class="flex-shrink-0 h-10 w-10">
810
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
811
+ </div>
812
+ <div class="ml-4">
813
+ <div class="text-sm font-medium text-gray-900">sdfsafdsafsa fdsafsafd</div>
814
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
815
+ </div>
816
+ </div>
817
+ </td>
818
+ <td class="px-6 py-4 whitespace-nowrap">
819
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
820
+ <div class="text-sm text-gray-500">Luxury Suites</div>
821
+ </td>
822
+ <td class="px-6 py-4 whitespace-nowrap">
823
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
824
+ </td>
825
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
826
+ 2 hours ago
827
+ </td>
828
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
829
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
830
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
831
+ </td>
832
+ </tr>
833
+ <tr class="hover:bg-gray-50">
834
+ <td class="px-6 py-4 whitespace-nowrap">
835
+ <div class="flex items-center">
836
+ <div class="flex-shrink-0 h-10 w-10">
837
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
838
+ </div>
839
+ <div class="ml-4">
840
+ <div class="text-sm font-medium text-gray-900">daba adbasbasb</div>
841
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
842
+ </div>
843
+ </div>
844
+ </td>
845
+ <td class="px-6 py-4 whitespace-nowrap">
846
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
847
+ <div class="text-sm text-gray-500">Luxury Suites</div>
848
+ </td>
849
+ <td class="px-6 py-4 whitespace-nowrap">
850
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
851
+ </td>
852
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
853
+ 2 hours ago
854
+ </td>
855
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
856
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
857
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
858
+ </td>
859
+ </tr>
860
+ <tr class="hover:bg-gray-50">
861
+ <td class="px-6 py-4 whitespace-nowrap">
862
+ <div class="flex items-center">
863
+ <div class="flex-shrink-0 h-10 w-10">
864
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
865
+ </div>
866
+ <div class="ml-4">
867
+ <div class="text-sm font-medium text-gray-900">Barry Bypass</div>
868
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
869
+ </div>
870
+ </div>
871
+ </td>
872
+ <td class="px-6 py-4 whitespace-nowrap">
873
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
874
+ <div class="text-sm text-gray-500">Luxury Suites</div>
875
+ </td>
876
+ <td class="px-6 py-4 whitespace-nowrap">
877
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
878
+ </td>
879
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
880
+ 2 hours ago
881
+ </td>
882
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
883
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
884
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
885
+ </td>
886
+ </tr>
887
+ <tr class="hover:bg-gray-50">
888
+ <td class="px-6 py-4 whitespace-nowrap">
889
+ <div class="flex items-center">
890
+ <div class="flex-shrink-0 h-10 w-10">
891
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
892
+ </div>
893
+ <div class="ml-4">
894
+ <div class="text-sm font-medium text-gray-900">Blasting Past your checks</div>
895
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
896
+ </div>
897
+ </div>
898
+ </td>
899
+ <td class="px-6 py-4 whitespace-nowrap">
900
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
901
+ <div class="text-sm text-gray-500">Luxury Suites</div>
902
+ </td>
903
+ <td class="px-6 py-4 whitespace-nowrap">
904
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
905
+ </td>
906
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
907
+ 2 hours ago
908
+ </td>
909
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
910
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
911
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
912
+ </td>
913
+ </tr>
914
+ <tr class="hover:bg-gray-50">
915
+ <td class="px-6 py-4 whitespace-nowrap">
916
+ <div class="flex items-center">
917
+ <div class="flex-shrink-0 h-10 w-10">
918
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
919
+ </div>
920
+ <div class="ml-4">
921
+ <div class="text-sm font-medium text-gray-900">Mat sdfs</div>
922
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
923
+ </div>
924
+ </div>
925
+ </td>
926
+ <td class="px-6 py-4 whitespace-nowrap">
927
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
928
+ <div class="text-sm text-gray-500">Luxury Suites</div>
929
+ </td>
930
+ <td class="px-6 py-4 whitespace-nowrap">
931
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
932
+ </td>
933
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
934
+ 2 hours ago
935
+ </td>
936
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
937
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
938
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
939
+ </td>
940
+ </tr>
941
+ <tr class="hover:bg-gray-50">
942
+ <td class="px-6 py-4 whitespace-nowrap">
943
+ <div class="flex items-center">
944
+ <div class="flex-shrink-0 h-10 w-10">
945
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
946
+ </div>
947
+ <div class="ml-4">
948
+ <div class="text-sm font-medium text-gray-900">Matt Taylor</div>
949
+ <div class="text-sm text-gray-500">Front Desk Associate</div>
950
+ </div>
951
+ </div>
952
+ </td>
953
+ <td class="px-6 py-4 whitespace-nowrap">
954
+ <div class="text-sm text-gray-900">Front Desk Manager</div>
955
+ <div class="text-sm text-gray-500">Luxury Suites</div>
956
+ </td>
957
+ <td class="px-6 py-4 whitespace-nowrap">
958
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Screening</span>
959
+ </td>
960
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
961
+ 2 hours ago
962
+ </td>
963
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
964
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
965
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
966
+ </td>
967
+ </tr>
968
+ <tr class="hover:bg-gray-50">
969
+ <td class="px-6 py-4 whitespace-nowrap">
970
+ <div class="flex items-center">
971
+ <div class="flex-shrink-0 h-10 w-10">
972
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="">
973
+ </div>
974
+ <div class="ml-4">
975
+ <div class="text-sm font-medium text-gray-900">James Wilson</div>
976
+ <div class="text-sm text-gray-500">Sous Chef</div>
977
+ </div>
978
+ </div>
979
+ </td>
980
+ <td class="px-6 py-4 whitespace-nowrap">
981
+ <div class="text-sm text-gray-900">Executive Chef</div>
982
+ <div class="text-sm text-gray-500">Gourmet Restaurant</div>
983
+ </td>
984
+ <td class="px-6 py-4 whitespace-nowrap">
985
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Assessment</span>
986
+ </td>
987
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
988
+ 1 day ago
989
+ </td>
990
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
991
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
992
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
993
+ </td>
994
+ </tr>
995
+
996
+ <tr class="hover:bg-gray-50">
997
+ <td class="px-6 py-4 whitespace-nowrap">
998
+ <div class="flex items-center">
999
+ <div class="flex-shrink-0 h-10 w-10">
1000
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="">
1001
+ </div>
1002
+ <div class="ml-4">
1003
+ <div class="text-sm font-medium text-gray-900">Sophie Martin</div>
1004
+ <div class="text-sm text-gray-500">Events Coordinator</div>
1005
+ </div>
1006
+ </div>
1007
+ </td>
1008
+ <td class="px-6 py-4 whitespace-nowrap">
1009
+ <div class="text-sm text-gray-900">Banquet Manager</div>
1010
+ <div class="text-sm text-gray-500">Grand Plaza Hotel</div>
1011
+ </td>
1012
+ <td class="px-6 py-4 whitespace-nowrap">
1013
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Interview</span>
1014
+ </td>
1015
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1016
+ 2 days ago
1017
+ </td>
1018
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1019
+ <button class="text-hospitality-primary hover:text-hospitality-dark mr-3"><i class="fas fa-phone-alt"></i></button>
1020
+ <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-ellipsis-v"></i></button>
1021
+ </td>
1022
+ </tr>
1023
+ </tbody>
1024
+ </table>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+ </main>
1029
+ </div>
1030
+ </div>
1031
+
1032
+
1033
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1034
+ <script>
1035
+ // Pipeline Chart
1036
+ const pipelineCtx = document.getElementById('pipelineChart').getContext('2d');
1037
+ const pipelineChart = new Chart(pipelineCtx, {
1038
+ type: 'bar',
1039
+ data: {
1040
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
1041
+ datasets: [
1042
+ {
1043
+ label: 'Applied',
1044
+ data: [120, 190, 170, 220, 180, 250],
1045
+ backgroundColor: '#3b82f6',
1046
+ },
1047
+ {
1048
+ label: 'Screened',
1049
+ data: [90, 150, 130, 180, 150, 200],
1050
+ backgroundColor: '#8b5cf6',
1051
+ },
1052
+ {
1053
+ label: 'Interview',
1054
+ data: [60, 100, 80, 140, 110, 150],
1055
+ backgroundColor: '#f59e0b',
1056
+ },
1057
+ {
1058
+ label: 'Offer',
1059
+ data: [20, 50, 40, 70, 60, 90],
1060
+ backgroundColor: '#10b981',
1061
+ },
1062
+ {
1063
+ label: 'Hired',
1064
+ data: [15, 35, 30, 50, 45, 65],
1065
+ backgroundColor: '#3ab795',
1066
+ }
1067
+ ]
1068
+ },
1069
+ options: {
1070
+ responsive: true,
1071
+ maintainAspectRatio: false,
1072
+ scales: {
1073
+ x: {
1074
+ stacked: true,
1075
+ grid: {
1076
+ display: false
1077
+ }
1078
+ },
1079
+ y: {
1080
+ stacked: true,
1081
+ beginAtZero: true,
1082
+ ticks: {
1083
+ stepSize: 50
1084
+ }
1085
+ }
1086
+ },
1087
+ plugins: {
1088
+ legend: {
1089
+ position: 'top',
1090
+ labels: {
1091
+ boxWidth: 12
1092
+ }
1093
+ }
1094
+ }
1095
+ }
1096
+ });
1097
+
1098
+ // Mobile menu toggle
1099
+ document.addEventListener('DOMContentLoaded', function() {
1100
+ const mobileMenuButton = document.querySelector('.md\\:hidden button');
1101
+ const sidebar = document.querySelector('.hidden.md\\:flex');
1102
+
1103
+ mobileMenuButton.addEventListener('click', function() {
1104
+ sidebar.classList.toggle('hidden');
1105
+ sidebar.classList.toggle('absolute');
1106
+ sidebar.classList.toggle('z-50');
1107
+ sidebar.style.width = '16rem';
1108
+ });
1109
+
1110
+ // Simulate loading for upcoming interviews
1111
+ const tentativeInterview = document.querySelector('.border-l-4.border-gray-300');
1112
+ setTimeout(() => {
1113
+ tentativeInterview.classList.remove('opacity-70');
1114
+ tentativeInterview.classList.add('border-hospitality-accent');
1115
+
1116
+ const statusBadge = tentativeInterview.querySelector('.bg-gray-100');
1117
+ statusBadge.classList.remove('bg-gray-100', 'text-gray-800');
1118
+ statusBadge.classList.add('bg-green-100', 'text-green-800');
1119
+ statusBadge.textContent = 'Confirmed';
1120
+ }, 3000);
1121
+ });
1122
+ </script>
1123
+ </body>
1124
+ </html>