Hugging Face's logo

Spaces:
wrt187
/
cms-clm
Running

App Files Community
wrt187 commited on
Commit
8d43cc4
·
verified ·
1 Parent(s): 8f385d9

Create an orchestrator and agents app to manage contracts from intake through archiving a full contracts management and contract lifecycle management app, include gdpr and ncma type requirements the option to use local models with a terzo by ibm type philosophy. Make it secure and professional and able to process batches of contracts and secure with full dashboard and reporting make sure auditing process is included - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +722 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cms Clm
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: green
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: cms-clm
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
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,722 @@
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>ContractFlow - Lifecycle Management System</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1a365d',
15
+ secondary: '#2c5282',
16
+ accent: '#3182ce',
17
+ success: '#38a169',
18
+ warning: '#dd6b20',
19
+ danger: '#e53e3e',
20
+ dark: '#1a202c'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+ body {
29
+ font-family: 'Inter', sans-serif;
30
+ background-color: #f8fafc;
31
+ }
32
+ .dashboard-card {
33
+ transition: all 0.3s ease;
34
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
35
+ }
36
+ .dashboard-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
39
+ }
40
+ .progress-bar {
41
+ height: 8px;
42
+ border-radius: 4px;
43
+ overflow: hidden;
44
+ }
45
+ .progress-fill {
46
+ height: 100%;
47
+ transition: width 0.5s ease;
48
+ }
49
+ .sidebar-item.active {
50
+ background-color: #ebf8ff;
51
+ border-left: 4px solid #3182ce;
52
+ }
53
+ .contract-stage {
54
+ position: relative;
55
+ padding-left: 30px;
56
+ }
57
+ .contract-stage:before {
58
+ content: '';
59
+ position: absolute;
60
+ left: 10px;
61
+ top: 0;
62
+ bottom: 0;
63
+ width: 2px;
64
+ background-color: #cbd5e0;
65
+ }
66
+ .contract-stage:first-child:before {
67
+ top: 50%;
68
+ }
69
+ .contract-stage:last-child:before {
70
+ bottom: 50%;
71
+ }
72
+ .stage-indicator {
73
+ position: absolute;
74
+ left: 0;
75
+ top: 50%;
76
+ transform: translateY(-50%);
77
+ width: 20px;
78
+ height: 20px;
79
+ border-radius: 50%;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ }
84
+ .stage-completed .stage-indicator {
85
+ background-color: #38a169;
86
+ color: white;
87
+ }
88
+ .stage-current .stage-indicator {
89
+ background-color: #3182ce;
90
+ color: white;
91
+ }
92
+ .stage-pending .stage-indicator {
93
+ background-color: #e2e8f0;
94
+ color: #718096;
95
+ }
96
+ .agent-card {
97
+ transition: all 0.3s ease;
98
+ }
99
+ .agent-card:hover {
100
+ transform: translateY(-3px);
101
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
102
+ }
103
+ .notification-badge {
104
+ position: absolute;
105
+ top: -5px;
106
+ right: -5px;
107
+ background-color: #e53e3e;
108
+ color: white;
109
+ border-radius: 50%;
110
+ width: 20px;
111
+ height: 20px;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ font-size: 0.75rem;
116
+ }
117
+ .file-upload-area {
118
+ border: 2px dashed #cbd5e0;
119
+ border-radius: 8px;
120
+ padding: 2rem;
121
+ text-align: center;
122
+ cursor: pointer;
123
+ transition: all 0.3s ease;
124
+ }
125
+ .file-upload-area:hover {
126
+ border-color: #3182ce;
127
+ background-color: #ebf8ff;
128
+ }
129
+ .contract-table tr:hover {
130
+ background-color: #f1f5f9;
131
+ }
132
+ .status-badge {
133
+ padding: 0.25rem 0.75rem;
134
+ border-radius: 9999px;
135
+ font-size: 0.875rem;
136
+ font-weight: 500;
137
+ }
138
+ </style>
139
+ </head>
140
+ <body class="bg-gray-50">
141
+ <div class="flex h-screen overflow-hidden">
142
+ <!-- Sidebar -->
143
+ <div class="w-64 bg-white shadow-md flex flex-col">
144
+ <div class="p-5 border-b">
145
+ <h1 class="text-xl font-bold text-primary flex items-center">
146
+ <i class="fas fa-file-contract mr-2 text-accent"></i>
147
+ ContractFlow
148
+ </h1>
149
+ <p class="text-xs text-gray-500 mt-1">Lifecycle Management System</p>
150
+ </div>
151
+
152
+ <div class="flex-1 overflow-y-auto py-4">
153
+ <nav>
154
+ <a href="#" class="sidebar-item active flex items-center px-6 py-3 text-sm font-medium text-primary">
155
+ <i class="fas fa-tachometer-alt mr-3"></i> Dashboard
156
+ </a>
157
+ <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50">
158
+ <i class="fas fa-file-contract mr-3"></i> Contracts
159
+ </a>
160
+ <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50">
161
+ <i class="fas fa-robot mr-3"></i> Agents
162
+ </a>
163
+ <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50">
164
+ <i class="fas fa-project-diagram mr-3"></i> Workflows
165
+ </a>
166
+ <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50">
167
+ <i class="fas fa-chart-line mr-3"></i> Analytics
168
+ </a>
169
+ <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50">
170
+ <i class="fas fa-shield-alt mr-3"></i> Compliance
171
+ </a>
172
+ <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50">
173
+ <i class="fas fa-cog mr-3"></i> Settings
174
+ </a>
175
+ </nav>
176
+ </div>
177
+
178
+ <div class="p-4 border-t">
179
+ <div class="flex items-center">
180
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div>
181
+ <div class="ml-3">
182
+ <p class="text-sm font-medium text-gray-700">Admin User</p>
183
+ <p class="text-xs text-gray-500">System Administrator</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Main Content -->
190
+ <div class="flex-1 flex flex-col overflow-hidden">
191
+ <!-- Top Bar -->
192
+ <header class="bg-white shadow-sm">
193
+ <div class="flex items-center justify-between px-6 py-4">
194
+ <div class="flex items-center">
195
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
196
+ </div>
197
+ <div class="flex items-center space-x-4">
198
+ <div class="relative">
199
+ <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none">
200
+ <i class="fas fa-bell text-xl"></i>
201
+ <span class="notification-badge">3</span>
202
+ </button>
203
+ </div>
204
+ <div class="relative">
205
+ <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none">
206
+ <i class="fas fa-question-circle text-xl"></i>
207
+ </button>
208
+ </div>
209
+ <div class="flex items-center">
210
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
211
+ <span class="ml-2 text-sm font-medium text-gray-700">Admin</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </header>
216
+
217
+ <!-- Dashboard Content -->
218
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
219
+ <!-- Stats Cards -->
220
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
221
+ <div class="dashboard-card bg-white rounded-lg p-5">
222
+ <div class="flex justify-between items-center">
223
+ <div>
224
+ <p class="text-gray-500 text-sm">Active Contracts</p>
225
+ <p class="text-2xl font-bold mt-1">142</p>
226
+ </div>
227
+ <div class="p-3 bg-blue-100 rounded-full">
228
+ <i class="fas fa-file-contract text-blue-500 text-xl"></i>
229
+ </div>
230
+ </div>
231
+ <div class="mt-4">
232
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
233
+ <span>8% increase</span>
234
+ <span>This month</span>
235
+ </div>
236
+ <div class="progress-bar bg-gray-200">
237
+ <div class="progress-fill bg-blue-500" style="width: 72%"></div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="dashboard-card bg-white rounded-lg p-5">
243
+ <div class="flex justify-between items-center">
244
+ <div>
245
+ <p class="text-gray-500 text-sm">Pending Review</p>
246
+ <p class="text-2xl font-bold mt-1">24</p>
247
+ </div>
248
+ <div class="p-3 bg-yellow-100 rounded-full">
249
+ <i class="fas fa-clock text-yellow-500 text-xl"></i>
250
+ </div>
251
+ </div>
252
+ <div class="mt-4">
253
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
254
+ <span>3% decrease</span>
255
+ <span>This week</span>
256
+ </div>
257
+ <div class="progress-bar bg-gray-200">
258
+ <div class="progress-fill bg-yellow-500" style="width: 24%"></div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="dashboard-card bg-white rounded-lg p-5">
264
+ <div class="flex justify-between items-center">
265
+ <div>
266
+ <p class="text-gray-500 text-sm">Compliance Score</p>
267
+ <p class="text-2xl font-bold mt-1">94%</p>
268
+ </div>
269
+ <div class="p-3 bg-green-100 rounded-full">
270
+ <i class="fas fa-shield-alt text-green-500 text-xl"></i>
271
+ </div>
272
+ </div>
273
+ <div class="mt-4">
274
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
275
+ <span>2% increase</span>
276
+ <span>Last quarter</span>
277
+ </div>
278
+ <div class="progress-bar bg-gray-200">
279
+ <div class="progress-fill bg-green-500" style="width: 94%"></div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="dashboard-card bg-white rounded-lg p-5">
285
+ <div class="flex justify-between items-center">
286
+ <div>
287
+ <p class="text-gray-500 text-sm">Avg. Processing Time</p>
288
+ <p class="text-2xl font-bold mt-1">3.2 days</p>
289
+ </div>
290
+ <div class="p-3 bg-purple-100 rounded-full">
291
+ <i class="fas fa-bolt text-purple-500 text-xl"></i>
292
+ </div>
293
+ </div>
294
+ <div class="mt-4">
295
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
296
+ <span>0.5 days faster</span>
297
+ <span>Since last month</span>
298
+ </div>
299
+ <div class="progress-bar bg-gray-200">
300
+ <div class="progress-fill bg-purple-500" style="width: 65%"></div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Main Content Grid -->
307
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
308
+ <!-- Contracts List -->
309
+ <div class="lg:col-span-2">
310
+ <div class="dashboard-card bg-white rounded-lg shadow-sm">
311
+ <div class="border-b p-4 flex justify-between items-center">
312
+ <h3 class="font-semibold text-gray-800">Recent Contracts</h3>
313
+ <button class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm flex items-center">
314
+ <i class="fas fa-plus mr-2"></i> New Contract
315
+ </button>
316
+ </div>
317
+ <div class="overflow-x-auto">
318
+ <table class="contract-table min-w-full divide-y divide-gray-200">
319
+ <thead class="bg-gray-50">
320
+ <tr>
321
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contract</th>
322
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parties</th>
323
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stage</th>
324
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
325
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
326
+ </tr>
327
+ </thead>
328
+ <tbody class="bg-white divide-y divide-gray-200">
329
+ <tr>
330
+ <td class="px-6 py-4 whitespace-nowrap">
331
+ <div class="text-sm font-medium text-gray-900">Software License Agreement</div>
332
+ <div class="text-sm text-gray-500">Ref: SLA-2023-0847</div>
333
+ </td>
334
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TechCorp Inc.</td>
335
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Review</td>
336
+ <td class="px-6 py-4 whitespace-nowrap">
337
+ <span class="status-badge bg-yellow-100 text-yellow-800">Pending</span>
338
+ </td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
340
+ <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a>
341
+ <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a>
342
+ </td>
343
+ </tr>
344
+ <tr>
345
+ <td class="px-6 py-4 whitespace-nowrap">
346
+ <div class="text-sm font-medium text-gray-900">Service Level Agreement</div>
347
+ <div class="text-sm text-gray-500">Ref: SLA-2023-0721</div>
348
+ </td>
349
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CloudServe Ltd</td>
350
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Negotiation</td>
351
+ <td class="px-6 py-4 whitespace-nowrap">
352
+ <span class="status-badge bg-blue-100 text-blue-800">In Progress</span>
353
+ </td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
355
+ <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a>
356
+ <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a>
357
+ </td>
358
+ </tr>
359
+ <tr>
360
+ <td class="px-6 py-4 whitespace-nowrap">
361
+ <div class="text-sm font-medium text-gray-900">Non-Disclosure Agreement</div>
362
+ <div class="text-sm text-gray-500">Ref: NDA-2023-0912</div>
363
+ </td>
364
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">InnovateX LLC</td>
365
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Execution</td>
366
+ <td class="px-6 py-4 whitespace-nowrap">
367
+ <span class="status-badge bg-green-100 text-green-800">Signed</span>
368
+ </td>
369
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
370
+ <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a>
371
+ <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a>
372
+ </td>
373
+ </tr>
374
+ <tr>
375
+ <td class="px-6 py-4 whitespace-nowrap">
376
+ <div class="text-sm font-medium text-gray-900">Employment Contract</div>
377
+ <div class="text-sm text-gray-500">Ref: EMP-2023-0833</div>
378
+ </td>
379
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td>
380
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Archiving</td>
381
+ <td class="px-6 py-4 whitespace-nowrap">
382
+ <span class="status-badge bg-purple-100 text-purple-800">Completed</span>
383
+ </td>
384
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
385
+ <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a>
386
+ <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a>
387
+ </td>
388
+ </tr>
389
+ <tr>
390
+ <td class="px-6 py-4 whitespace-nowrap">
391
+ <div class="text-sm font-medium text-gray-900">Vendor Agreement</div>
392
+ <div class="text-sm text-gray-500">Ref: VND-2023-0789</div>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Global Supplies Co</td>
395
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Approval</td>
396
+ <td class="px-6 py-4 whitespace-nowrap">
397
+ <span class="status-badge bg-red-100 text-red-800">Rejected</span>
398
+ </td>
399
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
400
+ <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a>
401
+ <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a>
402
+ </td>
403
+ </tr>
404
+ </tbody>
405
+ </table>
406
+ </div>
407
+ <div class="border-t px-4 py-3 flex items-center justify-between">
408
+ <div class="text-sm text-gray-500">
409
+ Showing 1 to 5 of 142 contracts
410
+ </div>
411
+ <div class="flex space-x-2">
412
+ <button class="px-3 py-1 rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200">
413
+ Previous
414
+ </button>
415
+ <button class="px-3 py-1 rounded-md bg-accent text-white hover:bg-blue-600">
416
+ Next
417
+ </button>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Compliance Section -->
423
+ <div class="dashboard-card bg-white rounded-lg shadow-sm mt-6">
424
+ <div class="border-b p-4">
425
+ <h3 class="font-semibold text-gray-800 flex items-center">
426
+ <i class="fas fa-shield-alt text-green-500 mr-2"></i> Compliance Status
427
+ </h3>
428
+ </div>
429
+ <div class="p-4">
430
+ <div class="mb-4">
431
+ <div class="flex justify-between mb-1">
432
+ <span class="text-sm font-medium text-gray-700">GDPR Compliance</span>
433
+ <span class="text-sm font-medium text-gray-700">96%</span>
434
+ </div>
435
+ <div class="progress-bar bg-gray-200">
436
+ <div class="progress-fill bg-green-500" style="width: 96%"></div>
437
+ </div>
438
+ </div>
439
+ <div class="mb-4">
440
+ <div class="flex justify-between mb-1">
441
+ <span class="text-sm font-medium text-gray-700">NCMA Standards</span>
442
+ <span class="text-sm font-medium text-gray-700">92%</span>
443
+ </div>
444
+ <div class="progress-bar bg-gray-200">
445
+ <div class="progress-fill bg-blue-500" style="width: 92%"></div>
446
+ </div>
447
+ </div>
448
+ <div class="mb-4">
449
+ <div class="flex justify-between mb-1">
450
+ <span class="text-sm font-medium text-gray-700">Data Protection</span>
451
+ <span class="text-sm font-medium text-gray-700">98%</span>
452
+ </div>
453
+ <div class="progress-bar bg-gray-200">
454
+ <div class="progress-fill bg-purple-500" style="width: 98%"></div>
455
+ </div>
456
+ </div>
457
+ <div>
458
+ <div class="flex justify-between mb-1">
459
+ <span class="text-sm font-medium text-gray-700">Audit Readiness</span>
460
+ <span class="text-sm font-medium text-gray-700">89%</span>
461
+ </div>
462
+ <div class="progress-bar bg-gray-200">
463
+ <div class="progress-fill bg-yellow-500" style="width: 89%"></div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <!-- Right Sidebar -->
471
+ <div>
472
+ <!-- Contract Stages -->
473
+ <div class="dashboard-card bg-white rounded-lg shadow-sm mb-6">
474
+ <div class="border-b p-4">
475
+ <h3 class="font-semibold text-gray-800">Contract Lifecycle</h3>
476
+ </div>
477
+ <div class="p-4">
478
+ <div class="contract-stage stage-completed mb-6">
479
+ <div class="stage-indicator">
480
+ <i class="fas fa-check text-xs"></i>
481
+ </div>
482
+ <div class="text-sm font-medium">Intake</div>
483
+ <div class="text-xs text-gray-500 mt-1">Completed: 2 days ago</div>
484
+ </div>
485
+ <div class="contract-stage stage-completed mb-6">
486
+ <div class="stage-indicator">
487
+ <i class="fas fa-check text-xs"></i>
488
+ </div>
489
+ <div class="text-sm font-medium">Drafting</div>
490
+ <div class="text-xs text-gray-500 mt-1">Completed: 1 day ago</div>
491
+ </div>
492
+ <div class="contract-stage stage-current mb-6">
493
+ <div class="stage-indicator">
494
+ <i class="fas fa-circle text-xs"></i>
495
+ </div>
496
+ <div class="text-sm font-medium">Review</div>
497
+ <div class="text-xs text-gray-500 mt-1">In progress</div>
498
+ </div>
499
+ <div class="contract-stage stage-pending mb-6">
500
+ <div class="stage-indicator">
501
+ <i class="fas fa-circle text-xs"></i>
502
+ </div>
503
+ <div class="text-sm font-medium">Negotiation</div>
504
+ <div class="text-xs text-gray-500 mt-1">Pending</div>
505
+ </div>
506
+ <div class="contract-stage stage-pending mb-6">
507
+ <div class="stage-indicator">
508
+ <i class="fas fa-circle text-xs"></i>
509
+ </div>
510
+ <div class="text-sm font-medium">Approval</div>
511
+ <div class="text-xs text-gray-500 mt-1">Pending</div>
512
+ </div>
513
+ <div class="contract-stage stage-pending">
514
+ <div class="stage-indicator">
515
+ <i class="fas fa-circle text-xs"></i>
516
+ </div>
517
+ <div class="text-sm font-medium">Execution & Archiving</div>
518
+ <div class="text-xs text-gray-500 mt-1">Pending</div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Agents -->
524
+ <div class="dashboard-card bg-white rounded-lg shadow-sm">
525
+ <div class="border-b p-4 flex justify-between items-center">
526
+ <h3 class="font-semibold text-gray-800">Active Agents</h3>
527
+ <button class="text-xs text-accent hover:text-blue-700">
528
+ <i class="fas fa-plus"></i> Add Agent
529
+ </button>
530
+ </div>
531
+ <div class="p-4">
532
+ <div class="agent-card bg-gray-50 rounded-lg p-4 mb-4">
533
+ <div class="flex items-center">
534
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
535
+ <i class="fas fa-file-contract text-blue-500"></i>
536
+ </div>
537
+ <div>
538
+ <div class="font-medium text-gray-800">Contract Review Agent</div>
539
+ <div class="text-xs text-gray-500">Processing 8 contracts</div>
540
+ </div>
541
+ </div>
542
+ <div class="mt-3 flex justify-between text-xs">
543
+ <span class="text-gray-500">Utilization: 72%</span>
544
+ <span class="text-green-500">Operational</span>
545
+ </div>
546
+ </div>
547
+
548
+ <div class="agent-card bg-gray-50 rounded-lg p-4 mb-4">
549
+ <div class="flex items-center">
550
+ <div class="bg-green-100 p-2 rounded-full mr-3">
551
+ <i class="fas fa-gavel text-green-500"></i>
552
+ </div>
553
+ <div>
554
+ <div class="font-medium text-gray-800">Compliance Agent</div>
555
+ <div class="text-xs text-gray-500">Processing 12 contracts</div>
556
+ </div>
557
+ </div>
558
+ <div class="mt-3 flex justify-between text-xs">
559
+ <span class="text-gray-500">Utilization: 85%</span>
560
+ <span class="text-green-500">Operational</span>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="agent-card bg-gray-50 rounded-lg p-4">
565
+ <div class="flex items-center">
566
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
567
+ <i class="fas fa-archive text-purple-500"></i>
568
+ </div>
569
+ <div>
570
+ <div class="font-medium text-gray-800">Archiving Agent</div>
571
+ <div class="text-xs text-gray-500">Processing 3 contracts</div>
572
+ </div>
573
+ </div>
574
+ <div class="mt-3 flex justify-between text-xs">
575
+ <span class="text-gray-500">Utilization: 42%</span>
576
+ <span class="text-green-500">Operational</span>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <!-- Batch Processing Section -->
585
+ <div class="dashboard-card bg-white rounded-lg shadow-sm mt-6">
586
+ <div class="border-b p-4">
587
+ <h3 class="font-semibold text-gray-800 flex items-center">
588
+ <i class="fas fa-layer-group text-accent mr-2"></i> Batch Processing
589
+ </h3>
590
+ </div>
591
+ <div class="p-6">
592
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
593
+ <div class="file-upload-area">
594
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-3"></i>
595
+ <p class="text-gray-600 mb-2">Upload Contract Files</p>
596
+ <p class="text-xs text-gray-500">Supported formats: PDF, DOCX, TXT</p>
597
+ <button class="mt-4 bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm">
598
+ Select Files
599
+ </button>
600
+ </div>
601
+
602
+ <div class="border rounded-lg p-4">
603
+ <h4 class="font-medium text-gray-800 mb-3">Processing Options</h4>
604
+ <div class="space-y-3">
605
+ <div class="flex items-center">
606
+ <input id="gdpr" type="checkbox" class="h-4 w-4 text-accent focus:ring-accent border-gray-300 rounded">
607
+ <label for="gdpr" class="ml-2 block text-sm text-gray-700">GDPR Compliance Check</label>
608
+ </div>
609
+ <div class="flex items-center">
610
+ <input id="ncma" type="checkbox" class="h-4 w-4 text-accent focus:ring-accent border-gray-300 rounded">
611
+ <label for="ncma" class="ml-2 block text-sm text-gray-700">NCMA Standards Validation</label>
612
+ </div>
613
+ <div class="flex items-center">
614
+ <input id="local-models" type="checkbox" class="h-4 w-4 text-accent focus:ring-accent border-gray-300 rounded" checked>
615
+ <label for="local-models" class="ml-2 block text-sm text-gray-700">Use Local AI Models</label>
616
+ </div>
617
+ </div>
618
+ </div>
619
+
620
+ <div class="border rounded-lg p-4">
621
+ <h4 class="font-medium text-gray-800 mb-3">Batch Actions</h4>
622
+ <button class="w-full bg-accent hover:bg-blue-600 text-white py-2 rounded-md mb-3">
623
+ Start Batch Processing
624
+ </button>
625
+ <button class="w-full border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-md">
626
+ Save as Template
627
+ </button>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </div>
632
+
633
+ <!-- Audit Trail -->
634
+ <div class="dashboard-card bg-white rounded-lg shadow-sm mt-6">
635
+ <div class="border-b p-4 flex justify-between items-center">
636
+ <h3 class="font-semibold text-gray-800 flex items-center">
637
+ <i class="fas fa-history text-purple-500 mr-2"></i> Recent Audit Trail
638
+ </h3>
639
+ <button class="text-xs text-accent hover:text-blue-700">
640
+ View All
641
+ </button>
642
+ </div>
643
+ <div class="p-4">
644
+ <div class="overflow-x-auto">
645
+ <table class="min-w-full divide-y divide-gray-200">
646
+ <thead class="bg-gray-50">
647
+ <tr>
648
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
649
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
650
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contract</th>
651
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
652
+ </tr>
653
+ </thead>
654
+ <tbody class="bg-white divide-y divide-gray-200">
655
+ <tr>
656
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Contract Created</td>
657
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td>
658
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SLA-2023-0847</td>
659
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 09:32 AM</td>
660
+ </tr>
661
+ <tr>
662
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Document Reviewed</td>
663
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Chen</td>
664
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SLA-2023-0721</td>
665
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 08:15 AM</td>
666
+ </tr>
667
+ <tr>
668
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Compliance Check</td>
669
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">System Agent</td>
670
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">NDA-2023-0912</td>
671
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 04:45 PM</td>
672
+ </tr>
673
+ <tr>
674
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Contract Signed</td>
675
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Robert Davis</td>
676
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EMP-2023-0833</td>
677
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 02:30 PM</td>
678
+ </tr>
679
+ </tbody>
680
+ </table>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </main>
685
+ </div>
686
+ </div>
687
+
688
+ <script>
689
+ // Simple interactivity for demonstration
690
+ document.addEventListener('DOMContentLoaded', function() {
691
+ // Simulate loading data
692
+ setTimeout(() => {
693
+ document.querySelectorAll('.progress-fill').forEach(bar => {
694
+ const width = bar.style.width;
695
+ bar.style.width = '0';
696
+ setTimeout(() => {
697
+ bar.style.width = width;
698
+ }, 300);
699
+ });
700
+ }, 500);
701
+
702
+ // File upload area interaction
703
+ const uploadArea = document.querySelector('.file-upload-area');
704
+ if (uploadArea) {
705
+ uploadArea.addEventListener('click', () => {
706
+ alert('File upload functionality would be implemented here');
707
+ });
708
+ }
709
+
710
+ // Sidebar navigation
711
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
712
+ sidebarItems.forEach(item => {
713
+ item.addEventListener('click', function(e) {
714
+ e.preventDefault();
715
+ sidebarItems.forEach(i => i.classList.remove('active'));
716
+ this.classList.add('active');
717
+ });
718
+ });
719
+ });
720
+ </script>
721
+ <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=wrt187/cms-clm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
722
+ </html>