md nonlab template listing data + filter + pagination

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"

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;
@@ -616,7 +620,7 @@ a.text-white:focus {
 }
 .btn-outline-secondary.disabled,
 .btn-outline-secondary:disabled {
-  color: var(--secondary) !important;
+  color: var(--text-black) !important;
   background-color: transparent;
 }
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
@@ -5195,9 +5199,11 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
   position: fixed;
   top: 0vh;
   right: 0vh;
-  z-index: 9998;
+  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;
@@ -5239,6 +5260,51 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
   cursor: wait !important;
 }
 
+/* ### PROGRESS BAR HOVER TEXT */
+/* ## PRIMARY */
+.progress-bar {
+  height: 4px !important;
+  background-color: var(--primary) !important;
+  width: 100% !important;
+  overflow: hidden !important;
+}
+
+.progress-bar-value {
+  width: 100% !important;
+  height: 100% !important;
+  background-color: var(--primarybg) !important;
+  animation: indeterminateAnimation 1s infinite linear !important;
+  transform-origin: 0% 50% !important;
+}
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+  40% {
+    transform: translateX(0) scaleX(0.4);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.5);
+  }
+}
+/* ## SECONDARY */
+
+/* ## SUCCESS */
+/* ## INFO */
+/* ## 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 */

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>
+}

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
+	})
+}

component/modal/modal_confirmation.templ

@@ -28,14 +28,14 @@ templ ModalConfirmation(
 					<p>{ message }</p>
 					<div class="card rounded-lg">
 						<div class="card-body d-flex flex-row">
-							<div class="d-flex flex-column ">
+							<div class="d-flex flex-column">
 								for _, v := range datHeader {
-									<div class="mb-3 text-disabled font-weight-bold mr-5">{ v }</div>
+									<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-3 font-weight-bold">
+									<div class="mb-1 mt-1 font-weight-bold">
 										{ v }
 									</div>
 								}

component/modal/modal_confirmation_templ.go

@@ -77,19 +77,19 @@ func ModalConfirmation(
 		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 \">")
+		_, 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-3 text-disabled font-weight-bold mr-5\">")
+			_, 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_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 33, Col: 66}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 33, Col: 71}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -105,7 +105,7 @@ func ModalConfirmation(
 			return templ_7745c5c3_Err
 		}
 		for _, v := range dataText {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-3 font-weight-bold\">")
+			_, 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
 			}

component/pagination/paginationv2.templ

@@ -11,10 +11,11 @@ templ PaginationV2(length int,
 	hxInclude string,
 	hxTarget string,
 	hxSwap string,
-	hxIndicator string) {
+	hxIndicator string,
+	hxSwapOob string) {
 	// 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" id={ paginationID }>
+	<div class="d-flex justify-content-between align-items-center flex-wrap" 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 {
@@ -26,24 +27,24 @@ 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>
 				}
 			}
 		</div>
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)})
 	</div>
-	@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "currpage" + paginationID,
-		Type:  "hidden",
-		Value: strconv.Itoa(currentPage)})
 }

component/pagination/paginationv2_templ.go

@@ -21,7 +21,8 @@ func PaginationV2(length int,
 	hxInclude string,
 	hxTarget string,
 	hxSwap string,
-	hxIndicator string) templ.Component {
+	hxIndicator string,
+	hxSwapOob 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 {
@@ -41,12 +42,25 @@ func PaginationV2(length int,
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(paginationID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 17, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 18, Col: 91}
 		}
 		_, 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=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapOob)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 18, Col: 117}
+		}
+		_, 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("\"><div class=\"d-flex flex-wrap py-2 mr-3\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -57,12 +71,12 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var3 string
-				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, 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: 22, Col: 55}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 23, Col: 55}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -70,12 +84,12 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var4 string
-				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 24, Col: 22}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 25, Col: 22}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -83,12 +97,12 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var5 string
-				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 25, Col: 32}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 26, Col: 32}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -96,12 +110,12 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var6 string
-				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 27, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 28, Col: 26}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -109,25 +123,25 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var7 string
-				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 28, Col: 28}
-				}
-				_, 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-disabled-elt=\".btneditug, .btndeleteug\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
 				var templ_7745c5c3_Var8 string
-				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 29, Col: 28}
+				}
+				_, 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
+				}
+				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: 30, Col: 25}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -140,25 +154,25 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var9 string
-				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				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: 33, Col: 55}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				_, 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_Var10 string
-				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				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: 35, Col: 22}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -166,12 +180,12 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var11 string
-				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				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: 36, Col: 32}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -179,12 +193,12 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var12 string
-				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				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: 38, Col: 26}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -192,44 +206,50 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				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: 39, Col: 28}
 				}
-				_, 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-disabled-elt=\".btneditug, .btndeleteug\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var14 string
-				templ_7745c5c3_Var14, 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: 41, Col: 25}
-				}
 				_, 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("\">")
+				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: 40, Col: 25}
+				}
+				_, 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("</a>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		_, 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,
+		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)
 		}

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>
+}

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
+	})
+}

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>

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
 		}

go.mod

