loading

up versi
revisi toast top right based screen view
2024-05-25 20:10:25 +07:00 · 2024-05-25 20:10:12 +07:00 · 2024-05-24 13:51:36 +07:00
18 changed files with 1108 additions and 112 deletions
--- a/assets/andy/coba.html
+++ b/assets/andy/coba.html
@@ -94,6 +94,48 @@ License: You must have a valid license purchased only from themeforest(the above
  >
    <!--begin::Main-->
    <div class="d-flex flex-column flex-root bg-white">
+      <div
+        id="notification-001"
+        class="toast toast-top-right toas fade show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        hx-swap-oob="true"
+        style="margin-top: 2vh; margin-right: 2vw;"
+      >
+        <div class="toast-header bg-success text-white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            class="iconify iconify--ep mr-2 icon-xl"
+            width="1em"
+            height="1em"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 1024 1024"
+            data-icon="ep:success-filled"
+          >
+            <path
+              fill="currentColor"
+              d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
+            ></path>
+          </svg>
+          <strong class="mr-auto">Success</strong>
+          <small class="text-muted text-white">just now</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="toast-body bg-success-transparent">
+          This is a success toast.
+        </div>
+      </div>
      <!-- begin::Navbar -->
      <div
        class="d-flex flex-lg-row justify-content-between py-5"
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
@@ -5198,6 +5198,8 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
  z-index: 99999999999 !important;
  width: 350px;
  height: auto;
+  margin-top: 2vh;
+  margin-right: 2vw;
 }

 /* ### TOAST FONT SIZE */
@@ -5274,6 +5276,16 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
 /* ## WARNING */
 /* ## DANGER */

+/* ### HTMX INDICATOR */
+.htmx-indicator {
+  display: none !important;
+}
+.htmx-request .htmx-indicator {
+  display: inline-block !important;
+}
+.htmx-request.htmx-indicator {
+  display: inline-block !important;
+}
 /* ### BUTTON HOVER TEXT */
 /* ###  */
 /* ## PRIMARY */
--- a/component/customtextfieldsearch/customtextfieldsearch.templ
+++ b/component/customtextfieldsearch/customtextfieldsearch.templ
@@ -83,3 +83,42 @@ templ MainCustomTextFieldSearchV2(
    });
 </script>
 }
+
+templ MainCustomTextFieldSearchV3(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript) {
+	<input
+		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+		type={ inpType }
+		name={ inpName }
+		id={ inpId }
+		placeholder={ inpPlaceHolder }
+		hx-get={ hxGet }
+		hx-trigger={ hxTrigger }
+		hx-target={ hxTarget }
+		hx-indicator={ hxIndicator }
+		value={ value }
+		hx-include={ hxInclude }
+		hx-swap={ hxSwap }
+		hx-on::before-request={ hxBeforeRequest }
+		hx-on::after-request={ hxAfterRequest }
+		autocomplete="off"
+	/>
+	<script>
+    document.body.addEventListener('htmx:targetError', function(event) {
+        console.error('Error updating target element:', event.detail);
+        alert('There was an error updating the target element.');
+    });
+</script>
+}
--- a/component/customtextfieldsearch/customtextfieldsearch_templ.go
+++ b/component/customtextfieldsearch/customtextfieldsearch_templ.go
@@ -486,3 +486,205 @@ func MainCustomTextFieldSearchV2(
 		return templ_7745c5c3_Err
 	})
 }
