upadte the dashboard

static/css/dashboard1.css

@@ -4,6 +4,20 @@
     border-color: #0d6efd;
 }
 
+body {
+    background-color: white;
+}
+
+select {
+    border: 1px solid rgba(0, 0, 0, 0.468) !important;
+    height: 45px !important;
+    color: rgba(0, 0, 0, 0.468) !important;
+}
+
+.canvasjs-chart-credit {
+    display: none !important;
+}
+
 #sidebarToggle {
     border-radius: 4px;
     margin-left: 250px;
@@ -20,9 +34,10 @@
 .wrapper {
     flex: 1;
     padding: 10px;
-    margin-left: 300px;
+    margin-left: 250px;
     /* Default sidebar width */
     transition: margin-left 0.3s ease;
+    flex-wrap: wrap;
 }
 
 .main-header {
@@ -35,6 +50,10 @@
     border-radius: 8px;
     overflow: hidden;
     transition: background-color 0.3s ease;
+    font-size: 20px !important;
+    max-width: 350px !important;
+    min-width: 300px;
+
 }
 
 .card-body {
@@ -60,20 +79,86 @@
 }
 
 .fs-30 {
-    font-size: 1.875rem;
+    font-size: 20px !important;
+    margin-right: 25px !important;
 }
 
 .fs-48 {
-    font-size: 3rem;
+    font-size: 40px !important;
+    margin-right: 25px !important;
+}
+
+.card {
+    padding: 15px 0px;
+}
+
+body {
+    height: 100dvh;
+}
+
+.row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    row-gap: 20px;
+    column-gap: 20px;
+    align-items: center;
+    justify-content: center;
+}
+
+.graph {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 20px;
+    /* Adds space between the charts */
+    padding: 20px;
+    margin-top: 10px !important;
+}
+
+.graph1 {
+    flex: 1 1 45%;
+    min-width: 300px;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+canvas {
+    min-width: 350px !important;
+}
+
+#chartContainer,
+#chartContainer1 {
+    max-width: 100%;
+    min-width: 100%;
+    height: 350px;
+
 }
 
 
 /* Responsive Styles */
-@media (max-width: 992px) {
+@media (max-width: 991px) {
+    #sidebarToggle {
+        display: block !important;
+        margin-left: 210px !important;
+        border: 2px solid rgba(0, 0, 0, 0.384);
+        color: rgba(0, 0, 0, 0.404) !important;
+    }
+
     .wrapper {
         margin-left: 200px;
     }
 
+    .graph {
+        margin-left: -220px;
+    }
+
+    .graph1 h1 {
+        font-size: 20px;
+        margin-top: 20px;
+    }
+
     .main-header {
         padding: 15px;
     }

static/css/data_connectors.css

@@ -47,8 +47,8 @@ body {
 .form-group input,
 .form-group select,
 .form-group textarea {
-    width: 150%;
-    margin-right: 10% !important;
+    width: 100%;
+    /* margin-right: 10% !important; */
     padding: 2px;
     border: 1px solid #ccc;
 
@@ -191,6 +191,7 @@ aside {
     margin-top: 100px !important;
 }
 
+
 .navbar {
 
     margin-left: 0px !important;
@@ -216,3 +217,123 @@ textarea {
     padding: 10px !important;
     line-height: 35px !important;
 }
+
+.btn1 {
+    padding: 6px;
+    border: 0.5px solid rgba(0, 0, 0, 0.413);
+    color: rgba(0, 0, 0, 0.507);
+    background-color: white !important;
+
+}
+
+.paginate_button {
+    color: rgba(0, 0, 0, 0.507);
+    padding: 5px;
+    margin-left: 5px;
+}
+
+@media screen and (max-width:800px) {
+    .form-label {
+        width: auto !important;
+        overflow: hidden !important;
+    }
+
+    .form-group1 {}
+
+    #selectedTables {
+        margin-top: 350px !important;
+        margin-left: 185px;
+        width: 300px !important;
+    }
+
+    #schema-table-section {
+        margin-left: 70px !important;
+        height: auto !important
+    }
+
+    #saveBtn {
+        margin-top: 350px !important;
+        width: 300px !important;
+        margin-left: -50px;
+    }
+
+    .dropdown-menu {
+        width: 320px !important;
+    }
+
+    select {
+        width: 265px !important;
+
+    }
+
+    #labelselected {
+        display: block !important;
+        z-index: 20;
+    }
+
+}
+
+@media screen and (max-width:600px) {
+
+    .main-header {
+        width: 100%;
+        overflow: hidden;
+        z-index: 0;
+    }
+
+    .btn-container button {
+        max-width: 100% !important;
+        min-width: 320px;
+        margin-bottom: 10px;
+        overflow: hidden;
+        margin-left: 70px;
+
+    }
+
+    #connectBtn {
+        margin-left: 80px;
+
+    }
+
+    #btnbox {
+        width: 800px !important;
+        padding: 5px !important;
+        margin-top: -40px;
+
+    }
+
+    #tablename {
+        font-size: 25px !important;
+        margin-bottom: 3clear
+        0px !important;
+    }
+
+    .dataTables_length select {
+        width: 50px !important;
+    }
+
+    .dataTables_length {
+        margin-bottom: 10px !important;
+        font-size: 15px !important;
+    }
+
+    td {
+        font-size: 15px !important;
+    }
+
+    .dataTables_info {
+        padding-bottom: 20px !important;
+    }
+
+    .dataTables_paginate {
+        padding-bottom: 40px !important;
+    }
+
+    #database {
+        max-width: 350px !important;
+        min-width: 320px;
+    }
+
+
+
+}