@@ -4,17 +4,18 @@ go 1.21.0
 
 require (
 	github.com/a-h/templ v0.2.663
+	github.com/fsnotify/fsnotify v1.7.0
 	github.com/glebarez/go-sqlite v1.22.0
+	github.com/go-sql-driver/mysql v1.8.1
+	github.com/jmoiron/sqlx v1.4.0
 	github.com/labstack/echo/v4 v4.12.0
+	github.com/spf13/viper v1.18.2
 	golang.org/x/text v0.14.0
 )
 
 require (
 	filippo.io/edwards25519 v1.1.0 // indirect
-	github.com/fsnotify/fsnotify v1.7.0 // indirect
-	github.com/go-sql-driver/mysql v1.8.1 // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect
-	github.com/jmoiron/sqlx v1.4.0 // indirect
 	github.com/magiconair/properties v1.8.7 // indirect
 	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
@@ -24,7 +25,6 @@ require (
 	github.com/spf13/afero v1.11.0 // indirect
 	github.com/spf13/cast v1.6.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
-	github.com/spf13/viper v1.18.2 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
 	go.uber.org/multierr v1.10.0 // indirect
 	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
@@ -36,7 +36,7 @@ require (
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
 	github.com/google/uuid v1.5.0 // indirect
-	github.com/labstack/gommon v0.4.2 // indirect
+	github.com/labstack/gommon v0.4.2
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect

go.sum

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

handlers/dev/md.nonlabtemplate.handlers.go

@@ -0,0 +1,252 @@
+package dev_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	"cpone/component/customtextfieldsearch"
+	navbarmenu "cpone/component/navbar"
+	"cpone/component/pagination"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	dev_mdnonlabtemplateview "cpone/views/dev/mdnonlabtemplate"
+	"fmt"
+	"strconv"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type MDNonLabTemplateServices interface {
+	GetMDNonLabTemplateBreadcrumb() (models.BreadCrumbV1, error)
+	GetMDNonLabTemplateData(search string, currentPage int, rowPerPage int) ([]models.MDNonLabTemplate, int, error)
+}
+
+type MDNonLabTemplateHandler struct {
+	MDNonLabTemplateServices MDNonLabTemplateServices
+}
+
+func NewMDNonLabTemplateHandler(nlt MDNonLabTemplateServices) *MDNonLabTemplateHandler {
+	return &MDNonLabTemplateHandler{
+		MDNonLabTemplateServices: nlt,
+	}
+}
+
+func (mdnlt *MDNonLabTemplateHandler) HandleShowMDNonLabTemplateScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	tableID := utils.GenerateRandomID("tableid")
+	paginationID := utils.GenerateRandomID("paginationid")
+	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()
+	if err != nil {
+		fmt.Println(dataMenu)
+		return err
+	}
+
+	dataUser, err := services.GetUserLogin()
+	if err != nil {
+		fmt.Println(dataUser)
+		return err
+	}
+	defer logger.Sync()
+	logger.Info("LOAD USER DEV", zap.Any("data", dataUser))
+
+	title := "Master Non-lab Template"
+
+	dataBreadCrumb, err := mdnlt.MDNonLabTemplateServices.GetMDNonLabTemplateBreadcrumb()
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV", zap.Any("error", err))
+		return err
+	}
+	defer logger.Sync()
+	logger.Info("LOAD BREADCRUMB DEV", zap.Any("data", dataBreadCrumb))
+
+	breadcrumbComp := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadCrumb)
+	navbarmenuComp := navbarmenu.NavbarMenu(dataMenu)
+	navbaruserComp := navbarmenu.Navbar(dataUser)
+	sidebarusrComp := sidebaruserprofile.Navbaruserprofile(dataUser)
+
+	dataList, totalPage, err := mdnlt.MDNonLabTemplateServices.GetMDNonLabTemplateData("", 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET DATA DEV", zap.Any("error", err))
+		return err
+	}
+
+	tableComp := dev_mdnonlabtemplateview.TableNonLabTemplate(dataList,
+		tableID,
+		"/dev/md/nonlabtemplate/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/nonlabtemplate/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+
+	tableFilter := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
+		"search",
+		"Cari Nama Template",
+		"text",
+		"/dev/md/nonlabtemplate/filter",
+		"input changed delay:500ms, search",
+		"#"+paginationID,
+		"#loadingcontent", "",
+		"outerHTML",
+		"#tableID, #paginationID, #searchID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		dev_mdnonlabtemplateview.BeforeRequestContent(),
+		dev_mdnonlabtemplateview.AfterRequestContent(),
+	)
+
+	tablePagination := pagination.PaginationV3(totalPage,
+		1,
+		"/dev/md/nonlabtemplate/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		dev_mdnonlabtemplateview.BeforeRequestContent(),
+		dev_mdnonlabtemplateview.AfterRequestContent(),
+	)
+
+	content := dev_mdnonlabtemplateview.MDNonLabTemplateScreen(
+		tableID,
+		paginationID,
+		searchID,
+		dialogAddID,
+		dialogAddBodyID,
+		dialogEditID,
+		dialogEditBodyID,
+		dialogDeleteID,
+		dialogDeleteBodyID,
+		breadcrumbComp,
+		tableFilter,
+		tableComp,
+		tablePagination,
+	)
+	css := dev_mdnonlabtemplateview.CSSMDNonLabTemplate()
+	js := dev_mdnonlabtemplateview.JSSMDNonLabTemplate()
+
+	view := dev_mdnonlabtemplateview.ShowMDNonLabTemplate(
+		title,
+		content,
+		css,
+		js,
+		navbarmenuComp,
+		navbaruserComp,
+		sidebarusrComp,
+	)
+
+	return utils.View(c, view)
+}
+
+func (mdnlt *MDNonLabTemplateHandler) HandleFilterMDNonLabTemplate(c echo.Context) error {
+	search := c.QueryParam("search")
+	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()
+
+	dataList, totalPage, err := mdnlt.MDNonLabTemplateServices.GetMDNonLabTemplateData(search, 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET DATA", zap.Any("error", err))
+		return err
+	}
+
+	tableComp := dev_mdnonlabtemplateview.TableNonLabTemplate(dataList,
+		tableID,
+		"/dev/md/nonlabtemplate/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/nonlabtemplate/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+
+	tablePagination := pagination.PaginationV3(
+		totalPage,
+		1,
+		"/dev/md/nonlabtemplate/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		dev_mdnonlabtemplateview.BeforeRequestContent(),
+		dev_mdnonlabtemplateview.AfterRequestContent(),
+	)
+
+	retval = append(retval, tableComp)
+	retval = append(retval, tablePagination)
+	return utils.ViewMulti(c, retval)
+}
+
+func (mdnlt *MDNonLabTemplateHandler) HandleChangePageMDNonLabTemplate(c echo.Context) error {
+	search := c.QueryParam("search")
+	pageparam := c.QueryParam("page")
+	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)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM", zap.Any("page", page), zap.Any("error", err))
+		return err
+	}
+
+	dataList, totalPage, err := mdnlt.MDNonLabTemplateServices.GetMDNonLabTemplateData(search, page, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM", zap.Any("error", err))
+		return err
+	}
+
+	tableComp := dev_mdnonlabtemplateview.TableNonLabTemplate(dataList,
+		tableID,
+		"/dev/md/nonlabtemplate/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/nonlabtemplate/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+
+	tablePagination := pagination.PaginationV3(
+		totalPage,
+		page,
+		"/dev/md/nonlabtemplate/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		dev_mdnonlabtemplateview.BeforeRequestContent(),
+		dev_mdnonlabtemplateview.AfterRequestContent(),
+	)
+
+	retval = append(retval, tableComp)
+	retval = append(retval, tablePagination)
+	return utils.ViewMulti(c, retval)
+}

handlers/dev/md.usergroup.handlers.go

@@ -0,0 +1,994 @@
+package dev_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	customtextfieldsearch "cpone/component/customtextfieldsearch"
+	navbarmenu "cpone/component/navbar"
+	"cpone/component/pagination"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	customtoastv2 "cpone/component/toastbootstrap"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	dev_mdusergroupview "cpone/views/dev/mdusergroup"
+	"strconv"
+	"strings"
+
+	"fmt"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type MdUserGroupServices interface {
+	GetListMdUserGroup(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, int, error)
+	GetMdUserGroupByID(id string) (models.UserGroupV1, error)
+	AddMdUserGroup(code string, name string) (models.UserGroupV1, error)
+	EditMdUsergroup(id string, code string, name string) (models.UserGroupV1, error)
+	DeleteMdUserGroup(id string) (models.UserGroupV1, error)
+	GetMdUserGroupBreadCrumb(title string) (models.BreadCrumbV1, error)
+}
+
+func NewMdUserGroupHandler(us MdUserGroupServices) *MdUserGroupHandler {
+	return &MdUserGroupHandler{
+		MdUserGroupServices: us,
+	}
+}
+
+type MdUserGroupHandler struct {
+	MdUserGroupServices MdUserGroupServices
+}
+
+func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	//get sidebarmenu
+	tableID := utils.GenerateRandomID("tablebody")
+	paginationID := utils.GenerateRandomID("paginationid")
+	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)
+	if err != nil {
+		fmt.Println(dataMenu)
+		return err
+	}
+
+	//get user login
+	dataUser, err := services.GetUserLogin()
+	fmt.Println(dataUser)
+	fmt.Println(err)
+	if err != nil {
+		fmt.Println(dataUser)
+		return err
+	}
+	defer logger.Sync()
+	logger.Info("LOAD USER DEV",
+		zap.Any("data", dataUser),
+	)
+
+	title := "Master User Group"
+
+	dataBreadCrumb, err := lh.MdUserGroupServices.GetMdUserGroupBreadCrumb(title)
+	fmt.Println(dataBreadCrumb)
+	fmt.Println(err)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataBreadCrumb)
+		return err
+	}
+
+	defer logger.Sync()
+	logger.Info("LOAD BREADCRUMB DEV",
+		zap.Any("data", dataBreadCrumb),
+	)
+	//Breadcrumb component
+	breadcrumbComponent := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadCrumb)
+	// navbar menu
+	navbarmenuComponent := navbarmenu.NavbarMenu(dataMenu)
+
+	// navbar user
+	navbaruserComponent := navbarmenu.Navbar(dataUser)
+
+	// sidebar
+	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)
+
+	//Table component
+	dataUserGroup, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup("", 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+
+	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.MainCustomTextFieldSearchV3(searchID,
+		"search",
+		"Cari Kode/Nama",
+		"text",
+		"/dev/md/usergroupv2/filter",
+		"input changed delay:500ms, search",
+		"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableID, #paginationID, #searchID,#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent())
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		1,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+
+	//modal add form
+	dialogAddBodyCmp := 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"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioAddCmp := dev_mdusergroupview.ActionFormUserGroup(
+		"/dev/md/usergroupv2/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID)
+	btnCloaseModalAdd := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID)
+	modalAddFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/add",
+			HxTarget:     "#" + dialogAddBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogAddBodyID, #dialogAddID, #dialogDeleteBodyID, #dialogEditBodyID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogAddID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogAddBodyCmp,
+			DialogAction: modalActioAddCmp,
+			ButtonCLose:  btnCloaseModalAdd,
+		},
+	)
+
+	//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,
+		paginationID,
+		searchID,
+		dialogAddID,
+		dialogAddBodyID,
+		dialogEditID,
+		dialogEditBodyID,
+		dialogDeleteID,
+		dialogDeleteBodyID,
+		breadcrumbComponent,
+		tableComponent,
+		usergroupFilterComponent,
+		userGroupPaginationComponent,
+		modalAddFormComponent,
+		modalEditFormComponent,
+		modalDeleteFormComponent)
+	css := dev_mdusergroupview.CssMdUserGroup()
+	js := dev_mdusergroupview.JsMdUserGroup()
+
+	view := dev_mdusergroupview.ShowMdUserGroupScreen(title,
+		content,
+		css,
+		js,
+		navbarmenuComponent,
+		navbaruserComponent,
+		sidebaruserprofileComponent)
+	return utils.View(c, view)
+}
+func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
+	search := c.QueryParam("search")
+	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()
+
+	dataUserGroup, totalpage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	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/md/usergroupv2/changepage",
+		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)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdUserGroupHandler) HandleChangePageMdUserGroup(c echo.Context) error {
+	search := c.QueryParam("search")
+	pageparam := c.QueryParam("page")
+	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)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM",
+			zap.Any("page", page),
+			zap.Any("error ", err),
+		)
+		return err
+	}
+	dataUserGroup, totalpage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, page, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	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/md/usergroupv2/changepage",
+		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)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormAdd(c echo.Context) error {
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	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"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+	code := c.FormValue("usergroupcode")
+	name := c.FormValue("usergroupname")
+	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")
+	dialogAddID := c.FormValue("dialogAddID")
+	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"},
+			dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	//Add user group service
+	dataUserGroup, err := lh.MdUserGroupServices.AddMdUserGroup(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"},
+			dialogAddBodyID, 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(),
+	)
+
+	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"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal("#"+dialogAddID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil insert User group "+name, "success")
+
+	return utils.ViewMulti(c, []templ.Component{
+		toastSuccess,
+		tableComponent,
+		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)
+}

handlers/dev/xtemplmulti.handlers.go

@@ -0,0 +1,69 @@
+package dev_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	"html/template"
+	"strings"
+
+	xtemplmulti "cpone/views/dev/xtemplmulti"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+)
+
+type XTemplMultiService interface {
+}
+
+func NewXTemplMultiHandler(us XTemplMultiService) *XTemplMultiHandler {
+	return &XTemplMultiHandler{
+		XTemplMultiService: us,
+	}
+}
+
+type XTemplMultiHandler struct {
+	XTemplMultiService XTemplMultiService
+}
+
+func (lh *MasterMenuUserGroupHandler) HandlerXTemplMulti(c echo.Context) error {
+	var arrTempl []models.XtemplModel
+	// toastComponent := customtoastv2.CustomToastV2Show("sukses", "halo", "warning")
+
+	newItem := models.XtemplModel{
+		NameTempl:  "Komponen 1",
+		HtmlString: "<div style='background-color:red;'>Komponen 1<div>"}
+
+	newItem2 := models.XtemplModel{
+		NameTempl:  "Komponen 2",
+		HtmlString: "<div style='background-color:purple;'>Komponen 2<div>"}
+
+	arrTempl = append(arrTempl, newItem, newItem2)
+
+	var stringx string
+
+	for _, item := range arrTempl {
+		stringx += item.HtmlString
+	}
+
+	tpl := template.Must(template.New("index").Parse(stringx))
+
+	var stringBuilder strings.Builder
+	if err := tpl.Execute(&stringBuilder, arrTempl); err != nil {
+		panic(err)
+	}
+
+	newItemFix := models.XtemplModel{
+		NameTempl:  "Template Gabungan",
+		HtmlString: stringBuilder.String(),
+	}
+
+	arrTemplFix := []models.XtemplModel{newItemFix}
+
+	var templx []templ.Component
+	si := xtemplmulti.MainXTemplMulti(arrTemplFix)
+	templx = append(templx, si)
+	templx = append(templx, si)
+
+	// return utils.View(c, si)
+	return utils.ViewMulti(c, templx)
+}

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)
+}

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)
+}

