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
8d43cc4
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ContractFlow - Lifecycle Management System</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#2c5282', | |
| accent: '#3182ce', | |
| success: '#38a169', | |
| warning: '#dd6b20', | |
| danger: '#e53e3e', | |
| dark: '#1a202c' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .dashboard-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| transition: width 0.5s ease; | |
| } | |
| .sidebar-item.active { | |
| background-color: #ebf8ff; | |
| border-left: 4px solid #3182ce; | |
| } | |
| .contract-stage { | |
| position: relative; | |
| padding-left: 30px; | |
| } | |
| .contract-stage:before { | |
| content: ''; | |
| position: absolute; | |
| left: 10px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background-color: #cbd5e0; | |
| } | |
| .contract-stage:first-child:before { | |
| top: 50%; | |
| } | |
| .contract-stage:last-child:before { | |
| bottom: 50%; | |
| } | |
| .stage-indicator { | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .stage-completed .stage-indicator { | |
| background-color: #38a169; | |
| color: white; | |
| } | |
| .stage-current .stage-indicator { | |
| background-color: #3182ce; | |
| color: white; | |
| } | |
| .stage-pending .stage-indicator { | |
| background-color: #e2e8f0; | |
| color: #718096; | |
| } | |
| .agent-card { | |
| transition: all 0.3s ease; | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background-color: #e53e3e; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| } | |
| .file-upload-area { | |
| border: 2px dashed #cbd5e0; | |
| border-radius: 8px; | |
| padding: 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .file-upload-area:hover { | |
| border-color: #3182ce; | |
| background-color: #ebf8ff; | |
| } | |
| .contract-table tr:hover { | |
| background-color: #f1f5f9; | |
| } | |
| .status-badge { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-white shadow-md flex flex-col"> | |
| <div class="p-5 border-b"> | |
| <h1 class="text-xl font-bold text-primary flex items-center"> | |
| <i class="fas fa-file-contract mr-2 text-accent"></i> | |
| ContractFlow | |
| </h1> | |
| <p class="text-xs text-gray-500 mt-1">Lifecycle Management System</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto py-4"> | |
| <nav> | |
| <a href="#" class="sidebar-item active flex items-center px-6 py-3 text-sm font-medium text-primary"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50"> | |
| <i class="fas fa-file-contract mr-3"></i> Contracts | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50"> | |
| <i class="fas fa-robot mr-3"></i> Agents | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50"> | |
| <i class="fas fa-project-diagram mr-3"></i> Workflows | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50"> | |
| <i class="fas fa-chart-line mr-3"></i> Analytics | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50"> | |
| <i class="fas fa-shield-alt mr-3"></i> Compliance | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50"> | |
| <i class="fas fa-cog mr-3"></i> Settings | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t"> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Admin User</p> | |
| <p class="text-xs text-gray-500">System Administrator</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Bar --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <div class="flex items-center"> | |
| <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="notification-badge">3</span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-question-circle text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div> | |
| <span class="ml-2 text-sm font-medium text-gray-700">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="dashboard-card bg-white rounded-lg p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Active Contracts</p> | |
| <p class="text-2xl font-bold mt-1">142</p> | |
| </div> | |
| <div class="p-3 bg-blue-100 rounded-full"> | |
| <i class="fas fa-file-contract text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>8% increase</span> | |
| <span>This month</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-blue-500" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Pending Review</p> | |
| <p class="text-2xl font-bold mt-1">24</p> | |
| </div> | |
| <div class="p-3 bg-yellow-100 rounded-full"> | |
| <i class="fas fa-clock text-yellow-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>3% decrease</span> | |
| <span>This week</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-yellow-500" style="width: 24%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Compliance Score</p> | |
| <p class="text-2xl font-bold mt-1">94%</p> | |
| </div> | |
| <div class="p-3 bg-green-100 rounded-full"> | |
| <i class="fas fa-shield-alt text-green-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>2% increase</span> | |
| <span>Last quarter</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-green-500" style="width: 94%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg p-5"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Avg. Processing Time</p> | |
| <p class="text-2xl font-bold mt-1">3.2 days</p> | |
| </div> | |
| <div class="p-3 bg-purple-100 rounded-full"> | |
| <i class="fas fa-bolt text-purple-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>0.5 days faster</span> | |
| <span>Since last month</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-purple-500" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Contracts List --> | |
| <div class="lg:col-span-2"> | |
| <div class="dashboard-card bg-white rounded-lg shadow-sm"> | |
| <div class="border-b p-4 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800">Recent Contracts</h3> | |
| <button class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Contract | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="contract-table min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contract</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parties</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stage</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Software License Agreement</div> | |
| <div class="text-sm text-gray-500">Ref: SLA-2023-0847</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TechCorp Inc.</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Review</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge bg-yellow-100 text-yellow-800">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Service Level Agreement</div> | |
| <div class="text-sm text-gray-500">Ref: SLA-2023-0721</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CloudServe Ltd</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Negotiation</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge bg-blue-100 text-blue-800">In Progress</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Non-Disclosure Agreement</div> | |
| <div class="text-sm text-gray-500">Ref: NDA-2023-0912</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">InnovateX LLC</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Execution</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge bg-green-100 text-green-800">Signed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Employment Contract</div> | |
| <div class="text-sm text-gray-500">Ref: EMP-2023-0833</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Archiving</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge bg-purple-100 text-purple-800">Completed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Vendor Agreement</div> | |
| <div class="text-sm text-gray-500">Ref: VND-2023-0789</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Global Supplies Co</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Approval</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge bg-red-100 text-red-800">Rejected</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-accent hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700">Edit</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="border-t px-4 py-3 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing 1 to 5 of 142 contracts | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 rounded-md bg-accent text-white hover:bg-blue-600"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compliance Section --> | |
| <div class="dashboard-card bg-white rounded-lg shadow-sm mt-6"> | |
| <div class="border-b p-4"> | |
| <h3 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-shield-alt text-green-500 mr-2"></i> Compliance Status | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">GDPR Compliance</span> | |
| <span class="text-sm font-medium text-gray-700">96%</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-green-500" style="width: 96%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">NCMA Standards</span> | |
| <span class="text-sm font-medium text-gray-700">92%</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-blue-500" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Data Protection</span> | |
| <span class="text-sm font-medium text-gray-700">98%</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-purple-500" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Audit Readiness</span> | |
| <span class="text-sm font-medium text-gray-700">89%</span> | |
| </div> | |
| <div class="progress-bar bg-gray-200"> | |
| <div class="progress-fill bg-yellow-500" style="width: 89%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div> | |
| <!-- Contract Stages --> | |
| <div class="dashboard-card bg-white rounded-lg shadow-sm mb-6"> | |
| <div class="border-b p-4"> | |
| <h3 class="font-semibold text-gray-800">Contract Lifecycle</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="contract-stage stage-completed mb-6"> | |
| <div class="stage-indicator"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div class="text-sm font-medium">Intake</div> | |
| <div class="text-xs text-gray-500 mt-1">Completed: 2 days ago</div> | |
| </div> | |
| <div class="contract-stage stage-completed mb-6"> | |
| <div class="stage-indicator"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div class="text-sm font-medium">Drafting</div> | |
| <div class="text-xs text-gray-500 mt-1">Completed: 1 day ago</div> | |
| </div> | |
| <div class="contract-stage stage-current mb-6"> | |
| <div class="stage-indicator"> | |
| <i class="fas fa-circle text-xs"></i> | |
| </div> | |
| <div class="text-sm font-medium">Review</div> | |
| <div class="text-xs text-gray-500 mt-1">In progress</div> | |
| </div> | |
| <div class="contract-stage stage-pending mb-6"> | |
| <div class="stage-indicator"> | |
| <i class="fas fa-circle text-xs"></i> | |
| </div> | |
| <div class="text-sm font-medium">Negotiation</div> | |
| <div class="text-xs text-gray-500 mt-1">Pending</div> | |
| </div> | |
| <div class="contract-stage stage-pending mb-6"> | |
| <div class="stage-indicator"> | |
| <i class="fas fa-circle text-xs"></i> | |
| </div> | |
| <div class="text-sm font-medium">Approval</div> | |
| <div class="text-xs text-gray-500 mt-1">Pending</div> | |
| </div> | |
| <div class="contract-stage stage-pending"> | |
| <div class="stage-indicator"> | |
| <i class="fas fa-circle text-xs"></i> | |
| </div> | |
| <div class="text-sm font-medium">Execution & Archiving</div> | |
| <div class="text-xs text-gray-500 mt-1">Pending</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agents --> | |
| <div class="dashboard-card bg-white rounded-lg shadow-sm"> | |
| <div class="border-b p-4 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800">Active Agents</h3> | |
| <button class="text-xs text-accent hover:text-blue-700"> | |
| <i class="fas fa-plus"></i> Add Agent | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="agent-card bg-gray-50 rounded-lg p-4 mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-file-contract text-blue-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-gray-800">Contract Review Agent</div> | |
| <div class="text-xs text-gray-500">Processing 8 contracts</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between text-xs"> | |
| <span class="text-gray-500">Utilization: 72%</span> | |
| <span class="text-green-500">Operational</span> | |
| </div> | |
| </div> | |
| <div class="agent-card bg-gray-50 rounded-lg p-4 mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-gavel text-green-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-gray-800">Compliance Agent</div> | |
| <div class="text-xs text-gray-500">Processing 12 contracts</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between text-xs"> | |
| <span class="text-gray-500">Utilization: 85%</span> | |
| <span class="text-green-500">Operational</span> | |
| </div> | |
| </div> | |
| <div class="agent-card bg-gray-50 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-archive text-purple-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium text-gray-800">Archiving Agent</div> | |
| <div class="text-xs text-gray-500">Processing 3 contracts</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between text-xs"> | |
| <span class="text-gray-500">Utilization: 42%</span> | |
| <span class="text-green-500">Operational</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Batch Processing Section --> | |
| <div class="dashboard-card bg-white rounded-lg shadow-sm mt-6"> | |
| <div class="border-b p-4"> | |
| <h3 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-layer-group text-accent mr-2"></i> Batch Processing | |
| </h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="file-upload-area"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-3"></i> | |
| <p class="text-gray-600 mb-2">Upload Contract Files</p> | |
| <p class="text-xs text-gray-500">Supported formats: PDF, DOCX, TXT</p> | |
| <button class="mt-4 bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm"> | |
| Select Files | |
| </button> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium text-gray-800 mb-3">Processing Options</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input id="gdpr" type="checkbox" class="h-4 w-4 text-accent focus:ring-accent border-gray-300 rounded"> | |
| <label for="gdpr" class="ml-2 block text-sm text-gray-700">GDPR Compliance Check</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="ncma" type="checkbox" class="h-4 w-4 text-accent focus:ring-accent border-gray-300 rounded"> | |
| <label for="ncma" class="ml-2 block text-sm text-gray-700">NCMA Standards Validation</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="local-models" type="checkbox" class="h-4 w-4 text-accent focus:ring-accent border-gray-300 rounded" checked> | |
| <label for="local-models" class="ml-2 block text-sm text-gray-700">Use Local AI Models</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <h4 class="font-medium text-gray-800 mb-3">Batch Actions</h4> | |
| <button class="w-full bg-accent hover:bg-blue-600 text-white py-2 rounded-md mb-3"> | |
| Start Batch Processing | |
| </button> | |
| <button class="w-full border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-md"> | |
| Save as Template | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audit Trail --> | |
| <div class="dashboard-card bg-white rounded-lg shadow-sm mt-6"> | |
| <div class="border-b p-4 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-history text-purple-500 mr-2"></i> Recent Audit Trail | |
| </h3> | |
| <button class="text-xs text-accent hover:text-blue-700"> | |
| View All | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contract</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Contract Created</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SLA-2023-0847</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 09:32 AM</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Document Reviewed</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Chen</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SLA-2023-0721</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 08:15 AM</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Compliance Check</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">System Agent</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">NDA-2023-0912</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 04:45 PM</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Contract Signed</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Robert Davis</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EMP-2023-0833</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 02:30 PM</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple interactivity for demonstration | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulate loading data | |
| setTimeout(() => { | |
| document.querySelectorAll('.progress-fill').forEach(bar => { | |
| const width = bar.style.width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.width = width; | |
| }, 300); | |
| }); | |
| }, 500); | |
| // File upload area interaction | |
| const uploadArea = document.querySelector('.file-upload-area'); | |
| if (uploadArea) { | |
| uploadArea.addEventListener('click', () => { | |
| alert('File upload functionality would be implemented here'); | |
| }); | |
| } | |
| // Sidebar navigation | |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); | |
| sidebarItems.forEach(item => { | |
| item.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| sidebarItems.forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |