HTML Template (CTO Legal Tool)
?
R
MarkupHTML template for legal documents used by CTOs. Streamlines creation of contracts, agreements, and other legal paperwork in a standardized format.
1================================================================================================================
21. Authentication
3 ├── Login
4 ├── Register
5 └── Password Reset
6
72. Projects
8 ├── Projects Dashboard
9 ├── Project Details
10 │ ├── Overview
11 │ ├── Technical Decisions
12 │ ├── Document Relations
13 │ ├── Chronological Events
14 │ └── Risk Register
15 └── Project Settings
16
173. Reports & Exports
18 ├── Decision Reports
19 ├── Risk Reports
20 ├── Compliance Reports
21 └── Custom Exports
22
234. Settings
24 ├── User Management
25 ├── Team Settings
26 ├── Integrations
27 └── Notifications
28
295. Help & Support
30 ├── Documentation
31 ├── FAQs
32 └── Support Tickets
33
34
35Key User Flows:
36
37Project Creation → Technical Decisions → Legal Review
38Document Upload → Relation Mapping → Event Tracking
39Risk Assessment → Decision Making → Reporting
40
41================================================================================================================
42/* Chronological Event Tracking screen */
43<div class="min-h-screen bg-gray-50 p-6">
44 <!-- Header -->
45 <div class="mb-6 flex justify-between items-center">
46 <h1 class="text-2xl font-bold text-gray-800">Project Timeline Documentation</h1>
47 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
48 New Entry
49 </button>
50 </div>
51
52 <!-- Filters -->
53 <div class="mb-6 flex gap-4">
54 <select class="border rounded-lg px-3 py-2 bg-white">
55 <option>All Categories</option>
56 <option>Technical Decision</option>
57 <option>Business Requirement</option>
58 <option>Stakeholder Communication</option>
59 <option>Risk Identified</option>
60 </select>
61 <input type="date" class="border rounded-lg px-3 py-2 bg-white">
62 </div>
63
64 <!-- Timeline -->
65 <div class="space-y-4">
66 <!-- Timeline Entry -->
67 <div class="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500">
68 <div class="flex justify-between items-start mb-2">
69 <span class="text-sm text-gray-500">2024-02-20 14:30</span>
70 <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">Technical Decision</span>
71 </div>
72 <h3 class="font-semibold mb-2">Architecture Change: Microservices Implementation</h3>
73 <p class="text-gray-600 mb-3">Decision to split monolithic application into microservices due to scalability requirements.</p>
74 <div class="flex gap-2 mb-3">
75 <span class="px-2 py-1 text-xs bg-gray-100 rounded">@JohnCEO</span>
76 <span class="px-2 py-1 text-xs bg-gray-100 rounded">@SarahCPO</span>
77 </div>
78 <div class="flex gap-2">
79 <button class="text-sm text-blue-600 hover:underline">View Documents (3)</button>
80 <button class="text-sm text-blue-600 hover:underline">Related Events</button>
81 </div>
82 </div>
83
84 <!-- Another Entry -->
85 <div class="bg-white p-4 rounded-lg shadow border-l-4 border-yellow-500">
86 <div class="flex justify-between items-start mb-2">
87 <span class="text-sm text-gray-500">2024-02-19 11:15</span>
88 <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded">Business Requirement</span>
89 </div>
90 <h3 class="font-semibold mb-2">Scope Change: Additional Payment Gateway</h3>
91 <p class="text-gray-600 mb-3">Client requested integration with new payment provider. Impact assessment needed.</p>
92 <div class="flex gap-2 mb-3">
93 <span class="px-2 py-1 text-xs bg-gray-100 rounded">@ClientPM</span>
94 <span class="px-2 py-1 text-xs bg-gray-100 rounded">@CFO</span>
95 </div>
96 <div class="flex gap-2">
97 <button class="text-sm text-blue-600 hover:underline">View Documents (2)</button>
98 <button class="text-sm text-blue-600 hover:underline">Related Events</button>
99 </div>
100 </div>
101 </div>
102</div>
103
104============================================================
105`Document Relations screen `
106<div class="min-h-screen bg-gray-50 p-6">
107 <!-- Header -->
108 <div class="mb-6 flex justify-between items-center">
109 <h1 class="text-2xl font-bold text-gray-800">Document Relations</h1>
110 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
111 Link Documents
112 </button>
113 </div>
114
115 <!-- Search & Filters -->
116 <div class="mb-6 grid grid-cols-3 gap-4">
117 <input
118 type="text"
119 placeholder="Search documents..."
120 class="border rounded-lg px-3 py-2 bg-white col-span-2"
121 >
122 <select class="border rounded-lg px-3 py-2 bg-white">
123 <option>All Document Types</option>
124 <option>Email</option>
125 <option>Specification</option>
126 <option>Approval</option>
127 <option>Contract</option>
128 <option>Technical Doc</option>
129 </select>
130 </div>
131
132 <!-- Document Groups -->
133 <div class="space-y-6">
134 <div class="bg-white p-4 rounded-lg shadow">
135 <h3 class="font-semibold text-lg mb-4">Payment Gateway Implementation</h3>
136
137 <!-- Document Chain with correct hierarchy lines -->
138 <div class="relative">
139 <!-- Primary Document -->
140 <div class="ml-6 mb-4 relative">
141 <div class="absolute -left-6 top-3 w-4 h-0.5 bg-gray-300"></div>
142 <div class="border rounded-lg p-3 bg-white shadow-sm">
143 <div class="flex justify-between">
144 <div>
145 <h4 class="font-medium">Initial Requirements Specification</h4>
146 <p class="text-sm text-gray-600">spec_payment_gateway_v1.pdf</p>
147 </div>
148 <span class="text-sm text-gray-500">2024-02-15</span>
149 </div>
150 <div class="mt-2 flex gap-2">
151 <span class="px-2 py-1 text-xs bg-blue-100 rounded">Primary</span>
152 </div>
153 </div>
154 </div>
155
156 <!-- Connected Documents -->
157 <div class="ml-12 space-y-4 relative">
158 <!-- Vertical line -->
159 <div class="absolute left-0 top-0 bottom-0 w-0.5 bg-gray-300"></div>
160
161 <!-- Related Document 1 -->
162 <div class="relative">
163 <div class="absolute -left-6 top-3 w-6 h-0.5 bg-gray-300"></div>
164 <div class="border rounded-lg p-3 bg-white shadow-sm">
165 <div class="flex justify-between">
166 <div>
167 <h4 class="font-medium">Technical Architecture Approval</h4>
168 <p class="text-sm text-gray-600">arch_approval_email.eml</p>
169 </div>
170 <span class="text-sm text-gray-500">2024-02-16</span>
171 </div>
172 <div class="mt-2 flex gap-2">
173 <span class="px-2 py-1 text-xs bg-yellow-100 rounded">Approval</span>
174 </div>
175 </div>
176 </div>
177
178 <!-- Related Document 2 -->
179 <div class="relative">
180 <div class="absolute -left-6 top-3 w-6 h-0.5 bg-gray-300"></div>
181 <div class="border rounded-lg p-3 bg-white shadow-sm">
182 <div class="flex justify-between">
183 <div>
184 <h4 class="font-medium">Scope Change Request</h4>
185 <p class="text-sm text-gray-600">change_request_001.pdf</p>
186 </div>
187 <span class="text-sm text-gray-500">2024-02-18</span>
188 </div>
189 <div class="mt-2 flex gap-2">
190 <span class="px-2 py-1 text-xs bg-red-100 rounded">Pending</span>
191 </div>
192 </div>
193 </div>
194 </div>
195 </div>
196
197 <!-- Actions -->
198 <div class="mt-4 flex gap-3">
199 <button class="text-sm text-blue-600 hover:underline">Add Related</button>
200 <button class="text-sm text-blue-600 hover:underline">Export Chain</button>
201 </div>
202 </div>
203 </div>
204</div>
205
206============================================================
207Export/Report
208
209<div class="min-h-screen bg-gray-50 p-6">
210 <!-- Header -->
211 <div class="mb-6 flex justify-between items-center">
212 <h1 class="text-2xl font-bold text-gray-800">Legal-Ready Documentation</h1>
213 <div class="flex gap-2">
214 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
215 Generate Report
216 </button>
217 <select class="border rounded-lg px-3 py-2 bg-white">
218 <option>PDF Format</option>
219 <option>Word Format</option>
220 <option>JSON Export</option>
221 <option>Markdown</option>
222 </select>
223 </div>
224 </div>
225
226 <!-- Report Builder -->
227 <div class="grid grid-cols-12 gap-6">
228 <!-- Left Panel: Components -->
229 <div class="col-span-3 bg-white p-4 rounded-lg shadow">
230 <h2 class="font-semibold mb-4">Report Components</h2>
231 <div class="space-y-2">
232 <div class="p-2 border rounded cursor-pointer hover:bg-gray-50">
233 <div class="flex items-center">
234 <input type="checkbox" checked class="mr-2">
235 <span>Project Timeline</span>
236 </div>
237 </div>
238 <div class="p-2 border rounded cursor-pointer hover:bg-gray-50">
239 <div class="flex items-center">
240 <input type="checkbox" checked class="mr-2">
241 <span>Technical Decisions</span>
242 </div>
243 </div>
244 <div class="p-2 border rounded cursor-pointer hover:bg-gray-50">
245 <div class="flex items-center">
246 <input type="checkbox" checked class="mr-2">
247 <span>Stakeholder Approvals</span>
248 </div>
249 </div>
250 <div class="p-2 border rounded cursor-pointer hover:bg-gray-50">
251 <div class="flex items-center">
252 <input type="checkbox" class="mr-2">
253 <span>Risk Assessment</span>
254 </div>
255 </div>
256 <div class="p-2 border rounded cursor-pointer hover:bg-gray-50">
257 <div class="flex items-center">
258 <input type="checkbox" class="mr-2">
259 <span>Document Trail</span>
260 </div>
261 </div>
262 </div>
263 </div>
264
265 <!-- Right Panel: Preview -->
266 <div class="col-span-9 bg-white p-4 rounded-lg shadow">
267 <div class="flex justify-between mb-4">
268 <h2 class="font-semibold">Preview</h2>
269 <div class="flex gap-2">
270 <button class="text-sm text-blue-600 hover:underline">
271 <i class="fas fa-code mr-1"></i>View JSON
272 </button>
273 <button class="text-sm text-blue-600 hover:underline">
274 <i class="fas fa-eye mr-1"></i>Preview PDF
275 </button>
276 </div>
277 </div>
278
279 <!-- Preview Content -->
280 <div class="border rounded-lg p-4 bg-gray-50 font-mono text-sm">
281 <pre class="whitespace-pre-wrap">
282{
283 "projectName": "Payment Gateway Implementation",
284 "reportType": "Legal Documentation",
285 "generated": "2024-02-20T14:30:00Z",
286 "sections": [
287 {
288 "title": "Project Timeline",
289 "events": [
290 {
291 "date": "2024-02-15",
292 "type": "Technical Decision",
293 "description": "Architecture approved",
294 "stakeholders": ["CTO", "CEO"],
295 "documentRefs": ["ARCH-001", "APPROVAL-001"]
296 }
297 ]
298 }
299 // ... more sections
300 ]
301}</pre>
302 </div>
303
304 <!-- Template Selector -->
305 <div class="mt-4">
306 <label class="block text-sm font-medium text-gray-700 mb-2">Legal Template</label>
307 <select class="w-full border rounded-lg px-3 py-2">
308 <option>Standard Legal Documentation</option>
309 <option>Court Evidence Package</option>
310 <option>Technical Due Diligence</option>
311 <option>Dispute Resolution Format</option>
312 </select>
313 </div>
314 </div>
315 </div>
316
317 <!-- Footer Actions -->
318 <div class="mt-6 flex justify-end gap-4">
319 <button class="px-4 py-2 border rounded-lg hover:bg-gray-50">
320 Save Template
321 </button>
322 <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
323 Generate Legal Package
324 </button>
325 </div>
326</div>
327
328========================================================================
329
330<div class="min-h-screen bg-gray-50 p-6">
331 <!-- Header -->
332 <div class="mb-6 flex justify-between items-center">
333 <div>
334 <h1 class="text-2xl font-bold text-gray-800">CTO Legal Dashboard</h1>
335 <p class="text-sm text-gray-600">Last updated: 2024-02-20 14:30</p>
336 </div>
337 <button class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">
338 Critical Event Log
339 </button>
340 </div>
341
342 <!-- Key Metrics -->
343 <div class="grid grid-cols-4 gap-4 mb-6">
344 <div class="bg-white p-4 rounded-lg shadow">
345 <div class="text-sm text-gray-600">Pending Approvals</div>
346 <div class="text-2xl font-bold text-red-600">4</div>
347 <div class="text-xs text-gray-500">2 urgent</div>
348 </div>
349 <div class="bg-white p-4 rounded-lg shadow">
350 <div class="text-sm text-gray-600">Technical Decisions</div>
351 <div class="text-2xl font-bold text-blue-600">23</div>
352 <div class="text-xs text-gray-500">5 this week</div>
353 </div>
354 <div class="bg-white p-4 rounded-lg shadow">
355 <div class="text-sm text-gray-600">Risk Level</div>
356 <div class="text-2xl font-bold text-green-600">Low</div>
357 <div class="text-xs text-gray-500">-2 from last week</div>
358 </div>
359 <div class="bg-white p-4 rounded-lg shadow">
360 <div class="text-sm text-gray-600">Documentation Health</div>
361 <div class="text-2xl font-bold text-yellow-600">89%</div>
362 <div class="text-xs text-gray-500">+5% this month</div>
363 </div>
364 </div>
365
366 <!-- Projects Overview -->
367<div class="bg-white rounded-lg shadow mb-6">
368 <div class="p-4 border-b flex justify-between items-center">
369 <h2 class="font-semibold">Active Projects</h2>
370 <button class="text-sm bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700">
371 New Project
372 </button>
373 </div>
374
375 <div class="divide-y">
376 <div class="p-4 hover:bg-gray-50 flex items-center justify-between">
377 <div>
378 <h3 class="font-medium">Payment Gateway Modernization</h3>
379 <p class="text-sm text-gray-600 mt-1">12 decisions · Medium risk</p>
380 </div>
381 <div class="flex items-center gap-4">
382 <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">In Progress</span>
383 <a href="/projects/1" class="text-blue-600 hover:text-blue-800">View →</a>
384 </div>
385 </div>
386
387 <div class="p-4 hover:bg-gray-50 flex items-center justify-between">
388 <div>
389 <h3 class="font-medium">Cloud Migration Phase 2</h3>
390 <p class="text-sm text-gray-600 mt-1">8 decisions · High risk</p>
391 </div>
392 <div class="flex items-center gap-4">
393 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-sm">Review Needed</span>
394 <a href="/projects/2" class="text-blue-600 hover:text-blue-800">View →</a>
395 </div>
396 </div>
397 </div>
398</div>
399
400 <!-- Main Content Grid -->
401 <div class="grid grid-cols-2 gap-6">
402 <!-- Recent Activity -->
403 <div class="bg-white p-4 rounded-lg shadow">
404 <h2 class="font-semibold mb-4">Critical Timeline</h2>
405 <div class="space-y-3">
406 <div class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded">
407 <div class="w-2 h-2 rounded-full bg-red-500"></div>
408 <div class="flex-1">
409 <div class="text-sm font-medium">Architecture Change Pending Approval</div>
410 <div class="text-xs text-gray-500">Due in 2 days</div>
411 </div>
412 <button class="text-blue-600 text-sm">View</button>
413 </div>
414 <div class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded">
415 <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
416 <div class="flex-1">
417 <div class="text-sm font-medium">Vendor Contract Review</div>
418 <div class="text-xs text-gray-500">Due next week</div>
419 </div>
420 <button class="text-blue-600 text-sm">View</button>
421 </div>
422 </div>
423 </div>
424
425 <!-- Risk Radar -->
426 <div class="bg-white p-4 rounded-lg shadow">
427 <h2 class="font-semibold mb-4">Risk Radar</h2>
428 <div class="space-y-3">
429 <div class="flex items-center gap-2">
430 <div class="w-full bg-gray-200 rounded-full h-4">
431 <div class="bg-red-600 h-4 rounded-full" style="width: 70%"></div>
432 </div>
433 <span class="text-sm">Technical Debt</span>
434 </div>
435 <div class="flex items-center gap-2">
436 <div class="w-full bg-gray-200 rounded-full h-4">
437 <div class="bg-yellow-600 h-4 rounded-full" style="width: 45%"></div>
438 </div>
439 <span class="text-sm">Compliance</span>
440 </div>
441 </div>
442 </div>
443
444 <!-- Document Health -->
445 <div class="bg-white p-4 rounded-lg shadow">
446 <h2 class="font-semibold mb-4">Documentation Coverage</h2>
447 <div class="space-y-2">
448 <div class="flex justify-between text-sm">
449 <span>Technical Decisions</span>
450 <span class="text-green-600">98%</span>
451 </div>
452 <div class="flex justify-between text-sm">
453 <span>Stakeholder Approvals</span>
454 <span class="text-yellow-600">76%</span>
455 </div>
456 <div class="flex justify-between text-sm">
457 <span>Risk Assessments</span>
458 <span class="text-red-600">65%</span>
459 </div>
460 </div>
461 </div>
462
463 <!-- Quick Actions -->
464 <div class="bg-white p-4 rounded-lg shadow">
465 <h2 class="font-semibold mb-4">Quick Actions</h2>
466 <div class="grid grid-cols-2 gap-3">
467 <button class="p-2 text-sm border rounded hover:bg-gray-50">
468 Log Technical Decision
469 </button>
470 <button class="p-2 text-sm border rounded hover:bg-gray-50">
471 Request Approval
472 </button>
473 <button class="p-2 text-sm border rounded hover:bg-gray-50">
474 Document Risk
475 </button>
476 <button class="p-2 text-sm border rounded hover:bg-gray-50">
477 Generate Report
478 </button>
479 </div>
480 </div>
481 </div>
482</div>
483
484Technical Decision Logger
485===================================================
486<div class="min-h-screen bg-gray-50">
487 <!-- Fixed Project Context Bar -->
488 <div class="bg-white border-b sticky top-0 z-10">
489 <div class="max-w-7xl mx-auto px-6 py-3">
490 <div class="flex items-center justify-between">
491 <div class="flex items-center gap-4">
492 <div class="flex items-center">
493 <a href="/projects" class="text-gray-500 hover:text-gray-700">Projects</a>
494 <span class="mx-2 text-gray-500">→</span>
495 <span class="font-medium">Payment Gateway Modernization</span>
496 </div>
497 <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">In Progress</span>
498 </div>
499 <div class="flex gap-4 text-sm text-gray-600">
500 <span>Started: Jan 15, 2024</span>
501 <span class="border-l pl-4">Technical Decisions: 12</span>
502 <span class="border-l pl-4">Risk Level: Medium</span>
503 </div>
504 </div>
505 </div>
506 </div>
507
508 <!-- Main Content -->
509 <div class="max-w-7xl mx-auto px-6 py-8">
510 <!-- Header -->
511 <div class="mb-6 flex justify-between items-center">
512 <div>
513 <h1 class="text-2xl font-bold text-gray-800">Technical Decisions</h1>
514 <p class="text-sm text-gray-600">Track and manage technical decisions with legal implications</p>
515 </div>
516 <div class="flex gap-3">
517 <button class="border px-4 py-2 rounded-lg hover:bg-gray-50">
518 Import from ADR
519 </button>
520 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
521 New Decision
522 </button>
523 </div>
524 </div>
525
526 <!-- List/Form Container -->
527 <div class="bg-white rounded-lg shadow">
528 <!-- Tab Navigation -->
529 <div class="border-b px-6 py-3">
530 <nav class="flex gap-6">
531 <button class="text-gray-500 hover:text-gray-700 pb-3 border-b-2 border-transparent">
532 All Decisions (12)
533 </button>
534 <button class="text-blue-600 pb-3 border-b-2 border-blue-600 font-medium">
535 New Decision
536 </button>
537 <button class="text-gray-500 hover:text-gray-700 pb-3 border-b-2 border-transparent">
538 Pending Review (3)
539 </button>
540 </nav>
541 </div>
542
543 <!-- Form Content -->
544 <div class="p-6">
545
546 <!-- Decision Form -->
547 <div class="bg-white rounded-lg shadow p-6 mb-6">
548 <div class="grid grid-cols-2 gap-6">
549 <!-- Left Column -->
550 <div class="space-y-4">
551 <div>
552 <label class="block text-sm font-medium text-gray-700 mb-1">
553 Decision Title *
554 </label>
555 <input
556 type="text"
557 class="w-full border rounded-lg px-3 py-2"
558 placeholder="e.g., Payment Gateway Architecture Change"
559 >
560 </div>
561
562 <div>
563 <label class="block text-sm font-medium text-gray-700 mb-1">
564 Category *
565 </label>
566 <select class="w-full border rounded-lg px-3 py-2">
567 <option>Architecture</option>
568 <option>Security</option>
569 <option>Infrastructure</option>
570 <option>Data Management</option>
571 <option>Vendor Selection</option>
572 </select>
573 </div>
574
575 <div>
576 <label class="block text-sm font-medium text-gray-700 mb-1">
577 Impact Level *
578 </label>
579 <div class="flex gap-4">
580 <label class="flex items-center">
581 <input type="radio" name="impact" class="mr-2">
582 <span>Low</span>
583 </label>
584 <label class="flex items-center">
585 <input type="radio" name="impact" class="mr-2" checked>
586 <span>Medium</span>
587 </label>
588 <label class="flex items-center">
589 <input type="radio" name="impact" class="mr-2">
590 <span>High</span>
591 </label>
592 </div>
593 </div>
594
595 <div>
596 <label class="block text-sm font-medium text-gray-700 mb-1">
597 Key Stakeholders
598 </label>
599 <div class="flex flex-wrap gap-2">
600 <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">
601 CTO <button class="ml-1 text-blue-600">×</button>
602 </span>
603 <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">
604 Legal <button class="ml-1 text-blue-600">×</button>
605 </span>
606 <button class="px-2 py-1 border rounded text-sm hover:bg-gray-50">
607 + Add
608 </button>
609 </div>
610 </div>
611 </div>
612
613 <!-- Right Column -->
614 <div class="space-y-4">
615 <div>
616 <label class="block text-sm font-medium text-gray-700 mb-1">
617 Technical Context *
618 </label>
619 <textarea
620 class="w-full border rounded-lg px-3 py-2 h-24"
621 placeholder="Describe the technical context and requirements..."
622 ></textarea>
623 </div>
624
625 <div>
626 <label class="block text-sm font-medium text-gray-700 mb-1">
627 Legal Implications
628 </label>
629 <textarea
630 class="w-full border rounded-lg px-3 py-2 h-24"
631 placeholder="Document potential legal impacts and compliance considerations..."
632 ></textarea>
633 </div>
634 </div>
635 </div>
636
637 <!-- Bottom Section -->
638 <div class="mt-6 border-t pt-4">
639 <div class="flex justify-between items-center">
640 <div class="flex items-center gap-4">
641 <label class="flex items-center text-sm">
642 <input type="checkbox" class="mr-2">
643 Requires Legal Review
644 </label>
645 <label class="flex items-center text-sm">
646 <input type="checkbox" class="mr-2">
647 Add to Risk Register
648 </label>
649 </div>
650 <div class="flex gap-3">
651 <button class="px-4 py-2 border rounded-lg hover:bg-gray-50">
652 Save Draft
653 </button>
654 <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
655 Log Decision
656 </button>
657 </div>
658 </div>
659 </div>
660 </div>
661
662 <!-- Recent Decisions -->
663 <div class="bg-white rounded-lg shadow">
664 <div class="p-4 border-b">
665 <h2 class="font-semibold">Recent Decisions</h2>
666 </div>
667 <div class="divide-y">
668 <div class="p-4 hover:bg-gray-50">
669 <div class="flex justify-between items-start">
670 <div>
671 <h3 class="font-medium">Cloud Provider Migration</h3>
672 <p class="text-sm text-gray-600 mt-1">Infrastructure change with compliance implications</p>
673 </div>
674 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">
675 Pending Review
676 </span>
677 </div>
678 <div class="mt-2 flex gap-2">
679 <span class="px-2 py-1 bg-gray-100 rounded text-sm">High Impact</span>
680 <span class="px-2 py-1 bg-gray-100 rounded text-sm">Infrastructure</span>
681 </div>
682 </div>
683
684 <div class="p-4 hover:bg-gray-50">
685 <div class="flex justify-between items-start">
686 <div>
687 <h3 class="font-medium">Authentication Protocol Update</h3>
688 <p class="text-sm text-gray-600 mt-1">Security enhancement for user authentication</p>
689 </div>
690 <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">
691 Approved
692 </span>
693 </div>
694 <div class="mt-2 flex gap-2">
695 <span class="px-2 py-1 bg-gray-100 rounded text-sm">Medium Impact</span>
696 <span class="px-2 py-1 bg-gray-100 rounded text-sm">Security</span>
697 </div>
698 </div>
699 </div>
700 </div>
701 </div>
702 </div>
703 </div>
704</div>
705Created on 11/29/2024