handlers/public/tools.handler.go

@@ -54,7 +54,7 @@ func (lh *ToolsHandler) HandlerShowToast(c echo.Context) error {
 	tabelusergroupComponent := tablecomponent.TableV2(
 		[]string{"KODE", "USERGROUP", "AKSI"},
 		[]string{"40%", "40%", "20%"},
-		mastermenuusergroup.TableRowV1(dummyData),
+		mastermenuusergroup.TableRowV1(dummyData, "", "", "", "", "", "", "", ""),
 		pagination,
 		"",
 		inputansearchComponent,

handlers/routes.go

@@ -46,8 +46,6 @@ func SetupRoutesLandingPage(app *echo.Echo, h *dev_handlers.LandingPageHandler,
 	// autocomplete.GET("/autocomplete", mastermenuusergroupHandler.HandlerListAutoComplete)
 	// autocomplete.GET("/autoCompleteLoadMore/:pageOf/:searchParam/:limit", mastermenuusergroupHandler.HandlerListAutoCompleteLoadMore)
 	// autocomplete.GET("/autoCompleteSetValue/:setvalue", mastermenuusergroupHandler.HandlerListAutoCompleteAfterSelected)
-	clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
-	clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
 
 }
 func SetupRoutesPieChart(app *echo.Echo, h *dev_handlers.PiechartHandler) {
@@ -70,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")
@@ -187,23 +205,52 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	//DEV USERGROUP
 	devUGServices := dev_services.NewServicesMasterMenuUserGroup(appStore)
 	devUGhandlers := dev_handlers.NewMasterMenuUserGroupHandler(devUGServices)
-	dev.GET("/usergroup", devUGhandlers.HandlerShowMasterMenuUserGroup)
-	dev.GET("/usergroup/pagination", devUGhandlers.HandleChangePage)
+	// dev.GET("/usergroup", devUGhandlers.HandlerShowMasterMenuUserGroup)
+	// dev.GET("/usergroup/pagination", devUGhandlers.HandleChangePage)
 	dev.POST("/usergroup/add", devUGhandlers.AddUserGroup)
 	dev.POST("/usergroup/edit", devUGhandlers.EditUserGroup)
-	dev.GET("/usergroup/delete/:id", devUGhandlers.DeleteUserGroup)
+	dev.POST("/usergroup/delete", devUGhandlers.DeleteUserGroup)
 
 	// try
 	dev.GET("/usergroupv1", devUGhandlers.HandlerShowMasterMenuUserGroupV1)
 	dev.GET("/breadcrumbv1", devUGhandlers.HandlerShowBreadCrumbV1)
 	dev.GET("/searchusergroupv1", devUGhandlers.HandlerShowMasterMenuUserGroupSearchV1)
 	dev.GET("/usergroupv1pagination", devUGhandlers.HandlerShowMasterMenuUserGroupPaginationV1)
+	dev.POST("/usergrouphandlecloseform", devUGhandlers.HandleCloseForm)
+	dev.POST("/usergrouphandlecloseformedit", devUGhandlers.HandleCloseFormEdit)
+	dev.POST("/usergrouphandlecloseformdelete", devUGhandlers.HandleCloseFormDelete)
+	dev.GET("/usergroupshoweditform", devUGhandlers.HandleEditForm)
+	dev.GET("/usergroupshowdeleteform", devUGhandlers.HandleDeleteForm)
 
 	//ugcobanady
 	dev.GET("/usergrouptryandy", devUGhandlers.HandlerShowMasterMenuUserGroupTryAndy)
 
 	dev.GET("/hidetoast", devUGhandlers.HandlerHideToast)
 
+	dev.GET("/xtemplmulti", devUGhandlers.HandlerXTemplMulti)
+
 	// clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
 	// clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
+
+	//New User Group
+	devMdUserGroupServices := dev_services.NewMdUserGroupServices(appStore)
+	devMdUserGroupHandlers := dev_handlers.NewMdUserGroupHandler(devMdUserGroupServices)
+	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)
+
+	// nonlab template
+	devMDNonLabTemplateServices := dev_services.NewMDNonLabTemplateServices(appStore)
+	devMDNonLabTemplateHandlers := dev_handlers.NewMDNonLabTemplateHandler(devMDNonLabTemplateServices)
+	dev.GET("/md/nonlabtemplate", devMDNonLabTemplateHandlers.HandleShowMDNonLabTemplateScreen)
+	dev.GET("/md/nonlabtemplate/filter", devMDNonLabTemplateHandlers.HandleFilterMDNonLabTemplate)
+	dev.GET("/md/nonlabtemplate/changepage", devMDNonLabTemplateHandlers.HandleChangePageMDNonLabTemplate)
 }

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"`
+}

models/mdnonlabtemplate.models.go

@@ -0,0 +1,14 @@
+package models
+
+type MDNonLabTemplate struct {
+	NonLabTemplateID                int    `db:"NonlabTemplateID"`
+	NonLabTemplateName              string `db:"NonlabTemplateName"`
+	NonLabTemplateFlagFisik         string `db:"NonlabTemplateFlagFisik"`
+	NonLabTemplateIsActive          string `db:"NonlabTemplateIsActive"`
+	NonLabTemplateCreated           string `db:"NonlabTemplateCreated"`
+	NonLabTemplateCreatedUserID     string `db:"NonlabTemplateUserID"`
+	NonLabTemplateLastUpdated       string `db:"NonlabTemplateLastUpdated"`
+	NonLabTemplateLastUpdatedUserID string `db:"NonlabTemplateLastUpdatedUserID"`
+	NonLabTemplateDelete            string `db:"NonlabTemplateDelete"`
+	NonlabTemplateDeleteUserID      string `db:"NonlabTemplateDeleteUserID"`
+}

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"`
+}

models/usergroup.models.go

@@ -1,5 +1,7 @@
 package models
 