+
+func MainCustomTextFieldSearchV3(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var33 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var33 == nil {
+			templ_7745c5c3_Var33 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var34 string
+		templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 103, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var35 string
+		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 104, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var36 string
+		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(inpId)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 105, Col: 12}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var37 string
+		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 106, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var38 string
+		templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 107, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var39 string
+		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 108, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var40 string
+		templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 109, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var41 string
+		templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 110, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var42 string
+		templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 111, Col: 15}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var43 string
+		templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 112, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var43))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var44 string
+		templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 113, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var45 templ.ComponentScript = hxBeforeRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var45.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var46 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var46.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\"><script>\r\n    document.body.addEventListener('htmx:targetError', function(event) {\r\n        console.error('Error updating target element:', event.detail);\r\n        alert('There was an error updating the target element.');\r\n    });\r\n</script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/pagination/paginationv2.templ
+++ b/component/pagination/paginationv2.templ
@@ -27,18 +27,16 @@ templ PaginationV2(length int,
 						hx-trigger="click"
 						hx-target={ hxTarget }
 						hx-include={ hxInclude }
-						hx-disabled-elt=".btneditug, .btndeleteug"
 					>{ strconv.Itoa(i+1) }</a>
 				} else {
 					<a
 						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
-						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
 						hx-swap={ hxSwap }
 						hx-indicator={ hxIndicator }
 						hx-trigger="click"
 						hx-target={ hxTarget }
 						hx-include={ hxInclude }
-						hx-disabled-elt=".btneditug, .btndeleteug"
 					>{ strconv.Itoa(i+1) }</a>
 				}
 			}
--- a/component/pagination/paginationv2_templ.go
+++ b/component/pagination/paginationv2_templ.go
@@ -132,14 +132,14 @@ func PaginationV2(length int,
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-disabled-elt=\".btneditug, .btndeleteug\">")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 31, Col: 25}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 30, Col: 25}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
@@ -157,20 +157,20 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 34, Col: 55}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 33, Col: 55}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\" hx-swap=\"")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug\" hx-swap=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 36, Col: 22}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 35, Col: 22}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -183,7 +183,7 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 37, Col: 32}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 36, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
@@ -196,7 +196,7 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 39, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 38, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
@@ -209,20 +209,20 @@ func PaginationV2(length int,
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 40, Col: 28}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 39, Col: 28}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-disabled-elt=\".btneditug, .btndeleteug\">")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 42, Col: 25}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 40, Col: 25}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
--- a/component/pagination/paginationv3.templ
+++ b/component/pagination/paginationv3.templ
@@ -0,0 +1,60 @@
+package pagination 
+
+import "strconv"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+templ PaginationV3(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+) {
+	// hx-on::before-request={ HideContent(contentID) }
+	// hx-on::after-request="alert('Done making a request!')"
+	<div
+		class="d-flex justify-content-between align-items-center flex-wrap"
+		hx-on::load={ hxAfterRequest }
+		id={ paginationID }
+		hx-swap-oob={ hxSwapOob }
+	>
+		<div class="d-flex flex-wrap py-2 mr-3">
+			for i:=0; i<length; i++ {
+				if (i+1) == currentPage {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
+						hx-swap={ hxSwap }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-on::before-request={ hxBeforeRequest }
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				} else {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
+						hx-swap={ hxSwap }
+						hx-on::before-request={ hxBeforeRequest }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				}
+			}
+		</div>
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)})
+	</div>
+}
--- a/component/pagination/paginationv3_templ.go
+++ b/component/pagination/paginationv3_templ.go
@@ -0,0 +1,300 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package pagination
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "strconv"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+func PaginationV3(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-between align-items-center flex-wrap\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(paginationID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 24, Col: 19}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapOob)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 25, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"d-flex flex-wrap py-2 mr-3\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i := 0; i < length; i++ {
+			if (i + 1) == currentPage {
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 31, Col: 55}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 33, Col: 22}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 34, Col: 32}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"click\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var8 templ.ComponentScript = hxBeforeRequest
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var9 string
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 37, Col: 26}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 38, Col: 28}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var11 string
+				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 39, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var12 string
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 42, Col: 55}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var13 string
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 44, Col: 22}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var14 templ.ComponentScript = hxBeforeRequest
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 46, Col: 32}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"click\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var16 string
+				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 48, Col: 26}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var17 string
+				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 49, Col: 28}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var18 string
+				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 50, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/toastbootstrap/customtoastv2.templ
+++ b/component/toastbootstrap/customtoastv2.templ
@@ -13,7 +13,7 @@ func toastBody(typeToastBody string) string {
 }

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

