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" /> | |
| <link rel="stylesheet" href="/static/css/dashboard1.css"> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| {% set company_name = company_name %} | |
| {% include 'sidepane.html' %} | |
| <div class="wrapper"> | |
| <section class="main-header"> | |
| <div class="container-fluid"> | |
| <!-- Company dropdown section, visibility toggled by JS --> | |
| <div id="company-block" class="form-group" style="display: none;"> | |
| <label for="company" class="ml-3" style="display: inline-block; margin-right: 0px;"> | |
| 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: 25%;" required> | |
| <option value="" selected>Select</option> | |
| </select> | |
| </div> | |
| <!-- Flex container for the cards --> | |
| <div class="row"> | |
| <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-20 text-white mb-2">KnowledgeBase</p> | |
| <span id="knowledgeBaseCount" class="fs-36 text-white font-w600"> | |
| {{table_count_of_each_table.knowledge_base}} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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-20 text-white mb-2">Data connectors</p> | |
| <span id="dataConnectorsCount" class="fs-36 text-white font-w600"> | |
| {{table_count_of_each_table.data_connectors}} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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-20 text-white mb-2">API Connectors</p> | |
| <span id="apiConnectorsCount" class="fs-36 text-white font-w600"> | |
| {{table_count_of_each_table.api_connectors}} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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-20 text-white mb-2">Prompt_Templates</p> | |
| <span id="promptTemplatesCount" class="fs-36 text-white font-w600"> | |
| {{table_count_of_each_table.prompt_templates}} | |
| </span> | |
| </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 class="graph"> | |
| <div class="graph1"> | |
| <h1 class="text-center">API Usage</h1> | |
| <div id="chartContainer"></div> | |
| </div> | |
| <div class="graph1"> | |
| <h1 class="text-center">Customer Feedback</h1> | |
| <div id="chartContainer1"></div> | |
| </div> | |
| </div> | |
| </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 src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> | |
| <script src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script> | |
| <script> | |
| window.onload = function () { | |
| var chart = new CanvasJS.Chart("chartContainer", { | |
| animationEnabled: true, | |
| axisX: { | |
| valueFormatString: "DD MMM", | |
| crosshair: { | |
| enabled: true, | |
| snapToDataPoint: true | |
| } | |
| }, | |
| axisY: { | |
| title: "", | |
| valueFormatString: "##0.00", | |
| crosshair: { | |
| enabled: true, | |
| snapToDataPoint: true, | |
| labelFormatter: function (e) { | |
| return CanvasJS.formatNumber(e.value, "##0.00"); | |
| } | |
| } | |
| }, | |
| data: [{ | |
| type: "area", | |
| xValueFormatString: "DD MMM", | |
| yValueFormatString: "$##0.00", | |
| dataPoints: [ | |
| { x: new Date(2016, 7, 1), y: 76.727997 }, | |
| { x: new Date(2016, 7, 2), y: 75.459999 }, | |
| { x: new Date(2016, 7, 3), y: 76.011002 }, | |
| { x: new Date(2016, 7, 4), y: 75.751999 }, | |
| { x: new Date(2016, 7, 5), y: 77.500000 }, | |
| { x: new Date(2016, 7, 8), y: 77.436996 }, | |
| { x: new Date(2016, 7, 9), y: 79.650002 }, | |
| { x: new Date(2016, 7, 10), y: 79.750999 }, | |
| { x: new Date(2016, 7, 11), y: 80.169998 }, | |
| { x: new Date(2016, 7, 12), y: 79.570000 }, | |
| { x: new Date(2016, 7, 15), y: 80.699997 }, | |
| { x: new Date(2016, 7, 16), y: 79.686996 }, | |
| { x: new Date(2016, 7, 17), y: 78.996002 }, | |
| { x: new Date(2016, 7, 18), y: 78.899002 }, | |
| { x: new Date(2016, 7, 19), y: 77.127998 }, | |
| { x: new Date(2016, 7, 22), y: 76.759003 }, | |
| { x: new Date(2016, 7, 23), y: 77.480003 }, | |
| { x: new Date(2016, 7, 24), y: 77.623001 }, | |
| { x: new Date(2016, 7, 25), y: 76.408997 }, | |
| { x: new Date(2016, 7, 26), y: 76.041000 }, | |
| { x: new Date(2016, 7, 29), y: 76.778999 }, | |
| { x: new Date(2016, 7, 30), y: 78.654999 }, | |
| { x: new Date(2016, 7, 31), y: 77.667000 } | |
| ] | |
| }] | |
| }); | |
| chart.render(); | |
| var chart = new CanvasJS.Chart("chartContainer1", { | |
| animationEnabled: true, | |
| data: [{ | |
| type: "doughnut", | |
| startAngle: 60, | |
| //innerRadius: 60, | |
| indexLabelFontSize: 17, | |
| indexLabel: "{label} - #percent%", | |
| toolTipContent: "<b>{label}:</b> {y} (#percent%)", | |
| dataPoints: [ | |
| { y: 20, label: "Netural" }, | |
| { y: 30, label: "Negative" }, | |
| { y: 50, label: "Postive" }, | |
| ] | |
| }] | |
| }); | |
| chart.render(); | |
| } | |
| // 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> |