+import "github.com/a-h/templ"
+
 type UserGroup struct {
 	UserGroupID   int    `json:"user_group_id"`
 	UserGroupKode string `json:"user_group_kode"`
@@ -7,11 +9,43 @@ type UserGroup struct {
 }
 
 type UserGroupV1 struct {
-	Nomor                  string `db:"nomor"`
-	M_UserGroupID          int    `db:"M_UserGroupID"`
-	M_UserGroupCode        string `db:"M_UserGroupCode"`
-	M_UserGroupName        string `db:"M_UserGroupName"`
-	M_UserGroupCreated     string `db:"M_UserGroupCreated"`
-	M_UserGroupLastUpdated string `db:"M_UserGroupLastUpdated"`
-	M_UserGroupIsActive    string `db:"M_UserGroupIsActive"`
+	Nomor                        string `db:"nomor"`
+	M_UserGroupID                int    `db:"M_UserGroupID"`
+	M_UserGroupCode              string `db:"M_UserGroupCode"`
+	M_UserGroupName              string `db:"M_UserGroupName"`
+	M_UserGroupCreated           string `db:"M_UserGroupCreated"`
+	M_UserGroupLastUpdated       string `db:"M_UserGroupLastUpdated"`
+	M_UserGroupIsActive          string `db:"M_UserGroupIsActive"`
+	M_UserGroupCreatedUserID     string `db:"M_UserGroupCreatedUserID"`
+	M_UserGroupLastUpdatedUserID string `db:"M_UserGroupLastUpdatedUserID"`
+	M_UserGroupDeleted           string `db:"M_UserGroupDeleted"`
+	M_UserGroupDeletedUserID     string `db:"M_UserGroupDeletedUserID"`
+}
+
+type UserGroupFormComponent 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
+}
+type UserGroupFormConfirmation struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
 }

models/xtempl.models.go

@@ -0,0 +1,6 @@
+package models
+
+type XtemplModel struct {
+	NameTempl  string `json:"nametempl"`
+	HtmlString string `json:"htmlString"`
+}

services/dev/mastermenuusergroup.services.go

@@ -54,508 +54,6 @@ type AutoComplete struct {
 	Name string `json:"name"`
 }
 
-func (su *ServicesMasterMenuUserGroup) 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 *ServicesMasterMenuUserGroup) GetUserGroup() ([]models.UserGroup, error) {
 	data := []models.UserGroup{
 		{UserGroupID: 1, UserGroupKode: "A", UserGroupName: "UG1"},
@@ -677,6 +175,7 @@ func (ug *ServicesMasterMenuUserGroup) GetUserGroupByIDV1(id string) (models.Use
 		defer logger.Sync()
 		logger.Error("Error get data ug by id vs",
 			zap.String("ID", id),
+			zap.Error(err),
 		)
 		return data, fmt.Errorf("QUERY_FAILED")
 	}
@@ -735,13 +234,33 @@ func (ug *ServicesMasterMenuUserGroup) AddUserGroup(code string, name string) (m
 func (ug *ServicesMasterMenuUserGroup) EditUserGroup(id string, code string, name string) (models.UserGroupV1, error) {
 	logger, _ := zap.NewProduction()
 	var data models.UserGroupV1
+	var datacek []models.UserGroupV1
+
+	qryCek := `SELECT M_UserGroupCode FROM m_usergroup WHERE M_UserGroupCode = ? AND M_UserGroupIsActive = 'Y' AND M_UserGroupID <> ?`
+	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 m_usergroup
 			SET M_UserGroupCode = ?,
 			M_UserGroupName= ?
 			WHERE M_UserGroupID = ?;`
 	// time.Sleep(5 * time.Second)
 	rst := dbx.Handlex.MustExec(qry, code, name, id)
-	_, err := rst.RowsAffected()
+	_, err = rst.RowsAffected()
 	if err != nil {
 		defer logger.Sync()
 		logger.Error("Error Update usergroup",
@@ -791,131 +310,6 @@ func (ug *ServicesMasterMenuUserGroup) DeleteUserGroup(id string) (models.UserGr
 	return data, nil
 }
 
-func (su *ServicesMasterMenuUserGroup) GetListMasterUserGroupFilteredBySearch(search string) ([]models.UserGroupV1, error) {
-	var userGroupList []models.UserGroupV1
-
-	query := `
-		SELECT
-			ROW_NUMBER() OVER () AS nomor,
-			M_UserGroupID,
-			M_UserGroupCode,
-			M_UserGroupName,
-			M_UserGroupCreated,
-			M_UserGroupLastUpdated,
-			M_UserGroupIsActive
-		FROM m_usergroup
-		WHERE M_UserGroupIsActive = 'Y'
-	`
-
-	// check jika parameter search nya tidak kosong
-	if search != "" {
-		query += fmt.Sprintf(" AND (M_UserGroupName LIKE '%%%s%%' OR M_UserGroupCode LIKE '%%%s%%')", search, search)
-	} else {
-		search = "%%"
-	}
-
-	// query += " ORDER BY M_UserGroupID ASC"
-	query += fmt.Sprintf(" ORDER BY M_UserGroupID ASC")
-
-	logger, _ := zap.NewProduction()
-	defer logger.Sync()
-	logger.Info("QUERY SEARCH ONlY FOR COUNT TOTAL PAGES PAGINATION",
-		zap.String("query search", query),
-	)
-
-	if err := dbx.Handlex.Select(&userGroupList, query); err != nil {
-		return nil, fmt.Errorf("error querying database: %v", err)
-	}
-
-	return userGroupList, nil
-}
-
-func (su *ServicesMasterMenuUserGroup) GetListMasterUserGroupBySearch(search string) ([]models.UserGroupV1, error) {
-	var userGroupList []models.UserGroupV1
-
-	query := `
-		SELECT
-			ROW_NUMBER() OVER () AS nomor,
-			M_UserGroupID,
-			M_UserGroupCode,
-			M_UserGroupName,
-			M_UserGroupCreated,
-			M_UserGroupLastUpdated,
-			M_UserGroupIsActive
-		FROM m_usergroup
-		WHERE M_UserGroupIsActive = 'Y'
-	`
-
-	// fmt.Errorf(search)
-	rowPerPage := 2
-	offset := 0
-
-	// check jika parameter search nya tidak kosong
-	if search != "" {
-		query += fmt.Sprintf(" AND (M_UserGroupName LIKE '%%%s%%' OR M_UserGroupCode LIKE '%%%s%%')", search, search)
-	} else {
-		search = "%%"
-	}
-
-	// query += " ORDER BY M_UserGroupID ASC"
-	query += fmt.Sprintf(" ORDER BY M_UserGroupID ASC LIMIT %d OFFSET %d", rowPerPage, offset)
-
-	logger, _ := zap.NewProduction()
-	defer logger.Sync()
-	logger.Info("QUERY SEARCH ONlY AND SETTING LIMIT",
-		zap.String("query search", query),
-	)
-
-	if err := dbx.Handlex.Select(&userGroupList, query); err != nil {
-		return nil, fmt.Errorf("error querying database: %v", err)
-	}
-
-	return userGroupList, nil
-}
-
-func (su *ServicesMasterMenuUserGroup) GetListMasterUserGroupPagination(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, error) {
-	var userGroupList []models.UserGroupV1
-
-	query := `
-		SELECT
-			ROW_NUMBER() OVER () AS nomor,
-			M_UserGroupID,
-			M_UserGroupCode,
-			M_UserGroupName,
-			M_UserGroupCreated,
-			M_UserGroupLastUpdated,
-			M_UserGroupIsActive
-		FROM m_usergroup
-		WHERE M_UserGroupIsActive = 'Y'
-	`
-
-	// rmaxPerPage := 2
-	// rpage := (currentPage - 1) * rmaxPerPage
-
-	offset := (currentPage - 1) * rowPerPage
-	// offset := currentPage
-
-	if search != "" {
-		query += fmt.Sprintf(" AND (M_UserGroupName LIKE '%%%s%%' OR M_UserGroupCode LIKE '%%%s%%')", search, search)
-	} else {
-		search = "%%"
-	}
-
-	query += fmt.Sprintf(" ORDER BY M_UserGroupID ASC LIMIT %d OFFSET %d", rowPerPage, offset)
-
-	logger, _ := zap.NewProduction()
-	defer logger.Sync()
-	logger.Info("QUERY SEARCH WITH PAGINATION",
-		zap.String("query search", query),
-	)
-
-	if err := dbx.Handlex.Select(&userGroupList, query); err != nil {
-		return nil, fmt.Errorf("error querying database: %v", err)
-	}
-
-	return userGroupList, nil
-}
-
 func (su *ServicesMasterMenuUserGroup) GetListMasterUserGroupV2(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, int, error) {
 	var userGroupList []models.UserGroupV1
 	var totalData int

services/dev/md.nonlabtemplate.services.go

@@ -0,0 +1,84 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+	"strings"
+)
+
+type MDNonLabTemplateServices struct {
+	MDNonLabTemplateStore db.AppStore
+}
+
+func NewMDNonLabTemplateServices(uStore db.AppStore) *MDNonLabTemplateServices {
+	return &MDNonLabTemplateServices{
+		MDNonLabTemplateStore: uStore,
+	}
+}
+
+func (mdnlt *MDNonLabTemplateServices) GetMDNonLabTemplateBreadcrumb() (models.BreadCrumbV1, error) {
+	var ret models.BreadCrumbV1
+
+	breadcrumb := models.BreadCrumbV1{
+		Title: "Master Non-lab Template",
+		Item: []models.ItemBreadCrumbV1{
+			{
+				Item: "Dashboard",
+				Url:  "/dev/dashboard",
+			},
+			{
+				Item: "Master",
+				Url:  "/dev/master",
+			},
+			{
+				Item: "Non-lab Template",
+				Url:  "",
+			},
+		},
+	}
+
+	ret = breadcrumb
+	return ret, nil
+}
+
+func (mdnlt *MDNonLabTemplateServices) GetMDNonLabTemplateData(search string, currentPage int, rowPerPage int) ([]models.MDNonLabTemplate, int, error) {
+	var ret []models.MDNonLabTemplate
+	var totalData int
+
+	offset := (currentPage - 1) * rowPerPage
+	prm := "%" + strings.TrimSpace(search) + "%"
+	query := `
+		SELECT COUNT(*)
+		FROM nonlab_template
+		WHERE NonlabTemplateIsActive = 'Y'
+		AND (NonlabTemplateName LIKE ?)
+	`
+	if err := dbx.Handlex.Get(&totalData, query, prm); err != nil {
+		return nil, 0, fmt.Errorf("error querying databases: %v", err)
+	}
+
+	query = `
+		SELECT
+		NonlabTemplateID,
+		NonlabTemplateName,
+		NonlabTemplateFlagFisik,
+		NonlabTemplateIsActive,
+		NonlabTemplateCreated,
+		NonlabTemplateLastUpdated
+		FROM nonlab_template
+		WHERE NonlabTemplateIsActive = 'Y'
+		AND (NonlabTemplateName LIKE ?)
+		ORDER BY NonlabTemplateID ASC
+		LIMIT ? OFFSET ?
+	`
+	if err := dbx.Handlex.Select(&ret, query, prm, rowPerPage, offset); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+
+	totalPage := int(math.Ceil(float64(totalData) / float64(rowPerPage)))
+
+	return ret, totalPage, nil
+}

services/dev/md.usergroup.service.go

@@ -0,0 +1,261 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+	"strconv"
+	"strings"
+
+	"go.uber.org/zap"
+)
+
+func NewMdUserGroupServices(uStore db.AppStore) *MdUserGroupServices {
+
+	return &MdUserGroupServices{
+
+		MdUserGroupStore: uStore,
+	}
+}
+
+type MdUserGroupServices struct {
+	MdUserGroupStore db.AppStore
+}
+
+func (su *MdUserGroupServices) GetListMdUserGroup(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, int, error) {
+	var userGroupList []models.UserGroupV1
+	var totalData int
+	offset := (currentPage - 1) * rowPerPage
+	prm := "%" + strings.TrimSpace(search) + "%"
+	querytotal := `
+		SELECT COUNT(*) 
+		FROM m_usergroup
+		WHERE M_UserGroupIsActive = 'Y'
+		AND (M_UserGroupCode LIKE ? OR M_UserGroupName 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 () AS nomor,
+			M_UserGroupID,
+			M_UserGroupCode,
+			M_UserGroupName,
+			M_UserGroupCreated,
+			M_UserGroupLastUpdated,
+			M_UserGroupIsActive
+		FROM m_usergroup
+		WHERE M_UserGroupIsActive = 'Y'
+		AND (M_UserGroupCode LIKE ? OR M_UserGroupName LIKE ?)
+		order by M_UserGroupID ASC
+		LIMIT ? OFFSET ?
+	`
+
+	if err := dbx.Handlex.Select(&userGroupList, 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 userGroupList, totalPage, nil
+}
+func (ug *MdUserGroupServices) GetMdUserGroupByID(id string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+
+	var data models.UserGroupV1
+	err := dbx.Handlex.Get(&data, `SELECT * FROM m_usergroup
+	WHERE M_UserGroupID = ?`, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get data ug by id vs",
+			zap.String("ID", id),
+			zap.Error(err),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (ug *MdUserGroupServices) AddMdUserGroup(code string, name string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+	var data models.UserGroupV1
+	var datacek []models.UserGroupV1
+
+	qryCek := `SELECT M_UserGroupCode FROM m_usergroup WHERE M_UserGroupCode = ? AND M_UserGroupIsActive = '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 m_usergroup
+			(M_UserGroupCode,
+			M_UserGroupName)
+			VALUES (?,?);`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, code, name)
+	insertedID, err := rst.LastInsertId()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Insert usergroup",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	s := strconv.Itoa(int(insertedID))
+	data, err = ug.GetMdUserGroupByID(s)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+func (ug *MdUserGroupServices) EditMdUsergroup(id string, code string, name string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+	var data models.UserGroupV1
+	var datacek []models.UserGroupV1
+
+	qryCek := `SELECT M_UserGroupCode FROM m_usergroup WHERE M_UserGroupCode = ? AND M_UserGroupIsActive = 'Y' AND M_UserGroupID <> ?`
+	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 m_usergroup
+			SET M_UserGroupCode = ?,
+			M_UserGroupName= ?
+			WHERE M_UserGroupID = ?;`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, code, name, id)
+	_, err = rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Update usergroup",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetMdUserGroupByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (ug *MdUserGroupServices) DeleteMdUserGroup(id string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+	var data models.UserGroupV1
+	qry := `UPDATE m_usergroup
+			SET M_UserGroupIsActive = 'N',
+			M_UserGroupDeleted = NOW(),
+			M_UserGroupDeletedUserID = '1'
+			WHERE M_UserGroupID = ?;`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, id)
+	_, err := rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error delete usergroup",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetMdUserGroupByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+func (su *MdUserGroupServices) GetMdUserGroupBreadCrumb(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:  "",
+				},
+			},
+		},
+	}
+
+	for _, breadcrumb := range dummyBreadcrumb {
+		if breadcrumb.Title == title {
+			ret = breadcrumb
+			return ret, nil
+		}
+	}
+
+	return ret, nil
+}

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
+}

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
+}

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, ", ")
+}