-    return stringx
+	return stringx
 }

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

 templ CustomToastV2Hide() {
-	<div id="notification-001" 
-        class="toast fade hide" 
-        role="alert" 
-        aria-live="assertive" 
-        aria-atomic="true"
-        style="opacity: 0"
-        hx-swap-oob="true"
-    >
+	<div
+		id="notification-001"
+		class="toast fade hide"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+		style="opacity: 0"
+		hx-swap-oob="true"
+	>
 		<div class="toast-header bg-success text-white">
 			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
 			<strong class="mr-auto">Success</strong>
--- a/component/toastbootstrap/customtoastv2_templ.go
+++ b/component/toastbootstrap/customtoastv2_templ.go
@@ -56,7 +56,7 @@ func CustomToastV2Show(title string, message string, typeToast string) templ.Com
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast toast-top-right fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/handlers/dev/md.usergroup.handlers.go
+++ b/handlers/dev/md.usergroup.handlers.go
@@ -126,15 +126,17 @@ func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error
 	)

 	//filter user group component
-	usergroupFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
+	usergroupFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
 		"search",
 		"Cari Kode/Nama",
 		"text",
 		"/dev/md/usergroupv2/filter",
 		"input changed delay:500ms, search",
-		"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID, #searchID,#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+		"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableID, #paginationID, #searchID,#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent())
 	//Pagination
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		1,
 		"/dev/md/usergroupv2/changepage",
@@ -142,6 +144,8 @@ func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)

 	//modal add form
@@ -331,7 +335,7 @@ func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
 		"#"+dialogDeleteBodyID,
 		"outerHTML",
 		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		1,
 		"/dev/md/usergroupv2/changepage",
@@ -339,6 +343,8 @@ func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
 		"#tableID, #searchID, #"+searchID+", #paginationID,  #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, userGroupPaginationComponent)
@@ -383,7 +389,7 @@ func (lh *MdUserGroupHandler) HandleChangePageMdUserGroup(c echo.Context) error
 		"outerHTML",
 		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 	)
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		page,
 		"/dev/md/usergroupv2/changepage",
