correction of table showing data

app/templates/subcontractor_dashboard.html

@@ -116,21 +116,65 @@
 
         <div class="card-header">
             <ul class="nav nav-pills">
+
                 <li class="nav-item">
-                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#barTab">
+                    <button class="nav-link active"
+                            data-bs-toggle="tab"
+                            data-bs-target="#barTab">
                         <i class="bi bi-bar-chart"></i> Bar Chart
                     </button>
                 </li>
-            
+
+                <li class="nav-item">
+                    <button class="nav-link"
+                            data-bs-toggle="tab"
+                            data-bs-target="#tableTab">
+                        <i class="bi bi-table"></i> Data Table
+                    </button>
+                </li>
+
             </ul>
         </div>
 
         <div class="card-body">
             <div class="tab-content">
-                <!-- BAR -->
+
-                <div style="height:600px">
+                <!-- BAR TAB -->
-                    <canvas id="barChart"></canvas>
+                <div class="tab-pane fade show active" id="barTab">
+
+                    <div style="height:600px">
+                        <canvas id="barChart"></canvas>
+                    </div>
+
                 </div>
+
+                <!-- TABLE TAB -->
+                <div class="tab-pane fade" id="tableTab">
+
+                    <div class="table-responsive">
+
+                        <table class="table table-bordered table-hover" id="resultTable">
+
+                            <thead class="table-dark">
+
+                                <tr>
+                                    <th>Sr No</th>
+                                    <th>Strata Type & Depth</th>
+                                    <th class="text-end">Client Qty</th>
+                                    <th class="text-end">Sub Contractor Qty</th>
+                                    <th class="text-end">Difference</th>
+                                </tr>
+
+                            </thead>
+
+                            <tbody></tbody>
+
+                        </table>
+
+                    </div>
+
+                </div>
+
             </div>
         </div>
 
@@ -144,7 +188,6 @@
 <script>
 
     let barChart;
-    let pieChart;
     let raBillChoice;
 
     /* Load RA Bills */
@@ -209,10 +252,10 @@
         fetch(`/dashboard/api/trench-analysis?subcontractor=${subcontractor}&category=${category}&ra_bill=${raBills.join(",")}`)
             .then(response => response.json())
             .then(data => {
-
                 console.log(data);
 
                 drawBar(data);
+                drawTable(data);
 
             })
             .catch(err => console.error(err));
@@ -238,7 +281,7 @@
                         borderWidth: 1
                     },
                     {
-                        label: "Sub Contractor Qty",
+                        label: "Sub-Contractor Qty",
                         data: data.sub_qty,
                         backgroundColor: "#fd7e14",
                         borderColor: "#fd7e14",
@@ -284,6 +327,33 @@
             }
         });
 
+    }
+
+       /* TABLE */
+    function drawTable(data){
+
+        let html='';
+        for(let i=0;i<data.labels.length;i++){
+
+            html+=`
+
+            <tr>
+                <td class="text-center">${i + 1}</td>
+                <td>${data.labels[i]}</td>
+                <td class="text-end">${data.client_qty[i]}</td>
+                <td class="text-end">${data.sub_qty[i]}</td>
+                <td class="text-end fw-bold ${data.client_qty[i]- data.sub_qty[i] >= 0 ? 'text-success' : 'text-danger'}">
+                ${data.client_qty[i]- data.sub_qty[i]}
+            </td>
+
+            </tr>
+
+            `;
+
+        }
+
+        document.querySelector("#resultTable tbody").innerHTML = html;
+
     }
 
     /* EVENTS */