utils/view.utils.go

@@ -1,10 +1,32 @@
 package utils
 
 import (
+	"bytes"
+	"net/http"
+
 	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 )
 
+func ViewMulti(c echo.Context, cmp []templ.Component) error {
+	var stringHtml string = ""
+	buf := new(bytes.Buffer)
+
+	var err error
+	for _, x := range cmp {
+		err = x.Render(c.Request().Context(), buf)
+		if err != nil {
+			return err
+		}
+		stringHtml += buf.String()
+	}
+
+	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
+
+	return c.String(http.StatusOK, stringHtml)
+
+}
+
 func View(c echo.Context, cmp templ.Component) error {
 	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
 

views/dev/mastermenuusergroup/mastermenuusergroupv1.templ

@@ -14,10 +14,19 @@ templ ContentMasterMenuUserGroupV1(
 	tableID string,
 	paginationID string,
 	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
 	breadcrumb templ.Component,
 	tablecontent templ.Component,
 	filterUserGroup templ.Component,
 	paginationUserGroup templ.Component,
+	modaladdform templ.Component,
+	modalEditform templ.Component,
+	modalDeleteform templ.Component,
 ) {
 	<div class="container-fluid">
 		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
@@ -32,6 +41,30 @@ templ ContentMasterMenuUserGroupV1(
 			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
@@ -43,12 +76,17 @@ templ ContentMasterMenuUserGroupV1(
 						type="button"
 						class="btn btn-primary"
 						data-toggle="modal"
-						data-target="#dialogNew"
+						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">Add New</button>
+				<button
+					type="button"
+					class="btn btn-primary btn-block"
+					data-toggle="modal"
+					data-target={ "#" + dialogAddID }
+				>Add New</button>
 			</div>
 		</div>
 		@filterUserGroup
@@ -56,47 +94,30 @@ templ ContentMasterMenuUserGroupV1(
 		@tablecontent
 		@paginationUserGroup
 		<div class="d-flex justify-content-center text-primary">
-			<div class="htmx-indicator spinner-border" role="status" id="indicator">
+			<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()"
-		<form
-			hx-post="/dev/usergroup/add"
-			class="form"
-			hx-target="#dialogNew"
-			hx-swap="innerHTML"
-		>
-			@modalcomponent.Modal("dialogNew",
-				"New - User Group",
-				DialogNewBody("", "", "New", "", ""),
-				DialogNewAction(),
-				BtnCloseNew())
-		</form>
-		@modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
+		@modaladdform
+		@modalEditform
+		@modalDeleteform
+		// @modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
 		@JSku()
 	</div>
 }
 
-templ TableRowV1(data []models.UserGroupV1) {
-	// /usergroup/edit
-	// <a
-	// 	id="btneditug"
-	// 	type="button"
-	// 	class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
-	// 	onclick="htmx.trigger('#btneditug', 'htmx:abort')"
-	// 	hx-target="#modalbdyEdit"
-	// 	hx-swap="innerHTML"
-	// 	hx-get={ "/client/usergroup/edit?id=" + strconv.Itoa(v.UserGroupID) }
-	// 	hx-on::before-request="ShowLoading()"
-	// 	hx-on::after-request="ShowForm()"
-	// 	data-toggle="modal"
-	// 	data-target="#dialogEdit"
-	// >
-	// 	Edit
-	// </a>
+templ TableRowV1(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>
@@ -107,39 +128,55 @@ templ TableRowV1(data []models.UserGroupV1) {
 			<td>{ v.M_UserGroupCode }</td>
 			<td>{ v.M_UserGroupName }</td>
 			<td>
-				<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"
-						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"
-						data-toggle="modal"
-						data-target={ "#dialogDelete" + strconv.Itoa(v.M_UserGroupID) }
-					>Hapus</a>
-					@modalcomponent.Modal("dialogEdit"+strconv.Itoa(v.M_UserGroupID),
-						"Edit - User Group",
-						DialogEditBody(v.M_UserGroupCode, v.M_UserGroupName),
-						DialogEditAction(),
-						BtnCloseNew())
-					@modalcomponent.ModalConfirmation(
-						"dialogDelete"+strconv.Itoa(v.M_UserGroupID),
-						"Konfirmasi",
-						"Apakah anda yakin menghapus user group berikut ?", BtnCloseDelete(),
-						[]string{"Kode", "User Group"}, []string{v.M_UserGroupCode, v.M_UserGroupName}, DialogDeleteAction())
-				</div>
+				@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
+			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 DialogDeleteActionV1() {
 	<div>
 		<button
@@ -237,13 +274,19 @@ templ ShowMasterMenuUserGroupV1x(title string, cmp templ.Component, css templ.Co
 	}
 }
 
-// []string{"KODE", "USERGROUP", "AKSI"},
-// 		[]string{"40%", "40%", "20%"},
-templ TableUserGroup(data []models.UserGroupV1, tableID string) {
-	<div id={ tableID } hx-swap-oob={ "#" + tableID }>
+templ TableUserGroup(data []models.UserGroupV1, 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%"},
-			TableRowV1(data))
+			TableRowV1(data, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete))
 	</div>
 }
 
@@ -251,3 +294,73 @@ templ SwapTableUserGroup(pagination templ.Component, table templ.Component) {
 	@pagination
 	@table
 }
+
+templ UserGroupForm(data models.UserGroupFormComponent) {
+	<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>
+}

views/dev/mastermenuusergroup/mastermenuusergroupv1_templ.go

@@ -24,10 +24,19 @@ func ContentMasterMenuUserGroupV1(
 	tableID string,
 	paginationID string,
 	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
 	breadcrumb templ.Component,
 	tablecontent templ.Component,
 	filterUserGroup templ.Component,
 	paginationUserGroup 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)
@@ -66,6 +75,48 @@ func ContentMasterMenuUserGroupV1(
 		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
@@ -74,7 +125,33 @@ func ContentMasterMenuUserGroupV1(
 		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=\"#dialogNew\">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\">Add New</button></div></div>")
+		_, 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\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 79, 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\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 88, 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
 		}
@@ -90,23 +167,19 @@ func ContentMasterMenuUserGroupV1(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-center text-primary\"><div class=\"htmx-indicator spinner-border\" role=\"status\" id=\"indicator\"><span class=\"sr-only\"></span></div></div><form hx-post=\"/dev/usergroup/add\" class=\"form\" hx-target=\"#dialogNew\" hx-swap=\"innerHTML\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<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>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = modalcomponent.Modal("dialogNew",
-			"New - User Group",
-			DialogNewBody("", "", "New", "", ""),
-			DialogNewAction(),
-			BtnCloseNew()).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = modaladdform.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form>")
+		templ_7745c5c3_Err = modalEditform.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew()).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = modalDeleteform.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -125,7 +198,15 @@ func ContentMasterMenuUserGroupV1(
 	})
 }
 
-func TableRowV1(data []models.UserGroupV1) templ.Component {
+func TableRowV1(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 {
@@ -133,9 +214,9 @@ func TableRowV1(data []models.UserGroupV1) templ.Component {
 			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
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		if len(data) == 0 {
@@ -149,12 +230,12 @@ func TableRowV1(data []models.UserGroupV1) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupCode)
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupCode)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 107, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 128, Col: 26}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -162,62 +243,24 @@ func TableRowV1(data []models.UserGroupV1) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupName)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 108, Col: 26}
-			}
-			_, 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><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\" data-toggle=\"modal\" data-target=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("#dialogEdit" + strconv.Itoa(v.M_UserGroupID))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 116, Col: 65}
-			}
-			_, 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("\">Edit\r</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\" data-toggle=\"modal\" data-target=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
 			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("#dialogDelete" + strconv.Itoa(v.M_UserGroupID))
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupName)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 125, Col: 67}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 129, Col: 26}
 			}
 			_, 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("\">Hapus</a>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = modalcomponent.Modal("dialogEdit"+strconv.Itoa(v.M_UserGroupID),
-				"Edit - User Group",
-				DialogEditBody(v.M_UserGroupCode, v.M_UserGroupName),
-				DialogEditAction(),
-				BtnCloseNew()).Render(ctx, templ_7745c5c3_Buffer)
+			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 = modalcomponent.ModalConfirmation(
-				"dialogDelete"+strconv.Itoa(v.M_UserGroupID),
-				"Konfirmasi",
-				"Apakah anda yakin menghapus user group berikut ?", BtnCloseDelete(),
-				[]string{"Kode", "User Group"}, []string{v.M_UserGroupCode, v.M_UserGroupName}, DialogDeleteAction()).Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></td></tr>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td></tr>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -229,6 +272,144 @@ func TableRowV1(data []models.UserGroupV1) templ.Component {
 	})
 }
 