static/css/sidepane.css

@@ -99,6 +99,14 @@ i{
 
     #sidebarToggle{
         display: block !important;
+        margin-left: 0px;
+    }
+    .m-0{
+        font-size: 15px !important;
+        margin-left: 50px;
+    }
+    img{
+        display: none !important;
     }
     .main-header{
         margin-left: -210px;

templates/dashboard.html

@@ -14,12 +14,17 @@
 </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>
@@ -30,69 +35,64 @@
                     </select>
                 </div>
 
+                <!-- Flex container for the cards -->
                 <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" />
+                    <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 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" />
+                    <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 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" />
+                    <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 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" />
+                    <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 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>
@@ -100,11 +100,24 @@
                 </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>
 
 
@@ -112,8 +125,88 @@
 
     <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);

templates/data_connectors.html

@@ -16,19 +16,7 @@
 
 </head>
 <style>
-    .btn1 {
-        padding: 6px;
-        border: 0.5px solid rgba(0, 0, 0, 0.413);
-        color: rgba(0, 0, 0, 0.507);
-        background-color: white !important;
-
-    }
-
-    .paginate_button {
-        color: rgba(0, 0, 0, 0.507);
-        padding: 5px;
-        margin-left: 5px;
-    }
+   
 </style>
 
 
@@ -57,36 +45,35 @@
 
             <form id="databaseconnectorForm" class="needs-validation" novalidate action="/save_data_connectors"
                 method="post">
-                <div class="main" id="main">
+                <div class="container-fluid main" id="main">
                     <div class="form-group">
-                        <!-- <label for="company_id">company_id</label>--->
                         <input type="hidden" id="company_id" name="company_id" class="form-control" required>
                     </div>
-                    <h4 id="selectedCompany" style="margin-left: 300px;margin-bottom: 50px;margin-top: -50px;"></h4>
+                    <h4 id="selectedCompany" class="text-center mb-4"></h4>
                     <div class="row">
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3 mb-3">
                             <div class="form-group">
-                                <label for="database">Database Type<span class="text-danger">*</span></label>
-                                <select type="text" id="database" name="database" class="form-control" required>
+                                <label for="database">Database Type <span class="text-danger">*</span></label>
+                                <select id="database" name="database" class="form-control" required>
                                     <option value="" selected>Select</option>
                                     <option value="Postgres">Postgres</option>
-                                    <option value="mysql">mysql</option>
+                                    <option value="mysql">MySQL</option>
                                 </select>
                             </div>
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3 mb-3">
                             <div class="form-group">
                                 <label for="server">Server IP <span class="text-danger">*</span></label>
                                 <input type="text" id="server" name="server" class="form-control" required>
                             </div>
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3 mb-3">
                             <div class="form-group">
                                 <label for="port">Port <span class="text-danger">*</span></label>
                                 <input type="text" id="port" name="port" class="form-control" required>
                             </div>
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3 mb-3">
                             <div class="form-group">
                                 <label for="databaseName">Database Name <span class="text-danger">*</span></label>
                                 <input type="text" id="databaseName" name="databaseName" class="form-control" required>
@@ -94,50 +81,57 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3 mb-3">
                             <div class="form-group">
-                                <label for="userame">UserName <span class="text-danger">*</span></label>
+                                <label for="username">UserName <span class="text-danger">*</span></label>
                                 <input type="text" id="username" name="username" class="form-control" required>
                             </div>
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3 mb-3">
                             <div class="form-group">
                                 <label for="password">Password <span class="text-danger">*</span></label>
                                 <input type="password" id="password" name="password" class="form-control" required>
                             </div>
                         </div>
-
-                        <div class="col-md-6">
-                            <div class="form-group d-flex justify-content-between">
-                                <div class="form-group btn-container">
-                                    <button type="button" id="connectBtn" class="btn btn-primary">Connect</button>
-                                    <button type="reset" class="btn btn-primary">Clear</button>
-                                </div>
+                        <div class="col-md-12 col-lg-6 d-flex justify-content-center align-items-center mb-3 "
+                            id="btnbox">
+                            <div class="btn-container">
+                                <button type="button" id="connectBtn" class="btn btn-primary me-2">Connect</button>
+                                <button type="reset" class="btn btn-secondary">Clear</button>
                             </div>
                         </div>
                     </div>
                 </div>
 
