partial update create page quick search

resources/js/quick-search/index.js

@@ -0,0 +1,21 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const searchBtn = document.getElementById("searchBtn");
+    const searchInput = document.getElementById("searchInput");
+
+    searchBtn.addEventListener("click", function () {
+        const keyword = searchInput.value.trim();
+        if (keyword !== "") {
+            // Redirect to the route with query parameter
+            window.location.href = `/search-result?keyword=${encodeURIComponent(
+                keyword
+            )}`;
+        }
+    });
+
+    // Optional: trigger search on Enter key
+    searchInput.addEventListener("keydown", function (e) {
+        if (e.key === "Enter") {
+            searchBtn.click();
+        }
+    });
+});

resources/js/quick-search/result.js

@@ -0,0 +1,87 @@
+import { Grid, html } from "gridjs";
+
+class QuickSearchResult {
+    constructor() {
+        this.table = null;
+        const baseInput = document.getElementById("base_url_datatable");
+        this.datatableUrl = baseInput ? baseInput.value : "";
+    }
+
+    init() {
+        this.initDatatable();
+    }
+
+    initDatatable() {
+        const tableContainer = document.getElementById(
+            "datatable-quick-search-result"
+        );
+
+        const config = {
+            columns: [
+                "ID",
+                { name: "Name" },
+                { name: "Condition" },
+                "Registration Number",
+                "Document Number",
+                { name: "Address" },
+                "Status",
+                "Function Type",
+                "Consultation Type",
+                { name: "Due Date" },
+                {
+                    name: "Action",
+                    formatter: (cell) => {
+                        return html(`
+                          <a href="/quick-search/${cell.id}" 
+                            class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center"
+                            style="white-space: nowrap; line-height: 1;">
+                                <iconify-icon icon="mingcute:eye-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
+                          </a>
+                      `);
+                    },
+                },
+            ],
+            search: false,
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: this.datatableUrl,
+                then: (data) =>
+                    data.data.map((item) => [
+                        item.id,
+                        item.name,
+                        item.condition,
+                        item.registration_number,
+                        item.document_number,
+                        item.address,
+                        item.status_name,
+                        item.function_type,
+                        item.consultation_type,
+                        item.due_date,
+                        item,
+                    ]),
+                total: (data) => data.total,
+            },
+        };
+
+        if (this.table) {
+            this.table = this.table.updateConfig(config).forceRender();
+        } else {
+            tableContainer.innerHTML = "";
+            this.table = new Grid(config).render(tableContainer);
+        }
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    const app = new QuickSearchResult();
+    app.init();
+});