step 1 : autocomplete multi select (di hold)

2024-05-28 08:11:00 +07:00
20 changed files with 1198 additions and 824 deletions
--- a/assets/mcu/htmx4.html
+++ b/assets/mcu/htmx4.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Typeahead Example with HTMX</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous"
+    />
+    <script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.js"></script>
+    <style>
+      .dropdown-menu {
+        max-height: 200px;
+        overflow-y: auto;
+        width: 100%; /* Ensure the dropdown menu width matches the input width */
+      }
+      .dropdown-menu.show {
+        display: block; /* Ensure the dropdown menu is displayed */
+      }
+      .spinner-border {
+        width: 2rem;
+        height: 2rem;
+      }
+      .badge-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-top: 10px;
+      }
+      .badge-container .badge {
+        margin: 2px;
+      }
+      .badge-container input {
+        border: none;
+        outline: none;
+        flex-grow: 1;
+      }
+      .dropdown-item.active {
+        background-color: #007bff;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container mt-5">
+      <h2>Typeahead Example with HTMX</h2>
+      <input type="text" name="selectedvalue" />
+      <div class="dropdown">
+        <input
+          type="text"
+          id="search-inputx"
+          name="query"
+          placeholder="Search for a state..."
+          hx-get="http://localhost:5000/mcu/proses_obj_search.php"
+          hx-trigger="input changed delay:300ms, focus from:search-inputx"
+          hx-target="#dropdown-menu"
+          hx-indicator="#loading-indicator"
+          aria-haspopup="true"
+          aria-expanded="false"
+          autocomplete="off"
+          hx-include="[name='selectedvalue']"
+          class="form-control"
+        />
+        <div id="loading-indicator" style="display: none">
+          <div class="spinner-border text-primary" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="dropdown-menu" id="dropdown-menu"></div>
+      </div>
+
+      <div class="badge-container form-control">
+        <!-- Badge will be appended here -->
+      </div>
+    </div>
+
+    <script>
+      let selectedItems = [];
+
+      function selectItem(element) {
+        var container = document.querySelector(".badge-container");
+
+        // Get the selected item text and id
+        var itemText = element.textContent;
+        var itemId = element.getAttribute("data-id");
+
+        // Check if the item is already selected
+        if (selectedItems.some((item) => item.id === itemId)) {
+          return;
+        }
+
+        // Add the item to the selected items list
+        selectedItems.push({ id: itemId, name: itemText });
+
+        // Create a badge element
+        var badge = document.createElement("span");
+        badge.className = "badge badge-primary";
+        badge.textContent = itemText;
+
+        // Create a close button
+        var closeBtn = document.createElement("span");
+        closeBtn.className = "badge badge-light ml-1";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.textContent = "×";
+        closeBtn.onclick = function () {
+          container.removeChild(badge);
+          selectedItems = selectedItems.filter((item) => item.id !== itemId);
+          updateQueryParameter();
+        };
+
+        // Append close button to badge
+        badge.appendChild(closeBtn);
+
+        // Append the badge to the container
+        container.appendChild(badge);
+
+        // Clear the input
+        document.getElementById("search-inputx").value = "";
+
+        // Hide dropdown
+        document.getElementById("dropdown-menu").classList.remove("show");
+
+        // Highlight the selected item in the dropdown
+        element.classList.add("selected");
+
+        // Update query parameter
+        updateQueryParameter();
+      }
+
+      function updateQueryParameter() {
+        var selectedValues = selectedItems.map((item) => item.id).join(",");
+        document.querySelector('input[name="selectedvalue"]').value =
+          selectedValues;
+      }
+
+      // Display loading indicator when request is in progress
+      document.body.addEventListener("htmx:configRequest", function (event) {
+        document.getElementById("loading-indicator").style.display = "block";
+      });
+
+      document.body.addEventListener("htmx:afterOnLoad", function (event) {
+        document.getElementById("loading-indicator").style.display = "none";
+        var dropdown = document.getElementById("dropdown-menu");
+        if (dropdown.children.length > 0) {
+          dropdown.classList.add("show");
+          dropdown.focus();
+          var activeItem = dropdown.querySelector(".active");
+          if (activeItem) {
+            dropdown.scrollTop = activeItem.offsetTop - dropdown.offsetTop;
+          }
+        } else {
+          dropdown.classList.remove("show");
+        }
+      });
+
+      // Hide the dropdown when clicking outside
+      document.addEventListener("click", function (event) {
+        var isClickInside =
+          event.target.classList.contains("search-input") ||
+          event.target.classList.contains("badge-container") ||
+          event.target.closest(".badge-container");
+        if (!isClickInside) {
+          document.getElementById("dropdown-menu").classList.remove("show");
+        }
+      });
+
+      // Handle keyboard navigation
+      document
+        .getElementById("search-inputx")
+        .addEventListener("keydown", function (event) {
+          var dropdownMenu = document.getElementById("dropdown-menu");
+          var items = dropdownMenu.querySelectorAll(".dropdown-item");
+          var activeItem = dropdownMenu.querySelector(".active");
+
+          if (event.key === "ArrowDown") {
+            event.preventDefault(); // Prevent page scroll
+            if (!activeItem) {
+              items[0].classList.add("active");
+            } else {
+              activeItem.classList.remove("active");
+              var next = activeItem.nextElementSibling;
+              if (next) {
+                next.classList.add("active");
+              } else {
+                items[0].classList.add("active");
+              }
+            }
+          }
+
+          if (event.key === "ArrowUp") {
+            event.preventDefault(); // Prevent page scroll
+            if (!activeItem) {
+              items[items.length - 1].classList.add("active");
+            } else {
+              activeItem.classList.remove("active");
+              var prev = activeItem.previousElementSibling;
+              if (prev) {
+                prev.classList.add("active");
+              } else {
+                items[items.length - 1].classList.add("active");
+              }
+            }
+          }
+
+          if (event.key === "Enter" && activeItem) {
+            selectItem(activeItem);
+          }
+
+          if (activeItem) {
+            dropdownMenu.scrollTop =
+              activeItem.offsetTop - dropdownMenu.offsetTop;
+          }
+        });
+
+      // Set the input value and hide the dropdown when an item is clicked
+      document.body.addEventListener("click", function (event) {
+        if (event.target.classList.contains("dropdown-item")) {
+          selectItem(event.target);
+        }
+      });
+
+      // Show dropdown when input gets focus and has value
+      document
+        .getElementById("search-inputx")
+        .addEventListener("focus", function (event) {
+          var input = event.target;
+          var dropdown = document.getElementById("dropdown-menu");
+          if (input.value.length > 0) {
+            dropdown.classList.add("show");
+          }
+        });
+    </script>
+  </body>
+</html>
--- a/assets/mcu/proses_obj_search.php
+++ b/assets/mcu/proses_obj_search.php
@@ -0,0 +1,33 @@
+<?php
+header('Content-Type: text/html'); // Set header to indicate HTML response
+
+// Data dummy dengan id dan nama sebagai contoh
+$data = [
+    ["id" => 1, "name" => "Alabama"],
+    ["id" => 2, "name" => "Alaska"],
+    // other data...
+    ["id" => 49, "name" => "Wisconsin"],
+    ["id" => 50, "name" => "Wyoming"],
+];
+
+$query = isset($_GET['query']) ? $_GET['query'] : '';
+$selected = isset($_GET['selectedvalue']) ? explode(',', $_GET['selectedvalue']) : [];
+
+if ($query) {
+    $results = array_filter($data, function($item) use ($query, $selected) {
+        // Filter out items that do not match the query and are already selected
+        return stripos($item["name"], $query) !== false && !in_array($item["id"], $selected);
+    });
+} else {
+    $results = [];
+}
+
+// Prepare HTML response
+$html = '';
+foreach ($results as $result) {
+    $html .= '<a class="dropdown-item" href="#" data-id="' . htmlspecialchars($result["id"]) . '" onclick="selectItem(this)">' . htmlspecialchars($result["name"]) . '</a>';
+}
+
+// Return HTML response
+echo $html;
+?>
--- a/go.mod
+++ b/go.mod
@@ -4,18 +4,17 @@ go 1.21.0

 require (
 	github.com/a-h/templ v0.2.663
-	github.com/fsnotify/fsnotify v1.7.0
 	github.com/glebarez/go-sqlite v1.22.0
-	github.com/go-sql-driver/mysql v1.8.1
-	github.com/jmoiron/sqlx v1.4.0
 	github.com/labstack/echo/v4 v4.12.0
-	github.com/spf13/viper v1.18.2
 	golang.org/x/text v0.14.0
 )

 require (
 	filippo.io/edwards25519 v1.1.0 // indirect
+	github.com/fsnotify/fsnotify v1.7.0 // indirect
+	github.com/go-sql-driver/mysql v1.8.1 // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect
+	github.com/jmoiron/sqlx v1.4.0 // indirect
 	github.com/magiconair/properties v1.8.7 // indirect
 	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
@@ -25,6 +24,7 @@ require (
 	github.com/spf13/afero v1.11.0 // indirect
 	github.com/spf13/cast v1.6.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
+	github.com/spf13/viper v1.18.2 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
 	go.uber.org/multierr v1.10.0 // indirect
 	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
@@ -36,7 +36,7 @@ require (
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
 	github.com/google/uuid v1.5.0 // indirect
-	github.com/labstack/gommon v0.4.2
+	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
--- a/go.sum
+++ b/go.sum
@@ -3,13 +3,10 @@ filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4
 github.com/a-h/templ v0.2.663 h1:aa0WMm27InkYHGjimcM7us6hJ6BLhg98ZbfaiDPyjHE=
 github.com/a-h/templ v0.2.663/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
-github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
-github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
-github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
 github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/glebarez/go-sqlite v1.22.0 h1:uAcMJhaA6r3LHMTFgP0SifzgXg46yJkgxqyuyec+ruQ=
@@ -28,36 +25,33 @@ github.com/hashicorp/hcl v1.0.0 h1:0Anlzjpi4vEasTeNFn2mLJgTSwt0+6sfsiTG8qcWGx4=
 github.com/hashicorp/hcl v1.0.0/go.mod h1:E5yfLk+7swimpb2L/Alb/PJmXilQ/rhwaUYs4T20WEQ=
 github.com/jmoiron/sqlx v1.4.0 h1:1PLqN7S1UYp5t4SrVVnt4nUVNemrDAtxlulVe+Qgm3o=
 github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT4JLY=
-github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
-github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
-github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
-github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/labstack/echo/v4 v4.11.3 h1:Upyu3olaqSHkCjs1EJJwQ3WId8b8b1hxbogyommKktM=
+github.com/labstack/echo/v4 v4.11.3/go.mod h1:UcGuQ8V6ZNRmSweBIJkPvGfwCMIlFmiqrPqiEBfPYws=
 github.com/labstack/echo/v4 v4.12.0 h1:IKpw49IMryVB2p1a4dzwlhP1O2Tf2E0Ir/450lH+kI0=
 github.com/labstack/echo/v4 v4.12.0/go.mod h1:UP9Cr2DJXbOK3Kr9ONYzNowSh7HP0aG0ShAyycHSJvM=
+github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
+github.com/labstack/gommon v0.4.0/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
 github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
-github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
 github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/magiconair/properties v1.8.7 h1:IeQXZAiQcpL9mgcAe1Nu6cX9LLw6ExEHKjN0VQdvPDY=
 github.com/magiconair/properties v1.8.7/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
+github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
 github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
 github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/pelletier/go-toml/v2 v2.1.0 h1:FnwAJ4oYMvbT/34k9zzHuZNrhlz48GB3/s6at6/MHO4=
 github.com/pelletier/go-toml/v2 v2.1.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRIccs7FGNTlIRMkT8wgtp5eCXdBlqhYGL6U=
-github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/rogpeppe/go-internal v1.9.0 h1:73kH8U+JUqXU8lRuOHeVHaa/SZPifC7BkcraZVejAe8=
-github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
 github.com/sagikazarmark/locafero v0.4.0 h1:HApY1R9zGo4DBgr7dqsTH/JJxLTTsOt7u6keLGt6kNQ=
 github.com/sagikazarmark/locafero v0.4.0/go.mod h1:Pe1W6UlPYUk/+wc/6KFhbORCfqzgYEpgQ3O5fPuL3H4=
 github.com/sagikazarmark/slog-shim v0.1.0 h1:diDBnUNK9N/354PgrxMywXnAwEr1QZcOr6gto+ugjYE=
@@ -75,6 +69,7 @@ github.com/spf13/viper v1.18.2/go.mod h1:EKmWIqdnk5lOcmR72yw6hS+8OPYcwD0jteitLMV
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
@@ -83,34 +78,43 @@ github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8
 github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
-go.uber.org/goleak v1.3.0/go.mod h1:CoHD4mav9JJNrW/WLlf7HGZPjdw8EucARQHekz1X6bE=
 go.uber.org/multierr v1.10.0 h1:S0h4aNzvfcFsC3dRF1jLoaov7oRaKqRGC/pUEJ2yvPQ=
 go.uber.org/multierr v1.10.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
 go.uber.org/zap v1.27.0 h1:aJMhYGrd5QSmlpLMr2MftRKl7t8J8PTZPA732ud/XR8=
 go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
+golang.org/x/crypto v0.16.0 h1:mMMrFzRSCF0GvB7Ne27XVtVAaXLrPmgPC7/v0tkwHaY=
+golang.org/x/crypto v0.16.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
 golang.org/x/crypto v0.22.0 h1:g1v0xeRhjcugydODzvb3mEM9SQ0HGp9s/nh3COQ/C30=
 golang.org/x/crypto v0.22.0/go.mod h1:vr6Su+7cTlO45qkww3VDJlzDn0ctJvRgYbC2NvXHt+M=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9 h1:GoHiUyI/Tp2nVkLI2mCxVkOjsbSXD66ic0XW0js0R9g=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9/go.mod h1:S2oDrQGGwySpoQPVqRShND87VCbxmc6bL1Yd2oYrm6k=
+golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
+golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
 golang.org/x/net v0.24.0 h1:1PcaxkF854Fu3+lvBIx5SYn9wRlBzzcnHZSiaFFAb0w=
 golang.org/x/net v0.24.0/go.mod h1:2Q7sJY5mzlzWjKtYUEXSlBWCdyaioyXzRB2RtU8KVE8=
+golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
+golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
 golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/time v0.3.0 h1:rg5rLMjNzMS1RkNLzCG38eapWhnYLFYXDXj2gOlr8j4=
+golang.org/x/time v0.3.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
 golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15 h1:YR8cESwS4TdDjEe65xsg0ogRM/Nc3DYOhEAlW+xobZo=
-gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/ini.v1 v1.67.0 h1:Dgnx+6+nfE+IfzjUEISNeydPJh9AXNNsWbGP9KzCsOA=
 gopkg.in/ini.v1 v1.67.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 modernc.org/libc v1.37.6 h1:orZH3c5wmhIQFTXF+Nt+eeauyd+ZIt2BX6ARe+kD+aw=
--- a/handlers/dev/groupresult.handlers.go
+++ b/handlers/dev/groupresult.handlers.go
@@ -411,9 +411,10 @@ func (lh *GroupResultHandler) HandlerShowGroupResultV1(c echo.Context) error {
 		Link:        "/dev/groupresult/delete",
 		HxTarget:    "#" + dialogdeleteBodyID,
 		HxSwap:      "outerHTML",
-		HxInclude:   "#tableID, #paginationID, #searchID,#dialogDeleteBodyID, #dialogDeleteID, #" + searchID + ", #currpage" + paginationID,
-		ModalID:     dialogdeleteID,
-		ModalTitle:  "Delete-User Group",
+		// HxInclude:   "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogDeleteID, #" + searchID + ", #currpage" + paginationID,
+		HxInclude:  "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogDeleteID, #" + searchID + ", #currpage" + paginationID + ", #dialogEditBodyID, #dialogEditID",
+		ModalID:    dialogdeleteID,
+		ModalTitle: "Delete-User Group",
 		DialogBody: groupresult.DeleteConfirmationBody(
 			models.CustomTextFieldv2Prm{Type: "hidden", Value: "0", Name: "groupresultid"},
 			dialogdeleteBodyID, "Apakah anda yakin menghapus user group berikut ?",
@@ -1249,6 +1250,7 @@ func (lh *GroupResultHandler) HandleDeleteForm(c echo.Context) error {
 	id := c.QueryParam("id")
 	dialogDeleteID := c.QueryParam("dialogDeleteID")
 	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+
 	dataGroupList, err := lh.GroupResultService.GetGroupResultByIDV1(id)
 	if err != nil {
 		// test := mastermenuusergrouptryandy.DialogNewBody(code, name, "", "Name cannot empty")
@@ -1263,7 +1265,6 @@ func (lh *GroupResultHandler) HandleDeleteForm(c echo.Context) error {
 			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
 			test})
 		return coba
-
 	}

 	form := groupresult.DeleteConfirmationBody(
--- a/handlers/dev/md.samplestation.handlers.go
+++ b/handlers/dev/md.samplestation.handlers.go
@@ -1,141 +0,0 @@
-package dev_handlers
-
-import (
-	breadcrumbadmin "cpone/component/breadcrumbadmin"
-	navbarmenu "cpone/component/navbar"
-	"cpone/component/pagination"
-	sidebaruserprofile "cpone/component/sidebar_user_profile"
-	"cpone/models"
-	"cpone/services"
-	"cpone/utils"
-	dev_mdsamplestationview "cpone/views/dev/mdsamplestation"
-	"fmt"
-	"strconv"
-
-	"github.com/a-h/templ"
-	"github.com/labstack/echo/v4"
-	"go.uber.org/zap"
-)
-
-type MDSampleStationServices interface {
-	GetMDSampleStationBreadcrumb() (models.BreadCrumbV1, error)
-	GetListSampleStation(search string, currentPage int, rowPerPage int) ([]models.MDSampleStation, int, error)
-}
-
-func NewMDSampleStationHandler(ss MDSampleStationServices) *MDSampleStationHandler {
-	return &MDSampleStationHandler{
-		MDSampleStationServices: ss,
-	}
-}
-
-type MDSampleStationHandler struct {
-	MDSampleStationServices MDSampleStationServices
-}
-
-func (mdss *MDSampleStationHandler) HandleShowMDSampleStationScreen(c echo.Context) error {
-	logger, _ := zap.NewProduction()
-	title := "Master Sample Station"
-
-	tableID := utils.GenerateRandomID("tableID")
-	paginationID := utils.GenerateRandomID("paginationID")
-	dialogAddID := utils.GenerateRandomID("dialogAddID")
-	// dialogEditID := utils.GenerateRandomID("dialogEditID")
-	// dialogEditBodyID := utils.GenerateRandomID("dialogEditBodyID")
-	// dialogDeleteID := utils.GenerateRandomID("dialogDeleteID")
-	// dialogDeleteBodyID := utils.GenerateRandomID("dialogDeleteBodyID")
-
-	dataMenu, err := services.GetMenu()
-	if err != nil {
-		return err
-	}
-
-	dataUser, err := services.GetUserLogin()
-	if err != nil {
-		return err
-	}
-	defer logger.Sync()
-	logger.Info("ERROR LOAD DEV", zap.Any("data", dataUser))
-
-	dataBreadcrumb, err := mdss.MDSampleStationServices.GetMDSampleStationBreadcrumb()
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR BREADCRUMB DEV", zap.Any("error", err))
-		return err
-	}
-	navbarmenuComp := navbarmenu.NavbarMenu(dataMenu)
-	navbaruserComp := navbarmenu.Navbar(dataUser)
-	breadcrumbComp := breadcrumbadmin.MainBreadcrumbAdminV1(dataBreadcrumb)
-	sidebaruserprofilceComp := sidebaruserprofile.Navbaruserprofile(dataUser)
-
-	// table content
-	dataTable, totalPage, err := mdss.MDSampleStationServices.GetListSampleStation("", 1, 5)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR GET LIST SAMPLE STATION", zap.Any("error", err))
-		return err
-	}
-	fmt.Println("data sample station", dataTable)
-
-	tableComponent := dev_mdsamplestationview.TableSampleStation(dataTable, tableID)
-
-	// pagination table
-	paginationTable := pagination.PaginationV2(
-		totalPage,
-		1,
-		"/dev/md/samplestation/changepage",
-		paginationID,
-		"#tableID, #paginationID",
-		"#"+paginationID,
-		"outerHTML", "", "",
-	)
-
-	content := dev_mdsamplestationview.ContentMDSampleStation(
-		tableID,
-		dialogAddID,
-		paginationID,
-		breadcrumbComp,
-		tableComponent,
-		paginationTable,
-	)
-	css := dev_mdsamplestationview.CSSMDSampleStation()
-	js := dev_mdsamplestationview.JSMDSampleStation()
-
-	view := dev_mdsamplestationview.ShowMDSampleStation(title, content, css, js, navbarmenuComp, navbaruserComp, sidebaruserprofilceComp)
-	return utils.View(c, view)
-}
-
-func (mdss *MDSampleStationHandler) HandleChangePageSampleStation(c echo.Context) error {
-	pageparam := c.QueryParam("page")
-	tableID := c.QueryParam("tableID")
-	paginationID := c.QueryParam("paginationID")
-
-	var retval []templ.Component
-	logger, _ := zap.NewProduction()
-	page, err := strconv.Atoi(pageparam)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR CONVERT PAGE PARAM", zap.Any("page", page), zap.Any("error", err))
-		return err
-	}
-
-	dataSS, totalPage, err := mdss.MDSampleStationServices.GetListSampleStation("", page, 5)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR GET DATA", zap.Any("error", err))
-		return err
-	}
-
-	tableComp := dev_mdsamplestationview.TableSampleStation(dataSS, tableID)
-	paginationComp := pagination.PaginationV2(
-		totalPage,
-		page,
-		"/dev/md/samplestation/changepage",
-		paginationID,
-		"#tableID, #paginationID",
-		"#"+paginationID,
-		"outerHTML", "", "")
-
-	retval = append(retval, tableComp)
-	retval = append(retval, paginationComp)
-	return utils.ViewMulti(c, retval)
-}
--- a/handlers/dev/xsampleautocomplete.handlers.go
+++ b/handlers/dev/xsampleautocomplete.handlers.go
@@ -0,0 +1,74 @@
+package dev_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	dev_xsampleautocomplete "cpone/views/dev/xsampleautocomplete"
+	"fmt"
+
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type XSampleAutoCompleteServices interface {
+	GetListT_Test(search string, selectedIdxArr string) ([]models.XsampleT_Test, []models.XsampleT_Test, error)
+}
+
+func NewXSampleAutoCompleteHandler(us XSampleAutoCompleteServices) *XSampleAutoCompleteHandler {
+	return &XSampleAutoCompleteHandler{
+		XSampleAutoCompleteServices: us,
+	}
+}
+
+type XSampleAutoCompleteHandler struct {
+	XSampleAutoCompleteServices XSampleAutoCompleteServices
+}
+
+// INITIAL
+func (lh *XSampleAutoCompleteHandler) HandleShowXSampleAutoComplete(c echo.Context) error {
+	// logger, _ := zap.NewProduction()
+	// dataList, dataSelected, err := lh.XSampleAutoCompleteServices.GetListT_Test("", "")
+
+	// if err != nil {
+	// 	defer logger.Sync()
+	// 	logger.Info("ERROR GET GROUP RESULT",
+	// 		zap.Any("error", err),
+	// 	)
+	// 	fmt.Println(dataList)
+	// 	fmt.Println(dataSelected)
+	// 	return err
+	// }
+
+	view := dev_xsampleautocomplete.ShowXSampleScreen("AutoComplete",
+		dev_xsampleautocomplete.MainAutoComplete(),
+		dev_xsampleautocomplete.CssXsampleAutoComplete(),
+		dev_xsampleautocomplete.TemplJsAutoComplete(),
+		dev_xsampleautocomplete.EmptyDiv1(),
+		dev_xsampleautocomplete.EmptyDiv1(),
+		dev_xsampleautocomplete.EmptyDiv1())
+	return utils.View(c, view)
+}
+
+// PROSES SEARCH
+func (lh *XSampleAutoCompleteHandler) HandleSearchAutoComplete(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	query := c.QueryParam("query")
+	selectedValue := c.QueryParam("selectedvalue")
+
+	dataList, dataSelected, err := lh.XSampleAutoCompleteServices.GetListT_Test(query, selectedValue)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET GROUP RESULT",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataList)
+		fmt.Println(dataSelected)
+		return err
+	}
+
+	view := dev_xsampleautocomplete.ListData(dataList)
+
+	return utils.View(c, view)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -232,22 +232,6 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	// clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
 	// clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)

-	// group result
-	devGRServices := dev_services.NewServicesGroupResult(appStore)
-	devGRhandlers := dev_handlers.NewGroupResultHandler(devGRServices)
-	dev.GET("/groupresult", devGRhandlers.HandlerShowGroupResultV1)
-	dev.GET("/searchgroupresultv1", devGRhandlers.HandlerShowGroupResultSearchV1)
-	dev.GET("/groupresultv1pagination", devGRhandlers.HandlerShowGroupResultPaginationV1)
-	dev.POST("/groupresulthandlecloseform", devGRhandlers.HandleCloseForm)
-	dev.POST("/groupresulthandlecloseformedit", devGRhandlers.HandleCloseFormEdit)
-	dev.GET("/groupresultshoweditform", devGRhandlers.HandleEditForm)
-	dev.GET("/groupresultshowdeleteform", devGRhandlers.HandleDeleteForm)
-	// dev.GET("/groupresultshowdeleteform", devGRhandlers.HandleDeleteForm)
-	// form add
-	dev.POST("/groupresult/add", devGRhandlers.AddGroupResult)
-	dev.POST("/groupresult/edit", devGRhandlers.EditGroupResult)
-	dev.POST("/groupresult/delete", devGRhandlers.DeleteGroupResult)
-
 	//New User Group
 	devMdUserGroupServices := dev_services.NewMdUserGroupServices(appStore)
 	devMdUserGroupHandlers := dev_handlers.NewMdUserGroupHandler(devMdUserGroupServices)
@@ -278,11 +262,6 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	dev.POST("/groupresult/add", devGRhandlers.AddGroupResult)
 	dev.POST("/groupresult/edit", devGRhandlers.EditGroupResult)
 	dev.POST("/groupresult/delete", devGRhandlers.DeleteGroupResult)
-	// md sample station
-	devMDSampleStationServices := dev_services.NewMDSampleStationServices(appStore)
-	devMDSampleStationHandlers := dev_handlers.NewMDSampleStationHandler(devMDSampleStationServices)
-	dev.GET("/md/samplestation", devMDSampleStationHandlers.HandleShowMDSampleStationScreen)
-	dev.GET("/md/samplestation/changepage", devMDSampleStationHandlers.HandleChangePageSampleStation)
 	// masterdata nat unit
 	devMdNatUnitServices := dev_services.NewMdNatUnitServices(appStore)
 	devMdNatUnitHandlers := dev_handlers.NeWMdNatUnitHandler(devMdNatUnitServices)
@@ -312,4 +291,10 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	dev.GET("/md/groupresultv2/opendelete", devMdGRhandlers.HandleOpenDeleteForm)
 	dev.POST("/md/groupresultv2/closedeleteform", devMdGRhandlers.HandleCloseFormDelete)
 	dev.POST("/md/groupresultv2/delete", devMdGRhandlers.HandleDeleteUserGroup)
+
+	// autocomplete
+	devAutoServices := dev_services.NewServicesXSampleAutoComplete(appStore)
+	devAutohandlers := dev_handlers.NewXSampleAutoCompleteHandler(devAutoServices)
+	dev.GET("/autocompletev1", devAutohandlers.HandleShowXSampleAutoComplete)
+	dev.GET("/searchautocompletev1", devAutohandlers.HandleSearchAutoComplete)
 }
--- a/models/samplestation.models.go
+++ b/models/samplestation.models.go
@@ -1,10 +0,0 @@
-package models
-
-type MDSampleStation struct {
-	T_SampleStationID          int    `db:"T_SampleStationID"`
-	T_SampleStationCode        string `db:"T_SampleStationCode"`
-	T_SampleStationName        string `db:"T_SampleStationName"`
-	T_SampleStationNat_GroupID string `db:"T_SampleStationNat_GroupID"`
-	T_SampleStationIsNonLab    string `db:"T_SampleStationIsNonLab"`
-	T_SampleStationIsActive    string `db:"T_SampleStationIsActive"`
-}
--- a/models/xsampleautocomplete.models.go
+++ b/models/xsampleautocomplete.models.go
@@ -0,0 +1,7 @@
+package models
+
+type XsampleT_Test struct {
+	T_TestID   int    `db:"T_TestID"`
+	T_TestCode string `db:"T_TestCode"`
+	T_TestName string `db:"T_TestName"`
+}
--- a/services/app.services.go
+++ b/services/app.services.go
@@ -514,7 +514,3 @@ func GetUserLogin() (models.User, error) {
 	}
 	return a, nil
 }
-
-func GetTerminology(code string, codeSystem string) {
-
-}
--- a/services/dev/md.samplestation.services.go
+++ b/services/dev/md.samplestation.services.go
@@ -1,88 +0,0 @@
-package dev_services
-
-import (
-	"cpone/db"
-	"cpone/models"
-	dbx "cpone/package/database"
-	"fmt"
-	"math"
-	"strings"
-)
-
-func NewMDSampleStationServices(uStore db.AppStore) *MDSampleStationServices {
-	return &MDSampleStationServices{
-		MDSampleStationStore: uStore,
-	}
-}
-
-type MDSampleStationServices struct {
-	MDSampleStationStore db.AppStore
-}
-
-func (ss *MDSampleStationServices) GetMDSampleStationBreadcrumb() (models.BreadCrumbV1, error) {
-	var ret models.BreadCrumbV1
-
-	Breadcrumb := models.BreadCrumbV1{
-		Title: "Master Sample Station",
-		Item: []models.ItemBreadCrumbV1{
-			{
-				Item: "Dashboard",
-				Url:  "/dev/dashboard",
-			},
-			{
-				Item: "Master",
-				Url:  "/dev/master",
-			},
-			{
-				Item: "Sample Stasion",
-				Url:  "",
-			},
-		},
-	}
-
-	ret = Breadcrumb
-	return ret, nil
-}
-
-func (ss *MDSampleStationServices) GetListSampleStation(search string, currentPage int, rowPerPage int) ([]models.MDSampleStation, int, error) {
-	var sampleStationList []models.MDSampleStation
-	var totalData int
-
-	offset := (currentPage - 1) * rowPerPage
-	prm := "%" + strings.TrimSpace(search) + "%"
-	querytotal := `
-	SELECT COUNT(*)
-	FROM t_samplestation 
-	WHERE T_SampleStationIsActive = 'Y' AND (T_SampleStationCode LIKE ? OR T_SampleStationName LIKE ?)
-	`
-	if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm); err != nil {
-		return nil, 0, fmt.Errorf("error query get total data: %v", err)
-	}
-
-	query := `
-	SELECT
-	T_SampleStationID,
-	T_SampleStationCode,
-	T_SampleStationName,
-	T_SampleStationNat_GroupID,
-	T_SampleStationIsNonLab,
-	T_SampleStationIsActive
-	FROM t_samplestation
-	WHERE T_SampleStationIsActive = 'Y'
-	AND (T_SampleStationCode LIKE ? OR T_SampleStationName LIKE ?)
-	ORDER BY T_SampleStationID ASC
-	LIMIT ? OFFSET ?
-	`
-	if err := dbx.Handlex.Select(&sampleStationList, query, prm, prm, rowPerPage, offset); err != nil {
-		return nil, 0, fmt.Errorf("error query database: %v", err)
-	}
-	totalPage := int(math.Ceil(float64(totalData) / float64(rowPerPage)))
-
-	for _, d := range sampleStationList {
-		if len(d.T_SampleStationIsNonLab) == 0 {
-			d.T_SampleStationIsNonLab = "Lab"
-		}
-	}
-
-	return sampleStationList, totalPage, nil
-}
--- a/services/dev/xsampleautocomplete.services.go
+++ b/services/dev/xsampleautocomplete.services.go
@@ -0,0 +1,86 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"strings"
+
+	"go.uber.org/zap"
+)
+
+func NewServicesXSampleAutoComplete(uStore db.AppStore) *ServicesXSampleAutoComplete {
+
+	return &ServicesXSampleAutoComplete{
+		XSampleAutoCompleteStore: uStore,
+	}
+}
+
+type ServicesXSampleAutoComplete struct {
+	XSampleAutoCompleteStore db.AppStore
+}
+
+// LIST T_Test plus search
+func (su *ServicesXSampleAutoComplete) GetListT_Test(search string, selectedIdxArr string) ([]models.XsampleT_Test, []models.XsampleT_Test, error) {
+	var dataList []models.XsampleT_Test
+	var dataListSelected []models.XsampleT_Test
+	// var dataListNew []models.XsampleT_Test
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	prm := "%" + strings.TrimSpace(search) + "%"
+
+	// Check if selectedIdxArr is not empty
+	if len(selectedIdxArr) > 0 {
+		qrySelected := fmt.Sprintf(`
+			SELECT T_TestID, T_TestCode, T_TestName
+			FROM t_test
+			WHERE T_TestIsActive = 'Y'
+			AND T_TestID IN (%s)
+			LIMIT 0, 50
+		`, selectedIdxArr)
+
+		err := dbx.Handlex.Select(&dataListSelected, qrySelected)
+		if err != nil {
+			return nil, nil, fmt.Errorf("error querying database: %v", err)
+		}
+
+		qryListX := fmt.Sprintf(`SELECT T_TestID, T_TestCode, T_TestName
+		FROM t_test
+		WHERE T_TestIsActive = 'Y'
+		AND (T_TestCode LIKE ? OR T_TestName LIKE ?) 
+		AND T_TestID NOT IN (%s)
+		LIMIT 0, 50
+		`, selectedIdxArr)
+
+		logger.Info("QUERY SEARCH INITIAL TOTAL COUNT",
+			zap.String("query search", qryListX),
+		)
+
+		errx := dbx.Handlex.Select(&dataList, qryListX, prm, prm)
+		if errx != nil {
+			return nil, nil, fmt.Errorf("error querying database: %v", err)
+		}
+	} else {
+		qryList := `
+		SELECT T_TestID, T_TestCode, T_TestName
+		FROM t_test
+		WHERE T_TestIsActive = 'Y'
+		AND (T_TestCode LIKE ? OR T_TestName LIKE ?) 
+		LIMIT 0, 50
+	`
+
+		logger.Info("QUERY SEARCH INITIAL TOTAL COUNT",
+			zap.String("query search", qryList),
+		)
+
+		err := dbx.Handlex.Select(&dataList, qryList, prm, prm)
+		if err != nil {
+			return nil, nil, fmt.Errorf("error querying database: %v", err)
+		}
+	}
+
+	return dataList, dataListSelected, nil
+}
--- a/views/dev/mdsamplestation/mdsamplestation.templ
+++ b/views/dev/mdsamplestation/mdsamplestation.templ
@@ -1,101 +0,0 @@
-package dev_mdsamplestationview
-
-import (
-    "cpone/layout"
-	"cpone/component/customtextfield"
-	"cpone/models"
-)
-
-templ ContentMDSampleStation(
-    tableID string,
-    dialogAddID string,
-    paginationID string,
-    breadcrumb templ.Component,
-    tablecontent templ.Component,
-    paginationtable templ.Component,
-) {
-    <div class="container-fluid">
-        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
-            Name: "tableID",
-            Type: "hidden",
-            Value: tableID})
-        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
-            Name: "paginationID",
-            Type: "hidden",
-            Value: paginationID})
-        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
-            Name: "dialogAddID",
-            Type: "hidden",
-            Value: dialogAddID})
-        <div class="row align-item-center mb-10">
-            <div class="col-md-10 col-sm-12 p-0">
-                @breadcrumb
-            </div>
-            <div class="col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none">
-                <div class="d-flex justify-content-end">
-                    <button 
-                        type="button" 
-                        class="btn btn-primary" 
-                        data-toggle="modal" 
-                        data-target={ "#" + dialogAddID }>Add New</button>
-                </div>
-            </div>
-            <div class="col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5">
-                <button 
-                    type="button" 
-                    class="btn btn-primary btn-block"
-                    data-toggle="modal"
-                    data-target={ "#" + dialogAddID }>Add New</button>
-            </div>
-        </div>
-        @tablecontent
-        @paginationtable
-    </div>
-}
-
-templ CSSMDSampleStation() {
-    <linl
-        rel="stylesheet"
-        href="assets/css/googlefont/poppins.css"
-    />
-    <link 
-        rel="stylesheet"
-        href="assets/css/googlefont/publicsans.css"
-    />
-    <link 
-        rel="stylesheet"
-        href="assets/css/googlefont/roboto.css"
-    />
-    <style>
-        body {
-            background-color: white;
-        }
-        #div-chart {
-            margin: 40px 10vw 40px 10vw;
-        }
-        .title {
-            font-size: 20px;
-            font-weight: bold;
-        }
-        #title {
-            font-weight: 600;
-        }
-    </style>
-}
-
-templ JSMDSampleStation() {
-
-}
-
-templ ShowMDSampleStation(
-    title string, 
-    cmp templ.Component, 
-    css templ.Component, 
-    js templ.Component,
-    navbarmenu templ.Component,
-    navbaruser templ.Component,
-    userprofile templ.Component) {
-        @layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
-            @cmp
-        }
-}
--- a/views/dev/mdsamplestation/mdsamplestation_templ.go
+++ b/views/dev/mdsamplestation/mdsamplestation_templ.go
@@ -1,209 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.663
-package dev_mdsamplestationview
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import "context"
-import "io"
-import "bytes"
-
-import (
-	"cpone/component/customtextfield"
-	"cpone/layout"
-	"cpone/models"
-)
-
-func ContentMDSampleStation(
-	tableID string,
-	dialogAddID string,
-	paginationID string,
-	breadcrumb templ.Component,
-	tablecontent templ.Component,
-	paginationtable templ.Component,
-) templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
-			Name:  "tableID",
-			Type:  "hidden",
-			Value: tableID}).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
-			Name:  "paginationID",
-			Type:  "hidden",
-			Value: paginationID}).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
-			Name:  "dialogAddID",
-			Type:  "hidden",
-			Value: dialogAddID}).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row align-item-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = breadcrumb.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none\"><div class=\"d-flex justify-content-end\"><button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdsamplestation\mdsamplestation.templ`, Line: 40, Col: 55}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div><div class=\"col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5\"><button type=\"button\" class=\"btn btn-primary btn-block\" data-toggle=\"modal\" data-target=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdsamplestation\mdsamplestation.templ`, Line: 48, Col: 51}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = tablecontent.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = paginationtable.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func CSSMDSampleStation() templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<linl rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"></linl><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n        body {\r\n            background-color: white;\r\n        }\r\n        #div-chart {\r\n            margin: 40px 10vw 40px 10vw;\r\n        }\r\n        .title {\r\n            font-size: 20px;\r\n            font-weight: bold;\r\n        }\r\n        #title {\r\n            font-weight: 600;\r\n        }\r\n    </style>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func JSMDSampleStation() templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var5 == nil {
-			templ_7745c5c3_Var5 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func ShowMDSampleStation(
-	title string,
-	cmp templ.Component,
-	css templ.Component,
-	js templ.Component,
-	navbarmenu templ.Component,
-	navbaruser templ.Component,
-	userprofile templ.Component) templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var6 == nil {
-			templ_7745c5c3_Var6 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var7 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-			if !templ_7745c5c3_IsBuffer {
-				templ_7745c5c3_Buffer = templ.GetBuffer()
-				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-			}
-			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if !templ_7745c5c3_IsBuffer {
-				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
-			}
-			return templ_7745c5c3_Err
-		})
-		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var7), templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
--- a/views/dev/mdsamplestation/mdsamplestationtable.templ
+++ b/views/dev/mdsamplestation/mdsamplestationtable.templ
@@ -1,51 +0,0 @@
-package dev_mdsamplestationview
-
-import "cpone/models"
-import "cpone/component/table"
-
-templ TableSampleStation(data []models.MDSampleStation, tableID string) {
-    <div id={ tableID } hx-swab-oob="true">
-        @tablecomponent.TableV3([]string{"KODE", "NAMA STATION", "GROUP", "AKSI"},
-            []string{"20%", "30%", "30%", "20%"},
-            ItemRow(data))
-    </div>
-}
-
-templ ItemRow(data []models.MDSampleStation) {
-    if len(data) == 0 {
-        <tr>
-            <td colspan="4" class="text-center">Data Tidak Ditemukan</td>
-        </tr>
-    }
-    for _, v := range data {
-        <tr>
-            <td>{ v.T_SampleStationCode }</td>
-            <td>{ v.T_SampleStationName }</td>
-            <td>{ v.T_SampleStationIsNonLab }</td>
-            <td>
-                @ItemAction()
-            </td>
-        </tr>
-    }
-}
-
-templ ItemAction() {
-    <div class="row px-5 d-flex justify-content-around">
-        <a 
-            id="btneditss"
-            type="button"
-            class="btneditss col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
-            hx-get=""
-            hx-target=""
-            hx-swap=""
-            hx-include="">Edit</a>
-        <a 
-            id="btndeletess"
-            type="button"
-            class="btndeletess col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
-            hx-get=""
-            hx-target=""
-            hx-swap=""
-            hx-include="">Hapus</a>
-    </div>
-}
--- a/views/dev/mdsamplestation/mdsamplestationtable_templ.go
+++ b/views/dev/mdsamplestation/mdsamplestationtable_templ.go
@@ -1,164 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.663
-package dev_mdsamplestationview
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import "context"
-import "io"
-import "bytes"
-
-import "cpone/models"
-import "cpone/component/table"
-
-func TableSampleStation(data []models.MDSampleStation, tableID string) templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(tableID)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdsamplestation\mdsamplestationtable.templ`, Line: 7, Col: 21}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swab-oob=\"true\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"KODE", "NAMA STATION", "GROUP", "AKSI"},
-			[]string{"20%", "30%", "30%", "20%"},
-			ItemRow(data)).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func ItemRow(data []models.MDSampleStation) templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var3 == nil {
-			templ_7745c5c3_Var3 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		if len(data) == 0 {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td colspan=\"4\" class=\"text-center\">Data Tidak Ditemukan</td></tr>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		for _, v := range data {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.T_SampleStationCode)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdsamplestation\mdsamplestationtable.templ`, Line: 22, Col: 39}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v.T_SampleStationName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdsamplestation\mdsamplestationtable.templ`, Line: 23, Col: 39}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v.T_SampleStationIsNonLab)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdsamplestation\mdsamplestationtable.templ`, Line: 24, Col: 43}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = ItemAction().Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td></tr>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func ItemAction() templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var7 == nil {
-			templ_7745c5c3_Var7 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\"><a id=\"btneditss\" type=\"button\" class=\"btneditss col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\" hx-get=\"\" hx-target=\"\" hx-swap=\"\" hx-include=\"\">Edit</a> <a id=\"btndeletess\" type=\"button\" class=\"btndeletess col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2\" hx-get=\"\" hx-target=\"\" hx-swap=\"\" hx-include=\"\">Hapus</a></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
--- a/views/dev/mdusergroup/mdusergroup_templ.go
+++ b/views/dev/mdusergroup/mdusergroup_templ.go
@@ -127,11 +127,7 @@ func MdUserGroupScreen(
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
 		if templ_7745c5c3_Err != nil {
-<<<<<<< HEAD
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 74, Col: 37}
-=======
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 52, Col: 37}
->>>>>>> 3afd212 (add sample station handler, services, model)
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -144,11 +140,7 @@ func MdUserGroupScreen(
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
 		if templ_7745c5c3_Err != nil {
-<<<<<<< HEAD
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 83, Col: 36}
-=======
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 61, Col: 36}
->>>>>>> 3afd212 (add sample station handler, services, model)
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
--- a/views/dev/xsampleautocomplete/xsampleautocomplete.templ
+++ b/views/dev/xsampleautocomplete/xsampleautocomplete.templ
@@ -0,0 +1,280 @@
+package dev_xsampleautocomplete
+
+import (
+	"cpone/layout"
+	"cpone/models"
+	"strconv"
+)
+
+templ EmptyDiv1() {
+	<div></div>
+}
+
+templ Selected(data []models.XsampleT_Test) {
+	if len(data) > 0 {
+		for _, v := range data {
+			<span class="badge badge-primary">
+				{ v.T_TestCode } - { v.T_TestName }
+				<span class="badge badge-light ml-1" style="cursor: pointer;">×</span>
+			</span>
+		}
+	}
+}
+
+templ ListData(dataList []models.XsampleT_Test) {
+	if len(dataList) > 0 {
+		<div class="dropdown-menu show" id="dropdown-menu" hx-swap-oob="true">
+			for _, v := range dataList {
+				<a class="dropdown-item" data-id={ strconv.Itoa(v.T_TestID) } onclick="selectItem(this)">{ v.T_TestCode } - { v.T_TestName }</a>
+			}
+		</div>
+	} else {
+		<div class="dropdown-menu" id="dropdown-menu" hx-swap-oob="true">
+			<a class="dropdown-item" data-id="" onclick="">Tidak Ada Data</a>
+		</div>
+	}
+}
+
+templ MainAutoComplete() {
+	<div class="container mt-5">
+		<h2>Typeahead Example with HTMX</h2>
+		<input type="text" name="selectedvalue"/>
+		<div class="dropdown">
+			<input
+				type="text"
+				id="search-inputx"
+				name="query"
+				placeholder="Search for a state..."
+				hx-get="/dev/searchautocompletev1"
+				hx-trigger="input changed delay:300ms, focus from:search-inputx"
+				hx-target="#dropdown-menu"
+				hx-indicator="#loading-indicator"
+				aria-haspopup="true"
+				aria-expanded="false"
+				autocomplete="off"
+				hx-include="[name='selectedvalue']"
+				class="form-control"
+			/>
+			<div id="loading-indicator" style="display:none;">
+				<div class="spinner-border text-primary" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+			<div class="dropdown-menu" id="dropdown-menu"></div>
+		</div>
+		<div class="badge-container form-control"></div>
+	</div>
+	@JsCustomAutoComplete()
+}
+
+templ TemplJsAutoComplete() {
+}
+
+script JsCustomAutoComplete() {
+    let selectedItems = [];
+
+    function selectItem(element) {
+        var container = document.querySelector('.badge-container');
+
+        // Get the selected item text and id
+        var itemText = element.textContent;
+        var itemId = element.getAttribute('data-id');
+
+        // Check if the item is already selected
+        if (selectedItems.some(item => item.id === itemId)) {
+            return;
+        }
+
+        // Add the item to the selected items list
+        selectedItems.push({ id: itemId, name: itemText });
+
+        // Create a badge element
+        var badge = document.createElement('span');
+        badge.className = 'badge badge-primary';
+        badge.textContent = itemText;
+        
+        // Create a close button
+        var closeBtn = document.createElement('span');
+        closeBtn.className = 'badge badge-light ml-1';
+        closeBtn.style.cursor = 'pointer';
+        closeBtn.textContent = '×';
+        closeBtn.onclick = function() {
+            container.removeChild(badge);
+            selectedItems = selectedItems.filter(item => item.id !== itemId);
+            updateQueryParameter();
+        };
+        
+        // Append close button to badge
+        badge.appendChild(closeBtn);
+        
+        // Append the badge to the container
+        container.appendChild(badge);
+        
+        // Clear the input
+        document.getElementById('search-inputx').value = '';
+        
+        // Hide dropdown
+        document.getElementById('dropdown-menu').classList.remove('show');
+
+        // Highlight the selected item in the dropdown
+        element.classList.add('selected');
+
+        // Update query parameter
+        updateQueryParameter();
+    }
+
+    function updateQueryParameter() {
+        var selectedValues = selectedItems.map(item => item.id).join(',');
+        document.querySelector('input[name="selectedvalue"]').value = selectedValues;
+    }
+
+    // Display loading indicator when request is in progress
+    document.body.addEventListener('htmx:configRequest', function(event) {
+        document.getElementById('loading-indicator').style.display = 'block';
+    });
+
+    document.body.addEventListener('htmx:afterOnLoad', function(event) {
+        document.getElementById('loading-indicator').style.display = 'none';
+        var dropdown = document.getElementById('dropdown-menu');
+        if (dropdown.children.length > 0) {
+            dropdown.classList.add('show');
+            dropdown.focus();
+            var activeItem = dropdown.querySelector('.active');
+            if (activeItem) {
+                dropdown.scrollTop = activeItem.offsetTop - dropdown.offsetTop;
+            }
+        } else {
+            dropdown.classList.remove('show');
+        }
+    });
+
+    // Hide the dropdown when clicking outside
+    document.addEventListener('click', function(event) {
+        var isClickInside = event.target.classList.contains('search-input') || event.target.classList.contains('badge-container') || event.target.closest('.badge-container');
+        if (!isClickInside) {
+            document.getElementById('dropdown-menu').classList.remove('show');
+        }
+    });
+
+    // Handle keyboard navigation
+    document.getElementById('search-inputx').addEventListener('keydown', function(event) {
+        var dropdownMenu = document.getElementById('dropdown-menu');
+        var items = dropdownMenu.querySelectorAll('.dropdown-item');
+        var activeItem = dropdownMenu.querySelector('.active');
+
+        if (event.key === 'ArrowDown') {
+            event.preventDefault(); // Prevent page scroll
+            if (!activeItem) {
+                items[0].classList.add('active');
+            } else {
+                activeItem.classList.remove('active');
+                var next = activeItem.nextElementSibling;
+                if (next) {
+                    next.classList.add('active');
+                } else {
+                    items[0].classList.add('active');
+                }
+            }
+        }
+
+        if (event.key === 'ArrowUp') {
+            event.preventDefault(); // Prevent page scroll
+            if (!activeItem) {
+                items[items.length - 1].classList.add('active');
+            } else {
+                activeItem.classList.remove('active');
+                var prev = activeItem.previousElementSibling;
+                if (prev) {
+                    prev.classList.add('active');
+                } else {
+                    items[items.length - 1].classList.add('active');
+                }
+            }
+        }
+
+        if (event.key === 'Enter' && activeItem) {
+            selectItem(activeItem);
+        }
+
+        if (activeItem) {
+            dropdownMenu.scrollTop = activeItem.offsetTop - dropdownMenu.offsetTop;
+        }
+    });
+
+    // Set the input value and hide the dropdown when an item is clicked
+    document.body.addEventListener('click', function(event) {
+        if (event.target.classList.contains('dropdown-item')) {
+            selectItem(event.target);
+        }
+    });
+
+    // Show dropdown when input gets focus and has value
+    document.getElementById('search-inputx').addEventListener('focus', function(event) {
+        var input = event.target;
+        var dropdown = document.getElementById('dropdown-menu');
+        if (input.value.length > 0) {
+            dropdown.classList.add('show');
+        }
+    });
+}
+
+templ CssXsampleAutoComplete() {
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/poppins.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/publicsans.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/roboto.css"
+	/>
+	<style>
+    body {
+      background-color: white;
+      /* padding-right: 100px;
+            padding-left: 100px; */
+    }
+    .dropdown-menu {
+        max-height: 200px;
+        overflow-y: auto;
+        width: 100%; /* Ensure the dropdown menu width matches the input width */
+    }
+    .dropdown-menu.show {
+        display: block; /* Ensure the dropdown menu is displayed */
+    }
+    .spinner-border {
+        width: 2rem;
+        height: 2rem;
+    }
+    .badge-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-top: 10px;
+    }
+    .badge-container .badge {
+        margin: 2px;
+    }
+    .badge-container input {
+        border: none;
+        outline: none;
+        flex-grow: 1;
+    }
+    .dropdown-item.active {
+        background-color: #007bff;
+        color: white;
+    }
+</style>
+}
+
+templ ShowXSampleScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) {
+	@layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
+		@cmp
+	}
+}
--- a/views/dev/xsampleautocomplete/xsampleautocomplete_templ.go
+++ b/views/dev/xsampleautocomplete/xsampleautocomplete_templ.go
@@ -0,0 +1,443 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_xsampleautocomplete
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"cpone/layout"
+	"cpone/models"
+	"strconv"
+)
+
+func EmptyDiv1() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func Selected(data []models.XsampleT_Test) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(data) > 0 {
+			for _, v := range data {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"badge badge-primary\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(v.T_TestCode)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\xsampleautocomplete\xsampleautocomplete.templ`, Line: 17, Col: 18}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" - ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.T_TestName)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\xsampleautocomplete\xsampleautocomplete.templ`, Line: 17, Col: 37}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <span class=\"badge badge-light ml-1\" style=\"cursor: pointer;\">×</span></span>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ListData(dataList []models.XsampleT_Test) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(dataList) > 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"dropdown-menu show\" id=\"dropdown-menu\" hx-swap-oob=\"true\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, v := range dataList {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"dropdown-item\" data-id=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(v.T_TestID))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\xsampleautocomplete\xsampleautocomplete.templ`, Line: 28, Col: 63}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" onclick=\"selectItem(this)\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(v.T_TestCode)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\xsampleautocomplete\xsampleautocomplete.templ`, Line: 28, Col: 107}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" - ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var8 string
+				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(v.T_TestName)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\xsampleautocomplete\xsampleautocomplete.templ`, Line: 28, Col: 126}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"dropdown-menu\" id=\"dropdown-menu\" hx-swap-oob=\"true\"><a class=\"dropdown-item\" data-id=\"\" onclick=\"\">Tidak Ada Data</a></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func MainAutoComplete() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container mt-5\"><h2>Typeahead Example with HTMX</h2><input type=\"text\" name=\"selectedvalue\"><div class=\"dropdown\"><input type=\"text\" id=\"search-inputx\" name=\"query\" placeholder=\"Search for a state...\" hx-get=\"/dev/searchautocompletev1\" hx-trigger=\"input changed delay:300ms, focus from:search-inputx\" hx-target=\"#dropdown-menu\" hx-indicator=\"#loading-indicator\" aria-haspopup=\"true\" aria-expanded=\"false\" autocomplete=\"off\" hx-include=\"[name=&#39;selectedvalue&#39;]\" class=\"form-control\"><div id=\"loading-indicator\" style=\"display:none;\"><div class=\"spinner-border text-primary\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div><div class=\"dropdown-menu\" id=\"dropdown-menu\"></div></div><div class=\"badge-container form-control\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = JsCustomAutoComplete().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func TemplJsAutoComplete() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JsCustomAutoComplete() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsCustomAutoComplete_4b2e`,
+		Function: `function __templ_JsCustomAutoComplete_4b2e(){let selectedItems = [];
+
+    function selectItem(element) {
+        var container = document.querySelector('.badge-container');
+
+        // Get the selected item text and id
+        var itemText = element.textContent;
+        var itemId = element.getAttribute('data-id');
+
+        // Check if the item is already selected
+        if (selectedItems.some(item => item.id === itemId)) {
+            return;
+        }
+
+        // Add the item to the selected items list
+        selectedItems.push({ id: itemId, name: itemText });
+
+        // Create a badge element
+        var badge = document.createElement('span');
+        badge.className = 'badge badge-primary';
+        badge.textContent = itemText;
+        
+        // Create a close button
+        var closeBtn = document.createElement('span');
+        closeBtn.className = 'badge badge-light ml-1';
+        closeBtn.style.cursor = 'pointer';
+        closeBtn.textContent = '×';
+        closeBtn.onclick = function() {
+            container.removeChild(badge);
+            selectedItems = selectedItems.filter(item => item.id !== itemId);
+            updateQueryParameter();
+        };
+        
+        // Append close button to badge
+        badge.appendChild(closeBtn);
+        
+        // Append the badge to the container
+        container.appendChild(badge);
+        
+        // Clear the input
+        document.getElementById('search-inputx').value = '';
+        
+        // Hide dropdown
+        document.getElementById('dropdown-menu').classList.remove('show');
+
+        // Highlight the selected item in the dropdown
+        element.classList.add('selected');
+
+        // Update query parameter
+        updateQueryParameter();
+    }
+
+    function updateQueryParameter() {
+        var selectedValues = selectedItems.map(item => item.id).join(',');
+        document.querySelector('input[name="selectedvalue"]').value = selectedValues;
+    }
+
+    // Display loading indicator when request is in progress
+    document.body.addEventListener('htmx:configRequest', function(event) {
+        document.getElementById('loading-indicator').style.display = 'block';
+    });
+
+    document.body.addEventListener('htmx:afterOnLoad', function(event) {
+        document.getElementById('loading-indicator').style.display = 'none';
+        var dropdown = document.getElementById('dropdown-menu');
+        if (dropdown.children.length > 0) {
+            dropdown.classList.add('show');
+            dropdown.focus();
+            var activeItem = dropdown.querySelector('.active');
+            if (activeItem) {
+                dropdown.scrollTop = activeItem.offsetTop - dropdown.offsetTop;
+            }
+        } else {
+            dropdown.classList.remove('show');
+        }
+    });
+
+    // Hide the dropdown when clicking outside
+    document.addEventListener('click', function(event) {
+        var isClickInside = event.target.classList.contains('search-input') || event.target.classList.contains('badge-container') || event.target.closest('.badge-container');
+        if (!isClickInside) {
+            document.getElementById('dropdown-menu').classList.remove('show');
+        }
+    });
+
+    // Handle keyboard navigation
+    document.getElementById('search-inputx').addEventListener('keydown', function(event) {
+        var dropdownMenu = document.getElementById('dropdown-menu');
+        var items = dropdownMenu.querySelectorAll('.dropdown-item');
+        var activeItem = dropdownMenu.querySelector('.active');
+
+        if (event.key === 'ArrowDown') {
+            event.preventDefault(); // Prevent page scroll
+            if (!activeItem) {
+                items[0].classList.add('active');
+            } else {
+                activeItem.classList.remove('active');
+                var next = activeItem.nextElementSibling;
+                if (next) {
+                    next.classList.add('active');
+                } else {
+                    items[0].classList.add('active');
+                }
+            }
+        }
+
+        if (event.key === 'ArrowUp') {
+            event.preventDefault(); // Prevent page scroll
+            if (!activeItem) {
+                items[items.length - 1].classList.add('active');
+            } else {
+                activeItem.classList.remove('active');
+                var prev = activeItem.previousElementSibling;
+                if (prev) {
+                    prev.classList.add('active');
+                } else {
+                    items[items.length - 1].classList.add('active');
+                }
+            }
+        }
+
+        if (event.key === 'Enter' && activeItem) {
+            selectItem(activeItem);
+        }
+
+        if (activeItem) {
+            dropdownMenu.scrollTop = activeItem.offsetTop - dropdownMenu.offsetTop;
+        }
+    });
+
+    // Set the input value and hide the dropdown when an item is clicked
+    document.body.addEventListener('click', function(event) {
+        if (event.target.classList.contains('dropdown-item')) {
+            selectItem(event.target);
+        }
+    });
+
+    // Show dropdown when input gets focus and has value
+    document.getElementById('search-inputx').addEventListener('focus', function(event) {
+        var input = event.target;
+        var dropdown = document.getElementById('dropdown-menu');
+        if (input.value.length > 0) {
+            dropdown.classList.add('show');
+        }
+    });
+}`,
+		Call:       templ.SafeScript(`__templ_JsCustomAutoComplete_4b2e`),
+		CallInline: templ.SafeScriptInline(`__templ_JsCustomAutoComplete_4b2e`),
+	}
+}
+
+func CssXsampleAutoComplete() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    .dropdown-menu {\r\n        max-height: 200px;\r\n        overflow-y: auto;\r\n        width: 100%; /* Ensure the dropdown menu width matches the input width */\r\n    }\r\n    .dropdown-menu.show {\r\n        display: block; /* Ensure the dropdown menu is displayed */\r\n    }\r\n    .spinner-border {\r\n        width: 2rem;\r\n        height: 2rem;\r\n    }\r\n    .badge-container {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        align-items: center;\r\n        margin-top: 10px;\r\n    }\r\n    .badge-container .badge {\r\n        margin: 2px;\r\n    }\r\n    .badge-container input {\r\n        border: none;\r\n        outline: none;\r\n        flex-grow: 1;\r\n    }\r\n    .dropdown-item.active {\r\n        background-color: #007bff;\r\n        color: white;\r\n    }\r\n</style>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowXSampleScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var13 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var13), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}