|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Knowledge Factory</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"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-icon { |
|
|
margin-right: 0; |
|
|
} |
|
|
.main-content { |
|
|
transition: all 0.3s; |
|
|
} |
|
|
.sidebar.collapsed + .main-content { |
|
|
margin-left: 70px; |
|
|
} |
|
|
.knowledge-card { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.knowledge-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.json-viewer { |
|
|
background-color: #f5f5f5; |
|
|
border-radius: 4px; |
|
|
padding: 10px; |
|
|
font-family: monospace; |
|
|
white-space: pre-wrap; |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col"> |
|
|
<div class="p-4 flex items-center justify-between border-b border-indigo-700"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-industry text-2xl sidebar-icon mr-3"></i> |
|
|
<span class="text-xl font-semibold sidebar-text">Knowledge Factory</span> |
|
|
</div> |
|
|
<button id="toggleSidebar" class="text-white focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-grow overflow-y-auto"> |
|
|
<nav class="p-2"> |
|
|
<div class="mb-4"> |
|
|
<div class="text-xs uppercase text-indigo-300 px-4 py-2 sidebar-text">Document Processing</div> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('document-understander')"> |
|
|
<i class="fas fa-file-alt sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Document Understanders</span> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('knowledge-extractor')"> |
|
|
<i class="fas fa-brain sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Knowledge Extractors</span> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('processing-tasks')"> |
|
|
<i class="fas fa-tasks sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Processing Tasks</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="text-xs uppercase text-indigo-300 px-4 py-2 sidebar-text">Knowledge Management</div> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('knowledge-review')"> |
|
|
<i class="fas fa-check-circle sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Knowledge Review</span> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('knowledge-base')"> |
|
|
<i class="fas fa-database sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Knowledge Bases</span> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('knowledge-entries')"> |
|
|
<i class="fas fa-boxes sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Knowledge Entries</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="text-xs uppercase text-indigo-300 px-4 py-2 sidebar-text">System</div> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('users')"> |
|
|
<i class="fas fa-users sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Users & Roles</span> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('logs')"> |
|
|
<i class="fas fa-clipboard-list sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">System Logs</span> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 rounded hover:bg-indigo-700 flex items-center" onclick="showTab('settings')"> |
|
|
<i class="fas fa-cog sidebar-icon mr-3"></i> |
|
|
<span class="sidebar-text">Settings</span> |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
<div class="p-4 border-t border-indigo-700 flex items-center"> |
|
|
<img src="https://ui-avatars.com/api/?name=Admin+User&background=random" class="w-8 h-8 rounded-full mr-3"> |
|
|
<div class="sidebar-text"> |
|
|
<div class="font-medium">Admin User</div> |
|
|
<div class="text-xs text-indigo-300">Knowledge Engineer</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 flex flex-col overflow-hidden ml-64"> |
|
|
|
|
|
<header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between"> |
|
|
<h1 class="text-2xl font-semibold text-gray-800" id="pageTitle">Document Understanders</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div id="document-understander" class="tab-content active"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Document Understander Configurations</h2> |
|
|
<button onclick="showModal('createUnderstanderModal')" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> New Understander |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>All Status</option> |
|
|
<option>Active</option> |
|
|
<option>Inactive</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
<input type="text" placeholder="Filter by name..." class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">API Endpoint</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Tested</th> |
|
|
<th scope="col" class="px-6 py-3 text-right 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="font-medium text-gray-900">PDF Parser v1</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">Extracts text from PDF documents</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">https://api.docparser.com/v1/pdf</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-gray-500"> |
|
|
2023-06-15 14:30 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('testUnderstanderModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Test</button> |
|
|
<button onclick="showModal('editUnderstanderModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> |
|
|
<button class="text-red-600 hover:text-red-900">Delete</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="font-medium text-gray-900">PPTX Extractor</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">Extracts text and metadata from PowerPoint files</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">https://api.docparser.com/v1/pptx</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-gray-500"> |
|
|
2023-06-10 09:15 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('testUnderstanderModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Test</button> |
|
|
<button onclick="showModal('editUnderstanderModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> |
|
|
<button class="text-red-600 hover:text-red-900">Delete</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="font-medium text-gray-900">Image OCR</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">Optical Character Recognition for PNG/JPG</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">https://api.docparser.com/v1/ocr</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Inactive</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-gray-500"> |
|
|
2023-05-28 16:45 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('testUnderstanderModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Test</button> |
|
|
<button onclick="showModal('editUnderstanderModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> |
|
|
<button class="text-red-600 hover:text-red-900">Delete</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">3</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="knowledge-extractor" class="tab-content"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Knowledge Extractor Configurations</h2> |
|
|
<button onclick="showModal('createExtractorModal')" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> New Extractor |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>All Status</option> |
|
|
<option>Active</option> |
|
|
<option>Inactive</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
<input type="text" placeholder="Filter by name..." class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">API Endpoint</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Tested</th> |
|
|
<th scope="col" class="px-6 py-3 text-right 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="font-medium text-gray-900">Key Concept Extractor</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">Extracts key concepts from text</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">https://api.knowledge.com/v1/extract</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-gray-500"> |
|
|
2023-06-14 11:20 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('testExtractorModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Test</button> |
|
|
<button onclick="showModal('editExtractorModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> |
|
|
<button class="text-red-600 hover:text-red-900">Delete</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="font-medium text-gray-900">Technical Doc Parser</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">Specialized for technical documentation</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-gray-500">https://api.knowledge.com/v1/tech</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-gray-500"> |
|
|
2023-06-08 15:45 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('testExtractorModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Test</button> |
|
|
<button onclick="showModal('editExtractorModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> |
|
|
<button class="text-red-600 hover:text-red-900">Delete</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">2</span> of <span class="font-medium">2</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="processing-tasks" class="tab-content"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Knowledge Processing Tasks</h2> |
|
|
<button onclick="showModal('createTaskModal')" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> New Task |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Pending Tasks</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">5</p> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-full"> |
|
|
<i class="fas fa-clock text-indigo-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">In Progress</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">3</p> |
|
|
</div> |
|
|
<div class="bg-yellow-100 p-3 rounded-full"> |
|
|
<i class="fas fa-spinner text-yellow-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Completed Today</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">12</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>All Status</option> |
|
|
<option>Pending</option> |
|
|
<option>In Progress</option> |
|
|
<option>Completed</option> |
|
|
<option>Failed</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
<input type="text" placeholder="Filter by name..." class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task ID</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Understander</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Extractor</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th> |
|
|
<th scope="col" class="px-6 py-3 text-right 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 text-gray-900">#TASK-001</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="font-medium text-gray-900">Product Docs Batch</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-500">PDF Parser v1</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-500">Key Concept Extractor</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
2023-06-15 09:30 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('taskDetailsModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Details</button> |
|
|
<button class="text-red-600 hover:text-red-900">Cancel</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">#TASK-002</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="font-medium text-gray-900">Technical Whitepapers</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-500">PDF Parser v1</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-500">Technical Doc Parser</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
2023-06-15 11:45 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('taskDetailsModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Details</button> |
|
|
<button class="text-red-600 hover:text-red-900">Cancel</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">#TASK-003</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="font-medium text-gray-900">Marketing Materials</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-500">PPTX Extractor</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-500">Key Concept Extractor</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
2023-06-15 14:20 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="showModal('taskDetailsModal')" class="text-indigo-600 hover:text-indigo-900 mr-3">Details</button> |
|
|
<button class="text-red-600 hover:text-red-900">Cancel</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">8</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="knowledge-review" class="tab-content"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Knowledge Review</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-filter mr-2"></i> Filter |
|
|
</button> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Pending Review</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">24</p> |
|
|
</div> |
|
|
<div class="bg-yellow-100 p-3 rounded-full"> |
|
|
<i class="fas fa-exclamation-circle text-yellow-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Approved Today</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">15</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Rejected Today</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">3</p> |
|
|
</div> |
|
|
<div class="bg-red-100 p-3 rounded-full"> |
|
|
<i class="fas fa-times-circle text-red-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>All Status</option> |
|
|
<option>Pending Review</option> |
|
|
<option>Approved</option> |
|
|
<option>Rejected</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
<input type="text" placeholder="Search knowledge..." class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-columns"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Product Architecture</h3> |
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Overview of the main components and their interactions in our product ecosystem.</p> |
|
|
<div class="flex justify-between items-center text-xs text-gray-500 mb-3"> |
|
|
<span>From: Technical Whitepaper.pdf</span> |
|
|
<span>2023-06-15</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 bg-green-100 hover:bg-green-200 text-green-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
Approve |
|
|
</button> |
|
|
<button onclick="showModal('rejectModal')" class="flex-1 bg-red-100 hover:bg-red-200 text-red-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
Reject |
|
|
</button> |
|
|
<button onclick="showModal('knowledgePreviewModal')" class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">API Rate Limits</h3> |
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Detailed information about API rate limits and throttling policies for all endpoints.</p> |
|
|
<div class="flex justify-between items-center text-xs text-gray-500 mb-3"> |
|
|
<span>From: API_Documentation_v2.pdf</span> |
|
|
<span>2023-06-15</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 bg-green-100 hover:bg-green-200 text-green-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
Approve |
|
|
</button> |
|
|
<button onclick="showModal('rejectModal')" class="flex-1 bg-red-100 hover:bg-red-200 text-red-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
Reject |
|
|
</button> |
|
|
<button onclick="showModal('knowledgePreviewModal')" class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Data Retention Policy</h3> |
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Approved</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Company policies regarding data retention periods and deletion procedures.</p> |
|
|
<div class="flex justify-between items-center text-xs text-gray-500 mb-3"> |
|
|
<span>From: Compliance_Guidelines.pdf</span> |
|
|
<span>2023-06-14</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 bg-indigo-100 hover:bg-indigo-200 text-indigo-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
Add to KB |
|
|
</button> |
|
|
<button onclick="showModal('knowledgePreviewModal')" class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="knowledge-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Troubleshooting Guide</h3> |
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Rejected</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Common issues and solutions for product installation and configuration.</p> |
|
|
<div class="flex justify-between items-center text-xs text-gray-500 mb-3"> |
|
|
<span>From: Support_Handbook.pdf</span> |
|
|
<span>2023-06-14</span> |
|
|
</div> |
|
|
<div class="text-xs bg-red-50 text-red-700 p-2 rounded mb-3"> |
|
|
<strong>Rejection Reason:</strong> Incomplete information, missing critical steps. |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
Edit |
|
|
</button> |
|
|
<button onclick="showModal('knowledgePreviewModal')" class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm font-medium"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="knowledge-base" class="tab-content"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Knowledge Bases</h2> |
|
|
<button onclick="showModal('createKBModal')" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> New Knowledge Base |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Knowledge Bases</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">8</p> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-full"> |
|
|
<i class="fas fa-database text-indigo-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Active Knowledge</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">1,245</p> |
|
|
|
|
|
</html> |