@@ -391,6 +397,8 @@ func (lh *MdUserGroupHandler) HandleChangePageMdUserGroup(c echo.Context) error
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, userGroupPaginationComponent)
@@ -553,7 +561,7 @@ func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {

 	//pagination component
 	//Pagination
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		currPage,
 		"/dev/md/usergroupv2/changepage",
@@ -561,6 +569,8 @@ func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "true",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
 	)

 	newForm := dev_mdusergroupview.BodyFormUserGroup(
@@ -797,7 +807,7 @@ func (lh *MdUserGroupHandler) HandleEditUserGroup(c echo.Context) error {

 	//pagination component
 	//Pagination
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		currPage,
 		"/dev/md/usergroupv2/changepage",
@@ -805,6 +815,8 @@ func (lh *MdUserGroupHandler) HandleEditUserGroup(c echo.Context) error {
 		"#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(
@@ -954,7 +966,7 @@ func (lh *MdUserGroupHandler) HandleDeleteUserGroup(c echo.Context) error {

 	//pagination component
 	//Pagination
-	userGroupPaginationComponent := pagination.PaginationV2(
+	userGroupPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		currPage,
 		"/dev/md/usergroupv2/changepage",
@@ -962,6 +974,8 @@ func (lh *MdUserGroupHandler) HandleDeleteUserGroup(c echo.Context) error {
 		"#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(
--- a/services/dev/md.usergroup.service.go
+++ b/services/dev/md.usergroup.service.go
@@ -184,7 +184,9 @@ func (ug *MdUserGroupServices) DeleteMdUserGroup(id string) (models.UserGroupV1,
 	logger, _ := zap.NewProduction()
 	var data models.UserGroupV1
 	qry := `UPDATE m_usergroup
-			SET M_UserGroupIsActive = 'N'
+			SET M_UserGroupIsActive = 'N',
+			M_UserGroupDeleted = NOW(),
+			M_UserGroupDeletedUserID = '1'
 			WHERE M_UserGroupID = ?;`
 	// time.Sleep(5 * time.Second)
 	rst := dbx.Handlex.MustExec(qry, id)
--- a/views/dev/mdusergroup/mdusergroup.templ
+++ b/views/dev/mdusergroup/mdusergroup.templ
@@ -85,11 +85,20 @@ templ MdUserGroupScreen(
 			</div>
 		</div>
 		@filterComponent
-		@tablecontent
-		@paginationComponent
-		@modalAddForm
-		@modalEditForm
-		@modalDeleteForm
+		<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>
 }

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

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

 templ ShowMdUserGroupScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
--- a/views/dev/mdusergroup/mdusergroup_templ.go
+++ b/views/dev/mdusergroup/mdusergroup_templ.go
@@ -154,6 +154,10 @@ func MdUserGroupScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\" rounded\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		templ_7745c5c3_Err = tablecontent.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -174,7 +178,7 @@ func MdUserGroupScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		_, 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
 		}
@@ -222,6 +226,10 @@ func JsMdUserGroup() templ.Component {
 			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n        function onLoadingStart() {\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.add(\"overlay\");\r\n\t\t\t// loadingParent.classList.add(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.add(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.remove(\"d-none\");\r\n\r\n            // Additional logic when loading starts\r\n        }\r\n\r\n        function onLoadingEnd() {\r\n            console.log('Loading ended');\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.remove(\"overlay\");\r\n\t\t\t// loadingParent.classList.remove(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.remove(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.add(\"d-none\");\r\n        }\r\n\r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.elt)\r\n            if (indicator) {\r\n                onLoadingStart();\r\n            }\r\n        });\r\n\r\n        document.addEventListener('htmx:afterRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n            if (indicator) {\r\n                onLoadingEnd();\r\n            }\r\n        });\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}
@@ -229,6 +237,40 @@ func JsMdUserGroup() templ.Component {
 	})
 }

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

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

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

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

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

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

 templ ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
@@ -76,16 +100,19 @@ templ ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose stri
 			hx-post={ LinkClose }
 			hx-target={ targetClose }
 			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
 			type="button"
-			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel "
 			data-dismiss="modal"
 		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
 			Batal
 		</button>
 		<button
 			type="submit"
-			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
 		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
 			Simpan
 		</button>
 	</div>
@@ -98,7 +125,7 @@ templ BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose st
 		hx-swap={ hxSwapClose }
 		type="button"
 		hx-on::after-request={ JsHideModal(modalID) }
-		class="close btnaddact"
+		class="close btnactcancel"
 		data-dismiss="modal"
 		aria-label="Close"
 	>
@@ -141,16 +168,19 @@ templ ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClos
 			hx-post={ LinkClose }
 			hx-target={ targetClose }
 			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
 			type="button"
-			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
 			data-dismiss="modal"
 		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
 			Batal
 		</button>
 		<button
 			type="submit"
-			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
 		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
 			Yakin
 		</button>
 	</div>
--- a/views/dev/mdusergroup/mdusergroupformmodal_templ.go
+++ b/views/dev/mdusergroup/mdusergroupformmodal_templ.go
@@ -100,7 +100,7 @@ func UserGroupForm(data models.UserGroupFormComponent) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".formloading\" hx-on::before-request=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -143,34 +143,45 @@ func UserGroupForm(data models.UserGroupFormComponent) templ.Component {

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

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

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

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

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

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

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

@@ -304,7 +327,7 @@ func ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose strin
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 76, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 100, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
@@ -317,7 +340,7 @@ func ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose strin
 		var templ_7745c5c3_Var15 string
 		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 77, Col: 26}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 101, Col: 26}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 		if templ_7745c5c3_Err != nil {
@@ -330,13 +353,13 @@ func ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose strin
 		var templ_7745c5c3_Var16 string
 		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 78, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 102, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact\" data-dismiss=\"modal\">Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact\">Simpan\r</button></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel \" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Simpan\r</button></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -371,7 +394,7 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 96, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 123, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
@@ -384,7 +407,7 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		var templ_7745c5c3_Var19 string
 		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 97, Col: 25}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 124, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 		if templ_7745c5c3_Err != nil {
@@ -397,7 +420,7 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		var templ_7745c5c3_Var20 string
 		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 98, Col: 23}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 125, Col: 23}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 		if templ_7745c5c3_Err != nil {
@@ -412,7 +435,7 @@ func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose str
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnaddact\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnactcancel\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -452,7 +475,7 @@ func DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
 		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: 115, Col: 22}
+			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 {
@@ -474,7 +497,7 @@ func DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
 		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: 116, Col: 14}
+			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 {
@@ -492,7 +515,7 @@ func DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
 			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: 121, Col: 68}
+				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 {
@@ -515,7 +538,7 @@ func DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
 			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: 127, Col: 10}
+				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 {
@@ -582,7 +605,7 @@ func ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose
 		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: 141, Col: 22}
+			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 {
@@ -595,7 +618,7 @@ func ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose
 		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: 142, Col: 26}
+			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 {
@@ -608,13 +631,13 @@ func ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose
 		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: 143, Col: 24}
+			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("\" 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\">Yakin\r</button></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel\" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Yakin\r</button></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/mdusergroup/mdusergrouptable.templ
+++ b/views/dev/mdusergroup/mdusergrouptable.templ
@@ -80,26 +80,50 @@ templ TableAction(
 ) {
 	<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"
+			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
-			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"
+			class=" btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
 			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
 			hx-target={ hxTargetDelete }
 			hx-swap={ hxSwapDelete }
 			hx-include={ hxIncludeDelete }
+			hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
 		>
+			<span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
 			Hapus
 		</a>
 	</div>
 }
+
+script HandleBeforeRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	console.log(id)
+}
+
+script HandleAfterRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	console.log(id)
+}
--- a/views/dev/mdusergroup/mdusergrouptable_templ.go
+++ b/views/dev/mdusergroup/mdusergrouptable_templ.go
@@ -188,14 +188,22 @@ func TableAction(
 			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\"><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=\"")
+		_, 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: 86, Col: 49}
+			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 {
@@ -208,7 +216,7 @@ func TableAction(
 		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: 87, Col: 27}
+			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 {
@@ -221,7 +229,7 @@ func TableAction(
 		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: 88, Col: 23}
+			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 {
@@ -234,35 +242,87 @@ func TableAction(
 		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: 89, Col: 29}
+			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("\">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=\"")
+		_, 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(hxGetDelete + "?id=" + strconv.Itoa(id))
+		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: 97, Col: 51}
+			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_Var12 string
-		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetDelete)
+		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: 98, Col: 29}
+			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_Var12))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -270,12 +330,12 @@ func TableAction(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var13 string
-		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapDelete)
+		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: 99, Col: 25}
+			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_Var13))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -283,16 +343,60 @@ func TableAction(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var14 string
-		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeDelete)
+		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: 100, Col: 31}
+			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_Var14))
+		_, 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("\">Hapus\r</a></div>")
+		_, 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
 		}
@@ -302,3 +406,33 @@ func TableAction(
 		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),
+	}
+}
Author	SHA1	Message	Date
Sas Andy	94fea169d1	loading	2024-05-25 20:10:25 +07:00
Sas Andy	af1c16f8f9	up versi	2024-05-25 20:10:12 +07:00
Sas Andy	10c1d3c5dd	revisi toast top right based screen view	2024-05-24 13:51:36 +07:00