optimize and add new service of get report and download report.

static/js/searchContractor.js

@@ -1,43 +1,57 @@
-$(document).ready(function () {
-        function fetchResults() {
-            let formData = $('#search-form').serialize();
+document.addEventListener("DOMContentLoaded", function () {
 
-            $.ajax({
-                type: 'POST',
-                url: '/search_contractor',
-                data: formData,
-                success: function (data) {
-                    let tableBody = $('#result-table tbody');
-                    tableBody.empty();
+    const form = document.getElementById("search-form");
+    const tableBody = document.querySelector("#result-table tbody");
 
-                    if (data.length === 0) {
-                        tableBody.append('<tr><td colspan="6">No data found</td></tr>');
-                    } else {
-                        data.forEach(function (row) {
-                            tableBody.append(`
-                                <tr>
-                                    <td><a href="/contractor_report/${row.Contractor_Id}" target="_blank">${row.Contractor_Name}</a></td>
-                                    <td><a href="/pmc_report/${row.PMC_No}" target="_blank">${row.PMC_No}</a></td>
-                                    <td>${row.State_Name}</td>
-                                    <td>${row.District_Name}</td>
-                                    <td>${row.Block_Name}</td>
-                                    <td>${row.Village_Name}</td>
-                                </tr>
-                            `);
-                        });
-                    }
-                },
-                error: function (xhr) {
-                    alert(xhr.responseJSON.error);
-                }
+    function fetchData(page = 1) {
+        const formData = new FormData(form);
+        formData.append("page", page);
+
+        fetch("/search_contractor", {
+            method: "POST",
+            body: formData
+        })
+            .then(res => res.json())
+            .then(res => {
+                tableBody.innerHTML = "";
+
+                res.data.forEach(row => {
+
+                    const tr = document.createElement("tr");
+
+                    tr.innerHTML = `
+                    <td class="contractor-link" data-id="${row.Contractor_Id}">
+                        ${row.Contractor_Name}
+                    </td>
+                    <td class="pmc-link" data-pmc="${row.PMC_No}">
+                        ${row.PMC_No}
+                    </td>
+                    <td>${row.State_Name}</td>
+                    <td>${row.District_Name}</td>
+                    <td>${row.Block_Name}</td>
+                    <td>${row.Village_Name}</td>
+                `;
+
+                    tableBody.appendChild(tr);
+                });
             });
+    }
+
+    // Auto search
+    form.addEventListener("input", () => fetchData());
+
+    // Click Contractor
+    document.addEventListener("click", function (e) {
+        if (e.target.classList.contains("contractor-link")) {
+            const id = e.target.dataset.id;
+            window.location.href = `/contractor_report/${id}`;
         }
 
-        $('#search-form input').on('keyup change', function () {
-            fetchResults();
-        });
+        if (e.target.classList.contains("pmc-link")) {
+            const pmc = e.target.dataset.pmc;
+            window.location.href = `/pmc_report/${pmc}`;
+        }
     });
 
-window.onload = function () {
-        document.getElementById('subcontractor_name').focus();
-    };
+    fetchData();
+});