finalisasi view multi

toast v1 dev dan public
refractor user group
2024-05-17 13:45:25 +07:00 · 2024-05-17 11:25:12 +07:00 · 2024-05-17 10:50:58 +07:00 · 2024-05-16 09:03:55 +07:00 · 2024-05-16 08:26:04 +07:00
42 changed files with 4057 additions and 650 deletions
--- a/assets/andy/cobaform.html
+++ b/assets/andy/cobaform.html
@@ -92,6 +92,7 @@
        hx-on::reponse-error="cobaerror()"
        hx-on::send-error="cobaerror()"
        id="kt_form_1"
+        hx-include="#cobaid, #test"
      >
        <div id="change">
          <div class="form-group">
@@ -131,7 +132,23 @@
          submit
        </button>
      </form>
+      <input
+        id="cobaid"
+        name="cobaid"
+        type="hidden"
+        placeholder="coba"
+        value="1"
+        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+      />
    </div>
+    <input
+      id="test"
+      name="paginat"
+      type="hidden"
+      placeholder="coba"
+      value="2"
+      class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+    />

    <div id="testttt" class="p-6" hx-swap-oob="#testttt">
      ;adkj;djf;
@@ -144,6 +161,21 @@
    >
      Show live toast
    </button>
+    <input
+      class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+      type="text"
+      name="search"
+      id="searchsas5b2f51246d4698262a5b7c241dd59884"
+      placeholder="Cari Kode/Nama"
+      hx-get="http://google.com"
+      hx-trigger="input changed delay:500ms, search"
+      hx-target="#cobakeyup"
+      hx-indicator=""
+      value=""
+      hx-include="#cobaid"
+      hx-swap="outerHTML"
+      autocomplete="off"
+    />

    <div
      class="position-fixed bottom-0 right-0 p-3"
@@ -175,6 +207,43 @@
        </div>
      </div>
    </div>
+    <div id="cobakeyup"></div>
+    <div class="card card-custom">
+      <div class="card-header">
+        <div class="card-title">
+          <h3 class="card-label">Card Blocking</h3>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="overlay-wrapper">
+          <div class="form-group">
+            <label>Address Line 1</label>
+            <input
+              type="text"
+              class="form-control form-control-solid form-control-lg"
+              name="address1"
+              placeholder="Address Line 1"
+            />
+            <span class="form-text text-muted">Please enter your Address.</span>
+          </div>
+          <div class="form-group">
+            <label>Address Line 2</label>
+            <input
+              type="text"
+              class="form-control form-control-solid form-control-lg"
+              name="address1"
+              placeholder="Address Line 1"
+            />
+            <span class="form-text text-muted"
+              >Please enter your Address 2.</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="overlay-layer bg-dark-o-10">
+        <div class="spinner spinner-primary"></div>
+      </div>
+    </div>

    <!--begin::Global Config(global config for global JS scripts)-->
    <script src="asset-corporate-portal/js/ktappsetting.js"></script>
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
@@ -5200,6 +5200,45 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
  height: auto;
 }

+/* ### TOAST FONT SIZE */
+.toast {
+  font-size: 1.1rem;
+}
+
+/* ### OVERLAY */
+.overlay-loading {
+  position: relative !important;
+}
+.overlay-loading .overlay-layer {
+  position: absolute !important ;
+  top: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-pack: center !important;
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  -webkit-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  opacity: 0 !important;
+}
+.overlay-loading.overlay-block .overlay-layer,
+.overlay-layer {
+  -webkit-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  opacity: 1 !important;
+}
+.overlay-loading.overlay-block {
+  cursor: wait !important;
+}
+
 /* ### BUTTON HOVER TEXT */
 /* ###  */
 /* ## PRIMARY */
--- a/assets/mcu/mike/t0007.html
+++ b/assets/mcu/mike/t0007.html
--- a/component/customtextfield/customtextfieldv2.templ
+++ b/component/customtextfield/customtextfieldv2.templ
@@ -4,7 +4,14 @@ import "cpone/models"

 templ CustomTextFieldv2(inp models.CustomTextFieldv2Prm) {
 	<div class="form-group">
-		<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inp.Label } </label>
+		<label
+			if inp.Type == "hidden" {
+				class="text-black d-none"
+			} else {
+				class="text-black"
+			}
+			style="font-family: Poppins; font-weight: 600;"
+		>{ inp.Label } </label>
 		<input
 			id={ inp.Name }
 			name={ inp.Name }
@@ -14,7 +21,7 @@ templ CustomTextFieldv2(inp models.CustomTextFieldv2Prm) {
 			if inp.ErrorMsg =="" {
 				class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
 			} else {
-				class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg is-invalid"
+				class="form-control bg-field border-1 h-auto py-6 px-6 rounded-lg is-invalid"
 			}
 		/>
 		<div class="invalid-feedback text-danger mt-3 ml-2">
--- a/component/customtextfield/customtextfieldv2_templ.go
+++ b/component/customtextfield/customtextfieldv2_templ.go
@@ -25,14 +25,29 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-group\"><label class=\"text-black\" style=\"font-family: Poppins; font-weight: 600;\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-group\"><label")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if inp.Type == "hidden" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"text-black d-none\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"text-black\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" style=\"font-family: Poppins; font-weight: 600;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Label)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 7, Col: 87}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 14, Col: 14}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -45,7 +60,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 9, Col: 16}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 16, Col: 16}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -58,7 +73,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 10, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 17, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -71,7 +86,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Type)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 11, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 18, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -84,7 +99,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Placeholder)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 12, Col: 32}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 19, Col: 32}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -97,7 +112,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Value)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 13, Col: 20}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 20, Col: 20}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -113,7 +128,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg is-invalid\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control bg-field border-1 h-auto py-6 px-6 rounded-lg is-invalid\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -125,7 +140,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 21, Col: 17}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 28, Col: 17}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
--- a/component/customtextfieldsearch/customtextfieldsearch.templ
+++ b/component/customtextfieldsearch/customtextfieldsearch.templ
@@ -45,6 +45,41 @@ templ MainCustomTextFieldSearchV1(
 		hx-indicator={ hxIndicator }
 		value={ value }
 		hx-ext={ hxExt }
-        autocomplete="off"
+		autocomplete="off"
 	/>
 }
+
+templ MainCustomTextFieldSearchV2(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string) {
+	<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 }
+		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
@@ -308,3 +308,181 @@ func MainCustomTextFieldSearchV1(
 		return templ_7745c5c3_Err
 	})
 }
