step 1 : autocomplete multi select (di hold)

add groupresult into dev folder
Merge branch 'hanan/masterdata-natunit'
2024-05-28 08:11:00 +07:00 · 2024-05-27 18:07:59 +07:00 · 2024-05-27 17:02:11 +07:00 · 2024-05-27 16:44:06 +07:00 · 2024-05-27 14:58:10 +07:00 · 2024-05-27 11:27:07 +07:00
71 changed files with 18942 additions and 115 deletions
--- a/assets/andy/coba.html
+++ b/assets/andy/coba.html
@@ -94,6 +94,48 @@ License: You must have a valid license purchased only from themeforest(the above
  >
    <!--begin::Main-->
    <div class="d-flex flex-column flex-root bg-white">
+      <div
+        id="notification-001"
+        class="toast toast-top-right toas fade show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        hx-swap-oob="true"
+        style="margin-top: 2vh; margin-right: 2vw;"
+      >
+        <div class="toast-header bg-success text-white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            class="iconify iconify--ep mr-2 icon-xl"
+            width="1em"
+            height="1em"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 1024 1024"
+            data-icon="ep:success-filled"
+          >
+            <path
+              fill="currentColor"
+              d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
+            ></path>
+          </svg>
+          <strong class="mr-auto">Success</strong>
+          <small class="text-muted text-white">just now</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="toast-body bg-success-transparent">
+          This is a success toast.
+        </div>
+      </div>
      <!-- begin::Navbar -->
      <div
        class="d-flex flex-lg-row justify-content-between py-5"
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
@@ -59,6 +59,8 @@ SEARCH GROUP CSS KEYWORD "###"
  --dangerbg: #f7c9c9;
  --toscabg: #c9f7f5;
  --fieldbg: #f5f8fa;
+  --labelkartukontrolSudahbg: #e8fff3;
+  --labelkartukontrolBelumbg: #fff8dd;
  /* END BACKGROUND */
  /* TEXT COLOR */
  --text-black: #0e1e28;
@@ -67,6 +69,8 @@ SEARCH GROUP CSS KEYWORD "###"
  --text-header-table: #b5b5c3;
  --header-table-bg: #f3f6f9;
  --active-state: #637381;
+  --textcolorlabelkartukontrolSudah: #50cd89;
+  --textcolorlabelkartukontrolBelum: #f1bc00;
  /* END TEXT COLOR */
  --light: #f3f6f9;
  --dark: #181c32;
@@ -5198,6 +5202,8 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
  z-index: 99999999999 !important;
  width: 350px;
  height: auto;
+  margin-top: 2vh;
+  margin-right: 2vw;
 }

 /* ### TOAST FONT SIZE */
@@ -5205,6 +5211,21 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
  font-size: 1.1rem;
 }

+/* ### KARTU KONTROL CSS */
+.kartukontrol-sudah-label {
+  background-color: var(--labelkartukontrolSudahbg); /*figma*/
+  color: var(--textcolorlabelkartukontrolSudah); /*figma*/
+  padding: 0.15rem 0.75rem;
+  border-radius: 0.42rem;
+}
+
+.kartukontrol-pending-label {
+  background-color: var(--labelkartukontrolBelumbg); /*figma*/
+  color: var(--textcolorlabelkartukontrolBelum); /*figma*/
+  padding: 0.15rem 0.75rem;
+  border-radius: 0.42rem;
+}
+
 /* ### OVERLAY */
 .overlay-loading {
  position: relative !important;
@@ -5274,6 +5295,16 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
 /* ## WARNING */
 /* ## DANGER */

+/* ### HTMX INDICATOR */
+.htmx-indicator {
+  display: none !important;
+}
+.htmx-request .htmx-indicator {
+  display: inline-block !important;
+}
+.htmx-request.htmx-indicator {
+  display: inline-block !important;
+}
 /* ### BUTTON HOVER TEXT */
 /* ###  */
 /* ## PRIMARY */
--- 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/component/customcheckbox/customcheckboxv1.templ
+++ b/component/customcheckbox/customcheckboxv1.templ
@@ -0,0 +1,25 @@
+package customcheckbox
+
+import "cpone/models"
+
+templ MainCustomCheckboxInput(inp models.CustomCheckboxv1Prm) {
+	<div class="form-control bg-field border-0 h-auto">
+		<div class="form-group">
+			<label>{ inp.Label }</label>
+			<div class="checkbox-list">
+				<label class="checkbox">
+					if (inp.Value == "on") {
+						<input type="checkbox" name={ inp.Name } id={ inp.ID } checked/>
+					} else {
+						<input type="checkbox" name={ inp.Name } id={ inp.ID }/>
+					}
+					<span></span>
+					{ inp.Text }
+				</label>
+			</div>
+		</div>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
--- a/component/customcheckbox/customcheckboxv1_templ.go
+++ b/component/customcheckbox/customcheckboxv1_templ.go
@@ -0,0 +1,143 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customcheckbox
+
+//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"
+
+func MainCustomCheckboxInput(inp models.CustomCheckboxv1Prm) 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=\"form-control bg-field border-0 h-auto\"><div class=\"form-group\"><label>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Label)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 8, 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("</label><div class=\"checkbox-list\"><label class=\"checkbox\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if inp.Value == "on" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"checkbox\" name=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 12, Col: 44}
+			}
+			_, 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("\" id=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 12, Col: 58}
+			}
+			_, 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("\" checked> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"checkbox\" name=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 14, Col: 44}
+			}
+			_, 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("\" id=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 14, Col: 58}
+			}
+			_, 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("\"> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span></span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 17, Col: 15}
+		}
+		_, 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("</label></div></div><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 22, Col: 17}
+		}
+		_, 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("</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
+	})
+}
--- a/component/customdropdown/customdropdown.templ
+++ b/component/customdropdown/customdropdown.templ
@@ -0,0 +1,61 @@
+package customdropdown;
+
+import "cpone/models"
+
+templ MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ inp.Name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ inp.ID }
+			hx-get={ inp.HxGet }
+			hx-target={ inp.HxTarget }
+			hx-indicator={ inp.HxIndicator }
+			hx-trigger={ inp.HxTrigger }
+			hx-include={ inp.HxInclude }
+		>
+			@listItem
+		</select>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
+
+templ MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ inp.Name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ inp.ID }
+		>
+			@listItem
+		</select>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
+
+templ MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ id }
+			hx-get={ hxGet }
+			hx-target={ hxTarget }
+			hx-indicator={ hxIndicator }
+			hx-trigger={ hxTrigger }
+			hx-include={ hxInclude }
+		>
+			@listItem
+		</select>
+	</div>
+}
--- a/component/customdropdown/customdropdown_templ.go
+++ b/component/customdropdown/customdropdown_templ.go
@@ -0,0 +1,343 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customdropdown
+
+//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"
+
+func MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem 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=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 8, Col: 18}
+		}
+		_, 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("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 12, Col: 14}
+		}
+		_, 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("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 13, Col: 21}
+		}
+		_, 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("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 14, Col: 27}
+		}
+		_, 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("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 15, Col: 33}
+		}
+		_, 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("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 16, Col: 29}
+		}
+		_, 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("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 17, Col: 29}
+		}
+		_, 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 22, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, 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 MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem 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_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 30, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 34, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		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
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 39, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, 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 MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem 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_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 47, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(id)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 51, Col: 10}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 52, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 53, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 54, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 55, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 56, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		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
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></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/component/customtextfieldsearch/customtextfieldsearch.templ
+++ b/component/customtextfieldsearch/customtextfieldsearch.templ
@@ -83,3 +83,42 @@ templ MainCustomTextFieldSearchV2(
    });
 </script>
 }
+
+templ MainCustomTextFieldSearchV3(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript) {
+	<input
+		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+		type={ inpType }
+		name={ inpName }
+		id={ inpId }
+		placeholder={ inpPlaceHolder }
+		hx-get={ hxGet }
+		hx-trigger={ hxTrigger }
+		hx-target={ hxTarget }
+		hx-indicator={ hxIndicator }
+		value={ value }
+		hx-include={ hxInclude }
+		hx-swap={ hxSwap }
+		hx-on::before-request={ hxBeforeRequest }
+		hx-on::after-request={ hxAfterRequest }
+		autocomplete="off"
+	/>
+	<script>
+    document.body.addEventListener('htmx:targetError', function(event) {
+        console.error('Error updating target element:', event.detail);
+        alert('There was an error updating the target element.');
+    });
+</script>
+}
--- a/component/customtextfieldsearch/customtextfieldsearch_templ.go
+++ b/component/customtextfieldsearch/customtextfieldsearch_templ.go
@@ -486,3 +486,205 @@ func MainCustomTextFieldSearchV2(
 		return templ_7745c5c3_Err
 	})
 }
+
+func MainCustomTextFieldSearchV3(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript) 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_Var33 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var33 == nil {
+			templ_7745c5c3_Var33 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var34 string
+		templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 103, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var35 string
+		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 104, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var36 string
+		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(inpId)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 105, Col: 12}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var37 string
+		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 106, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var38 string
+		templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 107, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var39 string
+		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 108, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var40 string
+		templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 109, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var41 string
+		templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 110, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var42 string
+		templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 111, Col: 15}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var43 string
+		templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 112, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var43))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var44 string
+		templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 113, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var45 templ.ComponentScript = hxBeforeRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var45.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var46 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var46.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\"><script>\r\n    document.body.addEventListener('htmx:targetError', function(event) {\r\n        console.error('Error updating target element:', event.detail);\r\n        alert('There was an error updating the target element.');\r\n    });\r\n</script>")
+		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/component/pagination/paginationv2.templ
+++ b/component/pagination/paginationv2.templ
@@ -27,18 +27,16 @@ templ PaginationV2(length int,
 						hx-trigger="click"
 						hx-target={ hxTarget }
 						hx-include={ hxInclude }
-						hx-disabled-elt=".btneditug, .btndeleteug"
 					>{ strconv.Itoa(i+1) }</a>
 				} else {
 					<a
 						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
-						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
 						hx-swap={ hxSwap }
 						hx-indicator={ hxIndicator }
 						hx-trigger="click"
 						hx-target={ hxTarget }
 						hx-include={ hxInclude }
-						hx-disabled-elt=".btneditug, .btndeleteug"
 					>{ strconv.Itoa(i+1) }</a>
 				}
 			}
--- a/component/pagination/paginationv2_templ.go
+++ b/component/pagination/paginationv2_templ.go
@@ -132,14 +132,14 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-disabled-elt=\".btneditug, .btndeleteug\">")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 31, Col: 25}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 30, Col: 25}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
@@ -157,20 +157,20 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 34, Col: 55}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 33, Col: 55}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\" hx-swap=\"")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug\" hx-swap=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 36, Col: 22}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 35, Col: 22}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -183,7 +183,7 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 37, Col: 32}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 36, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
@@ -196,7 +196,7 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 39, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 38, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
@@ -209,20 +209,20 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 40, Col: 28}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 39, Col: 28}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-disabled-elt=\".btneditug, .btndeleteug\">")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 42, Col: 25}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 40, Col: 25}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
--- a/component/pagination/paginationv3.templ
+++ b/component/pagination/paginationv3.templ
@@ -0,0 +1,60 @@
+package pagination 
+
+import "strconv"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+templ PaginationV3(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+) {
+	// hx-on::before-request={ HideContent(contentID) }
+	// hx-on::after-request="alert('Done making a request!')"
+	<div
+		class="d-flex justify-content-between align-items-center flex-wrap"
+		hx-on::load={ hxAfterRequest }
+		id={ paginationID }
+		hx-swap-oob={ hxSwapOob }
+	>
+		<div class="d-flex flex-wrap py-2 mr-3">
+			for i:=0; i<length; i++ {
+				if (i+1) == currentPage {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
+						hx-swap={ hxSwap }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-on::before-request={ hxBeforeRequest }
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				} else {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
+						hx-swap={ hxSwap }
+						hx-on::before-request={ hxBeforeRequest }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				}
+			}
+		</div>
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)})
+	</div>
+}
--- a/component/pagination/paginationv3_templ.go
+++ b/component/pagination/paginationv3_templ.go
@@ -0,0 +1,300 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package pagination
+
+//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 "strconv"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+func PaginationV3(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+) 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.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-between align-items-center flex-wrap\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(paginationID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 24, Col: 19}
+		}
+		_, 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("\" hx-swap-oob=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapOob)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 25, Col: 25}
+		}
+		_, 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("\"><div class=\"d-flex flex-wrap py-2 mr-3\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i := 0; i < length; i++ {
+			if (i + 1) == currentPage {
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 31, Col: 55}
+				}
+				_, 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("\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 33, Col: 22}
+				}
+				_, 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("\" hx-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 34, Col: 32}
+				}
+				_, 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("\" hx-trigger=\"click\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var8 templ.ComponentScript = hxBeforeRequest
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var9 string
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 37, Col: 26}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 38, Col: 28}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				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_Var11 string
+				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 39, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+				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
+				}
+			} else {
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var12 string
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 42, Col: 55}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var13 string
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 44, Col: 22}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var14 templ.ComponentScript = hxBeforeRequest
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 46, Col: 32}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"click\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var16 string
+				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 48, Col: 26}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var17 string
+				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 49, Col: 28}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+				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_Var18 string
+				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 50, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+				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
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)}).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
+	})
+}
--- a/component/toastbootstrap/customtoastv2.templ
+++ b/component/toastbootstrap/customtoastv2.templ
@@ -13,7 +13,7 @@ func toastBody(typeToastBody string) string {
 }

 func toastIcon(typeToast string) string {
-    var stringx string
+	var stringx string
 	if typeToast == "success" {
 		stringx = "solar:check-circle-broken"
 	} else {
@@ -30,12 +30,12 @@ func toastIcon(typeToast string) string {
 		}
 	}

-    return stringx
+	return stringx
 }

 templ CustomToastV2Show(title string, message string, typeToast string) {
 	<div
-		class="toast fade show"
+		class="toast toast-top-right fade show"
 		role="alert"
 		aria-live="assertive"
 		aria-atomic="true"
@@ -63,14 +63,15 @@ templ CustomToastV2Show(title string, message string, typeToast string) {
 }

 templ CustomToastV2Hide() {
-	<div id="notification-001" 
-        class="toast fade hide" 
-        role="alert" 
-        aria-live="assertive" 
-        aria-atomic="true"
-        style="opacity: 0"
-        hx-swap-oob="true"
-    >
+	<div
+		id="notification-001"
+		class="toast fade hide"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+		style="opacity: 0"
+		hx-swap-oob="true"
+	>
 		<div class="toast-header bg-success text-white">
 			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
 			<strong class="mr-auto">Success</strong>
--- a/component/toastbootstrap/customtoastv2_templ.go
+++ b/component/toastbootstrap/customtoastv2_templ.go
@@ -56,7 +56,7 @@ func CustomToastV2Show(title string, message string, typeToast string) templ.Com
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast toast-top-right fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/handlers/dev/groupresult.handlers.go
+++ b/handlers/dev/groupresult.handlers.go
--- a/handlers/dev/md.groupresult.handlers.go
+++ b/handlers/dev/md.groupresult.handlers.go
--- a/handlers/dev/md.natunit.handlers.go
+++ b/handlers/dev/md.natunit.handlers.go
--- a/handlers/dev/md.usergroup.handlers.go
+++ b/handlers/dev/md.usergroup.handlers.go
@@ -48,6 +48,10 @@ func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error
 	searchID := utils.GenerateRandomID("searchid")
 	dialogAddID := utils.GenerateRandomID("dialogaddID")
 	dialogAddBodyID := utils.GenerateRandomID("dialogaddbodyID")
+	dialogEditID := utils.GenerateRandomID("dialogEditID")
+	dialogEditBodyID := utils.GenerateRandomID("dialogEditbodyID")
+	dialogDeleteID := utils.GenerateRandomID("dialogDeleteID")
+	dialogDeleteBodyID := utils.GenerateRandomID("dialogDeletebodyID")
 	dataMenu, err := services.GetMenu()
 	fmt.Println(dataMenu)
 	fmt.Println(err)
@@ -108,25 +112,40 @@ func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error
 		fmt.Println(dataUserGroup)
 		return err
 	}
-	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup, tableID)
+
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)

 	//filter user group component
-	usergroupFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
+	usergroupFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
 		"search",
 		"Cari Kode/Nama",
 		"text",
-		"/dev/usergroupv2/filter",
+		"/dev/md/usergroupv2/filter",
 		"input changed delay:500ms, search",
-		"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID, #searchID")
+		"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableID, #paginationID, #searchID,#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent())
 	//Pagination
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		1,
-		"/dev/usergroupv2/changepage",
+		"/dev/md/usergroupv2/changepage",
 		paginationID,
-		"#tableID, #searchID, #"+searchID+", #paginationID",
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)

 	//modal add form
@@ -148,22 +167,22 @@ func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error
 			Type:        "hidden", ID: "usergroupinputid"},
 		dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
 	modalActioAddCmp := dev_mdusergroupview.ActionFormUserGroup(
-		"/dev/usergroupv2/closeaddform",
+		"/dev/md/usergroupv2/closeaddform",
 		"#"+dialogAddBodyID,
 		"outerHTML",
 		"#"+dialogAddID)
 	btnCloaseModalAdd := dev_mdusergroupview.BtnCloseFormUserGroup(
-		"/dev/usergroupv2/closeaddform",
+		"/dev/md/usergroupv2/closeaddform",
 		"#"+dialogAddBodyID,
 		"outerHTML",
 		"#"+dialogAddID)
 	modalAddFormComponent := dev_mdusergroupview.UserGroupForm(
 		models.UserGroupFormComponent{
 			IDComponent:  "formusergroup",
-			Link:         "/dev/usergroupv2/add",
+			Link:         "/dev/md/usergroupv2/add",
 			HxTarget:     "#" + dialogAddBodyID,
 			HxSwap:       "outerHTML",
-			HxInclude:    "#tableID, #paginationID, #searchID, #dialogAddBodyID, #dialogAddID, #" + searchID + ", #currpage" + paginationID,
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogAddBodyID, #dialogAddID, #dialogDeleteBodyID, #dialogEditBodyID, #" + searchID + ", #currpage" + paginationID,
 			ModalID:      dialogAddID,
 			ModalTitle:   "New-User Group",
 			DialogBody:   dialogAddBodyCmp,
@@ -172,6 +191,91 @@ func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error
 		},
 	)

+	//modal edit form
+	dialogEditBodyCmp := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioEditCmp := dev_mdusergroupview.ActionFormUserGroup(
+		"/dev/md/usergroupv2/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID)
+	btnCloaseModalEdit := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID)
+	modalEditFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/edit",
+			HxTarget:     "#" + dialogEditBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogEditBodyID, #dialogEditID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogEditID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogEditBodyCmp,
+			DialogAction: modalActioEditCmp,
+			ButtonCLose:  btnCloaseModalEdit,
+		},
+	)
+	//modal delete form
+	dialogDeleteBodyCmp := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogDeleteBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioDeleteCmp := dev_mdusergroupview.ActionFormUserGroupDelete(
+		"/dev/md/usergroupv2/closedeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#"+dialogDeleteID)
+	btnCloaseModalDelete := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closedeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#"+dialogDeleteID)
+	modalDeleteFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/delete",
+			HxTarget:     "#" + dialogDeleteBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogDeleteID, #dialogEditBodyID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogDeleteID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogDeleteBodyCmp,
+			DialogAction: modalActioDeleteCmp,
+			ButtonCLose:  btnCloaseModalDelete,
+		},
+	)
+
 	//content js & css
 	content := dev_mdusergroupview.MdUserGroupScreen(
 		tableID,
@@ -179,15 +283,27 @@ func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error
 		searchID,
 		dialogAddID,
 		dialogAddBodyID,
+		dialogEditID,
+		dialogEditBodyID,
+		dialogDeleteID,
+		dialogDeleteBodyID,
 		breadcrumbComponent,
 		tableComponent,
 		usergroupFilterComponent,
 		userGroupPaginationComponent,
-		modalAddFormComponent)
+		modalAddFormComponent,
+		modalEditFormComponent,
+		modalDeleteFormComponent)
 	css := dev_mdusergroupview.CssMdUserGroup()
 	js := dev_mdusergroupview.JsMdUserGroup()

-	view := dev_mdusergroupview.ShowMdUserGroupScreen(title, content, css, js, navbarmenuComponent, navbaruserComponent, sidebaruserprofileComponent)
+	view := dev_mdusergroupview.ShowMdUserGroupScreen(title,
+		content,
+		css,
+		js,
+		navbarmenuComponent,
+		navbaruserComponent,
+		sidebaruserprofileComponent)
 	return utils.View(c, view)
 }
 func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
@@ -195,6 +311,8 @@ func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
 	searchID := c.QueryParam("searchID")
 	tableID := c.QueryParam("tableID")
 	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
 	var retval []templ.Component
 	logger, _ := zap.NewProduction()

@@ -207,15 +325,26 @@ func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
 		fmt.Println(dataUserGroup)
 		return err
 	}
-	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup, tableID)
-	userGroupPaginationComponent := pagination.PaginationV2(
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		1,
-		"/dev/usergroupv2/changepage",
+		"/dev/md/usergroupv2/changepage",
 		paginationID,
-		"#tableID, #searchID, #"+searchID+", #paginationID",
+		"#tableID, #searchID, #"+searchID+", #paginationID,  #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, userGroupPaginationComponent)
@@ -227,6 +356,8 @@ func (lh *MdUserGroupHandler) HandleChangePageMdUserGroup(c echo.Context) error
 	tableID := c.QueryParam("tableID")
 	searchID := c.QueryParam("searchID")
 	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
 	var retval []templ.Component
 	logger, _ := zap.NewProduction()
 	page, err := strconv.Atoi(pageparam)
@@ -247,15 +378,27 @@ func (lh *MdUserGroupHandler) HandleChangePageMdUserGroup(c echo.Context) error
 		fmt.Println(dataUserGroup)
 		return err
 	}
-	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup, tableID)
-	userGroupPaginationComponent := pagination.PaginationV2(
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		page,
-		"/dev/usergroupv2/changepage",
+		"/dev/md/usergroupv2/changepage",
 		paginationID,
-		"#tableID, #searchID, #"+searchID+", #paginationID",
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, userGroupPaginationComponent)
@@ -297,6 +440,8 @@ func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {
 	currPagePrm := c.FormValue("currpage" + paginationID)
 	dialogAddBodyID := c.FormValue("dialogAddBodyID")
 	dialogAddID := c.FormValue("dialogAddID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")

 	currPage, err := strconv.Atoi(currPagePrm)
 	if err != nil {
@@ -403,18 +548,29 @@ func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {
 		return err
 	}
 	//table component
-	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList, tableID)
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")

 	//pagination component
 	//Pagination
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		currPage,
-		"/dev/usergroupv2/changepage",
+		"/dev/md/usergroupv2/changepage",
 		paginationID,
-		"#tableID, #searchID, #"+searchID+", #paginationID",
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "true",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)

 	newForm := dev_mdusergroupview.BodyFormUserGroup(
@@ -444,3 +600,395 @@ func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {
 		userGroupPaginationComponent,
 		newForm})
 }