+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_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\"><a id=\"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=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, 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\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 153, 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("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 154, Col: 27}
+		}
+		_, 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-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 155, Col: 23}
+		}
+		_, 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-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 156, Col: 29}
+		}
+		_, 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("\">Edit\r</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=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, 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\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 167, Col: 51}
+		}
+		_, 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(hxTargetDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 168, Col: 29}
+		}
+		_, 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(hxSwapDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 169, Col: 25}
+		}
+		_, 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-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 170, Col: 31}
+		}
+		_, 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("\">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 DialogDeleteActionV1() 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)
@@ -237,9 +418,9 @@ func DialogDeleteActionV1() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var7 == nil {
-			templ_7745c5c3_Var7 = templ.NopComponent
+		templ_7745c5c3_Var16 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var16 == nil {
+			templ_7745c5c3_Var16 = 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=\"button\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\">Yakin\r</button></div>")
@@ -261,9 +442,9 @@ func BtnCloseDeleteV1() templ.Component {
 			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
+		templ_7745c5c3_Var17 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var17 == nil {
+			templ_7745c5c3_Var17 = 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>")
@@ -285,9 +466,9 @@ func JSkuV1() templ.Component {
 			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
+		templ_7745c5c3_Var18 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var18 == nil {
+			templ_7745c5c3_Var18 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n\t\t function ShowLoading(evt) {\r\n        document\r\n          .getElementById(\"modalLoadEdit\")\r\n          .setAttribute(\"style\", \"display:block !important;\");\r\n        document\r\n          .getElementById(\"modalbdyEdit\")\r\n          .setAttribute(\"style\", \"display:none !important;\");\r\n\t\t  console.log(evt);\r\n      }\r\n      function ShowForm() {\r\n        document\r\n          .getElementById(\"modalLoadEdit\")\r\n          .setAttribute(\"style\", \"display:none !important;\");\r\n        document\r\n          .getElementById(\"modalbdyEdit\")\r\n          .setAttribute(\"style\", \"display:block !important;;\");\r\n      }\r\n\t</script>")
@@ -309,9 +490,9 @@ func CssMasterMenuUserGroupV1x() templ.Component {
 			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
+		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("<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    \r\n</style>")
@@ -333,9 +514,9 @@ func JsMasterMenuUserGroupV1x() templ.Component {
 			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
+		templ_7745c5c3_Var20 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var20 == nil {
+			templ_7745c5c3_Var20 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !templ_7745c5c3_IsBuffer {
@@ -356,12 +537,12 @@ func ShowMasterMenuUserGroupV1x(title string, cmp templ.Component, css templ.Com
 			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
+		templ_7745c5c3_Var21 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var21 == nil {
+			templ_7745c5c3_Var21 = 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_Var22 := 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()
@@ -376,7 +557,7 @@ func ShowMasterMenuUserGroupV1x(title string, cmp templ.Component, css templ.Com
 			}
 			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)
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var22), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -387,10 +568,15 @@ func ShowMasterMenuUserGroupV1x(title string, cmp templ.Component, css templ.Com
 	})
 }
 
-// []string{"KODE", "USERGROUP", "AKSI"},
-//
-//	[]string{"40%", "40%", "20%"},
-func TableUserGroup(data []models.UserGroupV1, tableID string) templ.Component {
+func TableUserGroup(data []models.UserGroupV1, 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 {
@@ -398,44 +584,31 @@ func TableUserGroup(data []models.UserGroupV1, tableID string) templ.Component {
 			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
+		templ_7745c5c3_Var23 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var23 == nil {
+			templ_7745c5c3_Var23 = 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_Var15 string
-		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(tableID)
+		var templ_7745c5c3_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(tableID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 243, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 286, Col: 18}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		_, 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("\" hx-swap-oob=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var16 string
-		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("#" + tableID)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 243, Col: 48}
-		}
-		_, 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("\">")
+		_, 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", "USERGROUP", "AKSI"},
 			[]string{"40%", "40%", "20%"},
-			TableRowV1(data)).Render(ctx, templ_7745c5c3_Buffer)
+			TableRowV1(data, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete)).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -458,9 +631,9 @@ func SwapTableUserGroup(pagination templ.Component, table templ.Component) templ
 			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
+		templ_7745c5c3_Var25 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var25 == nil {
+			templ_7745c5c3_Var25 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		templ_7745c5c3_Err = pagination.Render(ctx, templ_7745c5c3_Buffer)
@@ -477,3 +650,285 @@ func SwapTableUserGroup(pagination templ.Component, table templ.Component) templ
 		return templ_7745c5c3_Err
 	})
 }
+
+func UserGroupForm(data models.UserGroupFormComponent) 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_Var26 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var26 == nil {
+			templ_7745c5c3_Var26 = 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_Var27 string
+		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(data.IDComponent)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 301, Col: 24}
+		}
+		_, 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("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var28 string
+		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(data.Link)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 302, Col: 22}
+		}
+		_, 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("\" class=\"form\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var29 string
+		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 304, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
+		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_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 305, Col: 24}
+		}
+		_, 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-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var31 string
+		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 306, Col: 30}
+		}
+		_, 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-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 templ.ComponentScript = HandleFormBeforeRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var32.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_Var33 templ.ComponentScript = HandleFormAfterRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var33.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_1e3f`,
+		Function: `function __templ_HandleFormBeforeRequest_1e3f(){console.log("handle disable btn add");
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+		boxes[i].setAttribute('disabled', 'true');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_1e3f`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_1e3f`),
+	}
+}
+
+func HandleFormAfterRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormAfterRequest_ee07`,
+		Function: `function __templ_HandleFormAfterRequest_ee07(){console.log("handle enable btn add");
+
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+			boxes[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormAfterRequest_ee07`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterRequest_ee07`),
+	}
+}
+
+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_Var34 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var34 == nil {
+			templ_7745c5c3_Var34 = 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_Var35 string
+		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 346, Col: 22}
+		}
+		_, 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("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var36 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var36.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_Var37 string
+		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 347, Col: 14}
+		}
+		_, 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("</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_Var38 string
+			templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 352, Col: 68}
+			}
+			_, 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("</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_Var39 string
+			templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 358, Col: 10}
+			}
+			_, 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("</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
+	})
+}