+
+
                 <!-- Table -->
-                <div class="table"
-                    style="padding: 50px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-left:80px; display:none "
-                    id="table">
-                    <h1 style="text-align: center;font-size: 25px;">Selected Tables</h1>
-                    <table id="adminlte-table" class="table table-bordered table-striped">
-                        <thead>
-                            <tr>
-                                <th>Sno</th>
-                                <th>Table Name</th>
-                                <th>Schema Name</th>
-                            </tr>
-                        </thead>
-                        <tbody id="table-body">
-                            <!-- Rows will be appended here -->
-                        </tbody>
-                    </table>
+                <div class="container-fluid table-container" style="display: none;" id="table">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card shadow p-4">
+                                <h1 class="text-center fs-4" id="tablename">Selected Tables</h1>
+                                <div class="table-responsive">
+                                    <table id="adminlte-table" class="table table-bordered table-striped">
+                                        <thead>
+                                            <tr>
+                                                <th>Sno</th>
+                                                <th>Table Name</th>
+                                                <th>Schema Name</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody id="table-body">
+                                           
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
 
+
                 <div id="schema-table-section" style="margin-left: 30px; width: 100%; height: 530px; display: none;">
                     <div class="row">
                         <div class="col-md-3">
@@ -545,7 +539,7 @@
             }
         });
 
-       
+
 
 
 

templates/index.html

@@ -15,45 +15,72 @@
 
     </style>
 </head>
+<style>
+    @media screen and (max-width:770px) {
+        .one{
+            display: block !important;
+            margin-top: -50px;
+        }
+        #text{
+            display: none;
+        }
+        #redmind{
+            margin-top: -40px;
+            margin-bottom: 50px;
+            font-size: 25px;
+            font-family: sans-serif;
+            font-weight: lighter;
+        }
+        
+    }
+</style>
 
 <body class="login-page" style="background-image: url('static/img/Brain.png'); background-size: cover;">
-<body class="login-page" style="background-image: url('static/img/Brain.png'); background-size: cover;">
-    <main>
+
+    <body class="login-page" style="background-image: url('static/img/Brain.png'); background-size: cover;">
+        <main>
             <div class="container" id="container">
                 <div class="form-container sign-in-container">
                     <form action='/validate-user' name='signUpForm' method="post">
-                        <h1 id="text" style="margin-bottom: 50px;">Sign in</h1>
+                        <div class="one" style="display: none;">
+                                <div class="logo-container">
+                                    <img src="/static/img/redmindlogo3.jpg" alt="Logo" class="logo">
+                                </div>
+                                <h1 id="redmind">RedMindGPT</h1>
+
+                        </div>
+                        <h1 id="text"  style="margin-bottom: 50px;">Sign in</h1>
                         <input type="text" placeholder="Name" name="username" required />
                         <input type="password" placeholder="Password" name="password" required />
-                        <button type="submit">Sign in</button>
+                        <button type="submit" >Sign in</button>
                     </form>
                 </div>
 
-        
 
-            <div class="overlay-container">
-                <div class="overlay">
-                    <div class="overlay-panel overlay-left">
-                        <h1>Welcome Back!</h1>
-                        <p>To keep connected with us please login with your personal info</p>
-                        <button type="submit" class="ghost" id="signIn">Sign In</button>
-                    </div>
-                    <div class="overlay-panel overlay-right">
-                        <div class="logo-container">
-                            <img src="/static/img/redmindlogo3.jpg" alt="Logo" class="logo">
+
+                <div class="overlay-container">
+                    <div class="overlay">
+                        <div class="overlay-panel overlay-left">
+                            <h1>Welcome Back!</h1>
+                            <p>To keep connected with us please login with your personal info</p>
+                            <button type="submit" class="ghost" id="signIn">Sign In</button>
+                        </div>
+                        <div class="overlay-panel overlay-right">
+                            <div class="logo-container">
+                                <img src="/static/img/redmindlogo3.jpg" alt="Logo" class="logo">
+                            </div>
+                            <h1>RedMindGPT</h1>
+                            <p> Start Journey With Us</p>
                         </div>
-                        <h1>RedMindGPT</h1>
-                        <p> Start Journey With Us</p>
                     </div>
                 </div>
             </div>
-        </div>
-    </main>
+        </main>
 
-    <!-- <footer>
+        <!-- <footer>
         <p>Developed with <i class="fas fa-heart"></i> by <a href="#">RedMind</a></p>
     </footer> -->
 
-</body>
+    </body>
 
 </html>

templates/prompt_template.html

@@ -72,7 +72,7 @@
                             <div class="col-12">
                                 <div class="card">
                                     <div class="card-body table-container">
-                                        <button class="btn btn-primary me-3" id="add">Add</button>F
+                                        <button class="btn btn-primary me-3" id="add">Add</button>
                                         <table id="promptTable" class="table table-bordered table-striped">
                                             <thead>
                                                 <tr>