same changes of sub-cont dashboard

app/templates/subcontractor_dashboard.html

@@ -1,33 +1,31 @@
 {% extends "base.html" %}
 {% block content %}
 
-<div class="container-fluid mt-3">
+<div class="container mt-3">
 
-    <h4 class="mb-4">Subcontractor Dashboard</h4>
+    <h4>RA Bill Dashboard</h4>
 
     <div class="row mb-3">
 
+        <!-- Contractor -->
         <div class="col-md-4">
             <select id="subcontractor" class="form-control">
-                <option value="">Select Subcontractor</option>
-
+                <option value="">Select Contractor</option>
                 {% for s in subcontractors %}
                 <option value="{{s.id}}">{{s.subcontractor_name}}</option>
                 {% endfor %}
-
             </select>
         </div>
 
+        <!-- Category -->
         <div class="col-md-4">
             <select id="category" class="form-control">
                 <option value="">Select Category</option>
-                <option value="Soft Murum">Soft Murum</option>
-                <option value="Hard Murum">Hard Murum</option>
-                <option value="Soft Rock">Soft Rock</option>
-                <option value="Hard Rock">Hard Rock</option>
+                <option value="trench_excavation">Trench Excavation</option>
             </select>
         </div>
 
+        <!-- RA Bill -->
         <div class="col-md-4">
             <select id="ra_bill" class="form-control">
                 <option value="">RA Bill</option>
@@ -36,69 +34,84 @@
 
     </div>
 
-
-    <div class="card shadow">
+    <div class="card">
         <div class="card-body">
-
-            <canvas id="comparisonChart" height="120"></canvas>
-
+            <canvas id="comparisonChart"></canvas>
         </div>
     </div>
 
 </div>
 
-
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 <script>
 
     let chart;
 
-    function loadChart() {
+    // ✅ Load RA Bills
+    function loadRABills() {
 
         let subcontractor = document.getElementById("subcontractor").value
         let category = document.getElementById("category").value
-        let ra_bill = document.getElementById("ra_bill").value
 
+        if (!subcontractor || !category) return
 
-        fetch(`/dashboard/api/subcontractor-chart?subcontractor=${subcontractor}&category=${category}&ra_bill=${ra_bill}`)
-
+        fetch(`/dashboard/api/get-ra-bills?subcontractor=${subcontractor}&category=${category}`)
             .then(res => res.json())
             .then(data => {
 
-                if (chart) {
-                    chart.destroy()
-                }
+                let ra = document.getElementById("ra_bill")
+                ra.innerHTML = '<option value="">RA Bill</option>'
 
-                const ctx = document.getElementById("comparisonChart")
+                data.ra_bills.forEach(bill => {
+                    ra.innerHTML += `<option value="${bill}">${bill}</option>`
+                })
+            })
+    }
 
-                chart = new Chart(ctx, {
+    // ✅ Load Chart
+    function loadChart() {
+
+        let subcontractor = document.getElementById("subcontractor").value
+        let ra_bill = document.getElementById("ra_bill").value
+
+        fetch(`/dashboard/api/trench-analysis?subcontractor=${subcontractor}&ra_bill=${ra_bill}`)
+            .then(res => res.json())
+            .then(data => {
+
+                if (chart) chart.destroy()
+
+                chart = new Chart(document.getElementById("comparisonChart"), {
                     type: "bar",
                     data: {
                         labels: data.labels,
-                        datasets: [{
-                            label: "Subcontractor Quantity",
-                            data: data.values,
-                            backgroundColor: "#0d6efd"
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        plugins: {
-                            legend: { display: true }
-                        }
+                        datasets: [
+                            {
+                                label: "Depth",
+                                data: data.depth,
+                                backgroundColor: "green"
+                            },
+                            {
+                                label: "Excavation Qty (cum)",
+                                data: data.qty,
+                                backgroundColor: "blue"
+                            }
+                        ]
                     }
                 })
-
             })
-
     }
 
-    document.getElementById("subcontractor").addEventListener("change", loadChart)
-    document.getElementById("category").addEventListener("change", loadChart)
-    document.getElementById("ra_bill").addEventListener("change", loadChart)
+    // Events
+    document.getElementById("subcontractor").addEventListener("change", () => {
+        loadRABills()
+    })
 
-    loadChart()
+    document.getElementById("category").addEventListener("change", () => {
+        loadRABills()
+    })
+
+    document.getElementById("ra_bill").addEventListener("change", loadChart)
 
 </script>