views/dev/mastermenuusergroup/modaladdusergroup.templ

@@ -37,6 +37,51 @@ templ DialogNewBody(code string, name string, id string, codeErrorMsg string, na
 	</div>
 }
 
+templ DialogNewBodyV1(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 HandleJSModalAddUG(modalID string) {
+	$(modalID).modal('hide')
+}
+
+script HandleJSModalAddUGShow(modalID string) {
+	$(modalID).modal('show')
+}
+
+templ DialogNewActionV1(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ HandleJSModalAddUG(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
@@ -47,7 +92,7 @@ templ DialogNewAction() {
 			Batal
 		</button>
 		<button
-			type="button"
+			type="submit"
 			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
 		>
 			Save changes
@@ -65,3 +110,18 @@ templ BtnCloseNew() {
 		<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={ HandleJSModalAddUG(modalID) }
+		class="close btnaddact"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}

views/dev/mastermenuusergroup/modaladdusergroup_templ.go

@@ -79,7 +79,11 @@ func DialogNewBody(code string, name string, id string, codeErrorMsg string, nam
 	})
 }
 
-func DialogNewAction() templ.Component {
+func DialogNewBodyV1(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 {
@@ -92,7 +96,176 @@ func DialogNewAction() templ.Component {
 			templ_7745c5c3_Var2 = 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=\"button\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\">Save changes\r</button></div>")
+		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_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\modaladdusergroup.templ`, Line: 45, 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("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4.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 HandleJSModalAddUG(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleJSModalAddUG_da6c`,
+		Function: `function __templ_HandleJSModalAddUG_da6c(modalID){$(modalID).modal('hide')
+}`,
+		Call:       templ.SafeScript(`__templ_HandleJSModalAddUG_da6c`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_HandleJSModalAddUG_da6c`, modalID),
+	}
+}
+
+func HandleJSModalAddUGShow(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleJSModalAddUGShow_3147`,
+		Function: `function __templ_HandleJSModalAddUGShow_3147(modalID){$(modalID).modal('show')
+}`,
+		Call:       templ.SafeScript(`__templ_HandleJSModalAddUGShow_3147`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_HandleJSModalAddUGShow_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_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("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleJSModalAddUG(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_Var6 templ.ComponentScript = HandleJSModalAddUG(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6.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_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\modaladdusergroup.templ`, Line: 67, Col: 22}
+		}
+		_, 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(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\modaladdusergroup.templ`, Line: 68, Col: 26}
+		}
+		_, 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(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\modaladdusergroup.templ`, Line: 69, Col: 24}
+		}
+		_, 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("\" 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_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><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
 		}
@@ -111,9 +284,9 @@ func BtnCloseNew() templ.Component {
 			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
+		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("<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
@@ -126,3 +299,79 @@ func BtnCloseNew() templ.Component {
 		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_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleJSModalAddUG(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_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\modaladdusergroup.templ`, Line: 116, Col: 21}
+		}
+		_, 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-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\modaladdusergroup.templ`, Line: 117, Col: 25}
+		}
+		_, 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-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\modaladdusergroup.templ`, Line: 118, Col: 23}
+		}
+		_, 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("\" type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 templ.ComponentScript = HandleJSModalAddUG(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var16.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
+	})
+}

views/dev/mdnonlabtemplate/mdnonlabtemplate.templ

@@ -0,0 +1,180 @@
+package dev_mdnonlabtemplateview
+
+import "cpone/component/customtextfield"
+import "cpone/models"
+import "cpone/layout"
+
+templ MDNonLabTemplateScreen(
+    tableID string,
+    paginationID string,
+    searchID string,
+    dialogAddID string,
+    dialogAddBodyID string,
+    dialogEditID string,
+    dialogEditBodyID string,
+    dialogDeleteID string,
+    dialogDeleteBodyID string,
+    breadcrumb templ.Component,
+    filterComponent templ.Component,
+    tableComponent templ.Component,
+    paginationComponent 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-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">
+            @tableComponent
+            @paginationComponent
+            <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>
+}
+
+templ CSSMDNonLabTemplate() {
+	<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 JSSMDNonLabTemplate() {
+    <script>
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+            if (indicator) {
+                console.log('Loading Start')
+            }
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+            if (indicator) {
+                console.log('Loading End')
+            }
+        });
+    </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 ShowMDNonLabTemplate(
+    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
+        }
+    }

views/dev/mdnonlabtemplate/mdnonlabtemplate_templ.go

@@ -0,0 +1,302 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdnonlabtemplateview
+
+//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"
+import "cpone/models"
+import "cpone/layout"
+
+func MDNonLabTemplateScreen(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	filterComponent templ.Component,
+	tableComponent templ.Component,
+	paginationComponent 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\mdnonlabtemplate\mdnonlabtemplate.templ`, Line: 69, Col: 55}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div><div class=\"col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5\"><button type=\"button\" class=\"btn btn-primary btn-block\" data-toggle=\"modal\" data-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnonlabtemplate\mdnonlabtemplate.templ`, Line: 78, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = 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 = tableComponent.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 = 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>")
+		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 CSSMDNonLabTemplate() 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        \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 JSSMDNonLabTemplate() 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        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n            if (indicator) {\r\n                console.log('Loading Start')\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                console.log('Loading End')\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_5717`,
+		Function: `function __templ_BeforeRequestContent_5717(){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_5717`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContent_5717`),
+	}
+}
+
+func AfterRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContent_077f`,
+		Function: `function __templ_AfterRequestContent_077f(){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_077f`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_077f`),
+	}
+}
+
+func ShowMDNonLabTemplate(
+	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
+	})
+}

views/dev/mdnonlabtemplate/mdnonlabtemplatetable.templ

@@ -0,0 +1,130 @@
+package dev_mdnonlabtemplateview
+
+import "cpone/models"
+import "cpone/component/table"
+import "strconv"
+
+templ TableNonLabTemplate(
+    data []models.MDNonLabTemplate,
+    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{"NAMA TEMPLATE", "FLAG FISIK", "AKSI"},
+            []string{"50%", "30%", "20%"},
+            ItemRow(data,
+                hxGetEdit,
+                hxTargetEdit,
+                hxSwapEdit,
+                hxIncludeEdit,
+                hxGetDelete,
+                hxTargetDelete,
+                hxSwapDelete,
+                hxIncludeDelete,
+        ))
+    </div>
+}
+
+templ ItemRow(
+    data []models.MDNonLabTemplate,
+    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 _, i := range data {
+        <tr>
+            <td>{ i.NonLabTemplateName }</td>
+            <td>{ i.NonLabTemplateFlagFisik }</td>
+            <td>
+                @TableAction(i.NonLabTemplateID,
+                    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="btnactionnlt 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=" btnactionnlt 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('btnactionnlt');
+    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('btnactionnlt');
+    for (var i = 0; i < cusid_ele.length; ++i) {
+        var item = cusid_ele[i];
+        item.classList.remove('disabled');
+    }
+    console.log(id);
+}

views/dev/mdnonlabtemplate/mdnonlabtemplatetable_templ.go

@@ -0,0 +1,439 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdnonlabtemplateview
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/models"
+import "cpone/component/table"
+import "strconv"
+
+func TableNonLabTemplate(
+	data []models.MDNonLabTemplate,
+	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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 19, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"true\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"NAMA TEMPLATE", "FLAG FISIK", "AKSI"},
+			[]string{"50%", "30%", "20%"},
+			ItemRow(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 ItemRow(
+	data []models.MDNonLabTemplate,
+	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 _, i := 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(i.NonLabTemplateName)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 53, Col: 38}
+			}
+			_, 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(i.NonLabTemplateFlagFisik)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 54, Col: 43}
+			}
+			_, 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(i.NonLabTemplateID,
+				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=\"btnactionnlt 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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 86, Col: 58}
+		}
+		_, 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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 87, Col: 36}
+		}
+		_, 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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 88, Col: 32}
+		}
+		_, 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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 89, 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("\" 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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 90, Col: 56}
+		}
+		_, 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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 94, Col: 51}
+		}
+		_, 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=\" btnactionnlt 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\mdnonlabtemplate\mdnonlabtemplatetable.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\mdnonlabtemplate\mdnonlabtemplatetable.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\mdnonlabtemplate\mdnonlabtemplatetable.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\mdnonlabtemplate\mdnonlabtemplatetable.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\mdnonlabtemplate\mdnonlabtemplatetable.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\mdnonlabtemplate\mdnonlabtemplatetable.templ`, Line: 108, Col: 51}
+		}
+		_, 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_d88d`,
+		Function: `function __templ_HandleBeforeRequestRow_d88d(id){var cusid_ele = document.getElementsByClassName('btnactionnlt');
+    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_d88d`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleBeforeRequestRow_d88d`, id),
+	}
+}
+
+func HandleAfterRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleAfterRequestRow_9c9f`,
+		Function: `function __templ_HandleAfterRequestRow_9c9f(id){var cusid_ele = document.getElementsByClassName('btnactionnlt');
+    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_9c9f`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleAfterRequestRow_9c9f`, id),
+	}
+}