+
+func MainCustomTextFieldSearchV2(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	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_Var21 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var21 == nil {
+			templ_7745c5c3_Var21 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, 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_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 66, Col: 16}
+		}
+		_, 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("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 67, Col: 16}
+		}
+		_, 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("\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(inpId)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 68, Col: 12}
+		}
+		_, 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("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 69, Col: 30}
+		}
+		_, 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("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var26 string
+		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 70, Col: 16}
+		}
+		_, 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-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var27 string
+		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 71, 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-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var28 string
+		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 72, 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("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var29 string
+		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 73, 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("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 74, Col: 15}
+		}
+		_, 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(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 75, Col: 24}
+		}
+		_, 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(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 76, Col: 18}
+		}
+		_, 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("\" 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/navbar/navbar.templ
+++ b/component/navbar/navbar.templ
@@ -2,7 +2,7 @@ package navbar

 import (
 	"cpone/component/sidebarmaster"
-	services "cpone/services/dev"
+
 	"cpone/models"
 )

@@ -40,7 +40,7 @@ templ Navbar(dataUser models.User) {
 	</div>
 }

-templ NavbarMenu(datamenu []services.MasterMenu) {
+templ NavbarMenu(datamenu []models.Menu) {
 	<div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
 		<!--begin::Menu Container-->
 		<div
--- a/component/navbar/navbar_templ.go
+++ b/component/navbar/navbar_templ.go
@@ -12,8 +12,8 @@ import "bytes"

 import (
 	"cpone/component/sidebarmaster"
+
 	"cpone/models"
-	services "cpone/services/dev"
 )

 func Navbar(dataUser models.User) templ.Component {
@@ -53,7 +53,7 @@ func Navbar(dataUser models.User) templ.Component {
 	})
 }

-func NavbarMenu(datamenu []services.MasterMenu) templ.Component {
+func NavbarMenu(datamenu []models.Menu) 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 {
--- a/component/pagination/paginationv2.templ
+++ b/component/pagination/paginationv2.templ
@@ -0,0 +1,49 @@
+package pagination 
+
+import "strconv"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+templ PaginationV2(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator 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 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-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"
+						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>
+	</div>
+	@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "currpage" + paginationID,
+		Type:  "hidden",
+		Value: strconv.Itoa(currentPage)})
+}
--- a/component/pagination/paginationv2_templ.go
+++ b/component/pagination/paginationv2_templ.go
@@ -0,0 +1,238 @@
+// 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 PaginationV2(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator 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=\"d-flex justify-content-between align-items-center flex-wrap\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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}
+		}
+		_, 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("\"><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_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				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))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 22, Col: 55}
+				}
+				_, 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=\"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_Var4 string
+				templ_7745c5c3_Var4, 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}
+				}
+				_, 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-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, 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}
+				}
+				_, 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-trigger=\"click\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, 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}
+				}
+				_, 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-include=\"")
+				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))
+				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))
+				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_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				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))
+				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))
+				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=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, 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))
+				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(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))
+				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_Var12 string
+				templ_7745c5c3_Var12, 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))
+				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_Var13 string
+				templ_7745c5c3_Var13, 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("</a>")
+				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 = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)}).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
+	})
+}
--- a/component/sidebarmaster/sidebarmaster.templ
+++ b/component/sidebarmaster/sidebarmaster.templ
@@ -1,7 +1,7 @@
 package sidebarmaster

 import (
-	services "cpone/services/dev"
+	"cpone/models"
 )

 templ MenuDashboard(ParentMenuName string, ParentMenuUrl string) {
@@ -50,7 +50,7 @@ templ ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName string) {
 	</li>
 }

-templ ListMenuNavbar(ParentMenuName string, datamenuchildren []services.ChildrenMenu) {
+templ ListMenuNavbar(ParentMenuName string, datamenuchildren []models.ChildrenMenu) {
 	<li class="menu-item  menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
 		<a
 			href="javascript:;"
--- a/component/sidebarmaster/sidebarmaster_templ.go
+++ b/component/sidebarmaster/sidebarmaster_templ.go
@@ -11,7 +11,7 @@ import "io"
 import "bytes"

 import (
-	services "cpone/services/dev"
+	"cpone/models"
 )

 func MenuDashboard(ParentMenuName string, ParentMenuUrl string) templ.Component {
@@ -106,7 +106,7 @@ func ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName string) templ.Com
 	})
 }