+func (lh *MdUserGroupHandler) HandleOpenEditForm(c echo.Context) error {
+	id := c.QueryParam("id")
+	dialogEditID := c.QueryParam("dialogEditID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+
+	dataUserGroup, err := lh.MdUserGroupServices.GetMdUserGroupByID(id)
+	if err != nil {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				Type:        "text", ID: "usergroupinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				Type:        "text", ID: "usergroupinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get user group error", "danger"), newForm})
+	}
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Value:       dataUserGroup.M_UserGroupCode,
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Value:       dataUserGroup.M_UserGroupName,
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Value:       strconv.Itoa(dataUserGroup.M_UserGroupID),
+			Type:        "hidden", ID: "usergroupinputid"},
+
+		dialogEditBodyID, dev_mdusergroupview.JsShowModal("#"+dialogEditID))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormEdit(c echo.Context) error {
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleEditUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+	code := c.FormValue("usergroupcode")
+	name := c.FormValue("usergroupname")
+	id := c.FormValue("usergroupid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogEditID := c.FormValue("dialogEditID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD USER GROUP PARAM",
+		zap.Any("code", code),
+		zap.Any("nama", name),
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+	formValidation := ""
+	codeValidation := ""
+	nameValidation := ""
+	if strings.TrimSpace(code) == "" {
+		formValidation = "Code user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama user group tidak boleh kosong"
+		codeValidation = ""
+		nameValidation = "Nama user group tidak boleh kosong"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code dan nama user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = "Nama user group tidak boleh kosong"
+
+	}
+
+	if formValidation != "" || codeValidation != "" || nameValidation != "" {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	//edit user group service
+	dataUserGroup, err := lh.MdUserGroupServices.EditMdUsergroup(id, code, name)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("code", code),
+			zap.Any("name", name),
+		)
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+
+	}
+	logger.Info("ADD USER GROUP",
+		zap.Any("return", dataUserGroup),
+		zap.Any("code", code),
+		zap.Any("name", name),
+	)
+	//get list user group for table
+	dataUserGroupList, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	//table component
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//pagination component
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+	var retVal []templ.Component
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			ErrorMsg:    codeValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			ErrorMsg:    nameValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal("#"+dialogEditID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil edit User group "+name, "success")
+	retVal = append(retVal, toastSuccess)
+	retVal = append(retVal, tableComponent)
+	retVal = append(retVal, userGroupPaginationComponent)
+	retVal = append(retVal, newForm)
+	return utils.ViewMulti(c, retVal)
+}
+func (lh *MdUserGroupHandler) HandleOpenDeleteForm(c echo.Context) error {
+	id := c.QueryParam("id")
+	dialogDeleteID := c.QueryParam("dialogDeleteID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+
+	dataUserGroup, err := lh.MdUserGroupServices.GetMdUserGroupByID(id)
+	if err != nil {
+		newForm := dev_mdusergroupview.DeleteConfirmationBody(
+			models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: strconv.Itoa(dataUserGroup.M_UserGroupID)},
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus user group berikut ?",
+			[]string{"Kode", "User Group"},
+			[]string{"", ""},
+			dev_mdusergroupview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get user group error", "danger"), newForm})
+	}
+	newForm := dev_mdusergroupview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: strconv.Itoa(dataUserGroup.M_UserGroupID)},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus user group berikut ?",
+		[]string{"Kode", "User Group"},
+		[]string{dataUserGroup.M_UserGroupCode, dataUserGroup.M_UserGroupName},
+		dev_mdusergroupview.JsShowModal("#"+dialogDeleteID))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormDelete(c echo.Context) error {
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+	newForm := dev_mdusergroupview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: ""},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus user group berikut ?",
+		[]string{"Kode", "User Group"},
+		[]string{"", ""},
+		dev_mdusergroupview.JsShowModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleDeleteUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+
+	id := c.FormValue("usergroupid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogDeleteID := c.FormValue("dialogDeleteID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD USER GROUP PARAM",
+
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+
+	//edit user group service
+	dataUserGroup, err := lh.MdUserGroupServices.DeleteMdUserGroup(id)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+		)
+		newForm := dev_mdusergroupview.DeleteConfirmationBody(
+			models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: ""},
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus user group berikut ?",
+			[]string{"Kode", "User Group"},
+			[]string{"", ""},
+			dev_mdusergroupview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+
+	}
+	logger.Info("ADD USER GROUP",
+		zap.Any("return", dataUserGroup),
+	)
+	//get list user group for table
+	dataUserGroupList, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	if len(dataUserGroupList) == 0 && totalPage > 1 {
+		currPage = currPage - 1
+		dataUserGroupList, _, err = lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+		if err != nil {
+			defer logger.Sync()
+			logger.Info("ERROR GET USER GROUP",
+				zap.Any("error", err),
+			)
+			return err
+		}
+	}
+	//table component
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//pagination component
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+	var retVal []templ.Component
+	newForm := dev_mdusergroupview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: ""},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus user group berikut ?",
+		[]string{"Kode", "User Group"},
+		[]string{"", ""},
+		dev_mdusergroupview.JsHideModal("#"+dialogDeleteID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil delete User group ", "success")
+	retVal = append(retVal, toastSuccess)
+	retVal = append(retVal, tableComponent)
+	retVal = append(retVal, userGroupPaginationComponent)
+	retVal = append(retVal, newForm)
+	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/public/kartukontrol.handlers.go
+++ b/handlers/public/kartukontrol.handlers.go
@@ -0,0 +1,118 @@
+package public_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	kartukontrol "cpone/views/public/kartukontrol"
+	public_toast "cpone/views/public/toast"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type KartuKontrolService interface {
+	GetkartuKontrolById(nomorRegistrasi string) ([]models.KartuKontrolModel, error)
+}
+
+func NewKartuKontrolHandler(us KartuKontrolService) *KartuKontrolHandler {
+	return &KartuKontrolHandler{
+		KartuKontrolService: us,
+	}
+}
+
+type KartuKontrolHandler struct {
+	KartuKontrolService KartuKontrolService
+}
+
+func (lh *KartuKontrolHandler) HandlerHideToast(c echo.Context) error {
+	toastComponent := public_toast.PublicToastV1KartuKontrolHide()
+
+	si := toastComponent
+
+	return utils.View(c, si)
+}
+
+func (lh *KartuKontrolHandler) HandlerShowKartuKontrol(c echo.Context) error {
+
+	var flagxError bool = true
+	var msgx string = ""
+
+	nomorRegistrasi := c.Param("nomorRegistrasi")
+
+	urlSurveyMcu := "redirectsurveymcu"
+
+	// urlSurveyMcu := "redirectsurveymcu"
+
+	// nomorRegistrasi := "1"
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	dataKartuKontrol, err := lh.KartuKontrolService.GetkartuKontrolById(nomorRegistrasi)
+
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("prm", nomorRegistrasi),
+		)
+		// return err
+		if flagxError {
+			msgx = "Error Get Kartu Kontrol"
+			si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+			return utils.View(c, si)
+		}
+	}
+	logger.Info("SHOW DATA KARTU KONTROL handler",
+		zap.Any("return", dataKartuKontrol),
+		zap.Any("prm", nomorRegistrasi),
+	)
+
+	flagxError = false
+	var si templ.Component
+	var isShowSurveyMcu bool = true
+
+	if isShowSurveyMcu {
+		si = kartukontrol.ShowKartuKontrol("Kartu Kontrol", kartukontrol.MainContentKartuKontrolLayout(dataKartuKontrol, "/modalsurveykartukontrol", "load delay:3s", "modalWordingSurveyMcu", urlSurveyMcu, nomorRegistrasi), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+	} else {
+		si = kartukontrol.ShowKartuKontrol("Kartu Kontrol",
+			kartukontrol.MainContentKartuKontrolLayout(dataKartuKontrol, "", "", "modalWordingSurveyMcu", urlSurveyMcu, nomorRegistrasi), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+	}
+
+	return utils.View(c, si)
+}
+
+func (lh *KartuKontrolHandler) HandlerShowWordingModalSurveyMcu(c echo.Context) error {
+
+	stringUrlToSurveyMcu := c.QueryParam("urlSurveyMcu")
+
+	// var dataKartuKontrol []models.KartuKontrolModel
+	si := kartukontrol.ShowKartuKontrol(
+		"Kartu Kontrol",
+		kartukontrol.ModalMcuWordingShow("modalWordingSurveyMcu", "Silahkan isi questioner untuk membantu peningkatan layanan kami. Terima kasih.", stringUrlToSurveyMcu), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+
+	return utils.View(c, si)
+}
+
+func (lh *KartuKontrolHandler) HandlerRedirectToSurveyMcu(c echo.Context) error {
+
+	nomorRegistrasi := c.QueryParam("nomorRegistrasi")
+	stringUrlToSurveyMcu := "/surveymcu/" + nomorRegistrasi
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	if len(stringUrlToSurveyMcu) > 0 {
+		// redirect ke kartu kontrol
+		logger.Info("redirect SURVEY MCU",
+			zap.Any("redirect SURVEY MCU", stringUrlToSurveyMcu),
+		)
+		c.Response().Header().Set("HX-Redirect", stringUrlToSurveyMcu)
+		// return c.NoContent(http.StatusOK)
+	}
+
+	si := kartukontrol.ShowKartuKontrol(
+		"Kartu Kontrol",
+		kartukontrol.ModalMcuWordingShow("modalWordingSurveyMcu", "Silahkan isi questioner untuk membantu peningkatan layanan kami. Terima kasih.", ""), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+
+	return utils.View(c, si)
+}
--- a/handlers/public/surveymcu.handlers.go
+++ b/handlers/public/surveymcu.handlers.go
@@ -0,0 +1,194 @@
+package public_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	surveymcu "cpone/views/public/surveymcu"
+	public_toast "cpone/views/public/toast"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type SurveyMcuService interface {
+	GetSurveyMcuByNoreg(nomorRegistrasi string) ([]models.SurveyMcu, error)
+}
+
+func NewSurveyMcuHandler(us SurveyMcuService) *SurveyMcuHandler {
+	return &SurveyMcuHandler{
+		SurveyMcuService: us,
+	}
+}
+
+type SurveyMcuHandler struct {
+	SurveyMcuService SurveyMcuService
+}
+
+func (lh *SurveyMcuHandler) HandlerShowSurveyMcu(c echo.Context) error {
+
+	var flagxError bool = true
+	var msgx string = ""
+
+	nomorRegistrasi := c.Param("nomorRegistrasi")
+	// nomorRegistrasi := "1"
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	dataSurveyMcu, err := lh.SurveyMcuService.GetSurveyMcuByNoreg(nomorRegistrasi)
+
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("prm", nomorRegistrasi),
+		)
+		// return err
+		if flagxError {
+			msgx = "Error Get Survey MCU By No Reg"
+			si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+			return utils.View(c, si)
+		}
+	}
+
+	flagxError = false
+	logger.Info("SHOW DATA SURVEY MCU handler",
+		zap.Any("return", dataSurveyMcu),
+		zap.Any("prm", nomorRegistrasi),
+	)
+
+	stringUrl := "surveymcuproses/" + nomorRegistrasi
+	var hxInclude string = ""
+	var idClearMsg []models.IdClearErrorMessage
+
+	if len(dataSurveyMcu) > 0 {
+		hxInclude = utils.ConcatHxIncludeSurveyMcu(dataSurveyMcu)
+	}
+
+	si := surveymcu.ShowSurveyMcu("Survey Mcu",
+		surveymcu.MainContentSurveyMcuLayout(dataSurveyMcu, stringUrl, surveymcu.ErrorMessageSurveyMcu("", "", idClearMsg, "alertSaranMcu", public_toast.PublicToastV1KartuKontrolHide()), hxInclude), surveymcu.CssSurveyMcu(), surveymcu.JsSurveyMcu())
+
+	return utils.View(c, si)
+}
+
+func (lh *SurveyMcuHandler) HandlerProcessSurveyMcu(c echo.Context) error {
+
+	var flagxError bool = true
+	var msgx string = ""
+
+	nomorRegistrasi := c.Param("nomorRegistrasi")
+	stringUrlBackToKartuKontrol := "/kartukontrol/" + nomorRegistrasi
+	// nomorRegistrasi := "1"
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	dataSurveyMcu, err := lh.SurveyMcuService.GetSurveyMcuByNoreg(nomorRegistrasi)
+
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("prm", nomorRegistrasi),
+		)
+		// return err
+		if flagxError {
+			msgx = "Error Get Survey MCU By No Reg"
+			si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+			return utils.View(c, si)
+		}
+	}
+
+	logger.Info("SHOW DATA SURVEY MCU handler",
+		zap.Any("return", dataSurveyMcu),
+		zap.Any("prm", nomorRegistrasi),
+	)
+
+	// form := c.Request().PostForm
+
+	// stringUrl := "surveymcuproses/" + nomorRegistrasi
+
+	logger.Info("CEK POST handler",
+		zap.Any("c.FormValue Saran", c.FormValue("saranmcu-11")),
+	)
+
+	// proses validasi
+
+	var si templ.Component
+	var idFormKosong string = ""
+	var stringMessage string = ""
+	var isFormEmpty bool = false
+	var idClearMsg []models.IdClearErrorMessage
+	var idSaranMcuAlert string = ""
+	// var idSaranMcuClear string = ""
+
+	hasError := false
+
+	if len(dataSurveyMcu) > 0 {
+		for _, v := range dataSurveyMcu {
+			// radio button
+			if len(v.DataListItemSurveyMcu) > 0 {
+				for _, x := range v.DataListItemSurveyMcu {
+
+					if len(c.FormValue("radio-"+x.IDItemSurvey)) > 0 {
+						idClearMsg = append(idClearMsg, models.IdClearErrorMessage{IdItem: x.IDItemSurvey})
+					}
+
+					if "default-"+x.NameRadioButton == c.FormValue("default-"+x.NameRadioButton) && len(c.FormValue("radio-"+x.IDItemSurvey)) == 0 {
+						stringMessage = "Pertanyaan ke-" + x.IDItemSurvey + " wajib diisi"
+						idFormKosong = utils.GetIdSurveyMcu(x.IDItemSurvey)
+						isFormEmpty = true
+						hasError = true
+						flagxError = true
+						break
+					}
+				}
+			}
+
+			if hasError {
+				break
+			}
+		}
+	}
+
+	// saran mcu
+	if !hasError && len(dataSurveyMcu) > 0 {
+		for _, v := range dataSurveyMcu {
+			if len(v.DataListItemSurveyMcuSaran) > 0 {
+				for _, x := range v.DataListItemSurveyMcuSaran {
+					if len(c.FormValue("saranmcu-"+x.IDItemSurveyMcuSaran)) > 0 {
+						idClearMsg = append(idClearMsg, models.IdClearErrorMessage{IdItem: x.IDItemSurveyMcuSaran})
+					}
+
+					if "default-"+x.NameSurveyMcuSaran == c.FormValue("default-"+x.NameSurveyMcuSaran) && len(c.FormValue("saranmcu-"+x.IDItemSurveyMcuSaran)) == 0 {
+						stringMessage = "Saran Wajib Diisi"
+						idFormKosong = utils.GetIdSurveyMcu(x.IDItemSurveyMcuSaran)
+						isFormEmpty = true
+						hasError = true
+						break
+					}
+				}
+			}
+			if hasError {
+				break
+			}
+		}
+	}
+
+	if isFormEmpty {
+		// if flagxError {
+		// 	msgx = "Error Get Survey MCU By No Reg"
+		// 	si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+		// 	return utils.View(c, si)
+		// }
+		si = surveymcu.ErrorMessageSurveyMcu(stringMessage, idFormKosong, idClearMsg, idSaranMcuAlert, public_toast.PublicToastV1KartuKontrolShow("Warning", stringMessage, "warning"))
+	} else {
+		flagxError = false
+		si = surveymcu.ErrorMessageSurveyMcu("", "", idClearMsg, "", public_toast.PublicToastV1KartuKontrolHide())
+		logger.Info("redirect",
+			zap.Any("redirect", stringUrlBackToKartuKontrol),
+		)
+
+		// redirect ke kartu kontrol
+		c.Response().Header().Set("HX-Redirect", stringUrlBackToKartuKontrol)
+	}
+
+	return utils.View(c, si)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -68,6 +68,26 @@ func SetupRoutesPublic(app *echo.Echo, appStore db.AppStore) {
 	public.GET("landingpage", lh.ShowLandingPage)
 	loginHdr := public_handlers.NewLoginHandler(l)
 	public.GET("login", loginHdr.HandlerShowLogin)
+
+	// kartu kontrol
+	publicKartuKontrolServices := public_services.NewServicesKartuKontrol(appStore)
+	publicKartuKontrolhandlers := public_handlers.NewKartuKontrolHandler(publicKartuKontrolServices)
+	public.GET("kartukontrol/:nomorRegistrasi", publicKartuKontrolhandlers.HandlerShowKartuKontrol)
+	public.GET("modalsurveykartukontrol", publicKartuKontrolhandlers.HandlerShowWordingModalSurveyMcu)
+
+	// survey mcu page (pertanyaan dan jawaban)
+	publicSurveyMcuServices := public_services.NewServicesSurveyMcu(appStore)
+	publicSurveyMcuhandlers := public_handlers.NewSurveyMcuHandler(publicSurveyMcuServices)
+	public.GET("surveymcu/:nomorRegistrasi", publicSurveyMcuhandlers.HandlerShowSurveyMcu)
+
+	// hide toast
+	public.GET("hidetoastkartukontrol", publicKartuKontrolhandlers.HandlerHideToast)
+
+	// surveymcuproses
+	public.POST("surveymcuproses/:nomorRegistrasi", publicSurveyMcuhandlers.HandlerProcessSurveyMcu)
+
+	// redirect to survey mcu page
+	public.GET("redirectsurveymcu", publicKartuKontrolhandlers.HandlerRedirectToSurveyMcu)
 }
 func SetupRoutesCorporate(app *echo.Echo, appStore db.AppStore) {
 	public := app.Group("/corp")
@@ -215,10 +235,66 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	//New User Group
 	devMdUserGroupServices := dev_services.NewMdUserGroupServices(appStore)
 	devMdUserGroupHandlers := dev_handlers.NewMdUserGroupHandler(devMdUserGroupServices)
-	dev.GET("/usergroupv2", devMdUserGroupHandlers.HandleShowMdUserGroupScreen)
-	dev.GET("/usergroupv2/filter", devMdUserGroupHandlers.HandleFilterMdUserGroup)
-	dev.GET("/usergroupv2/changepage", devMdUserGroupHandlers.HandleChangePageMdUserGroup)
-	dev.POST("/usergroupv2/closeaddform", devMdUserGroupHandlers.HandleCloseFormAdd)
-	dev.POST("/usergroupv2/add", devMdUserGroupHandlers.HandleAddUserGroup)
+	dev.GET("/md/usergroupv2", devMdUserGroupHandlers.HandleShowMdUserGroupScreen)
+	dev.GET("/md/usergroupv2/filter", devMdUserGroupHandlers.HandleFilterMdUserGroup)
+	dev.GET("/md/usergroupv2/changepage", devMdUserGroupHandlers.HandleChangePageMdUserGroup)
+	dev.POST("/md/usergroupv2/closeaddform", devMdUserGroupHandlers.HandleCloseFormAdd)
+	dev.POST("/md/usergroupv2/add", devMdUserGroupHandlers.HandleAddUserGroup)
+	dev.GET("/md/usergroupv2/openedit", devMdUserGroupHandlers.HandleOpenEditForm)
+	dev.POST("/md/usergroupv2/closeeditform", devMdUserGroupHandlers.HandleCloseFormEdit)
+	dev.POST("/md/usergroupv2/edit", devMdUserGroupHandlers.HandleEditUserGroup)
+	dev.GET("/md/usergroupv2/opendelete", devMdUserGroupHandlers.HandleOpenDeleteForm)
+	dev.POST("/md/usergroupv2/closedeleteform", devMdUserGroupHandlers.HandleCloseFormDelete)
+	dev.POST("/md/usergroupv2/delete", devMdUserGroupHandlers.HandleDeleteUserGroup)

+	// 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)
+	// masterdata nat unit
+	devMdNatUnitServices := dev_services.NewMdNatUnitServices(appStore)
+	devMdNatUnitHandlers := dev_handlers.NeWMdNatUnitHandler(devMdNatUnitServices)
+	dev.GET("/md/natunit", devMdNatUnitHandlers.HandleShowMdNatUnitScreen)
+	dev.GET("/md/natunit/filter", devMdNatUnitHandlers.HandleFilterMdNatUnit)
+	dev.GET("/md/natunit/changepage", devMdNatUnitHandlers.HandlerChangePageMdNatUnit)
+	dev.POST("/md/natunit/closeaddform", devMdNatUnitHandlers.HandlerCloseFormAdd)
+	dev.POST("/md/natunit/add", devMdNatUnitHandlers.HandlerAddNatUnit)
+	dev.GET("/md/natunit/openedit", devMdNatUnitHandlers.HandlerOpenEditForm)
+	dev.POST("/md/natunit/closeeditform", devMdNatUnitHandlers.HandlerCloseFormEdit)
+	dev.POST("/md/natunit/edit", devMdNatUnitHandlers.HandlerEditNatUnit)
+	dev.GET("/md/natunit/opendelete", devMdNatUnitHandlers.HandlerOpenDeleteForm)
+	dev.POST("/md/natunit/closedeleteform", devMdNatUnitHandlers.HandlerCloseFormDelete)
+	dev.POST("/md/natunit/delete", devMdNatUnitHandlers.HandlerDeleteNatUnit)
+
+	// group result v2
+	devMdGRServices := dev_services.NewServicesMdGroupResult(appStore)
+	devMdGRhandlers := dev_handlers.NewMdGroupResultHandler(devMdGRServices)
+	dev.GET("/md/groupresultv2", devMdGRhandlers.HandleShowMdGroupResultScreen)
+	dev.GET("/md/groupresultv2/filter", devMdGRhandlers.HandleFilterMdGroupResult)
+	dev.GET("/md/groupresultv2/changepage", devMdGRhandlers.HandleChangePageMdGroupResult)
+	dev.POST("/md/groupresultv2/closeaddform", devMdGRhandlers.HandleCloseFormAdd)
+	dev.POST("/md/groupresultv2/add", devMdGRhandlers.HandleAddGroupResult)
+	dev.GET("/md/groupresultv2/openedit", devMdGRhandlers.HandleOpenEditForm)
+	dev.POST("/md/groupresultv2/closeeditform", devMdGRhandlers.HandleCloseFormEdit)
+	dev.POST("/md/groupresultv2/edit", devMdGRhandlers.HandleEditGroupResult)
+	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/customcheckbox.models.go
+++ b/models/customcheckbox.models.go
@@ -0,0 +1,18 @@
+package models
+
+// name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string,
+
+type CustomCheckboxv1Prm struct {
+	HxTarget    string `default:"hxTarget"`
+	HxGet       string `default:"hxGet"`
+	HxIndicator string `default:"hxIndicator"`
+	HxInclude   string `default:"hxInclude"`
+	HxTrigger   string `default:"hxTrigger"`
+	Label       string `default:"Label"`
+	Name        string `default:"name"`
+	Text        string `default:"text"`
+	// Type        string `default:"text"`
+	Value    string `default:""`
+	ErrorMsg string `default:""`
+	ID       string
+}
--- a/models/customdropdown.models.go
+++ b/models/customdropdown.models.go
@@ -0,0 +1,18 @@
+package models
+
+// name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string,
+
+type CustomDropdownv1Prm struct {
+	HxTarget    string `default:"hxTarget"`
+	HxGet       string `default:"hxGet"`
+	HxIndicator string `default:"hxIndicator"`
+	HxInclude   string `default:"hxInclude"`
+	HxTrigger   string `default:"hxTrigger"`
+	Label       string `default:"Label"`
+	Name        string `default:"name"`
+	// Placeholder string `default:"Placeholder"`
+	// Type        string `default:"text"`
+	// Value       string `default:""`
+	ErrorMsg string `default:""`
+	ID       string
+}
--- a/models/groupresult.models.go
+++ b/models/groupresult.models.go
@@ -0,0 +1,38 @@
+package models
+
+import "github.com/a-h/templ"
+
+type GroupResultResumeMcu struct {
+	Text string `default:"text"`
+	ID   int    `default:"id"`
+}
+
+type GroupResult struct {
+	Nomor                   string `db:"nomor"`
+	Group_ResultID          int    `db:"Group_ResultID"`
+	Group_ResultName        string `db:"Group_ResultName"`
+	Group_ResultFlagPerTest string `db:"Group_ResultFlagPerTest"`
+	Group_ResultFlagNonLab  string `db:"Group_ResultFlagNonLab"`
+	Group_ResultResumeMcu   string `db:"Group_ResultResumeMcu"`
+	Group_ResultIsActive    string `db:"Group_ResultIsActive"`
+}
+
+// form component
+type GroupResultFormComponent struct {
+	IDComponent                    string
+	Link                           string
+	HxTarget                       string
+	HxSwap                         string
+	HxInclude                      string
+	ModalID                        string
+	ModalTitle                     string
+	InputGroupResultName           CustomTextFieldv2Prm
+	InputGroupResult               CustomTextFieldv2Prm
+	CheckboxGroupResultFlagPerTest CustomCheckboxv1Prm
+	CheckboxGroupResultFlagNonLab  CustomCheckboxv1Prm
+	InputID                        CustomTextFieldv2Prm
+	DropdownGroupResultResumeMcu   CustomDropdownv1Prm
+	DialogBody                     templ.Component
+	DialogAction                   templ.Component
+	ButtonCLose                    templ.Component
+}
--- a/models/kartukontrol.models.go
+++ b/models/kartukontrol.models.go
@@ -0,0 +1,33 @@
+package models
+
+type KartuKontrolModel struct {
+	KartuKontrolDataPasienList                   []DataPasien                       `json:"kartuKontrolDataPasien"`
+	KartuKontrolDataPemeriksaanList              []DataPemeriksaanList              `json:"kartuKontrolDataPemeriksaanList"`
+	KartuKontrolDataPemeriksaanPengambilanSample []DataPemeriksaanPengambilanSample `json:"kartuKontrolDataPemeriksaanPengambilanSample"`
+}
+
+type DataPasien struct {
+	NomorRegistrasi string `json:"nomorRegistrasi"`
+	NomorLab        string `json:"nomorLab"`
+	NamaPasien      string `json:"namaPasien"`
+	TanggalLahir    string `json:"tanggalLahir"`
+	Umur            string `json:"umur"`
+	JenisKelamin    string `json:"jenisKelamin"`
+	NamaDivisi      string `json:"namaDivisi"`
+	NamaCompany     string `json:"namaCompany"`
+}
+
+type DataPemeriksaanList struct {
+	NamaPemeriksaanList string `json:"namaPemeriksaanList"`
+}
+
+type SampleTypeList struct {
+	SampleTypeName     string `json:"sampleTypeName"`
+	SampleTypeDateTime string `json:"sampleTypeDateTime"`
+	SampleTypeStatus   string `json:"sampleTypeStatus"`
+}
+
+type DataPemeriksaanPengambilanSample struct {
+	NamaPemeriksaanPengambilanSample string           `json:"namaPemeriksaanPengambilanSample"`
+	SampleTypeListData               []SampleTypeList `json:"sampleTypeListData"`
+}
--- a/models/natunit.models.go
+++ b/models/natunit.models.go
@@ -0,0 +1,29 @@
+package models
+
+import "github.com/a-h/templ"
+
+type NatUnit struct {
+	Nomor               string `db:"nomor"`
+	Nat_UnitID          int    `db:"Nat_UnitID"`
+	Nat_UnitCode        string `db:"Nat_UnitCode"`
+	Nat_UnitName        string `db:"Nat_UnitName"`
+	Nat_UnitCreated     string `db:"Nat_UnitCreated"`
+	Nat_UnitLastUpdated string `db:"Nat_UnitLastUpdated"`
+	Nat_UnitIsActive    string `db:"Nat_UnitIsActive"`
+}
+
+type NatUnitFormComponent struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	InputName    CustomTextFieldv2Prm
+	InputCode    CustomTextFieldv2Prm
+	InputID      CustomTextFieldv2Prm
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}
--- a/models/surveymcu.models.go
+++ b/models/surveymcu.models.go
@@ -0,0 +1,24 @@
+package models
+
+type SurveyMcu struct {
+	DataListItemSurveyMcu      []ItemSurveyMcu      `json:"dataListItemSurveyMcu"`
+	DataListItemSurveyMcuSaran []ItemSurveyMcuSaran `json:"datalistitemsurveymcusaran"`
+}
+
+type ItemSurveyMcu struct {
+	IDItemSurvey    string `json:"iditemsurvey"`
+	Nomor           string `json:"nomor"`
+	Pertanyaan      string `json:"pertanyaan"`
+	NameRadioButton string `json:"nameradiobutton"`
+	ErrorMessage    string `json:"errorMessage"`
+}
+
+type ItemSurveyMcuSaran struct {
+	IDItemSurveyMcuSaran       string `json:"iditemsurveymcusaran"`
+	NameSurveyMcuSaran         string `json:"namesurveymcusaran"`
+	ErrorMessageSurveyMcuSaran string `json:"errormessagesurveymcusaran"`
+}
+
+type IdClearErrorMessage struct {
+	IdItem string `json:"iditem"`
+}
--- 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/dev/groupresult.services.go
+++ b/services/dev/groupresult.services.go
@@ -0,0 +1,878 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	"fmt"
+	"math"
+	"strconv"
+	"strings"
+
+	dbx "cpone/package/database"
+
+	"go.uber.org/zap"
+)
+
+func NewServicesGroupResult(uStore db.AppStore) *ServicesGroupResult {
+
+	return &ServicesGroupResult{
+		GroupResultStore: uStore,
+	}
+}
+
+type ServicesGroupResult struct {
+	GroupResultStore db.AppStore
+}
+
+func (su *ServicesGroupResult) GetMasterMenus() ([]MasterMenu, error) {
+
+	// dummyBreadcrumb := []Breadcrumb{
+	// 	{
+	// 		Name: "Dashboard",
+	// 		Url:  "/client/dashboard",
+	// 	},
+	// 	{
+	// 		Name: "Front Office",
+	// 		Url:  "/client/usermanagement",
+	// 	},
+	// }
+
+	dummyMenu := []MasterMenu{
+		// 1. Dashboard
+		{
+			ID:             "1",
+			ParentMenuID:   "0",
+			ParentMenuName: "Dashboard",
+			ParentUrl:      "/client/md/dashboard",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "1",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Master User",
+					ChildrenMenuURL:  "/client/md/user",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 2. Front Office
+		{
+			ID:             "2",
+			ParentMenuID:   "1",
+			ParentMenuName: "Front Office",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "1",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Registrasi",
+					ChildrenMenuURL:  "/fo/registrasi",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 3. Station
+		{
+			ID:             "3",
+			ParentMenuID:   "2",
+			ParentMenuName: "Station",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "2",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Sample Station",
+					ChildrenMenuURL:  "/station/sample",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 4. Management MCU
+		{
+			ID:             "4",
+			ParentMenuID:   "3",
+			ParentMenuName: "Management MCU",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "3",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Setup MCU",
+					ChildrenMenuURL:  "/mcu/setup",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+				{
+					ChildrenParentID: "3",
+					ChildrenMenuID:   "2",
+					ChildrenMenuName: "Pre-Registrasi",
+					ChildrenMenuURL:  "/mcu/preregister",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 5. Master Data
+		{
+			ID:             "5",
+			ParentMenuID:   "4",
+			ParentMenuName: "Master Data",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				// * Master User
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Master User",
+					ChildrenMenuURL:  "/client/md/user",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Master User Group
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "2",
+					ChildrenMenuName: "Master User Group",
+					ChildrenMenuURL:  "/client/md/usergroup",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Master Corporate
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "3",
+					ChildrenMenuName: "Corporate",
+					ChildrenMenuURL:  "/client/md/corp",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Test
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "4",
+					ChildrenMenuName: "Test",
+					ChildrenMenuURL:  "/client/md/test",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Bahan
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "5",
+					ChildrenMenuName: "Bahan",
+					ChildrenMenuURL:  "/client/md/bahan",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Sample Type
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "6",
+					ChildrenMenuName: "Sample Type",
+					ChildrenMenuURL:  "/client/sample/type",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Sample Station
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "7",
+					ChildrenMenuName: "Sample Station",
+					ChildrenMenuURL:  "/station/sample",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Result Non Lab
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "8",
+					ChildrenMenuName: "Result Non Lab",
+					ChildrenMenuURL:  "/client/md/resultnonlab",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Template Fisik
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "9",
+					ChildrenMenuName: "Template Fisik",
+					ChildrenMenuURL:  "/client/md/template-fisik",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Pasien
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "10",
+					ChildrenMenuName: "Pasien",
+					ChildrenMenuURL:  "/client/md/pasien",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Dokter
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "11",
+					ChildrenMenuName: "Dokter",
+					ChildrenMenuURL:  "/client/md/dokter",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Paket
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "12",
+					ChildrenMenuName: "Paket",
+					ChildrenMenuURL:  "/client/md/paket",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Harga Single
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "13",
+					ChildrenMenuName: "Harga Single",
+					ChildrenMenuURL:  "/client/md/hargasingle",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+	}
+
+	return dummyMenu, nil
+}
+
+func (ug *ServicesGroupResult) GetUserGroup() ([]models.UserGroup, error) {
+	data := []models.UserGroup{
+		{UserGroupID: 1, UserGroupKode: "A", UserGroupName: "UG1"},
+		{UserGroupID: 2, UserGroupKode: "B", UserGroupName: "UG2"},
+		{UserGroupID: 3, UserGroupKode: "C", UserGroupName: "UG3"},
+	}
+	return data, nil
+}
+
+func (su *ServicesGroupResult) GetListBreadCrumb(title string) (models.BreadCrumbV1, error) {
+	var ret models.BreadCrumbV1
+
+	dummyBreadcrumb := []models.BreadCrumbV1{
+		{
+			Title: "Master User Group",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User Group",
+					Url:  "",
+				},
+			},
+		},
+
+		{
+			Title: "Master User",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User",
+					Url:  "",
+				},
+			},
+		},
+
+		{
+			Title: "Master Group Result",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "Group Result",
+					Url:  "",
+				},
+			},
+		},
+	}
+
+	for _, breadcrumb := range dummyBreadcrumb {
+		// if utils.Contains(breadcrumb.Title, title) {
+		// 	ret = breadcrumb
+		// 	return ret, nil
+		// }
+		if breadcrumb.Title == title {
+			ret = breadcrumb
+			return ret, nil
+		}
+	}
+
+	return ret, nil
+}
+
+// (LAB, NONLAB, FISIK, DOCTOR)
+// hardcore group result resume mcu
+func (ug *ServicesGroupResult) GetGroupResultResumeMcu() ([]models.GroupResultResumeMcu, error) {
+	data := []models.GroupResultResumeMcu{
+		{
+			ID:   1,
+			Text: "LAB",
+		},
+		{
+			ID:   2,
+			Text: "NONLAB",
+		},
+		{
+			ID:   3,
+			Text: "FISIK",
+		},
+		{
+			ID:   4,
+			Text: "DOCTOR",
+		},
+	}
+	return data, nil
+}
+
+// versi 2
+func (su *ServicesGroupResult) GetListGroupResult(search string, currentPage int, rowPerPage int) ([]models.GroupResult, int, error) {
+	var groupresultList []models.GroupResult
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	var totalData int
+	offset := (currentPage - 1) * rowPerPage
+
+	prm := "%" + strings.TrimSpace(search) + "%"
+	querytotal := `
+		SELECT COUNT(*) 
+		FROM group_result
+		WHERE Group_ResultIsActive = 'Y'
+		AND (Group_ResultName LIKE ? OR Group_ResultResumeMcu LIKE ?) 
+	`
+
+	logger.Info("QUERY SEARCH INITIAL TOTAL COUNT",
+		zap.String("query search", querytotal),
+	)
+
+	if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+
+	query := `
+		SELECT
+			ROW_NUMBER() OVER () AS nomor,
+			Group_ResultID,
+			IFNULL(Group_ResultName, '') AS Group_ResultName,
+			IFNULL(Group_ResultFlagPerTest, '') AS Group_ResultFlagPerTest,
+			IFNULL(Group_ResultFlagNonLab, '') AS Group_ResultFlagNonLab,
+			IFNULL(Group_ResultResumeMcu, '') AS Group_ResultResumeMcu,
+			Group_ResultIsActive
+		FROM group_result
+		WHERE Group_ResultIsActive = 'Y'
+		AND (Group_ResultName LIKE ? OR Group_ResultResumeMcu LIKE ?) 
+		ORDER BY Group_ResultID ASC
+		LIMIT ? OFFSET ?
+	`
+
+	logger.Info("QUERY SEARCH INITIAL",
+		zap.String("query search", query),
+	)
+
+	if err := dbx.Handlex.Select(&groupresultList, query, prm, prm, rowPerPage, offset); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+
+	totalPage := int(math.Ceil(float64(totalData) / float64(rowPerPage)))
+
+	return groupresultList, totalPage, nil
+}
+
+// GET BY ID
+func (ug *ServicesGroupResult) GetGroupResultByIDV1(id string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+
+	var data models.GroupResult
+	err := dbx.Handlex.Get(&data, `SELECT 
+	Group_ResultID,
+    Group_ResultName,
+    CASE 
+        WHEN Group_ResultFlagPerTest = 'Y' THEN 'on' 
+        ELSE Group_ResultFlagPerTest 
+    END AS Group_ResultFlagPerTest,
+    CASE 
+        WHEN Group_ResultFlagNonLab = 'Y' THEN 'on' 
+        ELSE Group_ResultFlagNonLab 
+    END AS Group_ResultFlagNonLab,
+    Group_ResultResumeMcu,
+    Group_ResultIsActive
+	FROM group_result
+	WHERE Group_ResultID = ?`, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get data gr by id vs",
+			zap.String("ID", id),
+			zap.Error(err),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+// ADD DATA
+func (ug *ServicesGroupResult) AddGroupResult(groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, groupresultresumemcu string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+	var data models.GroupResult
+	var datacek []models.GroupResult
+	// var groupresultflagpertestConvert string = ""
+	// var groupresultflagnonlabConvert string = ""
+	// var groupresultresumemcuConvert string = ""
+
+	prm := "%" + strings.TrimSpace(groupresultname) + "%"
+	qryCek := `SELECT Group_ResultName FROM group_result WHERE Group_ResultName LIKE ? AND Group_ResultIsActive = 'Y'`
+	err := dbx.Handlex.Select(&datacek, qryCek, prm)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by groupresultname",
+			zap.String("groupresultname", groupresultname),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Group Result Name already taken by another data",
+			zap.String("groupresultname", groupresultname),
+		)
+		return data, fmt.Errorf("group result name sudah dipakai")
+	}
+	qry := `INSERT INTO group_result
+			(
+				Group_ResultName,
+				Group_ResultFlagPerTest,
+				Group_ResultFlagNonLab,
+				Group_ResultResumeMcu
+			)
+			VALUES (
+				?,
+				?,
+				?,
+				?
+			);`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, groupresultname, groupresultflagpertest, groupresultflagnonlab, groupresultresumemcu)
+	insertedID, err := rst.LastInsertId()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Insert group result",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	s := strconv.Itoa(int(insertedID))
+	data, err = ug.GetGroupResultByIDV1(s)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+// EDIT DATA
+func (ug *ServicesGroupResult) EditGroupResult(id string, groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, groupresultresumemcu string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+	var data models.GroupResult
+	var datacek []models.GroupResult
+
+	prm := "%" + strings.TrimSpace(groupresultname) + "%"
+	qryCek := `SELECT Group_ResultName FROM group_result WHERE Group_ResultName LIKE ? AND Group_ResultIsActive = 'Y' AND Group_ResultID <> ?`
+	err := dbx.Handlex.Select(&datacek, qryCek, prm, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by code",
+			zap.String("groupresultname", groupresultname),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Code already taken by another data",
+			zap.String("groupresultname", groupresultname),
+		)
+		return data, fmt.Errorf("group result name sudah dipakai")
+	}
+
+	qry := `UPDATE group_result
+			SET Group_ResultName = ?,
+			Group_ResultFlagPerTest = ?,
+			Group_ResultFlagNonLab = ?,
+			Group_ResultResumeMcu = ?
+			WHERE Group_ResultID = ?`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, groupresultname, groupresultflagpertest, groupresultflagnonlab, groupresultresumemcu, id)
+	_, err = rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Update group result",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetGroupResultByIDV1(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get group result by id",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+// DELETE DATA
+func (ug *ServicesGroupResult) DeleteGroupResult(id string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+	var data models.GroupResult
+	qry := `UPDATE group_result
+			SET Group_ResultIsActive = 'N'
+			WHERE Group_ResultID = ?;`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, id)
+	_, err := rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error delete group result",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetGroupResultByIDV1(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get group result by id",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
--- a/services/dev/md.groupresult.services.go
+++ b/services/dev/md.groupresult.services.go
@@ -0,0 +1,878 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	"fmt"
+	"math"
+	"strconv"
+	"strings"
+
+	dbx "cpone/package/database"
+
+	"go.uber.org/zap"
+)
+
+func NewServicesMdGroupResult(uStore db.AppStore) *ServicesMdGroupResult {
+
+	return &ServicesMdGroupResult{
+		MdGroupResultStore: uStore,
+	}
+}
+
+type ServicesMdGroupResult struct {
+	MdGroupResultStore db.AppStore
+}
+
+func (su *ServicesMdGroupResult) GetMasterMenus() ([]MasterMenu, error) {
+
+	// dummyBreadcrumb := []Breadcrumb{
+	// 	{
+	// 		Name: "Dashboard",
+	// 		Url:  "/client/dashboard",
+	// 	},
+	// 	{
+	// 		Name: "Front Office",
+	// 		Url:  "/client/usermanagement",
+	// 	},
+	// }
+
+	dummyMenu := []MasterMenu{
+		// 1. Dashboard
+		{
+			ID:             "1",
+			ParentMenuID:   "0",
+			ParentMenuName: "Dashboard",
+			ParentUrl:      "/client/md/dashboard",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "1",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Master User",
+					ChildrenMenuURL:  "/client/md/user",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 2. Front Office
+		{
+			ID:             "2",
+			ParentMenuID:   "1",
+			ParentMenuName: "Front Office",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "1",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Registrasi",
+					ChildrenMenuURL:  "/fo/registrasi",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 3. Station
+		{
+			ID:             "3",
+			ParentMenuID:   "2",
+			ParentMenuName: "Station",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "2",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Sample Station",
+					ChildrenMenuURL:  "/station/sample",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 4. Management MCU
+		{
+			ID:             "4",
+			ParentMenuID:   "3",
+			ParentMenuName: "Management MCU",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "3",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Setup MCU",
+					ChildrenMenuURL:  "/mcu/setup",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+				{
+					ChildrenParentID: "3",
+					ChildrenMenuID:   "2",
+					ChildrenMenuName: "Pre-Registrasi",
+					ChildrenMenuURL:  "/mcu/preregister",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 5. Master Data
+		{
+			ID:             "5",
+			ParentMenuID:   "4",
+			ParentMenuName: "Master Data",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				// * Master User
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Master User",
+					ChildrenMenuURL:  "/client/md/user",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Master User Group
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "2",
+					ChildrenMenuName: "Master User Group",
+					ChildrenMenuURL:  "/client/md/usergroup",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Master Corporate
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "3",
+					ChildrenMenuName: "Corporate",
+					ChildrenMenuURL:  "/client/md/corp",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Test
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "4",
+					ChildrenMenuName: "Test",
+					ChildrenMenuURL:  "/client/md/test",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Bahan
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "5",
+					ChildrenMenuName: "Bahan",
+					ChildrenMenuURL:  "/client/md/bahan",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Sample Type
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "6",
+					ChildrenMenuName: "Sample Type",
+					ChildrenMenuURL:  "/client/sample/type",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Sample Station
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "7",
+					ChildrenMenuName: "Sample Station",
+					ChildrenMenuURL:  "/station/sample",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Result Non Lab
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "8",
+					ChildrenMenuName: "Result Non Lab",
+					ChildrenMenuURL:  "/client/md/resultnonlab",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Template Fisik
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "9",
+					ChildrenMenuName: "Template Fisik",
+					ChildrenMenuURL:  "/client/md/template-fisik",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Pasien
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "10",
+					ChildrenMenuName: "Pasien",
+					ChildrenMenuURL:  "/client/md/pasien",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Dokter
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "11",
+					ChildrenMenuName: "Dokter",
+					ChildrenMenuURL:  "/client/md/dokter",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Paket
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "12",
+					ChildrenMenuName: "Paket",
+					ChildrenMenuURL:  "/client/md/paket",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Harga Single
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "13",
+					ChildrenMenuName: "Harga Single",
+					ChildrenMenuURL:  "/client/md/hargasingle",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+	}
+
+	return dummyMenu, nil
+}
+
+func (ug *ServicesMdGroupResult) GetUserGroup() ([]models.UserGroup, error) {
+	data := []models.UserGroup{
+		{UserGroupID: 1, UserGroupKode: "A", UserGroupName: "UG1"},
+		{UserGroupID: 2, UserGroupKode: "B", UserGroupName: "UG2"},
+		{UserGroupID: 3, UserGroupKode: "C", UserGroupName: "UG3"},
+	}
+	return data, nil
+}
+
+func (su *ServicesMdGroupResult) GetMdGroupResultBreadcrumb(title string) (models.BreadCrumbV1, error) {
+	var ret models.BreadCrumbV1
+
+	dummyBreadcrumb := []models.BreadCrumbV1{
+		{
+			Title: "Master User Group",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User Group",
+					Url:  "",
+				},
+			},
+		},
+
+		{
+			Title: "Master User",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User",
+					Url:  "",
+				},
+			},
+		},
+
+		{
+			Title: "Master Group Result",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "Group Result",
+					Url:  "",
+				},
+			},
+		},
+	}
+
+	for _, breadcrumb := range dummyBreadcrumb {
+		// if utils.Contains(breadcrumb.Title, title) {
+		// 	ret = breadcrumb
+		// 	return ret, nil
+		// }
+		if breadcrumb.Title == title {
+			ret = breadcrumb
+			return ret, nil
+		}
+	}
+
+	return ret, nil
+}
+
+// (LAB, NONLAB, FISIK, DOCTOR)
+// hardcore group result resume mcu
+func (ug *ServicesMdGroupResult) GetMdGroupResultResumeMcu() ([]models.GroupResultResumeMcu, error) {
+	data := []models.GroupResultResumeMcu{
+		{
+			ID:   1,
+			Text: "LAB",
+		},
+		{
+			ID:   2,
+			Text: "NONLAB",
+		},
+		{
+			ID:   3,
+			Text: "FISIK",
+		},
+		{
+			ID:   4,
+			Text: "DOCTOR",
+		},
+	}
+	return data, nil
+}
+
+// versi 2
+func (su *ServicesMdGroupResult) GetListMdGroupResult(search string, currentPage int, rowPerPage int) ([]models.GroupResult, int, error) {
+	var groupresultList []models.GroupResult
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	var totalData int
+	offset := (currentPage - 1) * rowPerPage
+
+	prm := "%" + strings.TrimSpace(search) + "%"
+	querytotal := `
+		SELECT COUNT(*) 
+		FROM group_result
+		WHERE Group_ResultIsActive = 'Y'
+		AND (Group_ResultName LIKE ? OR Group_ResultResumeMcu LIKE ?) 
+	`
+
+	logger.Info("QUERY SEARCH INITIAL TOTAL COUNT",
+		zap.String("query search", querytotal),
+	)
+
+	if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+
+	query := `
+		SELECT
+			ROW_NUMBER() OVER () AS nomor,
+			Group_ResultID,
+			IFNULL(Group_ResultName, '') AS Group_ResultName,
+			IFNULL(Group_ResultFlagPerTest, '') AS Group_ResultFlagPerTest,
+			IFNULL(Group_ResultFlagNonLab, '') AS Group_ResultFlagNonLab,
+			IFNULL(Group_ResultResumeMcu, '') AS Group_ResultResumeMcu,
+			Group_ResultIsActive
+		FROM group_result
+		WHERE Group_ResultIsActive = 'Y'
+		AND (Group_ResultName LIKE ? OR Group_ResultResumeMcu LIKE ?) 
+		ORDER BY Group_ResultID ASC
+		LIMIT ? OFFSET ?
+	`
+
+	logger.Info("QUERY SEARCH INITIAL",
+		zap.String("query search", query),
+	)
+
+	if err := dbx.Handlex.Select(&groupresultList, query, prm, prm, rowPerPage, offset); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+
+	totalPage := int(math.Ceil(float64(totalData) / float64(rowPerPage)))
+
+	return groupresultList, totalPage, nil
+}
+
+// GET BY ID
+func (ug *ServicesMdGroupResult) GetMdGroupResultByID(id string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+
+	var data models.GroupResult
+	err := dbx.Handlex.Get(&data, `SELECT 
+	Group_ResultID,
+    Group_ResultName,
+    CASE 
+        WHEN Group_ResultFlagPerTest = 'Y' THEN 'on' 
+        ELSE Group_ResultFlagPerTest 
+    END AS Group_ResultFlagPerTest,
+    CASE 
+        WHEN Group_ResultFlagNonLab = 'Y' THEN 'on' 
+        ELSE Group_ResultFlagNonLab 
+    END AS Group_ResultFlagNonLab,
+    Group_ResultResumeMcu,
+    Group_ResultIsActive
+	FROM group_result
+	WHERE Group_ResultID = ?`, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get data gr by id vs",
+			zap.String("ID", id),
+			zap.Error(err),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+// ADD DATA
+func (ug *ServicesMdGroupResult) AddMdGroupResult(groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, groupresultresumemcu string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+	var data models.GroupResult
+	var datacek []models.GroupResult
+	// var groupresultflagpertestConvert string = ""
+	// var groupresultflagnonlabConvert string = ""
+	// var groupresultresumemcuConvert string = ""
+
+	prm := "%" + strings.TrimSpace(groupresultname) + "%"
+	qryCek := `SELECT Group_ResultName FROM group_result WHERE Group_ResultName LIKE ? AND Group_ResultIsActive = 'Y'`
+	err := dbx.Handlex.Select(&datacek, qryCek, prm)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by groupresultname",
+			zap.String("groupresultname", groupresultname),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Group Result Name already taken by another data",
+			zap.String("groupresultname", groupresultname),
+		)
+		return data, fmt.Errorf("group result name sudah dipakai")
+	}
+	qry := `INSERT INTO group_result
+			(
+				Group_ResultName,
+				Group_ResultFlagPerTest,
+				Group_ResultFlagNonLab,
+				Group_ResultResumeMcu
+			)
+			VALUES (
+				?,
+				?,
+				?,
+				?
+			);`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, groupresultname, groupresultflagpertest, groupresultflagnonlab, groupresultresumemcu)
+	insertedID, err := rst.LastInsertId()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Insert group result",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	s := strconv.Itoa(int(insertedID))
+	data, err = ug.GetMdGroupResultByID(s)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+// EDIT DATA
+func (ug *ServicesMdGroupResult) EditMdGroupResult(id string, groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, groupresultresumemcu string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+	var data models.GroupResult
+	var datacek []models.GroupResult
+
+	prm := "%" + strings.TrimSpace(groupresultname) + "%"
+	qryCek := `SELECT Group_ResultName FROM group_result WHERE Group_ResultName LIKE ? AND Group_ResultIsActive = 'Y' AND Group_ResultID <> ?`
+	err := dbx.Handlex.Select(&datacek, qryCek, prm, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by code",
+			zap.String("groupresultname", groupresultname),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Code already taken by another data",
+			zap.String("groupresultname", groupresultname),
+		)
+		return data, fmt.Errorf("group result name sudah dipakai")
+	}
+
+	qry := `UPDATE group_result
+			SET Group_ResultName = ?,
+			Group_ResultFlagPerTest = ?,
+			Group_ResultFlagNonLab = ?,
+			Group_ResultResumeMcu = ?
+			WHERE Group_ResultID = ?`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, groupresultname, groupresultflagpertest, groupresultflagnonlab, groupresultresumemcu, id)
+	_, err = rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Update group result",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetMdGroupResultByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get group result by id",
+			zap.Any("groupresultname", groupresultname),
+			zap.Any("groupresultflagpertest", groupresultflagpertest),
+			zap.Any("groupresultflagnonlab", groupresultflagnonlab),
+			zap.Any("groupresultresumemcu", groupresultresumemcu),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+// DELETE DATA
+func (ug *ServicesMdGroupResult) DeleteMdGroupResult(id string) (models.GroupResult, error) {
+	logger, _ := zap.NewProduction()
+	var data models.GroupResult
+	qry := `UPDATE group_result
+			SET Group_ResultIsActive = 'N'
+			WHERE Group_ResultID = ?;`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, id)
+	_, err := rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error delete group result",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetMdGroupResultByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get group result by id",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
--- a/services/dev/md.natunit.services.go
+++ b/services/dev/md.natunit.services.go
@@ -0,0 +1,262 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+	"strconv"
+	"strings"
+
+	"go.uber.org/zap"
+)
+
+func NewMdNatUnitServices(uStore db.AppStore) *MdNatUnitServices {
+	return &MdNatUnitServices{
+		MdNatUnitStore: uStore,
+	}
+}
+
+type MdNatUnitServices struct {
+	MdNatUnitStore db.AppStore
+}
+
+func (nu *MdNatUnitServices) GetListMdNatUnit(search string, currentPage int, rowPerPage int) ([]models.NatUnit, int, error) {
+	var natUnitList []models.NatUnit
+	var totalData int
+	offset := (currentPage - 1) * rowPerPage
+	prm := "%" + strings.TrimSpace(search) + "%"
+	querytotal := `SELECT COUNT(*)
+			FROM nat_unit
+			WHERE Nat_UnitIsActive = 'Y'
+			AND (Nat_UnitCode LIKE ? OR Nat_UnitName LIKE ?)`
+
+	if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+
+	query := `SELECT ROW_NUMBER() OVER (ORDER BY Nat_UnitID DESC) AS nomor,
+		Nat_UnitID,
+		Nat_UnitCode,
+		Nat_UnitName,
+		Nat_UnitCreated,
+		Nat_UnitLastUpdated,
+		Nat_UnitIsActive
+		FROM nat_unit
+		WHERE Nat_UnitIsActive = 'Y'
+		AND (Nat_UnitCode LIKE ? OR Nat_UnitName LIKE ?)
+		ORDER BY Nat_UnitID DESC
+		LIMIT ? OFFSET ?`
+
+	if err := dbx.Handlex.Select(&natUnitList, query, prm, prm, rowPerPage, offset); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+	totalPage := int(math.Ceil(float64(totalData) / float64(rowPerPage)))
+
+	return natUnitList, totalPage, nil
+}
+
+func (nu *MdNatUnitServices) GetMdNatUnitBreadCrumb(title string) (models.BreadCrumbV1, error) {
+	var ret models.BreadCrumbV1
+
+	dummyBreadcrumb := []models.BreadCrumbV1{
+		{
+			Title: "Master Unit",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "Unit",
+					Url:  "",
+				},
+			},
+		},
+
+		{
+			Title: "Master User",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User",
+					Url:  "",
+				},
+			},
+		},
+	}
+
+	for _, breadcrumb := range dummyBreadcrumb {
+		if breadcrumb.Title == title {
+			ret = breadcrumb
+			return ret, nil
+		}
+	}
+
+	return ret, nil
+}
+
+func (nu *MdNatUnitServices) GetMdNatUnitByID(id string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+
+	var data models.NatUnit
+	err := dbx.Handlex.Get(&data, `SELECT * FROM nat_unit
+	WHERE Nat_UnitID = ?`, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get data unit by id",
+			zap.String("ID", id),
+			zap.Error(err),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (nu *MdNatUnitServices) AddMdNatUnit(code string, name string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+	var data models.NatUnit
+	var datacek []models.NatUnit
+
+	qryCek := `SELECT Nat_UnitCode FROM nat_unit
+		WHERE Nat_UnitCode = ? AND Nat_UnitIsActive = 'Y'`
+	err := dbx.Handlex.Select(&datacek, qryCek, code)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by code",
+			zap.String("code", code),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Code already taken by another data",
+			zap.String("code", code),
+		)
+		return data, fmt.Errorf("code sudah dipakai")
+	}
+
+	qry := `INSERT INTO nat_unit
+		(Nat_UnitCode,
+		Nat_UnitName) VALUES(?,?)`
+	rst := dbx.Handlex.MustExec(qry, code, name)
+	insertedID, err := rst.LastInsertId()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Insert natunit",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	s := strconv.Itoa(int(insertedID))
+	data, err = nu.GetMdNatUnitByID(s)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get natunit by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (nu *MdNatUnitServices) EditMdNatUnit(id string, code string, name string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+	var data models.NatUnit
+	var datacek []models.NatUnit
+
+	qryCek := `SELECT Nat_UnitCode FROM nat_unit
+		WHERE Nat_UnitCode = ? AND Nat_UnitIsActive = 'Y' AND Nat_UnitID <> ?`
+	err := dbx.Handlex.Select(&datacek, qryCek, code, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by code",
+			zap.String("code", code),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Code already taken by another data",
+			zap.String("code", code),
+		)
+		return data, fmt.Errorf("code sudah dipakai")
+	}
+
+	qry := `UPDATE nat_unit
+		SET Nat_UnitCode = ?,
+		Nat_UnitName = ?,
+		Nat_UnitLastUpdated = NOW()
+		WHERE Nat_UnitID = ?`
+	rst := dbx.Handlex.MustExec(qry, code, name, id)
+	_, err = rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Update natunit",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = nu.GetMdNatUnitByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get natunit by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (nu *MdNatUnitServices) DeleteMdNatUnit(id string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+	var data models.NatUnit
+	qry := `UPDATE nat_unit
+		SET Nat_UnitLastUpdated = NOW(),
+		Nat_UnitIsActive = 'N'
+		WHERE Nat_UnitID = ?`
+	rst := dbx.Handlex.MustExec(qry, id)
+	_, err := rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error delete nat unit",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = nu.GetMdNatUnitByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get nat unit by id",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
--- a/services/dev/md.usergroup.service.go
+++ b/services/dev/md.usergroup.service.go
@@ -184,7 +184,9 @@ func (ug *MdUserGroupServices) DeleteMdUserGroup(id string) (models.UserGroupV1,
 	logger, _ := zap.NewProduction()
 	var data models.UserGroupV1
 	qry := `UPDATE m_usergroup
-			SET M_UserGroupIsActive = 'N'
+			SET M_UserGroupIsActive = 'N',
+			M_UserGroupDeleted = NOW(),
+			M_UserGroupDeletedUserID = '1'
 			WHERE M_UserGroupID = ?;`
 	// time.Sleep(5 * time.Second)
 	rst := dbx.Handlex.MustExec(qry, id)
--- 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/services/public/kartukontrol.services.go
+++ b/services/public/kartukontrol.services.go
@@ -0,0 +1,112 @@
+package public_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+
+	"go.uber.org/zap"
+)
+
+func NewServicesKartuKontrol(uStore db.AppStore) *ServicesKartuKontrol {
+
+	return &ServicesKartuKontrol{
+		KartuKontrolStore: uStore,
+	}
+}
+
+type ServicesKartuKontrol struct {
+	KartuKontrolStore db.AppStore
+}
+
+func (su *ServicesKartuKontrol) GetkartuKontrolById(nomorRegistrasi string) ([]models.KartuKontrolModel, error) {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+	logger.Info("QUERY SEARCH GET KARTU KONTROL",
+		zap.String("query search", ""),
+	)
+
+	dataPasien := []models.DataPasien{
+		{
+			NomorRegistrasi: "00234",
+			NomorLab:        "LA90002",
+			NamaPasien:      "Hendra Setiawan",
+			TanggalLahir:    "2000-01-01",
+			Umur:            "24 tahun",
+			JenisKelamin:    "Laki-laki",
+			NamaDivisi:      "Development",
+			NamaCompany:     "PT. Sadhana Abiyasa Sampoerna",
+		},
+	}
+
+	dataPemeriksaanList := []models.DataPemeriksaanList{
+		{NamaPemeriksaanList: "Hematologi Lengkap"},
+		{NamaPemeriksaanList: "Urine Lengkap"},
+		{NamaPemeriksaanList: "ACG"},
+		{NamaPemeriksaanList: "Treadmill"},
+		{NamaPemeriksaanList: "Pemeriksaan Fisik"},
+		{NamaPemeriksaanList: "Hematologi Lengkap"},
+		{NamaPemeriksaanList: "Urine Lengkap"},
+		{NamaPemeriksaanList: "ACG"},
+		{NamaPemeriksaanList: "Treadmill"},
+		{NamaPemeriksaanList: "Pemeriksaan Fisik"},
+		{NamaPemeriksaanList: "Hematologi Lengkap"},
+		{NamaPemeriksaanList: "Urine Lengkap"},
+		{NamaPemeriksaanList: "ACG"},
+		{NamaPemeriksaanList: "Treadmill"},
+		{NamaPemeriksaanList: "Pemeriksaan Fisik"},
+		{NamaPemeriksaanList: "Hematologi Lengkap"},
+		{NamaPemeriksaanList: "Urine Lengkap"},
+		{NamaPemeriksaanList: "ACG"},
+		{NamaPemeriksaanList: "Treadmill"},
+		{NamaPemeriksaanList: "Pemeriksaan Fisik"},
+	}
+
+	dataPemeriksaanPengambilanSample := []models.DataPemeriksaanPengambilanSample{
+		{
+			NamaPemeriksaanPengambilanSample: "Laboratorium",
+			SampleTypeListData: []models.SampleTypeList{
+				{
+					SampleTypeName:     "Darah",
+					SampleTypeDateTime: "15-05-2024 10:00",
+					SampleTypeStatus:   "Sudah",
+				},
+				{
+					SampleTypeName:     "Urine",
+					SampleTypeDateTime: "15-05-2024 10:00",
+					SampleTypeStatus:   "Sudah",
+				},
+			},
+		},
+		{
+			NamaPemeriksaanPengambilanSample: "Rontgen",
+			SampleTypeListData: []models.SampleTypeList{
+				{
+					SampleTypeName:     "Thorax AP (PCR)",
+					SampleTypeDateTime: "",
+					SampleTypeStatus:   "Sudah",
+				},
+			},
+		},
+		{
+			NamaPemeriksaanPengambilanSample: "Elektromedis",
+			SampleTypeListData: []models.SampleTypeList{
+				{
+					SampleTypeName:     "ECG",
+					SampleTypeStatus:   "Belum",
+					SampleTypeDateTime: "",
+				},
+			},
+		},
+	}
+
+	kartuKontrol := []models.KartuKontrolModel{
+		{
+			KartuKontrolDataPasienList:                   dataPasien,
+			KartuKontrolDataPemeriksaanList:              dataPemeriksaanList,
+			KartuKontrolDataPemeriksaanPengambilanSample: dataPemeriksaanPengambilanSample,
+		},
+	}
+
+	return kartuKontrol, nil
+}
--- a/services/public/surveymcu.services.go
+++ b/services/public/surveymcu.services.go
@@ -0,0 +1,120 @@
+package public_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+
+	"go.uber.org/zap"
+)
+
+func NewServicesSurveyMcu(uStore db.AppStore) *SurveyMcuService {
+
+	return &SurveyMcuService{
+		SurveyMcuStore: uStore,
+	}
+}
+
+type SurveyMcuService struct {
+	SurveyMcuStore db.AppStore
+}
+
+func (su *SurveyMcuService) GetSurveyMcuByNoreg(nomorRegistrasi string) ([]models.SurveyMcu, error) {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+	logger.Info("QUERY SEARCH GET SURVEY MCU BY NOMOR REGISTRASI",
+		zap.String("query search", ""),
+	)
+
+	// radio button
+	dataItemSurveyMcu := []models.ItemSurveyMcu{
+		{
+			IDItemSurvey:    "1",
+			Nomor:           "1",
+			Pertanyaan:      "Bagaimana Penilaian Sikap & Keramahan Petugas?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-1",
+		},
+		{
+			IDItemSurvey:    "2",
+			Nomor:           "2",
+			Pertanyaan:      "Bagaimana Penilaian Penampilan Petugas?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-2",
+		},
+		{
+			IDItemSurvey:    "3",
+			Nomor:           "3",
+			Pertanyaan:      "Bagaimana Penilaian Ketrampilan Petugas?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-3",
+		},
+		{
+			IDItemSurvey:    "4",
+			Nomor:           "4",
+			Pertanyaan:      "Bagaimana Penilaian Pemberian Informasi Petugas?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-4",
+		},
+		{
+			IDItemSurvey:    "5",
+			Nomor:           "5",
+			Pertanyaan:      "Bagaimana Penilaian Kelengkapan Alat?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-5",
+		},
+		{
+			IDItemSurvey:    "6",
+			Nomor:           "6",
+			Pertanyaan:      "Bagaimana Penilaian Kelayakan Alat?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-6",
+		},
+		{
+			IDItemSurvey:    "7",
+			Nomor:           "7",
+			Pertanyaan:      "Bagaimana Penilaian Kebersihan Ruangan?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-7",
+		},
+		{
+			IDItemSurvey:    "8",
+			Nomor:           "8",
+			Pertanyaan:      "Bagaimana Penilaian Kebersihan Ruangan?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-8",
+		},
+		{
+			IDItemSurvey:    "9",
+			Nomor:           "9",
+			Pertanyaan:      "Bagaimana Penilaian Alur Pelayanan?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-9",
+		},
+		{
+			IDItemSurvey:    "10",
+			Nomor:           "10",
+			Pertanyaan:      "Bagaimana Penilaian Ketepatan Waktu?",
+			ErrorMessage:    "",
+			NameRadioButton: "radio-10",
+		},
+	}
+
+	// saran
+	dataItemSurveyMcuSaran := []models.ItemSurveyMcuSaran{
+		{
+			IDItemSurveyMcuSaran:       "11",
+			NameSurveyMcuSaran:         "saranmcu-11",
+			ErrorMessageSurveyMcuSaran: "",
+		},
+	}
+
+	surveymcu := []models.SurveyMcu{
+		{
+			DataListItemSurveyMcu:      dataItemSurveyMcu,
+			DataListItemSurveyMcuSaran: dataItemSurveyMcuSaran,
+		},
+	}
+
+	return surveymcu, nil
+}
--- a/utils/surveymcu.utils.go
+++ b/utils/surveymcu.utils.go
@@ -0,0 +1,35 @@
+package utils
+
+import (
+	"cpone/models"
+	"strings"
+)
+
+func GetIdSurveyMcu(id string) string {
+	return id
+}
+
+func ConcatHxIncludeSurveyMcu(dataSurveyMcu []models.SurveyMcu) string {
+	var elements []string
+
+	if len(dataSurveyMcu) > 0 {
+		for _, x := range dataSurveyMcu {
+			// radio button
+			if len(x.DataListItemSurveyMcu) > 0 {
+				for _, v := range x.DataListItemSurveyMcu {
+					elements = append(elements, "[name='radio-"+v.IDItemSurvey+"']", "[name='default-radio-"+v.IDItemSurvey+"']", "[name='id-radio']")
+				}
+			}
+
+			// saran
+			if len(x.DataListItemSurveyMcuSaran) > 0 {
+				for _, v := range x.DataListItemSurveyMcuSaran {
+					elements = append(elements, "[name='saranmcu-"+v.IDItemSurveyMcuSaran+"']", "[name='default-saranmcu-"+v.IDItemSurveyMcuSaran+"']", "[name='id-saran']")
+				}
+			}
+		}
+	}
+
+	// Gabungkan semua elemen dengan koma
+	return strings.Join(elements, ", ")
+}
--- a/views/dev/groupresult/groupresult.templ
+++ b/views/dev/groupresult/groupresult.templ
@@ -0,0 +1,388 @@
+package groupresult
+
+import (
+	"cpone/layout"
+	"cpone/models"
+	"cpone/component/modal"
+	"strconv"
+	"cpone/component/table"
+	"cpone/component/customtextfield"
+)
+
+// "cpone/component/sidebar_user_profile"
+templ ContentGroupResultV1(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filter templ.Component,
+	paginationGroupResult templ.Component,
+	modaladdform templ.Component,
+	modalEditform templ.Component,
+	modalDeleteform 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: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID})
+		<div class="row align-items-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-block align-items-center">
+				<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>
+		@filter
+		// table content
+		@tablecontent
+		@paginationGroupResult
+		<div class="d-flex justify-content-center text-primary">
+			<div class="htmx-indicator spinner-border text-primary" role="status" id="indicator">
+				<span class="sr-only"></span>
+			</div>
+		</div>
+		// hx-on::after-request="showtoast()"
+		// hx-on::reponse-error="cobaerror()"
+		// hx-on::send-error="cobaerror()"
+		@modaladdform
+		@modalEditform
+		@modalDeleteform
+		// @modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
+		@JSkuGroupResultV1()
+	</div>
+}
+
+templ TableRowGroupResultV1(data []models.GroupResult,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string) {
+	if len(data) == 0 {
+		<tr>
+			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
+		</tr>
+	}
+	for _, v := range data {
+		<tr>
+			<td>{ v.Group_ResultName }</td>
+			<td>{ v.Group_ResultFlagPerTest }</td>
+			<td>{ v.Group_ResultFlagNonLab }</td>
+			<td>{ v.Group_ResultResumeMcu }</td>
+			<td>
+				@TableAction(v.Group_ResultID, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete)
+			</td>
+		</tr>
+	}
+}
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	<div class="row px-5 d-flex justify-content-around">
+		<a
+			id="btneditug"
+			type="button"
+			class="btneditug 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={ hxGetEdit + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetEdit }
+			hx-swap={ hxSwapEdit }
+			hx-include={ hxIncludeEdit }
+		>
+			// { "/dev/usergroupshoweditform?id=" + strconv.Itoa(v.M_UserGroupID) }
+			// data-toggle="modal"
+			// data-target={ "#dialogEdit" + strconv.Itoa(v.M_UserGroupID) }
+			Edit
+		</a>
+		<a
+			id="btndeleteug"
+			type="button"
+			class=" btndeleteug 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={ hxGetDelete + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetDelete }
+			hx-swap={ hxSwapDelete }
+			hx-include={ hxIncludeDelete }
+		>
+			// hx-get={ "/dev/usergroupshowdeleteform?id=" + strconv.Itoa(v.M_UserGroupID) }
+			// data-toggle="modal"
+			// data-target={ "#dialogDelete" + strconv.Itoa(v.M_UserGroupID) }
+			Hapus
+		</a>
+	</div>
+}
+
+templ DialogDeleteGroupResultActionV1() {
+	<div>
+		<button
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="button"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+		>
+			Yakin
+		</button>
+	</div>
+}
+
+templ BtnCloseDeleteGroupResultV1() {
+	<button
+		type="button"
+		class="close"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ JSkuGroupResultV1() {
+	<script>
+		 function ShowLoading(evt) {
+        document
+          .getElementById("modalLoadEdit")
+          .setAttribute("style", "display:block !important;");
+        document
+          .getElementById("modalbdyEdit")
+          .setAttribute("style", "display:none !important;");
+		  console.log(evt);
+      }
+      function ShowForm() {
+        document
+          .getElementById("modalLoadEdit")
+          .setAttribute("style", "display:none !important;");
+        document
+          .getElementById("modalbdyEdit")
+          .setAttribute("style", "display:block !important;;");
+      }
+	</script>
+}
+
+templ CssMasterGroupResultV1x() {
+	<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; */
+    }
+    #div-chart {
+        /* overflow-x: scroll; */
+        margin: 40px 10vw 40px 10vw;
+    }
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+    #title {
+        font-weight: 600;
+    }
+	.dropdown-menu{
+		transform: translate3d(0px, 35px, 0px)!important;
+	}
+</style>
+}
+
+// for item dropdown
+templ ItemDropdown(dataDropdown []models.GroupResultResumeMcu, selectedId int) {
+	if len(dataDropdown) == 0 {
+		<option value="0" disabled selected>Tidak Ada Data</option>
+	} else {
+		for _, v := range dataDropdown {
+			if (selectedId == v.ID) {
+				<option value={ strconv.Itoa(v.ID) } selected>{ v.Text }</option>
+			} else {
+				<option value={ strconv.Itoa(v.ID) }>{ v.Text }</option>
+			}
+		}
+	}
+}
+
+// for empty div
+templ EmptyDiv1() {
+	<div></div>
+}
+
+templ ShowGroupResultV1x(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
+	}
+}
+
+// table
+templ TableGroupResult(data []models.GroupResult, tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string) {
+	<div id={ tableID } hx-swap-oob="true">
+		@tablecomponent.TableV3([]string{"GROUP RESULT NAME", "RESULT FLAG PER TEST", "RESULT FLAG NON LAB", "RESULT RESUME MCU", "AKSI"},
+			[]string{"20%", "20%", "20%", "20%", "20%"},
+			TableRowGroupResultV1(data, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete))
+	</div>
+}
+
+templ SwapTableGroupResult(pagination templ.Component, table templ.Component) {
+	@pagination
+	@table
+}
+
+templ GroupResultForm(data models.GroupResultFormComponent) {
+	<div class="">
+		<form
+			id={ data.IDComponent }
+			hx-post={ data.Link }
+			class="form"
+			hx-target={ data.HxTarget }
+			hx-swap={ data.HxSwap }
+			hx-include={ data.HxInclude }
+			hx-on::before-request={ HandleFormBeforeRequest() }
+			hx-on::after-request={ HandleFormAfterRequest() }
+		>
+			@modalcomponent.Modal(data.ModalID,
+				data.ModalTitle,
+				data.DialogBody,
+				data.DialogAction,
+				data.ButtonCLose)
+		</form>
+	</div>
+}
+
+script HandleFormBeforeRequest() {
+	console.log("handle disable btn add");
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+		boxes[i].setAttribute('disabled', 'true');
+		
+	}
+}
+
+script HandleFormAfterRequest() {
+	console.log("handle enable btn add");
+
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+			boxes[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		<p>{ message }</p>
+		<div class="card rounded-lg">
+			<div class="card-body d-flex flex-row">
+				<div class="d-flex flex-column">
+					for _, v := range datHeader {
+						<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
+					}
+				</div>
+				<div class="d-flex flex-column ">
+					for _, v := range dataText {
+						<div class="mb-1 mt-1 font-weight-bold">
+							{ v }
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+		@customtextfield.CustomTextFieldv2(inputId)
+	</div>
+}
--- a/views/dev/groupresult/groupresult_templ.go
+++ b/views/dev/groupresult/groupresult_templ.go
--- a/views/dev/groupresult/modaladdgroupresult.templ
+++ b/views/dev/groupresult/modaladdgroupresult.templ
@@ -0,0 +1,111 @@
+package groupresult
+
+import (
+	"cpone/models"
+	"cpone/component/customtextfield"
+	"cpone/component/customcheckbox"
+	"cpone/component/customdropdown"
+)
+
+templ DialogNewBodyV1(inputId models.CustomTextFieldv2Prm,
+	inputGrName models.CustomTextFieldv2Prm,
+	checkboxGrFlagPerTest models.CustomCheckboxv1Prm,
+	checkboxGrFlagNonLab models.CustomCheckboxv1Prm,
+	dropdownGrResumeMcu models.CustomDropdownv1Prm,
+	listItem templ.Component,
+	componentID string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		@customtextfield.CustomTextFieldv2(
+			inputId)
+		@customtextfield.CustomTextFieldv2(
+			inputGrName)
+		@customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagPerTest)
+		@customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagNonLab)
+		@customdropdown.MainCustomDropdownInput(
+			dropdownGrResumeMcu,
+			listItem)
+	</div>
+	<script>
+    document.addEventListener('htmx:afterSwap', function(event) {
+        // Reinitialize selectpicker after HTMX content swap
+        $('.selectpicker').selectpicker('refresh');
+    });
+    </script>
+}
+
+script HandleJSModalAddGR(modalID string) {
+	$(modalID).modal('hide');
+}
+
+script HandleJSModalAddGRShow(modalID string) {
+	$(modalID).modal('show')
+}
+
+templ DialogNewActionV1(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ HandleJSModalAddGR(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact"
+		>
+			Save
+		</button>
+	</div>
+}
+
+templ DialogNewAction() {
+	<div>
+		<button
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+		>
+			Save changes
+		</button>
+	</div>
+}
+
+templ BtnCloseNew() {
+	<button
+		type="button"
+		class="close"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ BtnCloseNewV1(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<button
+		hx-post={ LinkClose }
+		hx-target={ targetClose }
+		hx-swap={ hxSwapClose }
+		type="button"
+		hx-on::after-request={ HandleJSModalAddGR(modalID) }
+		class="close btnaddact"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
--- a/views/dev/groupresult/modaladdgroupresult_templ.go
+++ b/views/dev/groupresult/modaladdgroupresult_templ.go
@@ -0,0 +1,329 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package groupresult
+
+//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/customcheckbox"
+	"cpone/component/customdropdown"
+	"cpone/component/customtextfield"
+	"cpone/models"
+)
+
+func DialogNewBodyV1(inputId models.CustomTextFieldv2Prm,
+	inputGrName models.CustomTextFieldv2Prm,
+	checkboxGrFlagPerTest models.CustomCheckboxv1Prm,
+	checkboxGrFlagNonLab models.CustomCheckboxv1Prm,
+	dropdownGrResumeMcu models.CustomDropdownv1Prm,
+	listItem templ.Component,
+	componentID string,
+	hxOnLoad templ.ComponentScript) 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.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, 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(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\groupresult\modaladdgroupresult.templ`, Line: 18, Col: 22}
+		}
+		_, 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-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3.Call)
+		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
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputId).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputGrName).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagPerTest).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagNonLab).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customdropdown.MainCustomDropdownInput(
+			dropdownGrResumeMcu,
+			listItem).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><script>\r\n    document.addEventListener('htmx:afterSwap', function(event) {\r\n        // Reinitialize selectpicker after HTMX content swap\r\n        $('.selectpicker').selectpicker('refresh');\r\n    });\r\n    </script>")
+		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 HandleJSModalAddGR(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleJSModalAddGR_a6af`,
+		Function: `function __templ_HandleJSModalAddGR_a6af(modalID){$(modalID).modal('hide');
+}`,
+		Call:       templ.SafeScript(`__templ_HandleJSModalAddGR_a6af`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_HandleJSModalAddGR_a6af`, modalID),
+	}
+}
+
+func HandleJSModalAddGRShow(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleJSModalAddGRShow_3147`,
+		Function: `function __templ_HandleJSModalAddGRShow_3147(modalID){$(modalID).modal('show')
+}`,
+		Call:       templ.SafeScript(`__templ_HandleJSModalAddGRShow_3147`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_HandleJSModalAddGRShow_3147`, modalID),
+	}
+}
+
+func DialogNewActionV1(LinkClose string, targetClose string, hxSwapClose string, modalID 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_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("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleJSModalAddGR(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 templ.ComponentScript = HandleJSModalAddGR(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\groupresult\modaladdgroupresult.templ`, Line: 51, Col: 22}
+		}
+		_, 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("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\groupresult\modaladdgroupresult.templ`, Line: 52, Col: 26}
+		}
+		_, 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("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\groupresult\modaladdgroupresult.templ`, Line: 53, Col: 24}
+		}
+		_, 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("\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact\" data-dismiss=\"modal\">Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact\">Save\r</button></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 DialogNewAction() 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><button type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4\" data-dismiss=\"modal\">Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\">Save changes\r</button></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 BtnCloseNew() 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)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		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 BtnCloseNewV1(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleJSModalAddGR(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\groupresult\modaladdgroupresult.templ`, Line: 100, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\groupresult\modaladdgroupresult.templ`, Line: 101, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\groupresult\modaladdgroupresult.templ`, Line: 102, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 templ.ComponentScript = HandleJSModalAddGR(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnaddact\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		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/groupresult/modaleditgroupresult.templ
+++ b/views/dev/groupresult/modaleditgroupresult.templ
@@ -0,0 +1,101 @@
+package groupresult
+
+import (
+	"cpone/models"
+	"cpone/component/customtextfield"
+	"cpone/component/customcheckbox"
+	"cpone/component/customdropdown"
+)
+
+templ DialogEditForm(groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, listItem templ.Component) {
+	@customtextfield.CustomTextFieldv2(
+		models.CustomTextFieldv2Prm{
+			Label:       "Group Result name",
+			Name:        "groupresultid",
+			Placeholder: "Group Result name",
+			Type:        "hidden",
+			ID:          "groupresultid",
+		})
+	@customtextfield.CustomTextFieldv2(
+		models.CustomTextFieldv2Prm{
+			Label:       "Group Result Name",
+			Name:        "groupresultname",
+			Placeholder: "Group Result Name",
+			Value:       groupresultname,
+			Type:        "text", ID: "groupresultname"})
+	@customcheckbox.MainCustomCheckboxInput(
+		models.CustomCheckboxv1Prm{
+			Label: "Group Result Flag Per Test (Dicentang Maka Ya)",
+			Name:  "groupresultflagpertest",
+			ID:    "groupresultflagpertest",
+			Value: groupresultflagpertest,
+		})
+	@customcheckbox.MainCustomCheckboxInput(
+		models.CustomCheckboxv1Prm{
+			Label: "Group Result Flag Non Lab (Dicentang Maka Ya)",
+			Name:  "groupresultflagnonlab",
+			ID:    "groupresultflagnonlab",
+			Value: groupresultflagnonlab,
+		})
+	@customdropdown.MainCustomDropdownInput(
+		models.CustomDropdownv1Prm{
+			Label: "Group Result Resume MCU",
+			Name:  "groupresultresumemcu",
+			ID:    "groupresultresumemcu",
+		},
+		listItem)
+}
+
+templ DialogEditBody(groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, listItem templ.Component) {
+	<div id="modalbdyEdit">
+		@DialogEditForm(groupresultname, groupresultflagpertest, groupresultflagnonlab, listItem)
+	</div>
+	<div>
+		// <div class="text-center text-primary" id="modalLoadEdit" style="">
+		// 	<div class="spinner-border" role="status"></div>
+		// </div>
+	</div>
+}
+
+templ LoadingSpinner() {
+	<div id="modalbdyEdit">
+		<div class="text-center text-primary">
+			<div class="spinner-border" role="status"></div>
+		</div>
+	</div>
+}
+
+templ DialogEditAction() {
+	<div>
+		<button
+			id="btledit"
+			type="button"
+			hx-swap="delete"
+			hx-target="#modalbdyEdit"
+			onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="button"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+		>
+			Save changes
+		</button>
+	</div>
+}
+
+templ BtnCloseEdit() {
+	<button
+		type="button"
+		class="close"
+		data-dismiss="modal"
+		aria-label="Close"
+		hx-target="#modalbdyEdit"
+		onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
--- a/views/dev/groupresult/modaleditgroupresult_templ.go
+++ b/views/dev/groupresult/modaleditgroupresult_templ.go
@@ -0,0 +1,193 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package groupresult
+
+//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/customcheckbox"
+	"cpone/component/customdropdown"
+	"cpone/component/customtextfield"
+	"cpone/models"
+)
+
+func DialogEditForm(groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, listItem 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 = customtextfield.CustomTextFieldv2(
+			models.CustomTextFieldv2Prm{
+				Label:       "Group Result name",
+				Name:        "groupresultid",
+				Placeholder: "Group Result name",
+				Type:        "hidden",
+				ID:          "groupresultid",
+			}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			models.CustomTextFieldv2Prm{
+				Label:       "Group Result Name",
+				Name:        "groupresultname",
+				Placeholder: "Group Result Name",
+				Value:       groupresultname,
+				Type:        "text", ID: "groupresultname"}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customcheckbox.MainCustomCheckboxInput(
+			models.CustomCheckboxv1Prm{
+				Label: "Group Result Flag Per Test (Dicentang Maka Ya)",
+				Name:  "groupresultflagpertest",
+				ID:    "groupresultflagpertest",
+				Value: groupresultflagpertest,
+			}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customcheckbox.MainCustomCheckboxInput(
+			models.CustomCheckboxv1Prm{
+				Label: "Group Result Flag Non Lab (Dicentang Maka Ya)",
+				Name:  "groupresultflagnonlab",
+				ID:    "groupresultflagnonlab",
+				Value: groupresultflagnonlab,
+			}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customdropdown.MainCustomDropdownInput(
+			models.CustomDropdownv1Prm{
+				Label: "Group Result Resume MCU",
+				Name:  "groupresultresumemcu",
+				ID:    "groupresultresumemcu",
+			},
+			listItem).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 DialogEditBody(groupresultname string, groupresultflagpertest string, groupresultflagnonlab string, listItem 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_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"modalbdyEdit\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = DialogEditForm(groupresultname, groupresultflagpertest, groupresultflagnonlab, listItem).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><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 LoadingSpinner() 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)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"modalbdyEdit\"><div class=\"text-center text-primary\"><div class=\"spinner-border\" role=\"status\"></div></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 DialogEditAction() 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("<div><button id=\"btledit\" type=\"button\" hx-swap=\"delete\" hx-target=\"#modalbdyEdit\" onclick=\"htmx.trigger(&#39;.btneditusgp&#39;, &#39;htmx:abort&#39;)\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4\" data-dismiss=\"modal\">Batal\r</button> <button type=\"button\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\">Save changes\r</button></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 BtnCloseEdit() 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)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" hx-target=\"#modalbdyEdit\" onclick=\"htmx.trigger(&#39;.btneditusgp&#39;, &#39;htmx:abort&#39;)\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		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/mdgroupresult/mdgroupresult.templ
+++ b/views/dev/mdgroupresult/mdgroupresult.templ
@@ -0,0 +1,237 @@
+package dev_mdgroupresultview
+
+import (
+	"cpone/layout"
+	"cpone/component/customtextfield"
+	"cpone/models"
+	"strconv"
+)
+
+templ MdGroupResultScreen(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterComponent templ.Component,
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm 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: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID})
+		<div class="row align-items-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-block align-items-center">
+				<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>
+		@filterComponent
+		<div id="loading-parent" class=" rounded">
+			@tablecontent
+			@paginationComponent
+			@modalAddForm
+			@modalEditForm
+			@modalDeleteForm
+			<div id="loading-child" class=" rounded bg-transparent">
+				// <div class="spinner spinner-lg spinner-primary"></div>
+				<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+		</div>
+		<div id="loadingcontent"></div>
+	</div>
+}
+
+// for item dropdown
+templ ItemDropdown(dataDropdown []models.GroupResultResumeMcu, selectedId int) {
+	if len(dataDropdown) == 0 {
+		<option value="0" disabled selected>Tidak Ada Data</option>
+	} else {
+		for _, v := range dataDropdown {
+			if (selectedId == v.ID) {
+				<option value={ strconv.Itoa(v.ID) } selected>{ v.Text }</option>
+			} else {
+				<option value={ strconv.Itoa(v.ID) }>{ v.Text }</option>
+			}
+		}
+	}
+}
+
+// for empty div
+templ EmptyDiv1() {
+	<div></div>
+}
+
+templ CssMdGroupResult() {
+	<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; */
+    }
+    #div-chart {
+        /* overflow-x: scroll; */
+        margin: 40px 10vw 40px 10vw;
+    }
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+    #title {
+        font-weight: 600;
+    }
+    .dropdown-menu{
+		transform: translate3d(0px, 35px, 0px)!important;
+	}
+    
+</style>
+}
+
+templ JsMdGroupResult() {
+	<script>
+        function onLoadingStart() {
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.add("overlay");
+			// loadingParent.classList.add("overlay-block");
+			// loadingChild.classList.add("overlay-layer");
+			// loadingSpinner.classList.remove("d-none");
+
+            // Additional logic when loading starts
+        }
+
+        function onLoadingEnd() {
+            console.log('Loading ended');
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.remove("overlay");
+			// loadingParent.classList.remove("overlay-block");
+			// loadingChild.classList.remove("overlay-layer");
+			// loadingSpinner.classList.add("d-none");
+        }
+
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+			console.log(event.detail.xhr)
+			console.log(event.detail.elt)
+            if (indicator) {
+                onLoadingStart();
+            }
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+            if (indicator) {
+                onLoadingEnd();
+            }
+        });
+    </script>
+}
+
+script BeforeRequestContentMdGroupResult() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}
+
+script AfterRequestContentMdGroupResult() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}
+
+templ ShowMdGroupResultScreen(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/mdgroupresult/mdgroupresult_templ.go
+++ b/views/dev/mdgroupresult/mdgroupresult_templ.go
@@ -0,0 +1,433 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdgroupresultview
+
+//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"
+	"strconv"
+)
+
+func MdGroupResultScreen(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterComponent templ.Component,
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm 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: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID}).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 = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID}).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-items-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\mdgroupresult\mdgroupresult.templ`, Line: 75, Col: 37}
+		}
+		_, 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\mdgroupresult\mdgroupresult.templ`, Line: 84, Col: 36}
+		}
+		_, 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 = filterComponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\" rounded\">")
+		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 = paginationComponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalAddForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalEditForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalDeleteForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\" rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></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
+	})
+}
+
+// for item dropdown
+func ItemDropdown(dataDropdown []models.GroupResultResumeMcu, selectedId int) 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)
+		if len(dataDropdown) == 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"0\" disabled selected>Tidak Ada Data</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			for _, v := range dataDropdown {
+				if selectedId == v.ID {
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var5 string
+					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(v.ID))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresult.templ`, Line: 113, Col: 38}
+					}
+					_, 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("\" selected>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var6 string
+					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v.Text)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresult.templ`, Line: 113, Col: 58}
+					}
+					_, 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("</option>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				} else {
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var7 string
+					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(v.ID))
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresult.templ`, Line: 115, Col: 38}
+					}
+					_, 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.Text)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresult.templ`, Line: 115, Col: 49}
+					}
+					_, 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("</option>")
+					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
+	})
+}
+
+// for empty div
+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_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></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 CssMdGroupResult() 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)
+		_, 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    #div-chart {\r\n        /* overflow-x: scroll; */\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    .dropdown-menu{\r\n\t\ttransform: translate3d(0px, 35px, 0px)!important;\r\n\t}\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 JsMdGroupResult() 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("<script>\r\n        function onLoadingStart() {\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.add(\"overlay\");\r\n\t\t\t// loadingParent.classList.add(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.add(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.remove(\"d-none\");\r\n\r\n            // Additional logic when loading starts\r\n        }\r\n\r\n        function onLoadingEnd() {\r\n            console.log('Loading ended');\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.remove(\"overlay\");\r\n\t\t\t// loadingParent.classList.remove(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.remove(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.add(\"d-none\");\r\n        }\r\n\r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.elt)\r\n            if (indicator) {\r\n                onLoadingStart();\r\n            }\r\n        });\r\n\r\n        document.addEventListener('htmx:afterRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n            if (indicator) {\r\n                onLoadingEnd();\r\n            }\r\n        });\r\n    </script>")
+		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 BeforeRequestContentMdGroupResult() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_BeforeRequestContentMdGroupResult_911f`,
+		Function: `function __templ_BeforeRequestContentMdGroupResult_911f(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_BeforeRequestContentMdGroupResult_911f`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContentMdGroupResult_911f`),
+	}
+}
+
+func AfterRequestContentMdGroupResult() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContentMdGroupResult_6cc0`,
+		Function: `function __templ_AfterRequestContentMdGroupResult_6cc0(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_AfterRequestContentMdGroupResult_6cc0`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContentMdGroupResult_6cc0`),
+	}
+}
+
+func ShowMdGroupResultScreen(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
+	})
+}
--- a/views/dev/mdgroupresult/mdgroupresultformmodal.templ
+++ b/views/dev/mdgroupresult/mdgroupresultformmodal.templ
@@ -0,0 +1,203 @@
+package dev_mdgroupresultview
+
+import "cpone/models"
+import "cpone/component/modal"
+import "cpone/component/customtextfield"
+import "cpone/component/customcheckbox"
+import "cpone/component/customdropdown"
+
+templ GroupResultForm(data models.GroupResultFormComponent) {
+	<div class="">
+		<form
+			id={ data.IDComponent }
+			hx-post={ data.Link }
+			class="form"
+			hx-target={ data.HxTarget }
+			hx-swap={ data.HxSwap }
+			hx-include={ data.HxInclude }
+			hx-indicator=".formloading"
+			hx-on::before-request={ HandleFormBeforeRequest() }
+			hx-on::after-request={ HandleFormAfterRequest() }
+		>
+			@modalcomponent.Modal(data.ModalID,
+				data.ModalTitle,
+				data.DialogBody,
+				data.DialogAction,
+				data.ButtonCLose)
+		</form>
+	</div>
+}
+
+script HandleFormBeforeRequest() {
+	console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
+		
+	}
+}
+
+script HandleFormAfterRequest() {
+	console.log("handle enable btn add");
+
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ BodyFormGroupResult(inputId models.CustomTextFieldv2Prm,
+	inputGrName models.CustomTextFieldv2Prm,
+	checkboxGrFlagPerTest models.CustomCheckboxv1Prm,
+	checkboxGrFlagNonLab models.CustomCheckboxv1Prm,
+	dropdownGrResumeMcu models.CustomDropdownv1Prm,
+	listItem templ.Component,
+	componentID string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		@customtextfield.CustomTextFieldv2(
+			inputId)
+		@customtextfield.CustomTextFieldv2(
+			inputGrName)
+		@customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagPerTest)
+		@customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagNonLab)
+		@customdropdown.MainCustomDropdownInput(
+			dropdownGrResumeMcu,
+			listItem)
+	</div>
+	<script>
+    document.addEventListener('htmx:afterSwap', function(event) {
+        // Reinitialize selectpicker after HTMX content swap
+        $('.selectpicker').selectpicker('refresh');
+    });
+    </script>
+}
+
+script JsHideModalGroupResult(modalID string) {
+	$(modalID).modal('hide')
+}
+
+script JsShowModalGroupResult(modalID string) {
+	$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ ActionFormGroupResult(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModalGroupResult(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel "
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Simpan
+		</button>
+	</div>
+}
+
+templ BtnCloseFormGroupResult(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<button
+		hx-post={ LinkClose }
+		hx-target={ targetClose }
+		hx-swap={ hxSwapClose }
+		type="button"
+		hx-on::after-request={ JsHideModalGroupResult(modalID) }
+		class="close btnactcancel"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ DeleteConfirmationBodyGroupResult(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		<p>{ message }</p>
+		<div class="card rounded-lg">
+			<div class="card-body d-flex flex-row">
+				<div class="d-flex flex-column">
+					for _, v := range datHeader {
+						<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
+					}
+				</div>
+				<div class="d-flex flex-column ">
+					for _, v := range dataText {
+						<div class="mb-1 mt-1 font-weight-bold">
+							{ v }
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+		@customtextfield.CustomTextFieldv2(inputId)
+	</div>
+}
+
+templ ActionFormGroupResultDelete(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModalGroupResult(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Yakin
+		</button>
+	</div>
+}
--- a/views/dev/mdgroupresult/mdgroupresultformmodal_templ.go
+++ b/views/dev/mdgroupresult/mdgroupresultformmodal_templ.go
@@ -0,0 +1,665 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdgroupresultview
+
+//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/modal"
+import "cpone/component/customtextfield"
+import "cpone/component/customcheckbox"
+import "cpone/component/customdropdown"
+
+func GroupResultForm(data models.GroupResultFormComponent) 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=\"\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleFormBeforeRequest(), HandleFormAfterRequest())
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(data.IDComponent)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 12, Col: 24}
+		}
+		_, 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-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(data.Link)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 13, Col: 22}
+		}
+		_, 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("\" class=\"form\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 15, Col: 28}
+		}
+		_, 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("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 16, Col: 24}
+		}
+		_, 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("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 17, Col: 30}
+		}
+		_, 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("\" hx-indicator=\".formloading\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 templ.ComponentScript = HandleFormBeforeRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.ComponentScript = HandleFormAfterRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+		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
+		}
+		templ_7745c5c3_Err = modalcomponent.Modal(data.ModalID,
+			data.ModalTitle,
+			data.DialogBody,
+			data.DialogAction,
+			data.ButtonCLose).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form></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 HandleFormBeforeRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormBeforeRequest_2922`,
+		Function: `function __templ_HandleFormBeforeRequest_2922(){console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_2922`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_2922`),
+	}
+}
+
+func HandleFormAfterRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormAfterRequest_956b`,
+		Function: `function __templ_HandleFormAfterRequest_956b(){console.log("handle enable btn add");
+
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormAfterRequest_956b`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterRequest_956b`),
+	}
+}
+
+func BodyFormGroupResult(inputId models.CustomTextFieldv2Prm,
+	inputGrName models.CustomTextFieldv2Prm,
+	checkboxGrFlagPerTest models.CustomCheckboxv1Prm,
+	checkboxGrFlagNonLab models.CustomCheckboxv1Prm,
+	dropdownGrResumeMcu models.CustomDropdownv1Prm,
+	listItem templ.Component,
+	componentID string,
+	hxOnLoad templ.ComponentScript) 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.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 71, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11.Call)
+		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
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputId).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputGrName).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagPerTest).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customcheckbox.MainCustomCheckboxInput(
+			checkboxGrFlagNonLab).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customdropdown.MainCustomDropdownInput(
+			dropdownGrResumeMcu,
+			listItem).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><script>\r\n    document.addEventListener('htmx:afterSwap', function(event) {\r\n        // Reinitialize selectpicker after HTMX content swap\r\n        $('.selectpicker').selectpicker('refresh');\r\n    });\r\n    </script>")
+		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 JsHideModalGroupResult(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsHideModalGroupResult_da6c`,
+		Function: `function __templ_JsHideModalGroupResult_da6c(modalID){$(modalID).modal('hide')
+}`,
+		Call:       templ.SafeScript(`__templ_JsHideModalGroupResult_da6c`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsHideModalGroupResult_da6c`, modalID),
+	}
+}
+
+func JsShowModalGroupResult(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsShowModalGroupResult_b74d`,
+		Function: `function __templ_JsShowModalGroupResult_b74d(modalID){$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_JsShowModalGroupResult_b74d`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsShowModalGroupResult_b74d`, modalID),
+	}
+}
+
+func ActionFormGroupResult(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModalGroupResult(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 templ.ComponentScript = JsHideModalGroupResult(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 116, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 117, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 118, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel \" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Simpan\r</button></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 BtnCloseFormGroupResult(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var17 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var17 == nil {
+			templ_7745c5c3_Var17 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModalGroupResult(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 139, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 140, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 141, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = JsHideModalGroupResult(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnactcancel\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		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 DeleteConfirmationBodyGroupResult(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) 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_Var22 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var22 == nil {
+			templ_7745c5c3_Var22 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 158, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var24.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 159, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><div class=\"card rounded-lg\"><div class=\"card-body d-flex flex-row\"><div class=\"d-flex flex-column\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range datHeader {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 text-disabled font-weight-bold mr-5\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var26 string
+			templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 164, Col: 68}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+			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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range dataText {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 font-weight-bold\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var27 string
+			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 170, Col: 10}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+			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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(inputId).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 ActionFormGroupResultDelete(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var28 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var28 == nil {
+			templ_7745c5c3_Var28 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModalGroupResult(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var29 templ.ComponentScript = JsHideModalGroupResult(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var29.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 184, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var31 string
+		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 185, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 string
+		templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresultformmodal.templ`, Line: 186, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel\" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Yakin\r</button></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/mdgroupresult/mdgroupresulttable.templ
+++ b/views/dev/mdgroupresult/mdgroupresulttable.templ
@@ -0,0 +1,131 @@
+package dev_mdgroupresultview
+
+import "cpone/component/table"
+import "cpone/models"
+import "strconv"
+
+templ TableGroupResult(data []models.GroupResult,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	<div id={ tableID } hx-swap-oob="true">
+		@tablecomponent.TableV3([]string{"GROUP RESULT NAME", "RESULT FLAG PER TEST", "RESULT FLAG NON LAB", "RESULT RESUME MCU", "AKSI"},
+			[]string{"20%", "20%", "20%", "20%", "20%"},
+			RowGroupResult(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			))
+	</div>
+}
+
+templ RowGroupResult(data []models.GroupResult,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	if len(data) == 0 {
+		<tr>
+			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
+		</tr>
+	}
+	for _, v := range data {
+		<tr>
+			<td>{ v.Group_ResultName }</td>
+			<td>{ v.Group_ResultFlagPerTest }</td>
+			<td>{ v.Group_ResultFlagNonLab }</td>
+			<td>{ v.Group_ResultResumeMcu }</td>
+			<td>
+				@TableAction(v.Group_ResultID,
+					hxGetEdit,
+					hxTargetEdit,
+					hxSwapEdit,
+					hxIncludeEdit,
+					hxGetDelete,
+					hxTargetDelete,
+					hxSwapDelete,
+					hxIncludeDelete,
+				)
+			</td>
+		</tr>
+	}
+}
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+
+) {
+	<div class="row px-5 d-flex justify-content-around">
+		<a
+			type="button"
+			class="btnactiongr col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm"
+			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetEdit }
+			hx-swap={ hxSwapEdit }
+			hx-include={ hxIncludeEdit }
+			hx-indicator={ "#spnredt" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnredt" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Edit
+		</a>
+		<a
+			type="button"
+			class=" btnactiongr col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
+			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetDelete }
+			hx-swap={ hxSwapDelete }
+			hx-include={ hxIncludeDelete }
+			hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Hapus
+		</a>
+	</div>
+}
+
+script HandleBeforeRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactiongr');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	console.log(id)
+}
+
+script HandleAfterRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactiongr');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	console.log(id)
+}
--- a/views/dev/mdgroupresult/mdgroupresulttable_templ.go
+++ b/views/dev/mdgroupresult/mdgroupresulttable_templ.go
@@ -0,0 +1,464 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdgroupresultview
+
+//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/table"
+import "cpone/models"
+import "strconv"
+
+func TableGroupResult(data []models.GroupResult,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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\mdgroupresult\mdgroupresulttable.templ`, Line: 18, Col: 18}
+		}
+		_, 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-swap-oob=\"true\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"GROUP RESULT NAME", "RESULT FLAG PER TEST", "RESULT FLAG NON LAB", "RESULT RESUME MCU", "AKSI"},
+			[]string{"20%", "20%", "20%", "20%", "20%"},
+			RowGroupResult(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			)).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 RowGroupResult(data []models.GroupResult,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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_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=\"3\" 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.Group_ResultName)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 51, Col: 27}
+			}
+			_, 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.Group_ResultFlagPerTest)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 52, Col: 34}
+			}
+			_, 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.Group_ResultFlagNonLab)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 53, Col: 33}
+			}
+			_, 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
+			}
+			var templ_7745c5c3_Var7 string
+			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(v.Group_ResultResumeMcu)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 54, Col: 32}
+			}
+			_, 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("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = TableAction(v.Group_ResultID,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			).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 TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\"btnactiongr col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetEdit + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 87, Col: 49}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 88, Col: 27}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 89, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 90, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs("#spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 91, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 95, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Edit\r</a> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\" btnactiongr col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetDelete + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 101, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 102, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 103, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 104, Col: 31}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs("#spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 105, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var22.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var23.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs("spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdgroupresult\mdgroupresulttable.templ`, Line: 109, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Hapus\r</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 HandleBeforeRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleBeforeRequestRow_8869`,
+		Function: `function __templ_HandleBeforeRequestRow_8869(id){var cusid_ele = document.getElementsByClassName('btnactiongr');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleBeforeRequestRow_8869`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleBeforeRequestRow_8869`, id),
+	}
+}
+
+func HandleAfterRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleAfterRequestRow_ef01`,
+		Function: `function __templ_HandleAfterRequestRow_ef01(id){var cusid_ele = document.getElementsByClassName('btnactiongr');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleAfterRequestRow_ef01`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleAfterRequestRow_ef01`, id),
+	}
+}
--- a/views/dev/mdnatunit/mdnatunit.templ
+++ b/views/dev/mdnatunit/mdnatunit.templ
@@ -0,0 +1,212 @@
+package dev_mdnatunitview
+
+import (
+	"cpone/layout"
+	"cpone/component/customtextfield"
+	"cpone/models"
+)
+
+templ MdNatUnitScreen(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterComponent templ.Component,
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm 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: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID})
+		<div class="row align-items-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-block align-items-center">
+				<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>
+		@filterComponent
+		<div id="loading-parent" class=" rounded">
+			@tablecontent
+			@paginationComponent
+			@modalAddForm
+			@modalEditForm
+			@modalDeleteForm
+			<div id="loading-child" class=" rounded bg-transparent">
+				// <div class="spinner spinner-lg spinner-primary"></div>
+				<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+		</div>
+		<div id="loadingcontent"></div>
+	</div>
+}
+
+templ CssMdNatUnit() {
+	<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; */
+        }
+        #div-chart {
+            /* overflow-x: scroll; */
+            margin: 40px 10vw 40px 10vw;
+        }
+        .title {
+            font-size:20px;
+            font-weight: bold;
+        }
+        #title {
+            font-weight: 600;
+        }
+    </style>
+}
+
+templ JsMdNatUnit() {
+	<script>
+        function onLoadingStart() {
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.add("overlay");
+			// loadingParent.classList.add("overlay-block");
+			// loadingChild.classList.add("overlay-layer");
+			// loadingSpinner.classList.remove("d-none");
+
+            // Additional logic when loading starts
+        }
+
+        function onLoadingEnd() {
+            console.log('Loading ended');
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.remove("overlay");
+			// loadingParent.classList.remove("overlay-block");
+			// loadingChild.classList.remove("overlay-layer");
+			// loadingSpinner.classList.add("d-none");
+        }
+
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+			console.log(event.detail.xhr)
+			console.log(event.detail.elt)
+            if (indicator) {
+                onLoadingStart();
+            }
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+            if (indicator) {
+                onLoadingEnd();
+            }
+        });
+    </script>
+}
+
+script BeforeRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}
+
+script AfterRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}
+
+templ ShowMdNatUnitScreen(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/mdnatunit/mdnatunit_templ.go
+++ b/views/dev/mdnatunit/mdnatunit_templ.go
@@ -0,0 +1,314 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdnatunitview
+
+//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 MdNatUnitScreen(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterComponent templ.Component,
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm 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: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID}).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 = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID}).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-items-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\mdnatunit\mdnatunit.templ`, Line: 74, Col: 37}
+		}
+		_, 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\mdnatunit\mdnatunit.templ`, Line: 83, Col: 36}
+		}
+		_, 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 = filterComponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\" rounded\">")
+		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 = paginationComponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalAddForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalEditForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalDeleteForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\" rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></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 CssMdNatUnit() 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("<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        #div-chart {\r\n            /* overflow-x: scroll; */\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 JsMdNatUnit() 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)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n        function onLoadingStart() {\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.add(\"overlay\");\r\n\t\t\t// loadingParent.classList.add(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.add(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.remove(\"d-none\");\r\n\r\n            // Additional logic when loading starts\r\n        }\r\n\r\n        function onLoadingEnd() {\r\n            console.log('Loading ended');\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.remove(\"overlay\");\r\n\t\t\t// loadingParent.classList.remove(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.remove(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.add(\"d-none\");\r\n        }\r\n\r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.elt)\r\n            if (indicator) {\r\n                onLoadingStart();\r\n            }\r\n        });\r\n\r\n        document.addEventListener('htmx:afterRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n            if (indicator) {\r\n                onLoadingEnd();\r\n            }\r\n        });\r\n    </script>")
+		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 BeforeRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_BeforeRequestContent_911f`,
+		Function: `function __templ_BeforeRequestContent_911f(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_BeforeRequestContent_911f`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContent_911f`),
+	}
+}
+
+func AfterRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContent_6cc0`,
+		Function: `function __templ_AfterRequestContent_6cc0(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_AfterRequestContent_6cc0`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_6cc0`),
+	}
+}
+
+func ShowMdNatUnitScreen(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/mdnatunit/mdnatunitformmodal.templ
+++ b/views/dev/mdnatunit/mdnatunitformmodal.templ
@@ -0,0 +1,187 @@
+package dev_mdnatunitview
+
+import "cpone/models"
+import "cpone/component/modal"
+import "cpone/component/customtextfield"
+
+templ NatUnitForm(data models.NatUnitFormComponent) {
+	<div class="">
+		<form
+			id={ data.IDComponent }
+			hx-post={ data.Link }
+			class="form"
+			hx-target={ data.HxTarget }
+			hx-swap={ data.HxSwap }
+			hx-include={ data.HxInclude }
+			hx-indicator=".formloading"
+			hx-on::before-request={ HandleFormBeforeRequest() }
+			hx-on::after-request={ HandleFormAfterRequest() }
+		>
+			@modalcomponent.Modal(data.ModalID,
+				data.ModalTitle,
+				data.DialogBody,
+				data.DialogAction,
+				data.ButtonCLose)
+		</form>
+	</div>
+}
+
+script HandleFormBeforeRequest() {
+	console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
+		
+	}
+}
+
+script HandleFormAfterRequest() {
+	console.log("handle enable btn add");
+
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ BodyFormNatUnit(inputId models.CustomTextFieldv2Prm,
+	inputCode models.CustomTextFieldv2Prm,
+	inputName models.CustomTextFieldv2Prm,
+	componentID string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		@customtextfield.CustomTextFieldv2(
+			inputId)
+		@customtextfield.CustomTextFieldv2(
+			inputCode)
+		@customtextfield.CustomTextFieldv2(
+			inputName)
+	</div>
+}
+
+script JsHideModal(modalID string) {
+	$(modalID).modal('hide')
+}
+
+script JsShowModal(modalID string) {
+	$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ ActionFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModal(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel "
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Simpan
+		</button>
+	</div>
+}
+
+templ BtnCloseFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<button
+		hx-post={ LinkClose }
+		hx-target={ targetClose }
+		hx-swap={ hxSwapClose }
+		type="button"
+		hx-on::after-request={ JsHideModal(modalID) }
+		class="close btnactcancel"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		<p>{ message }</p>
+		<div class="card rounded-lg">
+			<div class="card-body d-flex flex-row">
+				<div class="d-flex flex-column">
+					for _, v := range datHeader {
+						<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
+					}
+				</div>
+				<div class="d-flex flex-column ">
+					for _, v := range dataText {
+						<div class="mb-1 mt-1 font-weight-bold">
+							{ v }
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+		@customtextfield.CustomTextFieldv2(inputId)
+	</div>
+}
+
+templ ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModal(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Yakin
+		</button>
+	</div>
+}
--- a/views/dev/mdnatunit/mdnatunitformmodal_templ.go
+++ b/views/dev/mdnatunit/mdnatunitformmodal_templ.go
@@ -0,0 +1,649 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdnatunitview
+
+//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/modal"
+import "cpone/component/customtextfield"
+
+func NatUnitForm(data models.NatUnitFormComponent) 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=\"\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleFormBeforeRequest(), HandleFormAfterRequest())
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(data.IDComponent)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 10, Col: 24}
+		}
+		_, 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-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(data.Link)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 11, Col: 22}
+		}
+		_, 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("\" class=\"form\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 13, Col: 28}
+		}
+		_, 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("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 14, Col: 24}
+		}
+		_, 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("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 15, Col: 30}
+		}
+		_, 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("\" hx-indicator=\".formloading\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 templ.ComponentScript = HandleFormBeforeRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.ComponentScript = HandleFormAfterRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+		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
+		}
+		templ_7745c5c3_Err = modalcomponent.Modal(data.ModalID,
+			data.ModalTitle,
+			data.DialogBody,
+			data.DialogAction,
+			data.ButtonCLose).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form></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 HandleFormBeforeRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormBeforeRequest_2922`,
+		Function: `function __templ_HandleFormBeforeRequest_2922(){console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_2922`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_2922`),
+	}
+}
+
+func HandleFormAfterRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormAfterRequest_956b`,
+		Function: `function __templ_HandleFormAfterRequest_956b(){console.log("handle enable btn add");
+
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormAfterRequest_956b`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterRequest_956b`),
+	}
+}
+
+func BodyFormNatUnit(inputId models.CustomTextFieldv2Prm,
+	inputCode models.CustomTextFieldv2Prm,
+	inputName models.CustomTextFieldv2Prm,
+	componentID string,
+	hxOnLoad templ.ComponentScript) 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.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 66, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11.Call)
+		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
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputId).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputCode).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputName).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 JsHideModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsHideModal_da6c`,
+		Function: `function __templ_JsHideModal_da6c(modalID){$(modalID).modal('hide')
+}`,
+		Call:       templ.SafeScript(`__templ_JsHideModal_da6c`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsHideModal_da6c`, modalID),
+	}
+}
+
+func JsShowModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsShowModal_b74d`,
+		Function: `function __templ_JsShowModal_b74d(modalID){$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_JsShowModal_b74d`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsShowModal_b74d`, modalID),
+	}
+}
+
+func ActionFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModal(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 100, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 101, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 102, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel \" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Simpan\r</button></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 BtnCloseFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var17 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var17 == nil {
+			templ_7745c5c3_Var17 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModal(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 123, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 124, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 125, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnactcancel\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		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 DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) 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_Var22 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var22 == nil {
+			templ_7745c5c3_Var22 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 142, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var24.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 143, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><div class=\"card rounded-lg\"><div class=\"card-body d-flex flex-row\"><div class=\"d-flex flex-column\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range datHeader {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 text-disabled font-weight-bold mr-5\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var26 string
+			templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 148, Col: 68}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+			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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range dataText {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 font-weight-bold\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var27 string
+			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 154, Col: 10}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+			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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(inputId).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 ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var28 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var28 == nil {
+			templ_7745c5c3_Var28 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModal(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var29 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var29.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 168, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var31 string
+		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 169, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 string
+		templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 170, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel\" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Yakin\r</button></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/mdnatunit/mdnatunittable.templ
+++ b/views/dev/mdnatunit/mdnatunittable.templ
@@ -0,0 +1,130 @@
+package dev_mdnatunitview
+
+import (
+	"cpone/component/table"
+	"cpone/models"
+	"strconv"
+)
+
+templ TableNatUnit(data []models.NatUnit,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	<div id={ tableID } hx-swap-oob="true">
+		@tablecomponent.TableV3([]string{"KODE", "UNIT", "AKSI"},
+			[]string{"40%", "40%", "20%"},
+			RowNatUnit(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			))
+	</div>
+}
+
+templ RowNatUnit(data []models.NatUnit,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	if len(data) == 0 {
+		<tr>
+			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
+		</tr>
+	}
+	for _, v := range data {
+		<tr>
+			<td>{ v.Nat_UnitCode }</td>
+			<td>{ v.Nat_UnitName }</td>
+			<td>
+				@TableAction(v.Nat_UnitID,
+					hxGetEdit,
+					hxTargetEdit,
+					hxSwapEdit,
+					hxIncludeEdit,
+					hxGetDelete,
+					hxTargetDelete,
+					hxSwapDelete,
+					hxIncludeDelete,
+				)
+			</td>
+		</tr>
+	}
+}
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	<div class="row px-5 d-flex justify-content-around">
+		<a
+			type="button"
+			class="btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm"
+			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetEdit }
+			hx-swap={ hxSwapEdit }
+			hx-include={ hxIncludeEdit }
+			hx-indicator={ "#spnredt" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnredt" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Edit
+		</a>
+		<a
+			type="button"
+			class=" btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
+			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetDelete }
+			hx-swap={ hxSwapDelete }
+			hx-include={ hxIncludeDelete }
+			hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Hapus
+		</a>
+	</div>
+}
+
+script HandleBeforeRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	// console.log(id)
+}
+
+script HandleAfterRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	// console.log(id)
+}
--- a/views/dev/mdnatunit/mdnatunittable_templ.go
+++ b/views/dev/mdnatunit/mdnatunittable_templ.go
@@ -0,0 +1,439 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdnatunitview
+
+//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/table"
+	"cpone/models"
+	"strconv"
+)
+
+func TableNatUnit(data []models.NatUnit,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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\mdnatunit\mdnatunittable.templ`, Line: 20, Col: 18}
+		}
+		_, 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-swap-oob=\"true\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"KODE", "UNIT", "AKSI"},
+			[]string{"40%", "40%", "20%"},
+			RowNatUnit(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			)).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 RowNatUnit(data []models.NatUnit,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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_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=\"3\" 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.Nat_UnitCode)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 53, Col: 23}
+			}
+			_, 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.Nat_UnitName)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 54, Col: 23}
+			}
+			_, 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
+			}
+			templ_7745c5c3_Err = TableAction(v.Nat_UnitID,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			).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 TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\"btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetEdit + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 86, Col: 49}
+		}
+		_, 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("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 87, Col: 27}
+		}
+		_, 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("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 88, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 89, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs("#spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 90, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs("spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 94, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Edit\r</a> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\" btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetDelete + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 100, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 101, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 102, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 103, Col: 31}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs("#spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 104, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var20.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs("spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 108, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Hapus\r</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 HandleBeforeRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleBeforeRequestRow_9a4e`,
+		Function: `function __templ_HandleBeforeRequestRow_9a4e(id){var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	// console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleBeforeRequestRow_9a4e`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleBeforeRequestRow_9a4e`, id),
+	}
+}
+
+func HandleAfterRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleAfterRequestRow_9e81`,
+		Function: `function __templ_HandleAfterRequestRow_9e81(id){var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	// console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleAfterRequestRow_9e81`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleAfterRequestRow_9e81`, id),
+	}
+}
--- a/views/dev/mdusergroup/mdusergroup.templ
+++ b/views/dev/mdusergroup/mdusergroup.templ
@@ -12,11 +12,17 @@ templ MdUserGroupScreen(
 	searchID string,
 	dialogAddID string,
 	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
 	breadcrumb templ.Component,
 	tablecontent templ.Component,
 	filterComponent templ.Component,
 	paginationComponent templ.Component,
-	modalAddForm templ.Component) {
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm templ.Component) {
 	<div class="container-fluid">
 		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
 			Name:  "tableID",
@@ -38,6 +44,22 @@ templ MdUserGroupScreen(
 			Name:  "dialogAddBodyID",
 			Type:  "hidden",
 			Value: dialogAddBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID})
 		<div class="row align-items-center mb-10">
 			<div class="col-md-10 col-sm-12 p-0 ">
 				@breadcrumb
@@ -63,9 +85,20 @@ templ MdUserGroupScreen(
 			</div>
 		</div>
 		@filterComponent
-		@tablecontent
-		@paginationComponent
-		@modalAddForm
+		<div id="loading-parent" class=" rounded">
+			@tablecontent
+			@paginationComponent
+			@modalAddForm
+			@modalEditForm
+			@modalDeleteForm
+			<div id="loading-child" class=" rounded bg-transparent">
+				// <div class="spinner spinner-lg spinner-primary"></div>
+				<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+		</div>
+		<div id="loadingcontent"></div>
 	</div>
 }

@@ -104,6 +137,70 @@ templ CssMdUserGroup() {
 }

 templ JsMdUserGroup() {
+	<script>
+        function onLoadingStart() {
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.add("overlay");
+			// loadingParent.classList.add("overlay-block");
+			// loadingChild.classList.add("overlay-layer");
+			// loadingSpinner.classList.remove("d-none");
+
+            // Additional logic when loading starts
+        }
+
+        function onLoadingEnd() {
+            console.log('Loading ended');
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.remove("overlay");
+			// loadingParent.classList.remove("overlay-block");
+			// loadingChild.classList.remove("overlay-layer");
+			// loadingSpinner.classList.add("d-none");
+        }
+
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+			console.log(event.detail.xhr)
+			console.log(event.detail.elt)
+            if (indicator) {
+                onLoadingStart();
+            }
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+            if (indicator) {
+                onLoadingEnd();
+            }
+        });
+    </script>
+}
+
+script BeforeRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}
+
+script AfterRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
 }

 templ ShowMdUserGroupScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
--- a/views/dev/mdusergroup/mdusergroup_templ.go
+++ b/views/dev/mdusergroup/mdusergroup_templ.go
@@ -22,11 +22,17 @@ func MdUserGroupScreen(
 	searchID string,
 	dialogAddID string,
 	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
 	breadcrumb templ.Component,
 	tablecontent templ.Component,
 	filterComponent templ.Component,
 	paginationComponent templ.Component,
-	modalAddForm templ.Component) templ.Component {
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm 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 {
@@ -78,6 +84,34 @@ func MdUserGroupScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID}).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-items-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0 \">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -86,27 +120,27 @@ func MdUserGroupScreen(
 		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-toggle=\"modal\" data-target=\"")
+		_, 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\mdusergroup\mdusergroup.templ`, Line: 53, Col: 37}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 74, Col: 37}
 		}
 		_, 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-toggle=\"modal\" data-target=\"")