views/dev/mdusergroup/mdusergroup.templ

@@ -0,0 +1,213 @@
+package dev_mdusergroupview
+
+import (
+	"cpone/layout"
+	"cpone/component/customtextfield"
+	"cpone/models"
+)
+
+templ MdUserGroupScreen(
+	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 CssMdUserGroup() {
+	<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 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,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) {
+	@layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
+		@cmp
+	}
+}

views/dev/mdusergroup/mdusergroup_templ.go

@@ -0,0 +1,314 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdusergroupview
+
+//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 MdUserGroupScreen(
+	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\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-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: 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 CssMdUserGroup() 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    \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 JsMdUserGroup() 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 ShowMdUserGroupScreen(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
+	})
+}

views/dev/mdusergroup/mdusergroupformmodal.templ

@@ -0,0 +1,187 @@
+package dev_mdusergroupview
+
+import "cpone/models"
+import "cpone/component/modal"
+import "cpone/component/customtextfield"
+
+templ UserGroupForm(data models.UserGroupFormComponent) {
+	<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 BodyFormUserGroup(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 ActionFormUserGroup(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 BtnCloseFormUserGroup(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>
+}

views/dev/mdusergroup/mdusergroupformmodal_templ.go

@@ -0,0 +1,649 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdusergroupview
+
+//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 UserGroupForm(data models.UserGroupFormComponent) 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\mdusergroup\mdusergroupformmodal.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\mdusergroup\mdusergroupformmodal.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\mdusergroup\mdusergroupformmodal.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\mdusergroup\mdusergroupformmodal.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\mdusergroup\mdusergroupformmodal.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 BodyFormUserGroup(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\mdusergroup\mdusergroupformmodal.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 ActionFormUserGroup(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\mdusergroup\mdusergroupformmodal.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\mdusergroup\mdusergroupformmodal.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\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("\" 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 BtnCloseFormUserGroup(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\mdusergroup\mdusergroupformmodal.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\mdusergroup\mdusergroupformmodal.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\mdusergroup\mdusergroupformmodal.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\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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/dev/mdusergroup/mdusergrouptable.templ

@@ -0,0 +1,129 @@
+package dev_mdusergroupview
+
+import "cpone/component/table"
+import "cpone/models"
+import "strconv"
+
+templ TableUserGroup(data []models.UserGroupV1,
+	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,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			))
+	</div>
+}
+
+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>
+		</tr>
+	}
+	for _, v := range data {
+		<tr>
+			<td>{ v.M_UserGroupCode }</td>
+			<td>{ v.M_UserGroupName }</td>
+			<td>
+				@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)
+}

views/dev/mdusergroup/mdusergrouptable_templ.go

@@ -0,0 +1,438 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdusergroupview
+
+//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 TableUserGroup(data []models.UserGroupV1,
+	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\mdusergroup\mdusergrouptable.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{"KODE", "USERGROUP", "AKSI"},
+			[]string{"40%", "40%", "20%"},
+			RowUserGroup(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 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 {
+			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.M_UserGroupCode)
+			if templ_7745c5c3_Err != nil {
+				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 {
+				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.M_UserGroupName)
+			if templ_7745c5c3_Err != nil {
+				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>")
+			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
+			}
+		}
+		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\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),
+	}
+}

views/dev/xtemplmulti/xtemplmulti.templ

@@ -0,0 +1,35 @@
+package xtemplmulti
+
+import "cpone/models"
+
+func stringToTemplComp(textAll string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
+		_, err := io.WriteString(w, textAll)
+		return err
+	})
+}
+
+templ MainXTemplMulti(arrString []models.XtemplModel) {
+    <div id="dataMhs" style="margin-bottom: 20px">
+        <table>
+            <tr>
+                <td>Jarot</td>
+            </tr>
+        </table>
+    </div>
+
+    <div id="dataGuru" style="margin-bottom: 20px">
+        <table>
+            <tr>
+                <td>Desy</td>
+            </tr>
+        </table>
+    </div>
+    for _, v := range arrString {
+        { v.NameTempl }
+        { v.HtmlString }
+
+        @stringToTemplComp(v.HtmlString)
+    }
+   
+}

views/dev/xtemplmulti/xtemplmulti_templ.go

@@ -0,0 +1,72 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package xtemplmulti
+
+//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 stringToTemplComp(textAll string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
+		_, err := io.WriteString(w, textAll)
+		return err
+	})
+}
+
+func MainXTemplMulti(arrString []models.XtemplModel) 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=\"dataMhs\" style=\"margin-bottom: 20px\"><table><tr><td>Jarot</td></tr></table></div><div id=\"dataGuru\" style=\"margin-bottom: 20px\"><table><tr><td>Desy</td></tr></table></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range arrString {
+			var templ_7745c5c3_Var2 string
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(v.NameTempl)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\xtemplmulti\xtemplmulti.templ`, Line: 29, 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(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(v.HtmlString)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\xtemplmulti\xtemplmulti.templ`, Line: 30, 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 = stringToTemplComp(v.HtmlString).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
+	})
+}

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
+	}
+}

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
+	})
+}

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
+	}
+}

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
+	})
+}

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
+	}
+}

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
+	})
+}