Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard</title> | |
| <!-- CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> | |
| <link rel="stylesheet" type="text/css" href="../static/css/style.css" /> | |
| <link rel="stylesheet" type="text/css" href="../static/css/dashboard.css" /> | |
| <link rel="stylesheet" type="text/css" href="../static/css/perfect-scrollbar.css" /> | |
| <style> | |
| .btn-primary { | |
| background-color: #0d6efd; | |
| border-radius:5px; | |
| border-color: #0d6efd; | |
| } | |
| #sidebarToggle | |
| { | |
| border-radius:4px; | |
| margin-left:250px; | |
| } | |
| .main-sidebar.toggled .menu-text { | |
| display: none; | |
| } | |
| #selectedCompany.toggled .menu-text { | |
| display: none; | |
| } | |
| .wrapper { | |
| flex: 1; | |
| padding: 10px; | |
| margin-left: 300px; /* Default sidebar width */ | |
| transition: margin-left 0.3s ease; | |
| } | |
| .main-header { | |
| border-bottom: none; | |
| border-top: none; | |
| } | |
| .card { | |
| margin-bottom: 15px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| transition: background-color 0.3s ease; | |
| } | |
| .card-body { | |
| padding: 15px; | |
| } | |
| .feature-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 50px; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| } | |
| .sidebarPanel | |
| { | |
| display:none; | |
| } | |
| .media-body { | |
| text-align: right; | |
| } | |
| .fs-30 { | |
| font-size: 1.875rem; | |
| } | |
| .fs-48 { | |
| font-size: 3rem; | |
| } | |
| /* Responsive Styles */ | |
| @media (max-width: 992px) { | |
| .wrapper { | |
| margin-left: 200px; | |
| } | |
| .main-header { | |
| padding: 15px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .feature-icon { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .fs-30 { | |
| font-size: 1.5rem; | |
| } | |
| .fs-48 { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| {% set company_name = company_name %} | |
| {% include 'sidepane.html' %} | |
| <div class="wrapper"> | |
| <section class="main-header"> | |
| <div class="container-fluid"> | |
| <div id="company-block" class="form-group left-align" style="display: none;"> | |
| <label for="company" class="ml-3" style="display: inline-block; margin-right: 10px;"> | |
| Select the Company Name to view the details <span class="text-danger">*</span> | |
| </label> | |
| <select type="text" id="company" name="company" class="ml-3 form-control" | |
| style="display: inline-block; width: 20%;" required> | |
| <option value="" selected>Select</option> | |
| </select> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="card bg-primary"> | |
| <div class="card-body"> | |
| <div class="media align-items-center"> | |
| <span class="p-3 mr-3 feature-icon rounded"> | |
| <img src="../static/logos/calendar-silhouette.svg" /> | |
| </span> | |
| <div class="media-body"> | |
| <p class="fs-30 text-white mb-2">KnowledgeBase</p> | |
| <span id="knowledgeBaseCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.knowledge_base}}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="card bg-info"> | |
| <div class="card-body"> | |
| <div class="media align-items-center"> | |
| <span class="p-3 mr-3 feature-icon rounded"> | |
| <img src="../static/logos/calendar-silhouette.svg" /> | |
| </span> | |
| <div class="media-body"> | |
| <p class="fs-30 text-white mb-2">Data connectors</p> | |
| <span id="dataConnectorsCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.data_connectors}}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6 "> | |
| <div class="card bg-success"> | |
| <div class="card-body"> | |
| <div class="media align-items-center"> | |
| <span class="p-3 mr-3 feature-icon rounded"> | |
| <img src="../static/logos/email.svg" /> | |
| </span> | |
| <div class="media-body"> | |
| <p class="fs-30 text-white mb-2">API Connectors</p> | |
| <span id="apiConnectorsCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.api_connectors}}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 "> | |
| <div class="card bg-secondary"> | |
| <div class="card-body"> | |
| <div class="media align-items-center"> | |
| <span class="p-3 mr-3 feature-icon rounded"> | |
| <img src="../static/logos/dots.svg" /> | |
| </span> | |
| <div class="media-body"> | |
| <p class="fs-30 text-white mb-2">Prompt_Templates</p> | |
| <span id="promptTemplatesCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.prompt_templates}}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <input type="hidden" id="userRole" name="userRole" value={{role}}> | |
| <input type="hidden" id="company_id" name="company_id" value={{company_id}}> | |
| <input type="hidden" id="username" name="username" value={{username}}> | |
| <input type="hidden" id="company_name" name="company_name" value={{company_name}}> | |
| </div> | |
| {% include 'footer.html' %} | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.getElementById("add").style.display = "none"; | |
| // function updateCompanyName(newCompanyName) { | |
| // sessionStorage.setItem('company_name', newCompanyName); | |
| // document.getElementById('selectedCompany').innerText = `Company name: ${newCompanyName}`; | |
| // const sidePaneCompanyName = document.querySelector('.sidebar .company-name'); | |
| // if (sidePaneCompanyName) { | |
| // sidePaneCompanyName.innerText = newCompanyName; | |
| // } | |
| // } | |
| function updateSidepane(companyName) { | |
| const sidepaneCompanyElement = document.getElementById('selectedCompany'); | |
| if (sidepaneCompanyElement) { | |
| sidepaneCompanyElement.innerText = `Company Name: ${companyName}`; | |
| } | |
| } | |
| window.addEventListener('pageshow', function (event) { | |
| if (event.persisted || (window.performance && window.performance.navigation.type === 2)) { | |
| window.location.reload(); | |
| } | |
| }); | |
| document.addEventListener('DOMContentLoaded', function () { | |
| var role1 = document.getElementById("userRole").value; | |
| var company_id1 = document.getElementById("company_id").value; | |
| var company_name1=document.getElementById("company_name").value; | |
| var username1=document.getElementById("username").value; | |
| console.log("companyid in dasshboard",username1); | |
| sessionStorage.setItem('userRole', role1); | |
| // sessionStorage.setItem('siderole',role1); | |
| // sessionStorage.setItem('sidecompanyId',company_id1); | |
| sessionStorage.setItem('company_id', company_id1); | |
| sessionStorage.setItem('company_name',company_name1); | |
| sessionStorage.setItem('username',username1); | |
| const companyName = sessionStorage.getItem('company_name'); | |
| if (companyName) { | |
| updateSidepane(companyName); | |
| } | |
| else{ | |
| document.getElementById(selectedCompany).value="Select a company"; | |
| } | |
| if (!role1) { | |
| var roleFromInput = sessionStorage.getItem('userRole'); | |
| sessionStorage.setItem('userRole', roleFromInput); | |
| console.log("Role set in sessionStorage:", roleFromInput); | |
| } else { | |
| sessionStorage.setItem('userRole', role1); | |
| console.log("Retrieved user role from input:", role1); // Debugging | |
| } | |
| if (role1 === "superadmin") { | |
| document.getElementById('company-block').style.display = 'block'; | |
| fetchCompanies(); | |
| } | |
| }); | |
| document.getElementById('company').addEventListener('change', async function () { | |
| const selectedCompany = this.value; | |
| sessionStorage.setItem("company_name",selectedCompany); | |
| // Update the sidepane immediately | |
| updateSidepane(selectedCompany); | |
| if (selectedCompany!== "Select") { | |
| try { | |
| const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompany)}`); | |
| if (!response.ok) { | |
| contentSection.style.display = 'none'; | |
| displayErrorMessage("Document details do not exist for this company. Please fill in the details."); | |
| throw new Error('Network response was not ok'); | |
| } | |
| const data = await response.json(); | |
| console.log('data returned', data); | |
| const companyId = data.company_id; | |
| sessionStorage.setItem("company_id",companyId); | |
| console.log("company id for superadmin", company_id); | |
| //document.getElementById('company_id').value = companyId; | |
| if (companyId) { | |
| try { | |
| const countResponse = await fetch(`/api/company_record_count/${companyId}`); | |
| if (!countResponse.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| const countData = await countResponse.json(); | |
| console.log('Count data:', countData); // Log the response data | |
| updateRecordCounts(countData.table_counts); | |
| } catch (error) { | |
| console.error('Error fetching record counts:', error); | |
| } | |
| } else { | |
| clearRecordCounts(); | |
| } | |
| } catch (error) { | |
| console.error('No details for this company ID or data documents:', error); | |
| // displayEmptyTable(); | |
| displayErrorMessage("company details do not exist for this company."); | |
| } | |
| } | |
| }); | |
| function updateRecordCounts(counts) { | |
| // Update the counts displayed in the dashboard | |
| document.getElementById('knowledgeBaseCount').textContent = counts.knowledge_base || 0; | |
| document.getElementById('dataConnectorsCount').textContent = counts.data_connectors || 0; | |
| document.getElementById('apiConnectorsCount').textContent = counts.api_connectors || 0; | |
| document.getElementById('promptTemplatesCount').textContent = counts.prompt_templates || 0; | |
| } | |
| function clearRecordCounts() { | |
| document.getElementById('knowledgeBaseCount').textContent = 0; | |
| document.getElementById('dataConnectorsCount').textContent = 0; | |
| document.getElementById('apiConnectorsCount').textContent = 0; | |
| document.getElementById('promptTemplatesCount').textContent = 0; | |
| } | |
| async function fetchCompanies() { | |
| try { | |
| const response = await fetch('/api/companies'); | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| const data = await response.json(); | |
| displayCompanies(data.companies); | |
| } catch (error) { | |
| console.error('Error fetching companies:', error); | |
| } | |
| } | |
| function displayCompanies(companies) { | |
| const companySelect = document.getElementById('company'); | |
| companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown | |
| companies.forEach(company => { | |
| const option = document.createElement('option'); | |
| option.value = company.name; | |
| option.textContent = company.name; | |
| companySelect.appendChild(option); | |
| }); | |
| } | |
| function clearFormFields() { | |
| document.getElementById('APIName').value = ""; | |
| document.getElementById('APIEndpoint').value = ""; | |
| document.getElementById('Auth_Bearer').value = ""; | |
| document.getElementById('Inputjson').value = ""; | |
| document.getElementById('OutputJson').value = ""; | |
| document.getElementById('Description').value = ""; | |
| } | |
| </script> | |
| </body> | |
| </html> | |