+		_, 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\mdusergroup\mdusergroup.templ`, Line: 63, Col: 36}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 83, Col: 36}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -120,6 +154,10 @@ func MdUserGroupScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\" rounded\">")
+		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
@@ -132,7 +170,15 @@ func MdUserGroupScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		templ_7745c5c3_Err = modalEditForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalDeleteForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\" rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -180,6 +226,10 @@ func JsMdUserGroup() templ.Component {
 			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n        function onLoadingStart() {\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.add(\"overlay\");\r\n\t\t\t// loadingParent.classList.add(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.add(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.remove(\"d-none\");\r\n\r\n            // Additional logic when loading starts\r\n        }\r\n\r\n        function onLoadingEnd() {\r\n            console.log('Loading ended');\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.remove(\"overlay\");\r\n\t\t\t// loadingParent.classList.remove(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.remove(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.add(\"d-none\");\r\n        }\r\n\r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.elt)\r\n            if (indicator) {\r\n                onLoadingStart();\r\n            }\r\n        });\r\n\r\n        document.addEventListener('htmx:afterRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n            if (indicator) {\r\n                onLoadingEnd();\r\n            }\r\n        });\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}
@@ -187,6 +237,40 @@ func JsMdUserGroup() templ.Component {
 	})
 }

+func BeforeRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_BeforeRequestContent_911f`,
+		Function: `function __templ_BeforeRequestContent_911f(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_BeforeRequestContent_911f`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContent_911f`),
+	}
+}
+
+func AfterRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContent_6cc0`,
+		Function: `function __templ_AfterRequestContent_6cc0(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_AfterRequestContent_6cc0`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_6cc0`),
+	}
+}
+
 func ShowMdUserGroupScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
 	navbarmenu templ.Component,
 	navbaruser templ.Component,
--- a/views/dev/mdusergroup/mdusergroupformmodal.templ
+++ b/views/dev/mdusergroup/mdusergroupformmodal.templ
@@ -13,6 +13,7 @@ templ UserGroupForm(data models.UserGroupFormComponent) {
 			hx-target={ data.HxTarget }
 			hx-swap={ data.HxSwap }
 			hx-include={ data.HxInclude }
+			hx-indicator=".formloading"
 			hx-on::before-request={ HandleFormBeforeRequest() }
 			hx-on::after-request={ HandleFormAfterRequest() }
 		>
@@ -27,10 +28,15 @@ templ UserGroupForm(data models.UserGroupFormComponent) {

 script HandleFormBeforeRequest() {
 	console.log("handle disable btn add");
-	const boxes = document.querySelectorAll('.btnaddact');
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');

-	for (let i = 0; i < boxes.length; i++) {
-		boxes[i].setAttribute('disabled', 'true');
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
 		
 	}
 }
@@ -38,10 +44,16 @@ script HandleFormBeforeRequest() {
 script HandleFormAfterRequest() {
 	console.log("handle enable btn add");

-	const boxes = document.querySelectorAll('.btnaddact');
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');

-	for (let i = 0; i < boxes.length; i++) {
-			boxes[i].removeAttribute('disabled');
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
 		
 	}
 }
@@ -67,6 +79,18 @@ script JsHideModal(modalID string) {

 script JsShowModal(modalID string) {
 	$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
 }

 templ ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
@@ -76,17 +100,20 @@ templ ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose stri
 			hx-post={ LinkClose }
 			hx-target={ targetClose }
 			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
 			type="button"
-			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel "
 			data-dismiss="modal"
 		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
 			Batal
 		</button>
 		<button
 			type="submit"
-			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
 		>
-			Save
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Simpan
 		</button>
 	</div>
 }
@@ -98,10 +125,63 @@ templ BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose st
 		hx-swap={ hxSwapClose }
 		type="button"
 		hx-on::after-request={ JsHideModal(modalID) }
-		class="close btnaddact"
+		class="close btnactcancel"
 		data-dismiss="modal"
 		aria-label="Close"
 	>
 		<i aria-hidden="true" class="ki ki-close"></i>
 	</button>
 }
+
+templ DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		<p>{ message }</p>
+		<div class="card rounded-lg">
+			<div class="card-body d-flex flex-row">
+				<div class="d-flex flex-column">
+					for _, v := range datHeader {
+						<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
+					}
+				</div>
+				<div class="d-flex flex-column ">
+					for _, v := range dataText {
+						<div class="mb-1 mt-1 font-weight-bold">
+							{ v }
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+		@customtextfield.CustomTextFieldv2(inputId)
+	</div>
+}
+
+templ ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModal(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Yakin
+		</button>
+	</div>
+}
--- a/views/dev/mdusergroup/mdusergroupformmodal_templ.go
+++ b/views/dev/mdusergroup/mdusergroupformmodal_templ.go
@@ -100,7 +100,7 @@ func UserGroupForm(data models.UserGroupFormComponent) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".formloading\" hx-on::before-request=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -143,34 +143,45 @@ func UserGroupForm(data models.UserGroupFormComponent) templ.Component {

 func HandleFormBeforeRequest() templ.ComponentScript {
 	return templ.ComponentScript{
-		Name: `__templ_HandleFormBeforeRequest_1e3f`,
-		Function: `function __templ_HandleFormBeforeRequest_1e3f(){console.log("handle disable btn add");
-	const boxes = document.querySelectorAll('.btnaddact');
+		Name: `__templ_HandleFormBeforeRequest_2922`,
+		Function: `function __templ_HandleFormBeforeRequest_2922(){console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');

-	for (let i = 0; i < boxes.length; i++) {
-		boxes[i].setAttribute('disabled', 'true');
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
 		
 	}
 }`,
-		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_1e3f`),
-		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_1e3f`),
+		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_2922`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_2922`),
 	}
 }

 func HandleFormAfterRequest() templ.ComponentScript {
 	return templ.ComponentScript{
-		Name: `__templ_HandleFormAfterRequest_ee07`,
-		Function: `function __templ_HandleFormAfterRequest_ee07(){console.log("handle enable btn add");
+		Name: `__templ_HandleFormAfterRequest_956b`,
+		Function: `function __templ_HandleFormAfterRequest_956b(){console.log("handle enable btn add");

-	const boxes = document.querySelectorAll('.btnaddact');
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');

-	for (let i = 0; i < boxes.length; i++) {
-			boxes[i].removeAttribute('disabled');
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
 		
 	}
 }`,
-		Call:       templ.SafeScript(`__templ_HandleFormAfterRequest_ee07`),
-		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterRequest_ee07`),
+		Call:       templ.SafeScript(`__templ_HandleFormAfterRequest_956b`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterRequest_956b`),
 	}
 }

@@ -202,7 +213,7 @@ func BodyFormUserGroup(inputId models.CustomTextFieldv2Prm,
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 54, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 66, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
@@ -259,11 +270,23 @@ func JsHideModal(modalID string) templ.ComponentScript {

 func JsShowModal(modalID string) templ.ComponentScript {
 	return templ.ComponentScript{
-		Name: `__templ_JsShowModal_3147`,
-		Function: `function __templ_JsShowModal_3147(modalID){$(modalID).modal('show')
+		Name: `__templ_JsShowModal_b74d`,
+		Function: `function __templ_JsShowModal_b74d(modalID){$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
 }`,
-		Call:       templ.SafeScript(`__templ_JsShowModal_3147`, modalID),
-		CallInline: templ.SafeScriptInline(`__templ_JsShowModal_3147`, modalID),
+		Call:       templ.SafeScript(`__templ_JsShowModal_b74d`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsShowModal_b74d`, modalID),
 	}
 }

@@ -304,7 +327,7 @@ func ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose strin
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 76, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 100, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
@@ -317,7 +340,7 @@ func ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose strin
 		var templ_7745c5c3_Var15 string
 		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 77, Col: 26}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 101, Col: 26}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 		if templ_7745c5c3_Err != nil {
@@ -330,13 +353,13 @@ func ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose strin
 		var templ_7745c5c3_Var16 string
 		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 78, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 102, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact\" data-dismiss=\"modal\">Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact\">Save\r</button></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel \" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Simpan\r</button></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -371,7 +394,7 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 96, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 123, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
@@ -384,7 +407,7 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		var templ_7745c5c3_Var19 string
 		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 97, Col: 25}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 124, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 		if templ_7745c5c3_Err != nil {
@@ -397,7 +420,7 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		var templ_7745c5c3_Var20 string
 		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 98, Col: 23}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 125, Col: 23}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 		if templ_7745c5c3_Err != nil {
@@ -412,7 +435,209 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnaddact\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnactcancel\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		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 DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) 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_Var22 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var22 == nil {
+			templ_7745c5c3_Var22 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 142, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var24.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 143, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><div class=\"card rounded-lg\"><div class=\"card-body d-flex flex-row\"><div class=\"d-flex flex-column\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range datHeader {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 text-disabled font-weight-bold mr-5\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var26 string
+			templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 148, Col: 68}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+			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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range dataText {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 font-weight-bold\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var27 string
+			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 154, Col: 10}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+			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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(inputId).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 ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose string, modalID 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_Var28 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var28 == nil {
+			templ_7745c5c3_Var28 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModal(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var29 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var29.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 168, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var31 string
+		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 169, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 string
+		templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 170, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel\" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Yakin\r</button></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/mdusergroup/mdusergrouptable.templ
+++ b/views/dev/mdusergroup/mdusergrouptable.templ
@@ -2,17 +2,45 @@ package dev_mdusergroupview

 import "cpone/component/table"
 import "cpone/models"
+import "strconv"

 templ TableUserGroup(data []models.UserGroupV1,
-	tableID string) {
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
 	<div id={ tableID } hx-swap-oob="true">
 		@tablecomponent.TableV3([]string{"KODE", "USERGROUP", "AKSI"},
 			[]string{"40%", "40%", "20%"},
-			RowUserGroup(data))
+			RowUserGroup(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			))
 	</div>
 }

-templ RowUserGroup(data []models.UserGroupV1) {
+templ RowUserGroup(data []models.UserGroupV1,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
 	if len(data) == 0 {
 		<tr>
 			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
@@ -23,8 +51,79 @@ templ RowUserGroup(data []models.UserGroupV1) {
 			<td>{ v.M_UserGroupCode }</td>
 			<td>{ v.M_UserGroupName }</td>
 			<td>
-				action
+				@TableAction(v.M_UserGroupID,
+					hxGetEdit,
+					hxTargetEdit,
+					hxSwapEdit,
+					hxIncludeEdit,
+					hxGetDelete,
+					hxTargetDelete,
+					hxSwapDelete,
+					hxIncludeDelete,
+				)
 			</td>
 		</tr>
 	}
 }
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+
+) {
+	<div class="row px-5 d-flex justify-content-around">
+		<a
+			type="button"
+			class="btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm"
+			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetEdit }
+			hx-swap={ hxSwapEdit }
+			hx-include={ hxIncludeEdit }
+			hx-indicator={ "#spnredt" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnredt" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Edit
+		</a>
+		<a
+			type="button"
+			class=" btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
+			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetDelete }
+			hx-swap={ hxSwapDelete }
+			hx-include={ hxIncludeDelete }
+			hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Hapus
+		</a>
+	</div>
+}
+
+script HandleBeforeRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	console.log(id)
+}
+
+script HandleAfterRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	console.log(id)
+}
--- a/views/dev/mdusergroup/mdusergrouptable_templ.go
+++ b/views/dev/mdusergroup/mdusergrouptable_templ.go
@@ -12,9 +12,19 @@ import "bytes"

 import "cpone/component/table"
 import "cpone/models"
+import "strconv"

 func TableUserGroup(data []models.UserGroupV1,
-	tableID string) templ.Component {
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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 {
@@ -34,7 +44,7 @@ func TableUserGroup(data []models.UserGroupV1,
 		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\mdusergroup\mdusergrouptable.templ`, Line: 8, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 18, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -46,7 +56,16 @@ func TableUserGroup(data []models.UserGroupV1,
 		}
 		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"KODE", "USERGROUP", "AKSI"},
 			[]string{"40%", "40%", "20%"},
-			RowUserGroup(data)).Render(ctx, templ_7745c5c3_Buffer)
+			RowUserGroup(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			)).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -61,7 +80,16 @@ func TableUserGroup(data []models.UserGroupV1,
 	})
 }

