Hugging Face's logo

Spaces:
SamABFlow
/
policy-management
Running

App Files Community
SamABFlow commited on
Commit
01e5e24
·
verified ·
1 Parent(s): f9b7487

Policy management software of AffableBPM - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +623 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Policy Management
3
- emoji: 📈
4
- colorFrom: green
5
- colorTo: blue
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: policy-management
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,623 @@
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
+ <!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>AffableBPM - Policy Management</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
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar.collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar.collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .policy-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
22
+ }
23
+ .progress-ring__circle {
24
+ transition: stroke-dashoffset 0.35s;
25
+ transform: rotate(-90deg);
26
+ transform-origin: 50% 50%;
27
+ }
28
+ #chart-container {
29
+ height: 300px;
30
+ }
31
+ @media (max-width: 768px) {
32
+ .sidebar {
33
+ position: absolute;
34
+ z-index: 100;
35
+ left: -250px;
36
+ }
37
+ .sidebar.open {
38
+ left: 0;
39
+ }
40
+ .main-content {
41
+ margin-left: 0 !important;
42
+ }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50 font-sans">
47
+ <div class="flex h-screen overflow-hidden">
48
+ <!-- Sidebar -->
49
+ <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col">
50
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700">
51
+ <div class="flex items-center">
52
+ <i class="fas fa-shield-alt text-2xl mr-3"></i>
53
+ <span class="sidebar-text text-xl font-bold">AffableBPM</span>
54
+ </div>
55
+ <button id="toggle-sidebar" class="text-white focus:outline-none">
56
+ <i class="fas fa-bars"></i>
57
+ </button>
58
+ </div>
59
+
60
+ <div class="p-4 flex items-center bg-indigo-900">
61
+ <div class="relative w-10 h-10 rounded-full bg-indigo-200 flex items-center justify-center">
62
+ <span class="text-indigo-800 font-bold">AD</span>
63
+ </div>
64
+ <div class="ml-3 sidebar-text">
65
+ <div class="font-medium">Admin User</div>
66
+ <div class="text-xs text-indigo-300">Administrator</div>
67
+ </div>
68
+ </div>
69
+
70
+ <nav class="flex-1 overflow-y-auto">
71
+ <div class="p-2">
72
+ <div class="text-xs uppercase text-indigo-400 px-4 py-2 sidebar-text">Main Menu</div>
73
+ <a href="#" class="block px-4 py-3 text-white bg-indigo-700 rounded-lg mx-2 mb-1">
74
+ <i class="fas fa-tachometer-alt mr-3"></i>
75
+ <span class="sidebar-text">Dashboard</span>
76
+ </a>
77
+ <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1">
78
+ <i class="fas fa-file-contract mr-3"></i>
79
+ <span class="sidebar-text">Policies</span>
80
+ </a>
81
+ <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1">
82
+ <i class="fas fa-users mr-3"></i>
83
+ <span class="sidebar-text">Users</span>
84
+ </a>
85
+ <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1">
86
+ <i class="fas fa-tasks mr-3"></i>
87
+ <span class="sidebar-text">Workflows</span>
88
+ </a>
89
+ <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1">
90
+ <i class="fas fa-chart-bar mr-3"></i>
91
+ <span class="sidebar-text">Reports</span>
92
+ </a>
93
+ </div>
94
+
95
+ <div class="p-2 mt-4">
96
+ <div class="text-xs uppercase text-indigo-400 px-4 py-2 sidebar-text">Settings</div>
97
+ <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1">
98
+ <i class="fas fa-cog mr-3"></i>
99
+ <span class="sidebar-text">Settings</span>
100
+ </a>
101
+ <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1">
102
+ <i class="fas fa-question-circle mr-3"></i>
103
+ <span class="sidebar-text">Help</span>
104
+ </a>
105
+ </div>
106
+ </nav>
107
+
108
+ <div class="p-4 border-t border-indigo-700">
109
+ <a href="#" class="flex items-center text-white hover:text-indigo-200">
110
+ <i class="fas fa-sign-out-alt mr-3"></i>
111
+ <span class="sidebar-text">Logout</span>
112
+ </a>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Main Content -->
117
+ <div class="main-content flex-1 overflow-y-auto ml-64 transition-all duration-300">
118
+ <!-- Mobile Header -->
119
+ <div class="md:hidden bg-white shadow p-4 flex items-center justify-between">
120
+ <button id="mobile-menu-button" class="text-gray-600 focus:outline-none">
121
+ <i class="fas fa-bars text-xl"></i>
122
+ </button>
123
+ <div class="text-xl font-bold text-indigo-800">AffableBPM</div>
124
+ <div class="w-8"></div>
125
+ </div>
126
+
127
+ <!-- Header -->
128
+ <header class="bg-white shadow p-4 hidden md:block">
129
+ <div class="flex items-center justify-between">
130
+ <h1 class="text-2xl font-bold text-gray-800">Policy Management</h1>
131
+ <div class="flex items-center space-x-4">
132
+ <div class="relative">
133
+ <input type="text" placeholder="Search policies..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
134
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
135
+ </div>
136
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center">
137
+ <i class="fas fa-plus mr-2"></i>
138
+ <span>New Policy</span>
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </header>
143
+
144
+ <!-- Content -->
145
+ <main class="p-4">
146
+ <!-- Stats Cards -->
147
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
148
+ <div class="bg-white rounded-lg shadow p-6">
149
+ <div class="flex items-center justify-between">
150
+ <div>
151
+ <p class="text-gray-500">Total Policies</p>
152
+ <h3 class="text-2xl font-bold text-gray-800">142</h3>
153
+ </div>
154
+ <div class="bg-indigo-100 p-3 rounded-full">
155
+ <i class="fas fa-file-contract text-indigo-600 text-xl"></i>
156
+ </div>
157
+ </div>
158
+ <div class="mt-2">
159
+ <span class="text-green-500 text-sm font-medium">+12% from last month</span>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="bg-white rounded-lg shadow p-6">
164
+ <div class="flex items-center justify-between">
165
+ <div>
166
+ <p class="text-gray-500">Active Policies</p>
167
+ <h3 class="text-2xl font-bold text-gray-800">98</h3>
168
+ </div>
169
+ <div class="bg-green-100 p-3 rounded-full">
170
+ <i class="fas fa-check-circle text-green-600 text-xl"></i>
171
+ </div>
172
+ </div>
173
+ <div class="mt-2">
174
+ <span class="text-green-500 text-sm font-medium">+8% from last month</span>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="bg-white rounded-lg shadow p-6">
179
+ <div class="flex items-center justify-between">
180
+ <div>
181
+ <p class="text-gray-500">Pending Review</p>
182
+ <h3 class="text-2xl font-bold text-gray-800">24</h3>
183
+ </div>
184
+ <div class="bg-yellow-100 p-3 rounded-full">
185
+ <i class="fas fa-clock text-yellow-600 text-xl"></i>
186
+ </div>
187
+ </div>
188
+ <div class="mt-2">
189
+ <span class="text-red-500 text-sm font-medium">+3 from last week</span>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="bg-white rounded-lg shadow p-6">
194
+ <div class="flex items-center justify-between">
195
+ <div>
196
+ <p class="text-gray-500">Expired Policies</p>
197
+ <h3 class="text-2xl font-bold text-gray-800">20</h3>
198
+ </div>
199
+ <div class="bg-red-100 p-3 rounded-full">
200
+ <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
201
+ </div>
202
+ </div>
203
+ <div class="mt-2">
204
+ <span class="text-red-500 text-sm font-medium">+5 from last month</span>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Charts and Recent Activity -->
210
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
211
+ <!-- Compliance Chart -->
212
+ <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
213
+ <div class="flex items-center justify-between mb-4">
214
+ <h2 class="text-lg font-semibold text-gray-800">Policy Compliance Overview</h2>
215
+ <div class="flex space-x-2">
216
+ <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-800 rounded">Month</button>
217
+ <button class="px-3 py-1 text-sm bg-white text-gray-600 rounded">Quarter</button>
218
+ <button class="px-3 py-1 text-sm bg-white text-gray-600 rounded">Year</button>
219
+ </div>
220
+ </div>
221
+ <div id="chart-container" class="mt-4">
222
+ <canvas id="complianceChart"></canvas>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Recent Activity -->
227
+ <div class="bg-white rounded-lg shadow p-6">
228
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h2>
229
+ <div class="space-y-4">
230
+ <div class="flex items-start">
231
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
232
+ <i class="fas fa-file-signature text-indigo-600"></i>
233
+ </div>
234
+ <div>
235
+ <p class="text-sm font-medium">New HR Policy created</p>
236
+ <p class="text-xs text-gray-500">2 hours ago</p>
237
+ </div>
238
+ </div>
239
+ <div class="flex items-start">
240
+ <div class="bg-green-100 p-2 rounded-full mr-3">
241
+ <i class="fas fa-check text-green-600"></i>
242
+ </div>
243
+ <div>
244
+ <p class="text-sm font-medium">IT Security Policy approved</p>
245
+ <p class="text-xs text-gray-500">Yesterday</p>
246
+ </div>
247
+ </div>
248
+ <div class="flex items-start">
249
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
250
+ <i class="fas fa-edit text-yellow-600"></i>
251
+ </div>
252
+ <div>
253
+ <p class="text-sm font-medium">Privacy Policy updated</p>
254
+ <p class="text-xs text-gray-500">2 days ago</p>
255
+ </div>
256
+ </div>
257
+ <div class="flex items-start">
258
+ <div class="bg-red-100 p-2 rounded-full mr-3">
259
+ <i class="fas fa-exclamation text-red-600"></i>
260
+ </div>
261
+ <div>
262
+ <p class="text-sm font-medium">Expired: Travel Policy</p>
263
+ <p class="text-xs text-gray-500">3 days ago</p>
264
+ </div>
265
+ </div>
266
+ <div class="flex items-start">
267
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
268
+ <i class="fas fa-share-alt text-blue-600"></i>
269
+ </div>
270
+ <div>
271
+ <p class="text-sm font-medium">Code of Conduct distributed</p>
272
+ <p class="text-xs text-gray-500">5 days ago</p>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ <button class="mt-4 text-indigo-600 text-sm font-medium hover:text-indigo-800">
277
+ View all activity <i class="fas fa-arrow-right ml-1"></i>
278
+ </button>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Policy List -->
283
+ <div class="bg-white rounded-lg shadow overflow-hidden">
284
+ <div class="p-4 border-b flex items-center justify-between">
285
+ <h2 class="text-lg font-semibold text-gray-800">All Policies</h2>
286
+ <div class="flex items-center space-x-2">
287
+ <div class="relative">
288
+ <select class="appearance-none bg-white border rounded pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
289
+ <option>All Categories</option>
290
+ <option>HR</option>
291
+ <option>IT</option>
292
+ <option>Finance</option>
293
+ <option>Operations</option>
294
+ </select>
295
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i>
296
+ </div>
297
+ <div class="relative">
298
+ <select class="appearance-none bg-white border rounded pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
299
+ <option>All Statuses</option>
300
+ <option>Active</option>
301
+ <option>Pending</option>
302
+ <option>Expired</option>
303
+ <option>Draft</option>
304
+ </select>
305
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="overflow-x-auto">
311
+ <table class="min-w-full divide-y divide-gray-200">
312
+ <thead class="bg-gray-50">
313
+ <tr>
314
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Policy Name</th>
315
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
316
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
317
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
318
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
319
+ </tr>
320
+ </thead>
321
+ <tbody class="bg-white divide-y divide-gray-200">
322
+ <tr class="hover:bg-gray-50">
323
+ <td class="px-6 py-4 whitespace-nowrap">
324
+ <div class="flex items-center">
325
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
326
+ <i class="fas fa-file-alt text-indigo-600"></i>
327
+ </div>
328
+ <div class="ml-4">
329
+ <div class="text-sm font-medium text-gray-900">Employee Handbook</div>
330
+ <div class="text-sm text-gray-500">Version 4.2</div>
331
+ </div>
332
+ </div>
333
+ </td>
334
+ <td class="px-6 py-4 whitespace-nowrap">
335
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">HR</span>
336
+ </td>
337
+ <td class="px-6 py-4 whitespace-nowrap">
338
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
339
+ </td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jan 2023</td>
341
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
342
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
343
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
344
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></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 bg-indigo-100 rounded-full flex items-center justify-center">
351
+ <i class="fas fa-file-alt text-indigo-600"></i>
352
+ </div>
353
+ <div class="ml-4">
354
+ <div class="text-sm font-medium text-gray-900">IT Security Policy</div>
355
+ <div class="text-sm text-gray-500">Version 3.1</div>
356
+ </div>
357
+ </div>
358
+ </td>
359
+ <td class="px-6 py-4 whitespace-nowrap">
360
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">IT</span>
361
+ </td>
362
+ <td class="px-6 py-4 whitespace-nowrap">
363
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
364
+ </td>
365
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 Feb 2023</td>
366
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
367
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
368
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
369
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
370
+ </td>
371
+ </tr>
372
+ <tr class="hover:bg-gray-50">
373
+ <td class="px-6 py-4 whitespace-nowrap">
374
+ <div class="flex items-center">
375
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
376
+ <i class="fas fa-file-alt text-indigo-600"></i>
377
+ </div>
378
+ <div class="ml-4">
379
+ <div class="text-sm font-medium text-gray-900">Travel & Expense Policy</div>
380
+ <div class="text-sm text-gray-500">Version 2.0</div>
381
+ </div>
382
+ </div>
383
+ </td>
384
+ <td class="px-6 py-4 whitespace-nowrap">
385
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Finance</span>
386
+ </td>
387
+ <td class="px-6 py-4 whitespace-nowrap">
388
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending Review</span>
389
+ </td>
390
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28 Feb 2023</td>
391
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
392
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
393
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
394
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
395
+ </td>
396
+ </tr>
397
+ <tr class="hover:bg-gray-50">
398
+ <td class="px-6 py-4 whitespace-nowrap">
399
+ <div class="flex items-center">
400
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
401
+ <i class="fas fa-file-alt text-indigo-600"></i>
402
+ </div>
403
+ <div class="ml-4">
404
+ <div class="text-sm font-medium text-gray-900">Code of Conduct</div>
405
+ <div class="text-sm text-gray-500">Version 5.3</div>
406
+ </div>
407
+ </div>
408
+ </td>
409
+ <td class="px-6 py-4 whitespace-nowrap">
410
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">HR</span>
411
+ </td>
412
+ <td class="px-6 py-4 whitespace-nowrap">
413
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
414
+ </td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Mar 2023</td>
416
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
417
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
418
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
419
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
420
+ </td>
421
+ </tr>
422
+ <tr class="hover:bg-gray-50">
423
+ <td class="px-6 py-4 whitespace-nowrap">
424
+ <div class="flex items-center">
425
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
426
+ <i class="fas fa-file-alt text-indigo-600"></i>
427
+ </div>
428
+ <div class="ml-4">
429
+ <div class="text-sm font-medium text-gray-900">Data Privacy Policy</div>
430
+ <div class="text-sm text-gray-500">Version 1.5</div>
431
+ </div>
432
+ </div>
433
+ </td>
434
+ <td class="px-6 py-4 whitespace-nowrap">
435
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">IT</span>
436
+ </td>
437
+ <td class="px-6 py-4 whitespace-nowrap">
438
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Expired</span>
439
+ </td>
440
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01 Dec 2022</td>
441
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
442
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
443
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
444
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
445
+ </td>
446
+ </tr>
447
+ </tbody>
448
+ </table>
449
+ </div>
450
+
451
+ <div class="px-6 py-4 border-t flex items-center justify-between">
452
+ <div class="text-sm text-gray-500">
453
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">142</span> policies
454
+ </div>
455
+ <div class="flex space-x-2">
456
+ <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">Previous</button>
457
+ <button class="px-3 py-1 border rounded text-sm bg-indigo-600 text-white">1</button>
458
+ <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">2</button>
459
+ <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">3</button>
460
+ <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">Next</button>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </main>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Policy Creation Modal (Hidden by default) -->
469
+ <div id="policy-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
470
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
471
+ <div class="p-4 border-b flex items-center justify-between">
472
+ <h3 class="text-lg font-semibold text-gray-800">Create New Policy</h3>
473
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
474
+ <i class="fas fa-times"></i>
475
+ </button>
476
+ </div>
477
+ <div class="p-6">
478
+ <form>
479
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
480
+ <div>
481
+ <label class="block text-sm font-medium text-gray-700 mb-1">Policy Name</label>
482
+ <input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
483
+ </div>
484
+ <div>
485
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
486
+ <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
487
+ <option>Select category</option>
488
+ <option>HR</option>
489
+ <option>IT</option>
490
+ <option>Finance</option>
491
+ <option>Operations</option>
492
+ </select>
493
+ </div>
494
+ <div>
495
+ <label class="block text-sm font-medium text-gray-700 mb-1">Effective Date</label>
496
+ <input type="date" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
497
+ </div>
498
+ <div>
499
+ <label class="block text-sm font-medium text-gray-700 mb-1">Review Cycle</label>
500
+ <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
501
+ <option>Select review cycle</option>
502
+ <option>Monthly</option>
503
+ <option>Quarterly</option>
504
+ <option>Bi-annually</option>
505
+ <option>Annually</option>
506
+ </select>
507
+ </div>
508
+ <div class="md:col-span-2">
509
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
510
+ <textarea rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
511
+ </div>
512
+ <div class="md:col-span-2">
513
+ <label class="block text-sm font-medium text-gray-700 mb-1">Policy Document</label>
514
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
515
+ <div class="space-y-1 text-center">
516
+ <div class="flex text-sm text-gray-600">
517
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">
518
+ <span>Upload a file</span>
519
+ <input type="file" class="sr-only">
520
+ </label>
521
+ <p class="pl-1">or drag and drop</p>
522
+ </div>
523
+ <p class="text-xs text-gray-500">PDF, DOCX up to 10MB</p>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </form>
529
+ </div>
530
+ <div class="p-4 border-t flex justify-end space-x-3">
531
+ <button id="cancel-modal" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
532
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Save Policy</button>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
538
+ <script>
539
+ // Toggle sidebar
540
+ document.getElementById('toggle-sidebar').addEventListener('click', function() {
541
+ document.querySelector('.sidebar').classList.toggle('collapsed');
542
+ document.querySelector('.main-content').classList.toggle('ml-64');
543
+ document.querySelector('.main-content').classList.toggle('ml-16');
544
+ });
545
+
546
+ // Mobile menu toggle
547
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
548
+ document.querySelector('.sidebar').classList.toggle('open');
549
+ });
550
+
551
+ // Modal handling
552
+ document.getElementById('close-modal').addEventListener('click', function() {
553
+ document.getElementById('policy-modal').classList.add('hidden');
554
+ });
555
+
556
+ document.getElementById('cancel-modal').addEventListener('click', function() {
557
+ document.getElementById('policy-modal').classList.add('hidden');
558
+ });
559
+
560
+ // Chart initialization
561
+ const ctx = document.getElementById('complianceChart').getContext('2d');
562
+ const complianceChart = new Chart(ctx, {
563
+ type: 'bar',
564
+ data: {
565
+ labels: ['HR', 'IT', 'Finance', 'Operations', 'Legal', 'Other'],
566
+ datasets: [
567
+ {
568
+ label: 'Compliant',
569
+ data: [95, 87, 78, 92, 85, 80],
570
+ backgroundColor: '#4F46E5',
571
+ borderRadius: 4
572
+ },
573
+ {
574
+ label: 'Non-Compliant',
575
+ data: [5, 13, 22, 8, 15, 20],
576
+ backgroundColor: '#F87171',
577
+ borderRadius: 4
578
+ }
579
+ ]
580
+ },
581
+ options: {
582
+ responsive: true,
583
+ maintainAspectRatio: false,
584
+ scales: {
585
+ x: {
586
+ stacked: true,
587
+ grid: {
588
+ display: false
589
+ }
590
+ },
591
+ y: {
592
+ stacked: true,
593
+ beginAtZero: true,
594
+ max: 100,
595
+ ticks: {
596
+ callback: function(value) {
597
+ return value + '%';
598
+ }
599
+ }
600
+ }
601
+ },
602
+ plugins: {
603
+ legend: {
604
+ position: 'top',
605
+ },
606
+ tooltip: {
607
+ callbacks: {
608
+ label: function(context) {
609
+ return context.dataset.label + ': ' + context.raw + '%';
610
+ }
611
+ }
612
+ }
613
+ }
614
+ }
615
+ });
616
+
617
+ // Simulate new policy button click (for demo purposes)
618
+ document.querySelector('header button').addEventListener('click', function() {
619
+ document.getElementById('policy-modal').classList.remove('hidden');
620
+ });
621
+ </script>
622
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SamABFlow/policy-management" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
623
+ </html>