-func ListMenuNavbar(ParentMenuName string, datamenuchildren []services.ChildrenMenu) templ.Component {
+func ListMenuNavbar(ParentMenuName string, datamenuchildren []models.ChildrenMenu) 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 {
--- a/component/table/tablev2.templ
+++ b/component/table/tablev2.templ
@@ -27,6 +27,5 @@ templ TableV2(thName []string, thWidth []string, trComponent templ.Component, pa
 }

 templ DivEmpty() {
-	<div>
-	</div>
-}
+	<div></div>
+}
--- a/component/table/tablev3.templ
+++ b/component/table/tablev3.templ
@@ -0,0 +1,27 @@
+package tablecomponent
+
+templ TableV3(thName []string, thWidth []string, trComponent templ.Component) {
+	<div>
+		if len(thName) != len(thWidth) {
+			<div>length array thname berbeda dengan array thwidth</div>
+		} else {
+			<div class="mt-7"></div>
+			<table class="table table-hover table-borderless">
+				<thead>
+					<tr class="rounded-lg bg-header-table">
+						for i, item := range thName {
+							<th scope="col" width={ thWidth[i] }>{ item }</th>
+						}
+					</tr>
+				</thead>
+				<tbody>
+					@trComponent
+				</tbody>
+			</table>
+		}
+	</div>
+}
+
+templ DivEmptyV3() {
+	<div></div>
+}
--- a/component/table/tablev3_templ.go
+++ b/component/table/tablev3_templ.go
@@ -0,0 +1,118 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package tablecomponent
+
+//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"
+
+func TableV3(thName []string, thWidth []string, trComponent 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>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(thName) != len(thWidth) {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>length array thname berbeda dengan array thwidth</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mt-7\"></div><table class=\"table table-hover table-borderless\"><thead><tr class=\"rounded-lg bg-header-table\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for i, item := range thName {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<th scope=\"col\" width=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(thWidth[i])
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev3.templ`, Line: 13, Col: 41}
+				}
+				_, 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(item)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev3.templ`, Line: 13, Col: 50}
+				}
+				_, 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("</th>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tr></thead> <tbody>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = trComponent.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody></table>")
+			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 DivEmptyV3() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div></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
@@ -0,0 +1,86 @@
+package customtoastv1
+
+// kalau eror => bg nya danger
+// kalau sukses => bgnya success
+// kalau warning => bgnya warning
+
+func toastBackground(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBody(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIcon(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 CustomToastV2Show(title string, message string, typeToast string) {
+	<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;"
+	>
+		<div class={ "toast-header",  toastBackground(typeToast) , "text-white" }>
+			<span
+				class="iconify mr-2"
+				data-icon={ toastIcon(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",toastBody(typeToast) }>
+			{ message }
+		</div>
+	</div>
+}
+
+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 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>
+}
--- a/component/toastbootstrap/customtoastv2_templ.go
+++ b/component/toastbootstrap/customtoastv2_templ.go
@@ -0,0 +1,175 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtoastv1
+
+//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"
+
+// kalau eror => bg nya danger
+// kalau sukses => bgnya success
+// kalau warning => bgnya warning
+
+func toastBackground(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBody(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIcon(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 CustomToastV2Show(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-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
+		}
+		var templ_7745c5c3_Var2 = []any{"toast-header", toastBackground(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: `component\toastbootstrap\customtoastv2.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(toastIcon(typeToast))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\toastbootstrap\customtoastv2.templ`, Line: 52, Col: 36}
+		}
+		_, 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: `component\toastbootstrap\customtoastv2.templ`, Line: 54, 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", toastBody(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: `component\toastbootstrap\customtoastv2.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: `component\toastbootstrap\customtoastv2.templ`, Line: 60, 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 CustomToastV2Hide() 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-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
+	})
+}
--- a/handlers/dev/mastermenuusergroup.handlers.go
+++ b/handlers/dev/mastermenuusergroup.handlers.go
@@ -2,7 +2,6 @@ package dev_handlers

 import (
 	"fmt"
-	"math"
 	"strings"

 	"strconv"
@@ -15,6 +14,7 @@ import (
 	mastermenuusergroup "cpone/views/dev/mastermenuusergroup"
 	"cpone/views/dev/mastermenuusergrouptryandy"

+	globalservices "cpone/services"
 	services "cpone/services/dev"

 	"github.com/a-h/templ"
@@ -25,6 +25,7 @@ import (
 	customtextfieldsearch "cpone/component/customtextfieldsearch"
 	navbarmenu "cpone/component/navbar"
 	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	customtoastv2 "cpone/component/toastbootstrap"
 )

 type MasterMenuUserGroupService interface {
@@ -40,6 +41,7 @@ type MasterMenuUserGroupService interface {
 	GetListMasterUserGroupBySearch(search string) ([]models.UserGroupV1, error)
 	GetListMasterUserGroupPagination(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, error)
 	GetListMasterUserGroupFilteredBySearch(search string) ([]models.UserGroupV1, error)
+	GetListMasterUserGroupV2(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, int, error)
 }

 func NewMasterMenuUserGroupHandler(us MasterMenuUserGroupService) *MasterMenuUserGroupHandler {
@@ -155,11 +157,11 @@ func (uh *MasterMenuUserGroupHandler) View(c echo.Context, cmp templ.Component)

 // try
 func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupV1(c echo.Context) error {
-	// var toastComponent templ.Component
-	contentIDHtmxExtension := utils.GenerateRandomID("htmxExtmgu")

 	logger, _ := zap.NewProduction()
-	dataMenu, err := lh.MasterMenuUserGroupService.GetMasterMenus()
+	//get sidebarmenu
+
+	dataMenu, err := globalservices.GetMenu()
 	fmt.Println(dataMenu)
 	fmt.Println(err)
 	if err != nil {
@@ -167,7 +169,8 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupV1(c echo.Co
 		return err
 	}

-	dataUser, err := services.GetUser()
+	//get user login
+	dataUser, err := globalservices.GetUserLogin()
 	fmt.Println(dataUser)
 	fmt.Println(err)
 	if err != nil {
@@ -175,31 +178,16 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupV1(c echo.Co
 		return err
 	}

-	rowPerPage := 2
-	dataUserGroup, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupPagination("", 1, rowPerPage)
-	fmt.Println(dataUserGroup)
-	fmt.Println(err)
+	dataUserGroup, totalpage, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupV2("", 1, 5)
 	if err != nil {
 		defer logger.Sync()
-		logger.Info("ERROR LIST USER GROUP DEV",
+		logger.Info("ERROR GET USER GROUP",
 			zap.Any("error", err),
 		)
 		fmt.Println(dataUserGroup)
 		return err
 	}

-	dataUserGroupAll, err := lh.MasterMenuUserGroupService.GetListMasterUserGroup()
-	fmt.Println(dataUserGroupAll)
-	fmt.Println(err)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR LIST USER GROUP ALL DEV",
-			zap.Any("error", err),
-		)
-		fmt.Println(dataUserGroupAll)
-		return err
-	}
-
 	// si := mastermenuusergroup.ListMasterUserGroupInitial(dataUserGroup)

 	defer logger.Sync()
@@ -207,16 +195,9 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupV1(c echo.Co
 		zap.Any("data", dataUserGroup),
 	)

-	// si := mastermenuusergroup.ListMasterUserGroupInitial(dataUserGroup)
-
-	// si := mastermenuusergroup.ShowMasterMenuUserGroupV1(
-	// 	"Master Menu",
-	// 	mastermenuusergroup.ListMasterUserGroupInitial(dataUserGroup),
-	// 	mastermenuusergroup.CssMasterMenuUserGroupV1(),
-	// 	mastermenuusergroup.JsMasterMenuUserGroupV1(),
-	// )
-
-	contentID := utils.GenerateRandomID("tablebody")
+	tableID := utils.GenerateRandomID("tablebody")
+	paginationID := utils.GenerateRandomID("paginationid")
+	searchID := utils.GenerateRandomID("searchid")

 	paramTitleBreadcrumbConvert := "Master User Group"

@@ -232,8 +213,6 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupV1(c echo.Co
 		return err
 	}

-	// si := mastermenuusergroup.ListMasterUserGroupInitial(dataBreadCrumb)
-
 	defer logger.Sync()
 	logger.Info("LOAD BREADCRUMB DEV",
 		zap.Any("data", dataBreadCrumb),
@@ -248,40 +227,35 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupV1(c echo.Co
 	// sidebar
 	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)

-	// inputan search
-	// inputansearchComponent := customtextfieldsearch.MainCustomTextFieldSearchV1("q", "Cari User Group", "text", "/dev/searchusergroupv1", "input changed delay:500ms, search", "#idbaru", "#indicator")
+	// totalPages := int(math.Ceil(float64(len(dataUserGroupAll)) / float64(rowPerPage)))

-	contentIDSearch := utils.GenerateRandomID("qsearch")
-	totalPages := int(math.Ceil(float64(len(dataUserGroupAll)) / float64(rowPerPage)))
-	link := "currentPage=1&page=" + strconv.Itoa(totalPages) + "&contentID=" + contentID
+	contentUserGroupComponent := mastermenuusergroup.TableUserGroup(
+		dataUserGroup, tableID)

-	inputansearchComponent := customtextfieldsearch.MainCustomTextFieldSearchV1("#"+contentIDSearch, "q", "Cari User Group", "text", "/dev/searchusergroupv1?"+link, "input changed delay:500ms, search", "#"+contentID, "#indicator", "", contentIDHtmxExtension)
-
-	// toast
-	// contentIDToast := utils.GenerateRandomID("toastmgu")
-	// toastComponent = customtoast.CustomToastV1("", contentIDHtmxExtension)
-
-	// table user group
-
-	searchQueryParam := "&q="
-	tabelusergroupComponent := tablecomponent.TableV2(
-		[]string{"KODE", "USERGROUP", "AKSI"},
-		[]string{"40%", "40%", "20%"},
-		mastermenuusergroup.TableRowV1(dataUserGroup),
-		pagination.PaginationV1(totalPages, 1, "/dev/usergroupv1pagination", contentID, searchQueryParam),
-		contentID,
-		inputansearchComponent,
+	usergroupFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
+		"search",
+		"Cari Kode/Nama",
+		"text",
+		"/dev/searchusergroupv1",
+		"input changed delay:500ms, search",
+		"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID")
+	// @pagination.PaginationV2(pageLength, 1, paginationLink, contentId, "#search"+contentId+", #contentID")
+	userGroupPaginationComponent := pagination.PaginationV2(
+		totalpage,
+		1,
+		"/dev/usergroupv1pagination",
+		paginationID,
+		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "",
 	)

 	si := mastermenuusergroup.ShowMasterMenuUserGroupV1x(
 		"Master Menu",
 		mastermenuusergroup.ContentMasterMenuUserGroupV1(
-			contentID,
+			tableID, paginationID, searchID,
 			breadcrumbadmin.MainBreadcrumbAdminV1(dataBreadCrumb),
-			tabelusergroupComponent,
-			inputansearchComponent,
-			// toastComponent,
-			// contentIDToast,
+			contentUserGroupComponent,
+			usergroupFilterComponent,
+			userGroupPaginationComponent,
 		),

 		mastermenuusergroup.CssMasterMenuUserGroupV1x(),
@@ -441,94 +415,43 @@ func (lh *MasterMenuUserGroupHandler) DeleteUserGroup(c echo.Context) error {
 }

 func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupSearchV1(c echo.Context) error {
-	search := c.QueryParam("q")
+	search := c.QueryParam("search")
+	tableID := c.QueryParam("tableID")
+	paginationID := c.QueryParam("paginationID")
 	logger, _ := zap.NewProduction()

-	// dataUserGroup, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupBySearch(search)
-	rowPerPage := 2
-	pageparam := c.QueryParam("page")
-	page, err := strconv.Atoi(pageparam)
+	dataUserGroup, totalpage, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupV2(search, 1, 5)
 	if err != nil {
 		defer logger.Sync()
-		logger.Info("ERROR CONVERT PAGE PARAM",
-			zap.Any("page", page),
-			zap.Any("error ", err),
-		)
-		return err
-	}
-
-	currentPageParam := c.QueryParam("currentPage")
-	currentPage, err := strconv.Atoi(currentPageParam)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR CONVERT CURRENT PAGE PARAM",
-			zap.Any("page", page),
-			zap.Any("error ", err),
-		)
-		return err
-	}
-
-	dataUserGroup, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupPagination(search, currentPage, rowPerPage)
-	fmt.Println(dataUserGroup)
-	fmt.Println(err)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR SEARCH USER GROUP DEV",
+		logger.Info("ERROR GET USER GROUP",
 			zap.Any("error", err),
-			zap.Any("search param", search),
 		)
 		fmt.Println(dataUserGroup)
 		return err
 	}

-	defer logger.Sync()
-	logger.Info("LOAD USER GROUP DEV BY SEARCH",
-		zap.Any("data", dataUserGroup),
-	)
+	// totalPages := int(math.Ceil(float64(len(dataUserGroupFiltered)) / float64(rowPerPage)))

-	// data user filtered
-	dataUserGroupFiltered, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupFilteredBySearch(search)
-	fmt.Println(dataUserGroupFiltered)
-	fmt.Println(err)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR SEARCH USER GROUP FILTERED BY SEARCH DEV",
-			zap.Any("error", err),
-			zap.Any("search param", search),
-		)
-		fmt.Println(dataUserGroupFiltered)
-		return err
-	}
+	contentUserGroupComponent := mastermenuusergroup.TableUserGroup(
+		dataUserGroup, tableID)
+	// userGroupPaginationComponent := pagination.PaginationV2(
+	// 	totalpage,
+	// 	1,
+	// 	"/dev/usergroupv1pagination",
+	// 	paginationID,
+	// 	"#tableID, #"+searchID, "#"+tableID, "outerHTML", "",
+	// )

-	defer logger.Sync()
-	logger.Info("LOAD SEARCH USER GROUP FILTERED BY SEARCH DEV",
-		zap.Any("data", dataUserGroupFiltered),
-	)
-	// si := mastermenuusergroup.ListMasterUserGroupInitial(dataUserGroup)
+	userGroupPaginationComponent := pagination.PaginationV2(totalpage,
+		1,
+		"/dev/usergroupv1pagination",
+		paginationID,
+		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "")

-	contentID := utils.GenerateRandomID("tablebody")
+	swapTable :=
+		mastermenuusergroup.SwapTableUserGroup(userGroupPaginationComponent, contentUserGroupComponent)

-	// tabelusergroupComponent := mastermenuusergroup.TableRowV1(dataUserGroup)
-	totalPages := int(math.Ceil(float64(len(dataUserGroupFiltered)) / float64(rowPerPage)))
-	searchQueryParam := "&q=" + search
-
-	// contentIDSearch := utils.GenerateRandomID("qsearch")
-	// link := "currentPage=1&page=" + strconv.Itoa(totalPages) + "&contentID=" + contentID
-
-	// contentIDHtmxExtension := utils.GenerateRandomID("htmxExtmgu")
-	// inputansearchComponent := customtextfieldsearch.MainCustomTextFieldSearchV1("#"+contentIDSearch, "q", "Cari User Group", "text", "/dev/searchusergroupv1?"+link, "input changed delay:500ms, search", "#"+contentID, "#indicator", search, contentIDHtmxExtension)
-
-	inputansearchComponent := tablecomponent.DivEmpty()
-	tabelusergroupComponent := tablecomponent.TableV2(
-		[]string{"KODE", "USERGROUP", "AKSI"},
-		[]string{"40%", "40%", "20%"},
-		mastermenuusergroup.TableRowV1(dataUserGroup),
-		pagination.PaginationV1(totalPages, 1, "/dev/usergroupv1pagination", contentID, searchQueryParam),
-		contentID,
-		inputansearchComponent,
-	)
-
-	si := tabelusergroupComponent
+	si := swapTable

 	return utils.View(c, si)
 }
@@ -536,8 +459,11 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupSearchV1(c e
 func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupPaginationV1(c echo.Context) error {
 	logger, _ := zap.NewProduction()

-	search := c.QueryParam("q")
+	search := c.QueryParam("search")
 	pageparam := c.QueryParam("page")
+	tableID := c.QueryParam("tableID")
+	// searchID := c.QueryParam("searchID")
+	paginationID := c.QueryParam("paginationID")
 	page, err := strconv.Atoi(pageparam)
 	if err != nil {
 		defer logger.Sync()
@@ -548,93 +474,29 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupPaginationV1
 		return err
 	}

-	dataUserGroupAll, err := lh.MasterMenuUserGroupService.GetListMasterUserGroup()
-	fmt.Println(dataUserGroupAll)
-	fmt.Println(err)
+	dataUserGroup, totalpage, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupV2(search, page, 5)
 	if err != nil {
 		defer logger.Sync()
-		logger.Info("ERROR LIST USER GROUP ALL DEV",
+		logger.Info("ERROR GET USER GROUP",
 			zap.Any("error", err),
 		)
-		fmt.Println(dataUserGroupAll)
-		return err
-	}
-
-	currentPageParam := c.QueryParam("currentPage")
-	currentPage, err := strconv.Atoi(currentPageParam)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR CONVERT CURRENT PAGE PARAM",
-			zap.Any("page", page),
-			zap.Any("error ", err),
-		)
-		return err
-	}
-
-	rowPerPage := 2
-	dataUserGroup, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupPagination(search, currentPage, rowPerPage)
-	fmt.Println(dataUserGroup)
-	fmt.Println(err)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR SEARCH USER GROUP DEV",
-			zap.Any("error", err),
-			zap.Any("search param", search),
-		)
 		fmt.Println(dataUserGroup)
 		return err
 	}

-	// si := mastermenuusergroup.ListMasterUserGroupInitial(dataUserGroup)
+	contentUserGroupComponent := mastermenuusergroup.TableUserGroup(
+		dataUserGroup, tableID)

-	defer logger.Sync()
-	logger.Info("LOAD USER GROUP DEV BY SEARCH",
-		zap.Any("data", dataUserGroup),
-	)
+	userGroupPaginationComponent := pagination.PaginationV2(totalpage,
+		page,
+		"/dev/usergroupv1pagination",
+		paginationID,
+		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "")

-	// data user filtered
-	dataUserGroupFiltered, err := lh.MasterMenuUserGroupService.GetListMasterUserGroupFilteredBySearch(search)
-	fmt.Println(dataUserGroupFiltered)
-	fmt.Println(err)
-	if err != nil {
-		defer logger.Sync()
-		logger.Info("ERROR SEARCH USER GROUP FILTERED BY SEARCH DEV",
-			zap.Any("error", err),
-			zap.Any("search param", search),
-		)
-		fmt.Println(dataUserGroupFiltered)
-		return err
-	}
+	swapTable :=
+		mastermenuusergroup.SwapTableUserGroup(userGroupPaginationComponent, contentUserGroupComponent)

-	defer logger.Sync()
-	logger.Info("LOAD SEARCH USER GROUP FILTERED BY SEARCH DEV",
-		zap.Any("data", dataUserGroupFiltered),
-	)
-
-	contentID := utils.GenerateRandomID("tablebody")
-
-	// table user group
-	searchQueryParam := "&q=" + search
-	totalPages := int(math.Ceil(float64(len(dataUserGroupFiltered)) / float64(rowPerPage)))
-	// contentIDSearch := utils.GenerateRandomID("qsearch")
-	// link := "currentPage=1&page=" + strconv.Itoa(totalPages) + "&contentID=" + contentID
-
-	// contentIDHtmxExtension := utils.GenerateRandomID("htmxExtmgu")
-	// inputansearchComponent := customtextfieldsearch.MainCustomTextFieldSearchV1("#"+contentIDSearch, "q", "Cari User Group", "text", "/dev/searchusergroupv1?"+link, "input changed delay:500ms, search", "#"+contentID, "#indicator", search, contentIDHtmxExtension)
-
-	inputansearchComponent := tablecomponent.DivEmpty()
-	tabelusergroupComponent := tablecomponent.TableV2(
-		[]string{"KODE", "USERGROUP", "AKSI"},
-		[]string{"40%", "40%", "20%"},
-		mastermenuusergroup.TableRowV1(dataUserGroup),
-		pagination.PaginationV1(totalPages, currentPage, "/dev/usergroupv1pagination", contentID, searchQueryParam),
-		contentID,
-		inputansearchComponent,
-	)
-
-	// tabelusergroupComponent := mastermenuusergroup.TableRowV1(dataUserGroup)
-
-	si := tabelusergroupComponent
+	si := swapTable

 	return utils.View(c, si)
 }
@@ -642,7 +504,7 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupPaginationV1
 // Coba Anndy
 func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupTryAndy(c echo.Context) error {
 	logger, _ := zap.NewProduction()
-	dataMenu, err := lh.MasterMenuUserGroupService.GetMasterMenus()
+	dataMenu, err := globalservices.GetMenu()
 	fmt.Println(dataMenu)
 	fmt.Println(err)
 	if err != nil {
@@ -747,3 +609,11 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupTryAndy(c ec

 	return utils.View(c, si)
 }
+
+func (lh *MasterMenuUserGroupHandler) HandlerHideToast(c echo.Context) error {
+	toastComponent := customtoastv2.CustomToastV2Hide()
+
+	si := toastComponent
+
+	return utils.View(c, si)
+}
--- a/handlers/dev/xtemplmulti.handlers.go
+++ b/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:yellow;'>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)
+}
--- a/handlers/public/tools.handler.go
+++ b/handlers/public/tools.handler.go
@@ -0,0 +1,73 @@
+package public_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	"cpone/views/dev/mastermenuusergroup"
+
+	tablecomponent "cpone/component/table"
+
+	public_toast "cpone/views/public/toast"
+
+	"github.com/labstack/echo/v4"
+)
+
+type ToolsService interface {
+}
+
+func NewToolsHandler(us ToolsService) *ToolsHandler {
+	return &ToolsHandler{
+		ToolsService: us,
+	}
+}
+
+type ToolsHandler struct {
+	ToolsService ToolsService
+}
+
+func (lh *ToolsHandler) HandlerHideToast(c echo.Context) error {
+	toastComponent := public_toast.PublicToastV1Hide()
+
+	si := toastComponent
+
+	return utils.View(c, si)
+}
+
+func (lh *ToolsHandler) HandlerShowToast(c echo.Context) error {
+
+	inputansearchComponent := tablecomponent.DivEmpty()
+	// toastComponent := public_toast.PublicToastV1Show("Success", "Success Loaded", "success")
+	pagination := tablecomponent.DivEmpty()
+
+	dummyData := []models.UserGroupV1{
+		{
+			Nomor:                  "1",
+			M_UserGroupID:          1,
+			M_UserGroupCode:        "group1",
+			M_UserGroupName:        "Group 1",
+			M_UserGroupCreated:     "2024-05-16",
+			M_UserGroupLastUpdated: "2024-05-16",
+			M_UserGroupIsActive:    "Active",
+		},
+	}
+
+	tabelusergroupComponent := tablecomponent.TableV2(
+		[]string{"KODE", "USERGROUP", "AKSI"},
+		[]string{"40%", "40%", "20%"},
+		mastermenuusergroup.TableRowV1(dummyData),
+		pagination,
+		"",
+		inputansearchComponent,
+	)
+
+	si := public_toast.ShowToast("",
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+	)
+
+	return utils.View(c, si)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -202,6 +202,10 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	//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)
 }
--- a/layout/layout_corporate.templ
+++ b/layout/layout_corporate.templ
@@ -1,7 +1,7 @@
 package layout

 // LAYOUT PLAYGROUND
-templ CorporateLayout(title string, css templ.Component, js templ.Component, navbarmenu templ.Component, 
+templ CorporateLayout(title string, css templ.Component, js templ.Component, navbarmenu templ.Component,
 	navbaruser templ.Component, sidebaruserprofile templ.Component) {
 	<!DOCTYPE html>
 	<!--
@@ -223,6 +223,30 @@ templ CorporateLayout(title string, css templ.Component, js templ.Component, nav
 						<!--end::Header-->
 						<!--begin::Content-->
 						<div class="container-fluid">
+							// toast
+							<div class="toast-top-right" id="container-system-notification" style="position: absolute; top: 1vh; right: 0vw; z-index: 999;">
+								<!-- toast success -->
+								<div
+									id="notification-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
 							{ children... }
 						</div>
 						<!--end::Content-->
--- a/layout/layout_corporate_templ.go
+++ b/layout/layout_corporate_templ.go
@@ -62,7 +62,7 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, navb
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Header--><!--begin::Content--><div class=\"container-fluid\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Header--><!--begin::Content--><div class=\"container-fluid\"><div class=\"toast-top-right\" id=\"container-system-notification\" style=\"position: absolute; top: 1vh; right: 0vw; z-index: 999;\"><!-- toast success --><div id=\"notification-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>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/models/CustomTextField.models.go
+++ b/models/CustomTextField.models.go
@@ -12,4 +12,5 @@ type CustomTextFieldv2Prm struct {
 	Type        string `default:"text"`
 	Value       string `default:""`
 	ErrorMsg    string `default:""`
+	ID          string
 }
--- a/models/menu.models.go
+++ b/models/menu.models.go
@@ -0,0 +1,17 @@
+package models
+
+type Menu struct {
+	ID             string         `json:"id"`
+	ParentMenuID   string         `json:"parent_menu_id"`
+	ParentMenuName string         `json:"parent_menu_name"`
+	ParentUrl      string         `json:"parent_url"`
+	ParentIcon     string         `json:"parent_icon"`
+	Children       []ChildrenMenu `json:"children"`
+}
+type ChildrenMenu struct {
+	ChildrenParentID string `json:"children_parent_id"`
+	ChildrenMenuID   string `json:"children_menu_id"`
+	ChildrenMenuName string `json:"children_menu_name"`
+	ChildrenMenuURL  string `json:"children_menu_url"`
+	// Breadcrumb       []Breadcrumb `json:"breadcrumb"`
+}
--- a/models/xtempl.models.go
+++ b/models/xtempl.models.go
@@ -0,0 +1,6 @@
+package models
+
+type XtemplModel struct {
+	NameTempl  string `json:"nametempl"`
+	HtmlString string `json:"htmlString"`
+}
--- a/services/app.services.go
+++ b/services/app.services.go
@@ -0,0 +1,516 @@
+package services
+
+import "cpone/models"
+
+//Func get menu sidebar
+func GetMenu() ([]models.Menu, error) {
+
+	// dummyBreadcrumb := []Breadcrumb{
+	// 	{
+	// 		Name: "Dashboard",
+	// 		Url:  "/client/dashboard",
+	// 	},
+	// 	{
+	// 		Name: "Front Office",
+	// 		Url:  "/client/usermanagement",
+	// 	},
+	// }
+
+	dummyMenu := []models.Menu{
+		// 1. Dashboard
+		{
+			ID:             "1",
+			ParentMenuID:   "0",
+			ParentMenuName: "Dashboard",
+			ParentUrl:      "/client/md/dashboard",
+			ParentIcon:     "",
+			Children: []models.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: []models.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: []models.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: []models.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: []models.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 GetUserLogin() (models.User, error) {
+	a := models.User{
+		UserID:       1,
+		Username:     "andy",
+		UserFullName: "Alfianto Andy P",
+		UserPosition: "Software Developer",
+	}
+	return a, nil
+}
--- a/services/dev/mastermenuusergroup.services.go
+++ b/services/dev/mastermenuusergroup.services.go
@@ -2,7 +2,9 @@ package dev_services

 import (
 	"fmt"
+	"math"
 	"strconv"
+	"strings"

 	"cpone/db"
 	"cpone/models"
@@ -913,3 +915,41 @@ func (su *ServicesMasterMenuUserGroup) GetListMasterUserGroupPagination(search s

 	return userGroupList, nil
 }
+
+func (su *ServicesMasterMenuUserGroup) GetListMasterUserGroupV2(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
+}
--- a/utils/view.utils.go
+++ b/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)

--- a/views/dev/mastermenuusergroup/mastermenuusergroup.templ
+++ b/views/dev/mastermenuusergroup/mastermenuusergroup.templ
@@ -39,7 +39,7 @@ templ ContentMasterMenuUserGroup(ugData []models.UserGroup, contentID string) {
 				<span class="sr-only"></span>
 			</div>
 		</div>
-		@modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", ""), DialogNewAction(), BtnCloseNew())
+		@modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", "", "", "", ""), DialogNewAction(), BtnCloseNew())
 		@modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
 		@JSku()
 	</div>
--- a/views/dev/mastermenuusergroup/mastermenuusergroup_templ.go
+++ b/views/dev/mastermenuusergroup/mastermenuusergroup_templ.go
@@ -66,7 +66,7 @@ func ContentMasterMenuUserGroup(ugData []models.UserGroup, contentID string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", ""), DialogNewAction(), BtnCloseNew()).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", "", "", "", ""), DialogNewAction(), BtnCloseNew()).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/mastermenuusergroup/mastermenuusergroupv1.templ
+++ b/views/dev/mastermenuusergroup/mastermenuusergroupv1.templ
@@ -5,11 +5,33 @@ import (
 	"cpone/models"
 	"cpone/component/modal"
 	"strconv"
+	"cpone/component/table"
+	"cpone/component/customtextfield"
 )

 // "cpone/component/sidebar_user_profile"
-templ ContentMasterMenuUserGroupV1(contentID string, breadcrumb templ.Component, tablecontent templ.Component, inputanSearch templ.Component) {
+templ ContentMasterMenuUserGroupV1(
+	tableID string,
+	paginationID string,
+	searchID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterUserGroup templ.Component,
+	paginationUserGroup 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})
 		<div class="row align-items-center mb-10">
 			<div class="col-md-10 col-sm-12 p-0 ">
 				@breadcrumb
@@ -29,14 +51,30 @@ templ ContentMasterMenuUserGroupV1(contentID string, breadcrumb templ.Component,
 				<button type="button" class="btn btn-primary btn-block">Add New</button>
 			</div>
 		</div>
+		@filterUserGroup
 		// table content
 		@tablecontent
+		@paginationUserGroup
 		<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>
-		@modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", ""), DialogNewAction(), BtnCloseNew())
+		// 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())
 		@JSku()
 	</div>
@@ -73,15 +111,16 @@ templ TableRowV1(data []models.UserGroupV1) {
 					<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"
+						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="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+						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>
@@ -152,25 +191,6 @@ templ JSkuV1() {
 	</script>
 }

-templ PaginationV1() {
-	<div class="d-flex justify-content-between align-items-center flex-wrap">
-		<div class="d-flex flex-wrap py-2 mr-3">
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">23</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1">24</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">25</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">26</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">27</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">28</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
-		</div>
-	</div>
-}
-
 templ CssMasterMenuUserGroupV1x() {
 	<link
 		rel="stylesheet"
@@ -216,3 +236,18 @@ templ ShowMasterMenuUserGroupV1x(title string, cmp templ.Component, css templ.Co
 		@cmp
 	}
 }
+
+// []string{"KODE", "USERGROUP", "AKSI"},
+// 		[]string{"40%", "40%", "20%"},
+templ TableUserGroup(data []models.UserGroupV1, tableID string) {
+	<div id={ tableID } hx-swap-oob={ "#" + tableID }>
+		@tablecomponent.TableV3([]string{"KODE", "USERGROUP", "AKSI"},
+			[]string{"40%", "40%", "20%"},
+			TableRowV1(data))
+	</div>
+}
+
+templ SwapTableUserGroup(pagination templ.Component, table templ.Component) {
+	@pagination
+	@table
+}
--- a/views/dev/mastermenuusergroup/mastermenuusergroupv1_templ.go
+++ b/views/dev/mastermenuusergroup/mastermenuusergroupv1_templ.go
@@ -11,14 +11,24 @@ import "io"
 import "bytes"

 import (
+	"cpone/component/customtextfield"
 	"cpone/component/modal"
+	"cpone/component/table"
 	"cpone/layout"
 	"cpone/models"
 	"strconv"
 )

 // "cpone/component/sidebar_user_profile"
-func ContentMasterMenuUserGroupV1(contentID string, breadcrumb templ.Component, tablecontent templ.Component, inputanSearch templ.Component) templ.Component {
+func ContentMasterMenuUserGroupV1(
+	tableID string,
+	paginationID string,
+	searchID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterUserGroup templ.Component,
+	paginationUserGroup 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 {
@@ -31,7 +41,32 @@ func ContentMasterMenuUserGroupV1(contentID string, breadcrumb templ.Component,
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"row align-items-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0 \">")
+		_, 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 = 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
 		}
@@ -43,15 +78,31 @@ func ContentMasterMenuUserGroupV1(contentID string, breadcrumb templ.Component,
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = filterUserGroup.Render(ctx, templ_7745c5c3_Buffer)
+		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 = 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>")
+		templ_7745c5c3_Err = paginationUserGroup.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", ""), DialogNewAction(), BtnCloseNew()).Render(ctx, templ_7745c5c3_Buffer)
+		_, 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\">")
+		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)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -101,7 +152,7 @@ func TableRowV1(data []models.UserGroupV1) templ.Component {
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, 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: 69, Col: 26}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 107, Col: 26}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -114,33 +165,33 @@ func TableRowV1(data []models.UserGroupV1) templ.Component {
 			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: 70, Col: 26}
+				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=\"btneditusgp 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=\"")
+			_, 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: 78, Col: 65}
+				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 type=\"button\" class=\"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=\"")
+			_, 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))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 86, Col: 67}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuusergroup\mastermenuusergroupv1.templ`, Line: 125, Col: 67}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -250,7 +301,7 @@ func JSkuV1() templ.Component {
 	})
 }

-func PaginationV1() templ.Component {
+func CssMasterMenuUserGroupV1x() 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 {
@@ -263,30 +314,6 @@ func PaginationV1() templ.Component {
 			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-between align-items-center flex-wrap\"><div class=\"d-flex flex-wrap py-2 mr-3\"><a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-double-arrow-back icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-arrow-back icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">...</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">23</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\">24</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">25</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">26</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">27</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">28</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">...</a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-arrow-next icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-double-arrow-next icon-xs\"></i></a></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 CssMasterMenuUserGroupV1x() templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    #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
@@ -306,9 +333,9 @@ func JsMasterMenuUserGroupV1x() templ.Component {
 			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_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !templ_7745c5c3_IsBuffer {
@@ -329,12 +356,12 @@ func ShowMasterMenuUserGroupV1x(title string, cmp templ.Component, css templ.Com
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var14 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var13 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 			if !templ_7745c5c3_IsBuffer {
 				templ_7745c5c3_Buffer = templ.GetBuffer()
@@ -349,7 +376,98 @@ 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_Var14), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var13), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// []string{"KODE", "USERGROUP", "AKSI"},
+//
+//	[]string{"40%", "40%", "20%"},
+func TableUserGroup(data []models.UserGroupV1, tableID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_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 id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, 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}
+		}
+		_, 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-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("\">")
+		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)
+		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 SwapTableUserGroup(pagination templ.Component, table 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)
+		templ_7745c5c3_Err = pagination.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = table.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/mastermenuusergroup/modaladdusergroup.templ
+++ b/views/dev/mastermenuusergroup/modaladdusergroup.templ
@@ -5,8 +5,17 @@ import (
 	"cpone/component/customtextfield"
 )

-templ DialogNewBody(code string, name string) {
+templ DialogNewBody(code string, name string, id string, codeErrorMsg string, nameErrorMsg string) {
 	<div id="modalbdy">
+		@customtextfield.CustomTextFieldv2(
+			models.CustomTextFieldv2Prm{
+				Label:       "id user group",
+				Name:        "usergroupid",
+				Placeholder: "id user Group",
+				Type:        "hidden",
+				Value:       code,
+				ErrorMsg:    codeErrorMsg,
+			})
 		@customtextfield.CustomTextFieldv2(
 			models.CustomTextFieldv2Prm{
 				Label:       "Kode user group",
@@ -14,6 +23,7 @@ templ DialogNewBody(code string, name string) {
 				Placeholder: "Kode user Group",
 				Type:        "text",
 				Value:       code,
+				ErrorMsg:    codeErrorMsg,
 			})
 		@customtextfield.CustomTextFieldv2(
 			models.CustomTextFieldv2Prm{
@@ -22,6 +32,7 @@ templ DialogNewBody(code string, name string) {
 				Placeholder: "Nama User Group",
 				Type:        "text",
 				Value:       name,
+				ErrorMsg:    nameErrorMsg,
 			})
 	</div>
 }
--- a/views/dev/mastermenuusergroup/modaladdusergroup_templ.go
+++ b/views/dev/mastermenuusergroup/modaladdusergroup_templ.go
@@ -15,7 +15,7 @@ import (
 	"cpone/models"
 )

-func DialogNewBody(code string, name string) templ.Component {
+func DialogNewBody(code string, name string, id string, codeErrorMsg string, nameErrorMsg 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 {
@@ -32,6 +32,18 @@ func DialogNewBody(code string, name string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			models.CustomTextFieldv2Prm{
+				Label:       "id user group",
+				Name:        "usergroupid",
+				Placeholder: "id user Group",
+				Type:        "hidden",
+				Value:       code,
+				ErrorMsg:    codeErrorMsg,
+			}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
 			models.CustomTextFieldv2Prm{
 				Label:       "Kode user group",
@@ -39,6 +51,7 @@ func DialogNewBody(code string, name string) templ.Component {
 				Placeholder: "Kode user Group",
 				Type:        "text",
 				Value:       code,
+				ErrorMsg:    codeErrorMsg,
 			}).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -50,6 +63,7 @@ func DialogNewBody(code string, name string) templ.Component {
 				Placeholder: "Nama User Group",
 				Type:        "text",
 				Value:       name,
+				ErrorMsg:    nameErrorMsg,
 			}).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
--- a/views/dev/mastermenuusergrouptryandy/mastermenuusergroupv1.templ
+++ b/views/dev/mastermenuusergrouptryandy/mastermenuusergroupv1.templ
@@ -152,25 +152,6 @@ templ JSkuV1() {
 	</script>
 }

-templ PaginationV1() {
-	<div class="d-flex justify-content-between align-items-center flex-wrap">
-		<div class="d-flex flex-wrap py-2 mr-3">
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">23</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1">24</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">25</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">26</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">27</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">28</a>
-			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
-			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
-		</div>
-	</div>
-}
-
 templ CssMasterMenuUserGroupV1x() {
 	<link
 		rel="stylesheet"
--- a/views/dev/mastermenuusergrouptryandy/mastermenuusergroupv1_templ.go
+++ b/views/dev/mastermenuusergrouptryandy/mastermenuusergroupv1_templ.go
@@ -252,7 +252,7 @@ func JSkuV1() templ.Component {
 	})
 }

-func PaginationV1() templ.Component {
+func CssMasterMenuUserGroupV1x() 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 {
@@ -265,30 +265,6 @@ func PaginationV1() templ.Component {
 			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-between align-items-center flex-wrap\"><div class=\"d-flex flex-wrap py-2 mr-3\"><a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-double-arrow-back icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-arrow-back icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">...</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">23</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\">24</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">25</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">26</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">27</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">28</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">...</a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-arrow-next icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-double-arrow-next icon-xs\"></i></a></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 CssMasterMenuUserGroupV1x() templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    #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
@@ -308,9 +284,9 @@ func JsMasterMenuUserGroupV1x() templ.Component {
 			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_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !templ_7745c5c3_IsBuffer {
@@ -331,12 +307,12 @@ func ShowMasterMenuUserGroupV1x(title string, cmp templ.Component, css templ.Com
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var14 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var13 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 			if !templ_7745c5c3_IsBuffer {
 				templ_7745c5c3_Buffer = templ.GetBuffer()
@@ -351,7 +327,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_Var14), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var13), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/xtemplmulti/xtemplmulti.templ
+++ b/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)
+    }
+   
+}
--- a/views/dev/xtemplmulti/xtemplmulti_templ.go
+++ b/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
+	})
+}
--- a/views/public/toast/toastpublicv1.templ
+++ b/views/public/toast/toastpublicv1.templ
@@ -0,0 +1,100 @@
+package public_toast
+
+import (
+	"cpone/layout"
+)
+
+// kalau eror => bg nya danger
+// kalau sukses => bgnya success
+// kalau warning => bgnya warning
+
+func toastBackground(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBody(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIcon(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 PublicToastV1Show(title string, message string, typeToast string) {
+	<div
+		class="toast fade show"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+		id="notification-001"
+		hx-swap-oob="true"
+		hx-get="/hidetoastpublic"
+		hx-trigger="load delay:3s"
+		hx-target="this"
+		style="border-radius: 8px 8px 8px 8px;"
+	>
+		<div class={ "toast-header",  toastBackground(typeToast) , "text-white" }>
+			<span
+				class="iconify mr-2"
+				data-icon={ toastIcon(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",toastBody(typeToast) }>
+			{ message }
+		</div>
+	</div>
+}
+
+templ PublicToastV1Hide() {
+	<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>
+			<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 ShowToast(title string, cmp templ.Component, css templ.Component, js templ.Component,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) {
+	@layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
+		@cmp
+	}
+}
--- a/views/public/toast/toastpublicv1_templ.go
+++ b/views/public/toast/toastpublicv1_templ.go
@@ -0,0 +1,221 @@
+// 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 toastBackground(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBody(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIcon(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 PublicToastV1Show(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-001\" hx-swap-oob=\"true\" hx-get=\"/hidetoastpublic\" 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", toastBackground(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\toastpublicv1.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(toastIcon(typeToast))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\public\toast\toastpublicv1.templ`, Line: 56, Col: 36}
+		}
+		_, 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\toastpublicv1.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", toastBody(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\toastpublicv1.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\toastpublicv1.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 PublicToastV1Hide() 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-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 ShowToast(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_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var11 := 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_Var11), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
Author	SHA1	Message	Date
sindhu	6191f1ccaa	finalisasi view multi	2024-05-17 13:45:25 +07:00
sindhu	ee42ee0a82	toast v1 dev dan public	2024-05-17 11:25:12 +07:00
Sas Andy	c66e8f5720	refractor user group	2024-05-17 10:50:58 +07:00
Sas Andy	9ab0c7b6f4	revisi html toast	2024-05-16 09:03:55 +07:00
kaeltorus	7e2c6b5b2e	Merge branch 'mike'	2024-05-16 08:26:04 +07:00