-func RowUserGroup(data []models.UserGroupV1) templ.Component {
+func RowUserGroup(data []models.UserGroupV1,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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 {
@@ -88,7 +116,7 @@ func RowUserGroup(data []models.UserGroupV1) templ.Component {
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupCode)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 23, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 51, Col: 26}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -101,13 +129,30 @@ func RowUserGroup(data []models.UserGroupV1) templ.Component {
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupName)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 24, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 52, Col: 26}
 			}
 			_, 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>action\r</td></tr>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = TableAction(v.M_UserGroupID,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			).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
 			}
@@ -118,3 +163,276 @@ func RowUserGroup(data []models.UserGroupV1) templ.Component {
 		return templ_7745c5c3_Err
 	})
 }
+
+func TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\"btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetEdit + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 85, Col: 49}
+		}
+		_, 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("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 86, Col: 27}
+		}
+		_, 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("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 87, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 88, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs("#spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 89, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs("spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 93, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Edit\r</a> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\" btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetDelete + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 99, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 100, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 101, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 102, Col: 31}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs("#spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 103, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var20.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs("spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 107, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Hapus\r</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 HandleBeforeRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleBeforeRequestRow_ee28`,
+		Function: `function __templ_HandleBeforeRequestRow_ee28(id){var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleBeforeRequestRow_ee28`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleBeforeRequestRow_ee28`, id),
+	}
+}
+
+func HandleAfterRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleAfterRequestRow_2a96`,
+		Function: `function __templ_HandleAfterRequestRow_2a96(id){var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleAfterRequestRow_2a96`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleAfterRequestRow_2a96`, id),
+	}
+}
--- 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
+	})
+}
--- a/views/public/kartukontrol/kartukontrol.templ
+++ b/views/public/kartukontrol/kartukontrol.templ
@@ -0,0 +1,267 @@
+package public_kartukontrol
+
+import (
+	"cpone/models"
+	"cpone/layout"
+)
+
+templ MainContentKartuKontrolLayout(dataKartuKontrol []models.KartuKontrolModel, hxGet string, hxTrigger string, idModal string, urlSurveyMcu string, nomorRegistrasi string) {
+	// toast
+	<div class="toast-top-right" id="container-system-notification-x01" style="position: fixed; top: 1vh; right: 0vw; z-index: 999;">
+		<!-- toast success -->
+		<div
+			id="notification-kartukontrol-001"
+			class="toast fade hide"
+			role="alert"
+			aria-live="assertive"
+			aria-atomic="true"
+		>
+			<div class="toast-header bg-success text-white">
+				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
+				<strong class="mr-auto">Success</strong>
+				<small class="text-muted text-white">just now</small>
+				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+					<span aria-hidden="true">×</span>
+				</button>
+			</div>
+			<div class="toast-body bg-success-transparent">
+				This is a success toast.
+			</div>
+		</div>
+	</div>
+	// end toast
+	<div class="content-fluid bg-white">
+		<div class="card-control py-19 px-9">
+			if len(dataKartuKontrol) > 0 {
+				@ContentDataPasienList(dataKartuKontrol[0].KartuKontrolDataPasienList)
+				@ContentPemeriksaanLayout(dataKartuKontrol[0].KartuKontrolDataPemeriksaanList, dataKartuKontrol[0].KartuKontrolDataPemeriksaanPengambilanSample)
+			}
+		</div>
+	</div>
+	@ModalMcuWordingProcessShow(hxTrigger, hxGet, idModal, urlSurveyMcu, nomorRegistrasi)
+}
+
+templ ContentDataPasienList(dataPasienList []models.DataPasien) {
+	<!-- begin::Data Pasien -->
+	<div class="left pt-6 pl-7" style="position: relative">
+		<div class="foto top-right mt-7 mr-6"></div>
+		<div class="card-label">
+			<h4>Data Pasien</h4>
+		</div>
+		<div class="pt-4">
+			<h5 class="text-primary">No Registrasi</h5>
+			<h5>{ dataPasienList[0].NomorRegistrasi }</h5>
+		</div>
+		<div class="pt-4">
+			<h5 class="text-primary">Nomor Lab</h5>
+			<h5>{ dataPasienList[0].NomorLab }</h5>
+		</div>
+		<div class="pt-4">
+			<h5 class="text-primary">Nama Pasien</h5>
+			<h5>{ dataPasienList[0].NamaPasien }</h5>
+		</div>
+		<div class="pt-4">
+			<h5 class="text-primary">Tanggal Lahir / Umur</h5>
+			<h5>{ dataPasienList[0].TanggalLahir } / { dataPasienList[0].Umur }</h5>
+		</div>
+		<div class="pt-4">
+			<h5 class="text-primary">Jenis Kelamin</h5>
+			<h5>{ dataPasienList[0].JenisKelamin }</h5>
+		</div>
+		<div class="pt-4">
+			<h5 class="text-primary">Divisi</h5>
+			<h5>{ dataPasienList[0].NamaDivisi }</h5>
+		</div>
+		<div class="pt-4">
+			<h5 class="text-primary">Company</h5>
+			<h5>{ dataPasienList[0].NamaCompany }</h5>
+		</div>
+	</div>
+	<!-- end::Data Pasien -->
+}
+
+templ ContentPemeriksaanLayout(dataPemeriksaanList []models.DataPemeriksaanList, dataPemeriksaanPengambilanSample []models.DataPemeriksaanPengambilanSample) {
+	<div class="card shadow-sm py-2 mt-29">
+		@ContentPemeriksaanList(dataPemeriksaanList)
+	</div>
+	@ContentPengambilanSampleList(dataPemeriksaanPengambilanSample)
+}
+
+templ ContentPemeriksaanList(dataPemeriksaan []models.DataPemeriksaanList) {
+	<div class="card-body px-3 py-2">
+		<h5 class="card-title">Daftar Pemeriksaan</h5>
+		if len(dataPemeriksaan) > 0 {
+			<ul class="list-group text-grey ml-7 mt-1">
+				for _, v := range dataPemeriksaan {
+					<li><h6>{ v.NamaPemeriksaanList }</h6></li>
+				}
+			</ul>
+		} else {
+			<h6>Belum Ada Daftar Pemeriksaan</h6>
+		}
+	</div>
+}
+
+templ ContentPengambilanSampleList(dataPemeriksaanPengambilanSample []models.DataPemeriksaanPengambilanSample) {
+	<div class="card shadow-sm py-2 mt-6">
+		<div class="card-body px-3 py-2">
+			<!-- begin::Pemeriksaan/Pengambilan Sample -->
+			<h5 class="card-title">Pemeriksaan / Pengambilan Sample</h5>
+			if len(dataPemeriksaanPengambilanSample) > 0 {
+				for _, v := range dataPemeriksaanPengambilanSample {
+					<div class="text-grey mb-3">
+						<h5>{ v.NamaPemeriksaanPengambilanSample }</h5>
+						if len(v.SampleTypeListData) > 0 {
+							<ul class="list-group ml-7 mt-1">
+								for _, k := range v.SampleTypeListData {
+									<li class="justify-content-center align-items-center mb-3">
+										<div class="row">
+											<div class="col-9 d-flex">
+												<h6>{ k.SampleTypeName }</h6>
+												if len(k.SampleTypeDateTime) > 0 {
+													<span class="smallf pl-5 vertical">{ k.SampleTypeDateTime }</span>
+												}
+											</div>
+											<div class="col-3">
+												<span class="label label-inline font-weight-bold kartukontrol-sudah-label mr-2 shadow-sm">{ k.SampleTypeStatus }</span>
+											</div>
+										</div>
+									</li>
+								}
+							</ul>
+						} else {
+							<h6>Belum Ada Data Pengambilan Sample</h6>
+						}
+					</div>
+				}
+			} else {
+				<h6>Belum Ada Data Pemeriksaan & Pengambilan Sample</h6>
+			}
+			<!-- end::Pemeriksaan/Pengambilan Sample -->
+		</div>
+	</div>
+	<div style="height: 14vh;"></div>
+}
+
+templ ModalMcuWordingProcessShow(hxTrigger string, hxGet string, idModal string, urlSurveyMcu string, nomorRegistrasi string) {
+	<input type="hidden" name="nomorRegistrasi" value={ nomorRegistrasi }/>
+	<input type="hidden" name="urlSurveyMcu" value={ urlSurveyMcu }/>
+	<div hx-trigger={ hxTrigger } hx-get={ hxGet } hx-include="[name='urlSurveyMcu'], [name='nomorRegistrasi']"></div>
+	<div id={ idModal }></div>
+}
+
+templ ModalMcuWordingShow(idModal string, messageWording string, urlSurvey string) {
+	<!-- modal wording start -->
+	<div
+		class="modal fade show modalcover"
+		id={ idModal }
+		hx-swap-oob="true"
+		tabindex="-1"
+		role="dialog"
+		data-backdrop="static"
+		aria-hidden="true"
+		style="display: block;"
+	>
+		<div class="modal-dialog modal-dialog-centered" role="document">
+			<div class="modal-content rounded-lg">
+				<div class="modal-header border-bottom-0">
+					<h1 class="text-black font-weight-bolder">Perhatian</h1>
+				</div>
+				<div class="modal-body border-bottom-0">
+					<div id="spinnerDiv" class="d-flex justify-content-center align-items-center">
+						<div id="spinnerLoading" class="spinner-border text-primary" role="status">
+							<span class="sr-only">Loading...</span>
+						</div>
+					</div>
+					<h6 id="modal-text" class="text-black" style="display: none;">
+						{ messageWording }
+					</h6>
+				</div>
+				<div class="modal-footer border-top-0">
+					<button
+						id="redirectToSurveyMcu"
+						type="submit"
+						class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+						style="display:none"
+						hx-get={ urlSurvey }
+						hx-swap="none"
+						hx-include="[name='urlSurveyMcu'], [name='nomorRegistrasi']"
+					>
+						OK
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script>
+
+	// show spinner
+	setTimeout(function() {
+		document.getElementById('spinnerDiv').style.display = 'none';
+		document.getElementById('spinnerLoading').style.display = 'none';
+		document.getElementById('modal-text').style.display = 'block';
+		document.getElementById('redirectToSurveyMcu').style.display = 'block';
+	}, 2000); // 2000 milidetik atau 2 detik
+	</script>
+}
+
+templ CssKartuKontrol() {
+	<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: var(--white)
+        }
+		.card-control {
+			width: 390px;
+			height: 1212px;
+			background-image: url("asset-corporate-portal/media/kartukontrol/bg-kartuKontrol.svg");
+			background-size: 390px 1212px;
+			background-repeat: no-repeat;
+            margin: auto;
+		}
+		.foto {
+			width: 70px;
+			height: 79px;
+			background-image: url("assets/media/svg/avatars/001-boy.svg");
+			background-size: 70px 79px;
+			background-repeat: no-repeat;
+		}
+		.top-right {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+		h5 {
+			font-size: 14px;
+		}
+		h6 {
+			font-size: 12px;
+		}
+		.smallf {
+			font-size: 10px;
+		}
+		.modalcover {
+			background-color: #00000073;
+		}
+	</style>
+}
+
+templ JsKartuKontrol() {
+}
+
+templ ShowKartuKontrol(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}
--- a/views/public/kartukontrol/kartukontrol_templ.go
+++ b/views/public/kartukontrol/kartukontrol_templ.go
@@ -0,0 +1,651 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package public_kartukontrol
+
+//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"
+)
+
+func MainContentKartuKontrolLayout(dataKartuKontrol []models.KartuKontrolModel, hxGet string, hxTrigger string, idModal string, urlSurveyMcu string, nomorRegistrasi 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 class=\"toast-top-right\" id=\"container-system-notification-x01\" style=\"position: fixed; top: 1vh; right: 0vw; z-index: 999;\"><!-- toast success --><div id=\"notification-kartukontrol-001\" class=\"toast fade hide\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"toast-header bg-success text-white\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ep mr-2 icon-xl\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 1024 1024\" data-icon=\"ep:success-filled\"><path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z\"></path></svg> <strong class=\"mr-auto\">Success</strong> <small class=\"text-muted text-white\">just now</small> <button type=\"button\" class=\"ml-2 mb-1 close\" data-dismiss=\"toast\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div><div class=\"toast-body bg-success-transparent\">This is a success toast.\r</div></div></div><div class=\"content-fluid bg-white\"><div class=\"card-control py-19 px-9\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(dataKartuKontrol) > 0 {
+			templ_7745c5c3_Err = ContentDataPasienList(dataKartuKontrol[0].KartuKontrolDataPasienList).Render(ctx, templ_7745c5c3_Buffer)
+			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
+			}
+			templ_7745c5c3_Err = ContentPemeriksaanLayout(dataKartuKontrol[0].KartuKontrolDataPemeriksaanList, dataKartuKontrol[0].KartuKontrolDataPemeriksaanPengambilanSample).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ModalMcuWordingProcessShow(hxTrigger, hxGet, idModal, urlSurveyMcu, nomorRegistrasi).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 ContentDataPasienList(dataPasienList []models.DataPasien) 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)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- begin::Data Pasien --><div class=\"left pt-6 pl-7\" style=\"position: relative\"><div class=\"foto top-right mt-7 mr-6\"></div><div class=\"card-label\"><h4>Data Pasien</h4></div><div class=\"pt-4\"><h5 class=\"text-primary\">No Registrasi</h5><h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].NomorRegistrasi)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 53, Col: 42}
+		}
+		_, 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("</h5></div><div class=\"pt-4\"><h5 class=\"text-primary\">Nomor Lab</h5><h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].NomorLab)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 57, Col: 35}
+		}
+		_, 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("</h5></div><div class=\"pt-4\"><h5 class=\"text-primary\">Nama Pasien</h5><h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].NamaPasien)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 61, Col: 37}
+		}
+		_, 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("</h5></div><div class=\"pt-4\"><h5 class=\"text-primary\">Tanggal Lahir / Umur</h5><h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].TanggalLahir)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 65, Col: 39}
+		}
+		_, 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(" / ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].Umur)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 65, Col: 68}
+		}
+		_, 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("</h5></div><div class=\"pt-4\"><h5 class=\"text-primary\">Jenis Kelamin</h5><h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].JenisKelamin)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 69, Col: 39}
+		}
+		_, 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("</h5></div><div class=\"pt-4\"><h5 class=\"text-primary\">Divisi</h5><h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].NamaDivisi)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 73, Col: 37}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h5></div><div class=\"pt-4\"><h5 class=\"text-primary\">Company</h5><h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(dataPasienList[0].NamaCompany)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 77, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h5></div></div><!-- end::Data Pasien -->")
+		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 ContentPemeriksaanLayout(dataPemeriksaanList []models.DataPemeriksaanList, dataPemeriksaanPengambilanSample []models.DataPemeriksaanPengambilanSample) 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("<div class=\"card shadow-sm py-2 mt-29\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ContentPemeriksaanList(dataPemeriksaanList).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
+		}
+		templ_7745c5c3_Err = ContentPengambilanSampleList(dataPemeriksaanPengambilanSample).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 ContentPemeriksaanList(dataPemeriksaan []models.DataPemeriksaanList) 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_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card-body px-3 py-2\"><h5 class=\"card-title\">Daftar Pemeriksaan</h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(dataPemeriksaan) > 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul class=\"list-group text-grey ml-7 mt-1\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, v := range dataPemeriksaan {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li><h6>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var13 string
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(v.NamaPemeriksaanList)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 96, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h6></li>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h6>Belum Ada Daftar Pemeriksaan</h6>")
+			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 ContentPengambilanSampleList(dataPemeriksaanPengambilanSample []models.DataPemeriksaanPengambilanSample) 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_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card shadow-sm py-2 mt-6\"><div class=\"card-body px-3 py-2\"><!-- begin::Pemeriksaan/Pengambilan Sample --><h5 class=\"card-title\">Pemeriksaan / Pengambilan Sample</h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(dataPemeriksaanPengambilanSample) > 0 {
+			for _, v := range dataPemeriksaanPengambilanSample {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"text-grey mb-3\"><h5>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(v.NamaPemeriksaanPengambilanSample)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 113, Col: 46}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h5>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				if len(v.SampleTypeListData) > 0 {
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<ul class=\"list-group ml-7 mt-1\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					for _, k := range v.SampleTypeListData {
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<li class=\"justify-content-center align-items-center mb-3\"><div class=\"row\"><div class=\"col-9 d-flex\"><h6>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var16 string
+						templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(k.SampleTypeName)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 120, Col: 34}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h6>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						if len(k.SampleTypeDateTime) > 0 {
+							_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span class=\"smallf pl-5 vertical\">")
+							if templ_7745c5c3_Err != nil {
+								return templ_7745c5c3_Err
+							}
+							var templ_7745c5c3_Var17 string
+							templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(k.SampleTypeDateTime)
+							if templ_7745c5c3_Err != nil {
+								return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 122, Col: 70}
+							}
+							_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+							if templ_7745c5c3_Err != nil {
+								return templ_7745c5c3_Err
+							}
+							_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span>")
+							if templ_7745c5c3_Err != nil {
+								return templ_7745c5c3_Err
+							}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-3\"><span class=\"label label-inline font-weight-bold kartukontrol-sudah-label mr-2 shadow-sm\">")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var18 string
+						templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(k.SampleTypeStatus)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 126, Col: 122}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div></li>")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				} else {
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h6>Belum Ada Data Pengambilan Sample</h6>")
+					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("<h6>Belum Ada Data Pemeriksaan & Pengambilan Sample</h6>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- end::Pemeriksaan/Pengambilan Sample --></div></div><div style=\"height: 14vh;\"></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 ModalMcuWordingProcessShow(hxTrigger string, hxGet string, idModal string, urlSurveyMcu string, nomorRegistrasi 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_Var19 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var19 == nil {
+			templ_7745c5c3_Var19 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"hidden\" name=\"nomorRegistrasi\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(nomorRegistrasi)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 147, Col: 68}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"> <input type=\"hidden\" name=\"urlSurveyMcu\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(urlSurveyMcu)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 148, Col: 62}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 149, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 149, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"[name=&#39;urlSurveyMcu&#39;], [name=&#39;nomorRegistrasi&#39;]\"></div><div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(idModal)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 150, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+		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 ModalMcuWordingShow(idModal string, messageWording string, urlSurvey 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_Var25 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var25 == nil {
+			templ_7745c5c3_Var25 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- modal wording start --><div class=\"modal fade show modalcover\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var26 string
+		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(idModal)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 157, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"true\" tabindex=\"-1\" role=\"dialog\" data-backdrop=\"static\" aria-hidden=\"true\" style=\"display: block;\"><div class=\"modal-dialog modal-dialog-centered\" role=\"document\"><div class=\"modal-content rounded-lg\"><div class=\"modal-header border-bottom-0\"><h1 class=\"text-black font-weight-bolder\">Perhatian</h1></div><div class=\"modal-body border-bottom-0\"><div id=\"spinnerDiv\" class=\"d-flex justify-content-center align-items-center\"><div id=\"spinnerLoading\" class=\"spinner-border text-primary\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div><h6 id=\"modal-text\" class=\"text-black\" style=\"display: none;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var27 string
+		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(messageWording)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 177, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h6></div><div class=\"modal-footer border-top-0\"><button id=\"redirectToSurveyMcu\" type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\" style=\"display:none\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var28 string
+		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(urlSurvey)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\kartukontrol\kartukontrol.templ`, Line: 186, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"none\" hx-include=\"[name=&#39;urlSurveyMcu&#39;], [name=&#39;nomorRegistrasi&#39;]\">OK\r</button></div></div></div></div><script>\r\n\r\n\t// show spinner\r\n\tsetTimeout(function() {\r\n\t\tdocument.getElementById('spinnerDiv').style.display = 'none';\r\n\t\tdocument.getElementById('spinnerLoading').style.display = 'none';\r\n\t\tdocument.getElementById('modal-text').style.display = 'block';\r\n\t\tdocument.getElementById('redirectToSurveyMcu').style.display = 'block';\r\n\t}, 2000); // 2000 milidetik atau 2 detik\r\n\t</script>")
+		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 CssKartuKontrol() 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_Var29 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var29 == nil {
+			templ_7745c5c3_Var29 = 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: var(--white)\r\n        }\r\n\t\t.card-control {\r\n\t\t\twidth: 390px;\r\n\t\t\theight: 1212px;\r\n\t\t\tbackground-image: url(\"asset-corporate-portal/media/kartukontrol/bg-kartuKontrol.svg\");\r\n\t\t\tbackground-size: 390px 1212px;\r\n\t\t\tbackground-repeat: no-repeat;\r\n            margin: auto;\r\n\t\t}\r\n\t\t.foto {\r\n\t\t\twidth: 70px;\r\n\t\t\theight: 79px;\r\n\t\t\tbackground-image: url(\"assets/media/svg/avatars/001-boy.svg\");\r\n\t\t\tbackground-size: 70px 79px;\r\n\t\t\tbackground-repeat: no-repeat;\r\n\t\t}\r\n\t\t.top-right {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tright: 0;\r\n\t\t}\r\n\t\th5 {\r\n\t\t\tfont-size: 14px;\r\n\t\t}\r\n\t\th6 {\r\n\t\t\tfont-size: 12px;\r\n\t\t}\r\n\t\t.smallf {\r\n\t\t\tfont-size: 10px;\r\n\t\t}\r\n\t\t.modalcover {\r\n\t\t\tbackground-color: #00000073;\r\n\t\t}\r\n\t</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 JsKartuKontrol() 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_Var30 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var30 == nil {
+			templ_7745c5c3_Var30 = 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 ShowKartuKontrol(title string, cmp templ.Component, css templ.Component, js 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_Var31 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var31 == nil {
+			templ_7745c5c3_Var31 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var32 := 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.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var32), 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/public/surveymcu/surveymcu.templ
+++ b/views/public/surveymcu/surveymcu.templ
@@ -0,0 +1,305 @@
+package public_surveymcu
+
+import (
+	"cpone/models"
+	"cpone/layout"
+)
+
+func concatIdErrorMessage(idPertanyaan string) string {
+	return "errorMessage-" + idPertanyaan
+}
+
+func concatNameDefault(NameRadioButton string) string {
+	return "default-" + NameRadioButton
+}
+
+func isIDInClearList(IDItemSurvey string, idclear []models.IdClearErrorMessage) bool {
+	for _, item := range idclear {
+		if item.IdItem == IDItemSurvey {
+			return true
+		}
+	}
+	return false
+}
+
+templ MainContentSurveyMcuLayout(dataSurveyMcu []models.SurveyMcu, urlPost string, errorComp templ.Component, hxInclude string) {
+	// toast
+	<div class="toast-top-right" id="container-system-notification-x01" style="position: fixed; top: 1vh; right: 0vw; z-index: 999;">
+		<!-- toast success -->
+		<div
+			id="notification-kartukontrol-001"
+			class="toast fade fade"
+			role="alert"
+			aria-live="assertive"
+			aria-atomic="true"
+		>
+			<div class="toast-header bg-success text-white">
+				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
+				<strong class="mr-auto">Success</strong>
+				<small class="text-muted text-white">just now</small>
+				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+					<span aria-hidden="true">×</span>
+				</button>
+			</div>
+			<div class="toast-body bg-success-transparent">
+				This is a success toast.
+			</div>
+		</div>
+	</div>
+	// end toast
+	<div class="content-fluid bg-field">
+		<!-- judul start -->
+		<div class="py-15 px-9">
+			<h1 class="title text-primary text-center">Survey MCU</h1>
+		</div>
+		<!-- judul end -->
+		<div class="mb-2"></div>
+		// <form hx-post={ urlPost }>
+		<div class="px-10">
+			if len(dataSurveyMcu) > 0 {
+				for _, v := range dataSurveyMcu {
+					// radio button
+					if len(v.DataListItemSurveyMcu) > 0 {
+						for _, k := range v.DataListItemSurveyMcu {
+							<!-- pertanyaan 1 start -->
+							<div class="card shadow-sm py-2 mb-8" style="border-radius: 12px">
+								<div class="card-body px-10 py-10">
+									<!-- pertanyaan -->
+									<div class="flex-container">
+										<h5
+											class="title-pertanyaan text-black no-margin-padding flex-number"
+										>
+											{ k.Nomor }.&nbsp;
+										</h5>
+										<h5
+											class="title-pertanyaan text-black no-margin-padding flex-question"
+										>
+											{ k.Pertanyaan }
+										</h5>
+									</div>
+									<!-- jawaban start -->
+									<div class="mt-5">
+										<div class="row">
+											<div class="col-12">
+												<div class="form-group">
+													<input type="hidden" name={ concatNameDefault(k.NameRadioButton) } value={ concatNameDefault(k.NameRadioButton) }/>
+													<input type="hidden" name="id-radio" value={ k.IDItemSurvey }/>
+													<div class="radio-list">
+														<label class="radio">
+															<input type="radio" name={ k.NameRadioButton } value="Baik"/>
+															<span></span>
+															<h3 class="text-jawaban">Baik</h3>
+														</label>
+														<label class="radio">
+															<input type="radio" name={ k.NameRadioButton } value="Kurang"/>
+															<span></span>
+															<h3 class="text-jawaban">Kurang</h3>
+														</label>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+									<!-- jawaban end -->
+									<div
+										id={ concatIdErrorMessage(k.IDItemSurvey) }
+										class="form-group validated"
+										style="display: none"
+									>
+										<div class="invalid-feedback">
+											hello
+										</div>
+									</div>
+								</div>
+							</div>
+							<!-- pertanyaan 1 end -->
+						}
+					}
+					// text area
+					if len(v.DataListItemSurveyMcuSaran) > 0 {
+						for _, q := range v.DataListItemSurveyMcuSaran {
+							<input type="hidden" name={ concatNameDefault(q.NameSurveyMcuSaran) } value={ concatNameDefault(q.NameSurveyMcuSaran) }/>
+							<input type="hidden" name="id-saran" value={ q.IDItemSurveyMcuSaran }/>
+							<!-- text area saran start -->
+							<textarea
+								class="form-control saran-mcu mb-10"
+								name={ q.NameSurveyMcuSaran }
+								rows="9"
+								placeholder="Saran"
+							></textarea>
+							<div
+								id={ concatIdErrorMessage(q.IDItemSurveyMcuSaran) }
+								class="form-group validated"
+								style="display: none"
+							>
+								<div class="invalid-feedback">
+									hello
+								</div>
+							</div>
+							<!-- text area saran end -->
+						}
+					}
+				}
+			}
+			<!-- button submit start -->
+			<button
+				class="btn btn-lg btn-primary text-white"
+				style="border-radius: 8px; width: 100%"
+				type="submit"
+				hx-swap="none"
+				hx-post={ urlPost }
+				hx-include={ hxInclude }
+			>
+				<span class="title-button text-center">Submit</span>
+			</button>
+			<!-- button submit end -->
+			<!-- atur spacing bottom -->
+			<div style="height: 14vh"></div>
+		</div>
+		// </form>
+	</div>
+}
+
+templ ErrorMessageSurveyMcu(ErrorMessage string, IDItemSurvey string, idclear []models.IdClearErrorMessage, idSaranMcuAlert string, toast templ.Component) {
+	if len(idclear) > 0 {
+		for _, v := range idclear {
+			<!-- error pertanyaan kosong start -->
+			<div
+				id={ concatIdErrorMessage(v.IdItem) }
+				hx-swap-oob="true"
+				class="form-group validated"
+				style="display:none"
+			>
+				<div class="invalid-feedback">
+					{ ErrorMessage }
+				</div>
+			</div>
+			<!-- error pertanyaan kosong end -->
+		}
+	}
+	<!-- error pertanyaan kosong start -->
+	<div
+		id={ concatIdErrorMessage(IDItemSurvey) }
+		hx-swap-oob="true"
+		class="form-group validated"
+	>
+		<div class="invalid-feedback">
+			{ ErrorMessage }
+		</div>
+	</div>
+	@toast
+}
+
+templ CssSurveyMcu() {
+	<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: var(--fieldbg);
+      }
+      .card-control {
+        width: 390px;
+        height: 1212px;
+        /* background-image: url("asset-corporate-portal/media/kartukontrol/bg-kartuKontrol.svg");
+        background-size: 390px 1212px;
+        background-repeat: no-repeat; */
+        margin: auto;
+      }
+
+      .title {
+        font-family: Poppins;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+
+      .title-pertanyaan {
+        font-family: Poppins;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+      }
+
+      .no-margin-padding {
+        margin: 0;
+        padding: 0;
+      }
+
+      .flex-container {
+        display: flex;
+        align-items: center;
+        align-items: flex-start;
+      }
+
+      .flex-number {
+        margin-right: 5px;
+      }
+
+      .flex-question {
+        flex-grow: 1;
+      }
+
+      .text-jawaban {
+        color: var(--textjawabansurveymcu);
+        font-family: Poppins;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+      }
+
+      .radio-list {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .radio {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+      }
+
+      .radio h3 {
+        margin: 0;
+        padding-left: 10px;
+      }
+
+      .saran-mcu::placeholder {
+        color: var(--text-disabled);
+        font-family: Poppins, sans-serif;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+
+      .title-button {
+        font-family: "Public Sans";
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 26px;
+      }
+	</style>
+}
+
+templ JsSurveyMcu() {
+}
+
+templ ShowSurveyMcu(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}
--- a/views/public/surveymcu/surveymcu_templ.go
+++ b/views/public/surveymcu/surveymcu_templ.go
@@ -0,0 +1,455 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package public_surveymcu
+
+//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"
+)
+
+func concatIdErrorMessage(idPertanyaan string) string {
+	return "errorMessage-" + idPertanyaan
+}
+
+func concatNameDefault(NameRadioButton string) string {
+	return "default-" + NameRadioButton
+}
+
+func isIDInClearList(IDItemSurvey string, idclear []models.IdClearErrorMessage) bool {
+	for _, item := range idclear {
+		if item.IdItem == IDItemSurvey {
+			return true
+		}
+	}
+	return false
+}
+
+func MainContentSurveyMcuLayout(dataSurveyMcu []models.SurveyMcu, urlPost string, errorComp templ.Component, hxInclude 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 class=\"toast-top-right\" id=\"container-system-notification-x01\" style=\"position: fixed; top: 1vh; right: 0vw; z-index: 999;\"><!-- toast success --><div id=\"notification-kartukontrol-001\" class=\"toast fade fade\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"toast-header bg-success text-white\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ep mr-2 icon-xl\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 1024 1024\" data-icon=\"ep:success-filled\"><path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z\"></path></svg> <strong class=\"mr-auto\">Success</strong> <small class=\"text-muted text-white\">just now</small> <button type=\"button\" class=\"ml-2 mb-1 close\" data-dismiss=\"toast\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div><div class=\"toast-body bg-success-transparent\">This is a success toast.\r</div></div></div><div class=\"content-fluid bg-field\"><!-- judul start --><div class=\"py-15 px-9\"><h1 class=\"title text-primary text-center\">Survey MCU</h1></div><!-- judul end --><div class=\"mb-2\"></div><div class=\"px-10\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(dataSurveyMcu) > 0 {
+			for _, v := range dataSurveyMcu {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				if len(v.DataListItemSurveyMcu) > 0 {
+					for _, k := range v.DataListItemSurveyMcu {
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- pertanyaan 1 start --> <div class=\"card shadow-sm py-2 mb-8\" style=\"border-radius: 12px\"><div class=\"card-body px-10 py-10\"><!-- pertanyaan --><div class=\"flex-container\"><h5 class=\"title-pertanyaan text-black no-margin-padding flex-number\">")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var2 string
+						templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(k.Nomor)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 72, Col: 20}
+						}
+						_, 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(".&nbsp;\r</h5><h5 class=\"title-pertanyaan text-black no-margin-padding flex-question\">")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var3 string
+						templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(k.Pertanyaan)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 77, Col: 25}
+						}
+						_, 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("</h5></div><!-- jawaban start --><div class=\"mt-5\"><div class=\"row\"><div class=\"col-12\"><div class=\"form-group\"><input type=\"hidden\" name=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var4 string
+						templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(concatNameDefault(k.NameRadioButton))
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 85, Col: 77}
+						}
+						_, 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("\" value=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var5 string
+						templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(concatNameDefault(k.NameRadioButton))
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 85, Col: 124}
+						}
+						_, 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("\"> <input type=\"hidden\" name=\"id-radio\" value=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var6 string
+						templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(k.IDItemSurvey)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 86, Col: 72}
+						}
+						_, 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("\"><div class=\"radio-list\"><label class=\"radio\"><input type=\"radio\" name=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var7 string
+						templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(k.NameRadioButton)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 89, Col: 59}
+						}
+						_, 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("\" value=\"Baik\"> <span></span><h3 class=\"text-jawaban\">Baik</h3></label> <label class=\"radio\"><input type=\"radio\" name=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var8 string
+						templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(k.NameRadioButton)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 94, Col: 59}
+						}
+						_, 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("\" value=\"Kurang\"> <span></span><h3 class=\"text-jawaban\">Kurang</h3></label></div></div></div></div></div><!-- jawaban end --><div id=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var9 string
+						templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(concatIdErrorMessage(k.IDItemSurvey))
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 105, Col: 51}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-group validated\" style=\"display: none\"><div class=\"invalid-feedback\">hello\r</div></div></div></div><!-- pertanyaan 1 end -->")
+						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
+				}
+				if len(v.DataListItemSurveyMcuSaran) > 0 {
+					for _, q := range v.DataListItemSurveyMcuSaran {
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"hidden\" name=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var10 string
+						templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(concatNameDefault(q.NameSurveyMcuSaran))
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 121, Col: 74}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var11 string
+						templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(concatNameDefault(q.NameSurveyMcuSaran))
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 121, Col: 124}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"> <input type=\"hidden\" name=\"id-saran\" value=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var12 string
+						templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(q.IDItemSurveyMcuSaran)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 122, Col: 74}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><!-- text area saran start --> <textarea class=\"form-control saran-mcu mb-10\" name=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var13 string
+						templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(q.NameSurveyMcuSaran)
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 126, Col: 35}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" rows=\"9\" placeholder=\"Saran\"></textarea><div id=\"")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						var templ_7745c5c3_Var14 string
+						templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(concatIdErrorMessage(q.IDItemSurveyMcuSaran))
+						if templ_7745c5c3_Err != nil {
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 131, Col: 57}
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-group validated\" style=\"display: none\"><div class=\"invalid-feedback\">hello\r</div></div><!-- text area saran end -->")
+						if templ_7745c5c3_Err != nil {
+							return templ_7745c5c3_Err
+						}
+					}
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- button submit start --><button class=\"btn btn-lg btn-primary text-white\" style=\"border-radius: 8px; width: 100%\" type=\"submit\" hx-swap=\"none\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(urlPost)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 150, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 151, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span class=\"title-button text-center\">Submit</span></button><!-- button submit end --><!-- atur spacing bottom --><div style=\"height: 14vh\"></div></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 ErrorMessageSurveyMcu(ErrorMessage string, IDItemSurvey string, idclear []models.IdClearErrorMessage, idSaranMcuAlert string, toast 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_Var17 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var17 == nil {
+			templ_7745c5c3_Var17 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(idclear) > 0 {
+			for _, v := range idclear {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- error pertanyaan kosong start --> <div id=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var18 string
+				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(concatIdErrorMessage(v.IdItem))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 168, Col: 39}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"true\" class=\"form-group validated\" style=\"display:none\"><div class=\"invalid-feedback\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var19 string
+				templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(ErrorMessage)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 174, Col: 19}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><!-- error pertanyaan kosong end -->")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- error pertanyaan kosong start --><div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(concatIdErrorMessage(IDItemSurvey))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 182, Col: 41}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"true\" class=\"form-group validated\"><div class=\"invalid-feedback\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(ErrorMessage)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\surveymcu\surveymcu.templ`, Line: 187, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = toast.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 CssSurveyMcu() 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_Var22 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var22 == nil {
+			templ_7745c5c3_Var22 = 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: var(--fieldbg);\r\n      }\r\n      .card-control {\r\n        width: 390px;\r\n        height: 1212px;\r\n        /* background-image: url(\"asset-corporate-portal/media/kartukontrol/bg-kartuKontrol.svg\");\r\n        background-size: 390px 1212px;\r\n        background-repeat: no-repeat; */\r\n        margin: auto;\r\n      }\r\n\r\n      .title {\r\n        font-family: Poppins;\r\n        font-size: 24px;\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: normal;\r\n      }\r\n\r\n      .title-pertanyaan {\r\n        font-family: Poppins;\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: 24px;\r\n      }\r\n\r\n      .no-margin-padding {\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n\r\n      .flex-container {\r\n        display: flex;\r\n        align-items: center;\r\n        align-items: flex-start;\r\n      }\r\n\r\n      .flex-number {\r\n        margin-right: 5px;\r\n      }\r\n\r\n      .flex-question {\r\n        flex-grow: 1;\r\n      }\r\n\r\n      .text-jawaban {\r\n        color: var(--textjawabansurveymcu);\r\n        font-family: Poppins;\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: 22px;\r\n      }\r\n\r\n      .radio-list {\r\n        display: flex;\r\n        flex-direction: column;\r\n      }\r\n\r\n      .radio {\r\n        display: flex;\r\n        align-items: center;\r\n        margin-bottom: 10px;\r\n      }\r\n\r\n      .radio h3 {\r\n        margin: 0;\r\n        padding-left: 10px;\r\n      }\r\n\r\n      .saran-mcu::placeholder {\r\n        color: var(--text-disabled);\r\n        font-family: Poppins, sans-serif;\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        line-height: normal;\r\n      }\r\n\r\n      .title-button {\r\n        font-family: \"Public Sans\";\r\n        font-size: 15px;\r\n        font-style: normal;\r\n        font-weight: 700;\r\n        line-height: 26px;\r\n      }\r\n\t</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 JsSurveyMcu() 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_Var23 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var23 == nil {
+			templ_7745c5c3_Var23 = 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 ShowSurveyMcu(title string, cmp templ.Component, css templ.Component, js 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_Var24 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var24 == nil {
+			templ_7745c5c3_Var24 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var25 := 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.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var25), 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/public/toast/toastpublickartukontrol.templ
+++ b/views/public/toast/toastpublickartukontrol.templ
@@ -0,0 +1,101 @@
+package public_toast
+
+import (
+	"cpone/layout"
+)
+
+// kalau eror => bg nya danger
+// kalau sukses => bgnya success
+// kalau warning => bgnya warning
+
+func toastBackgroundKartuKontrol(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBodyKartuKontrol(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIconKartuKontrol(typeToast string) string {
+	var stringx string
+	if typeToast == "success" {
+		stringx = "solar:check-circle-broken"
+	} else {
+		if typeToast == "danger" {
+			stringx = "solar:close-circle-broken"
+		} else {
+			if typeToast == "warning" {
+				stringx = "solar:shield-warning-bold"
+			} else {
+				if typeToast == "information" {
+					stringx = "solar:info-square-broken"
+				}
+			}
+		}
+	}
+
+	return stringx
+}
+
+templ PublicToastV1KartuKontrolShow(title string, message string, typeToast string) {
+	<div
+		class="toast fade show"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+		id="notification-kartukontrol-001"
+		hx-swap-oob="true"
+		hx-get="hidetoastkartukontrol"
+		hx-trigger="load delay:3s"
+		hx-target="this"
+		style="border-radius: 8px 8px 8px 8px;"
+	>
+		<div class={ "toast-header",  toastBackgroundKartuKontrol(typeToast) , "text-white" }>
+			<span
+				class="iconify mr-2"
+				data-icon={ toastIconKartuKontrol(typeToast) }
+			></span>
+			<strong class="mr-auto">{ title }</strong>
+			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+				<span aria-hidden="true">×</span>
+			</button>
+		</div>
+		<div class={ "toast-body",toastBodyKartuKontrol(typeToast) }>
+			{ message }
+		</div>
+	</div>
+}
+
+templ PublicToastV1KartuKontrolHide() {
+	<div
+		id="notification-kartukontrol-001"
+		class="toast fade hide"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+		style="opacity: 0"
+		hx-swap-oob="true"
+	>
+		<div class="toast-header bg-success text-white">
+			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
+			<strong class="mr-auto">Success</strong>
+			<small class="text-muted text-white">just now</small>
+			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+				<span aria-hidden="true">×</span>
+			</button>
+		</div>
+		<div class="toast-body bg-success-transparent">
+			This is a success toast.
+		</div>
+	</div>
+}
+
+templ EmptyDiv() {
+	<div></div>
+}
+
+templ ShowToastKartuKontrol(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.CorporateLayout(title, css, js, EmptyDiv(), EmptyDiv(), EmptyDiv()) {
+		@cmp
+	}
+}
--- a/views/public/toast/toastpublickartukontrol_templ.go
+++ b/views/public/toast/toastpublickartukontrol_templ.go
@@ -0,0 +1,242 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package public_toast
+
+//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"
+)
+
+// kalau eror => bg nya danger
+// kalau sukses => bgnya success
+// kalau warning => bgnya warning
+
+func toastBackgroundKartuKontrol(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBodyKartuKontrol(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIconKartuKontrol(typeToast string) string {
+	var stringx string
+	if typeToast == "success" {
+		stringx = "solar:check-circle-broken"
+	} else {
+		if typeToast == "danger" {
+			stringx = "solar:close-circle-broken"
+		} else {
+			if typeToast == "warning" {
+				stringx = "solar:shield-warning-bold"
+			} else {
+				if typeToast == "information" {
+					stringx = "solar:info-square-broken"
+				}
+			}
+		}
+	}
+
+	return stringx
+}
+
+func PublicToastV1KartuKontrolShow(title string, message string, typeToast 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 class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-kartukontrol-001\" hx-swap-oob=\"true\" hx-get=\"hidetoastkartukontrol\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 = []any{"toast-header", toastBackgroundKartuKontrol(typeToast), "text-white"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\toast\toastpublickartukontrol.templ`, Line: 1, Col: 0}
+		}
+		_, 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("\"><span class=\"iconify mr-2\" data-icon=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(toastIconKartuKontrol(typeToast))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\toast\toastpublickartukontrol.templ`, Line: 56, Col: 48}
+		}
+		_, 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> <strong class=\"mr-auto\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\toast\toastpublickartukontrol.templ`, Line: 58, Col: 34}
+		}
+		_, 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("</strong> <button type=\"button\" class=\"ml-2 mb-1 close\" data-dismiss=\"toast\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 = []any{"toast-body", toastBodyKartuKontrol(typeToast)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\toast\toastpublickartukontrol.templ`, Line: 1, Col: 0}
+		}
+		_, 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(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\toast\toastpublickartukontrol.templ`, Line: 64, Col: 12}
+		}
+		_, 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("</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 PublicToastV1KartuKontrolHide() 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 id=\"notification-kartukontrol-001\" class=\"toast fade hide\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" style=\"opacity: 0\" hx-swap-oob=\"true\"><div class=\"toast-header bg-success text-white\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ep mr-2 icon-xl\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 1024 1024\" data-icon=\"ep:success-filled\"><path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z\"></path></svg> <strong class=\"mr-auto\">Success</strong> <small class=\"text-muted text-white\">just now</small> <button type=\"button\" class=\"ml-2 mb-1 close\" data-dismiss=\"toast\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div><div class=\"toast-body bg-success-transparent\">This is a success toast.\r</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 EmptyDiv() 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)
+		_, 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 ShowToastKartuKontrol(title string, cmp templ.Component, css templ.Component, js 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_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var12 := 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, EmptyDiv(), EmptyDiv(), EmptyDiv()).Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), 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
+	})
+}
Author	SHA1	Message	Date
sindhu	26a10eb0df	step 1 : autocomplete multi select (di hold)	2024-05-28 08:11:00 +07:00
sindhu	219600fc7f	add groupresult into dev folder	2024-05-27 18:07:59 +07:00
Hanan Askarim	3b2086b253	Merge branch 'hanan/masterdata-natunit'	2024-05-27 17:02:11 +07:00
Hanan Askarim	b68a2ed2ec	add feature delete	2024-05-27 16:44:06 +07:00
Hanan Askarim	a3005c3b6a	add feature edit	2024-05-27 14:58:10 +07:00
Hanan Askarim	04460bac00	add feature tambah data	2024-05-27 11:27:07 +07:00
sindhu	4c3361fe74	Merge branch 'groupresultv1'	2024-05-27 11:07:55 +07:00
Hanan Askarim	5b2c63a4d4	add loading search dan pagination	2024-05-27 09:58:55 +07:00
Hanan Askarim	f6ac4944e8	master unit listing	2024-05-27 09:36:42 +07:00
Sas Andy	4ea514c3f0	Merge branch 'andy/usergroupfix'	2024-05-27 09:10:19 +07:00
Sas Andy	398ee17727	revisi bug	2024-05-27 09:06:00 +07:00
sindhu	6c7986c676	step 7 : add error msg in add and edit	2024-05-27 08:04:39 +07:00
Sas Andy	94fea169d1	loading	2024-05-25 20:10:25 +07:00
Sas Andy	af1c16f8f9	up versi	2024-05-25 20:10:12 +07:00
sindhu	67b9f36d29	step 6 : fix bug after sukses edit then open delete dialog	2024-05-25 19:36:49 +07:00
sindhu	0490d17d2a	step 5 : fix bug after sukses delete then open form edit	2024-05-25 19:08:10 +07:00
sindhu	cd0d3aee08	step 4 : delete group result	2024-05-25 18:32:07 +07:00
sindhu	eaabf29fda	step 3 : edit data group result	2024-05-25 17:49:24 +07:00
sindhu	d13384ab64	step 2 : add data group result with form validation	2024-05-25 13:29:52 +07:00
sindhu	9cc14fd92c	step 1 : listing, search and pagination group result	2024-05-24 22:48:03 +07:00
Sas Andy	10c1d3c5dd	revisi toast top right based screen view	2024-05-24 13:51:36 +07:00
Sas Andy	b3ef572180	route	2024-05-24 10:31:48 +07:00
Sas Andy	9f2ac20180	handler delete user group	2024-05-24 10:31:37 +07:00
Sas Andy	922f8492c3	view delete user group	2024-05-24 10:31:15 +07:00
sindhu	d8278b6886	add kartu kontrol and survey mcu into public	2024-05-22 16:39:41 +07:00
Sas Andy	caa6dba306	revisi open dialog edit & edit user group	2024-05-22 15:37:37 +07:00
Sas Andy	4c12c45aa8	open and close edit form	2024-05-22 14:00:17 +07:00