step 3 : pembuatan custom text field password

component/customdropdown/customdropdown.templ

@@ -0,0 +1,61 @@
+package customdropdown;
+
+import "cpone/models"
+
+templ MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ inp.Name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ inp.ID }
+			hx-get={ inp.HxGet }
+			hx-target={ inp.HxTarget }
+			hx-indicator={ inp.HxIndicator }
+			hx-trigger={ inp.HxTrigger }
+			hx-include={ inp.HxInclude }
+		>
+			@listItem
+		</select>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
+
+templ MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ inp.Name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ inp.ID }
+		>
+			@listItem
+		</select>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
+
+templ MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ id }
+			hx-get={ hxGet }
+			hx-target={ hxTarget }
+			hx-indicator={ hxIndicator }
+			hx-trigger={ hxTrigger }
+			hx-include={ hxInclude }
+		>
+			@listItem
+		</select>
+	</div>
+}

component/customdropdown/customdropdown_templ.go

@@ -0,0 +1,343 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customdropdown
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/models"
+
+func MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 8, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 12, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 13, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 14, Col: 27}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 15, Col: 33}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 16, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 17, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 22, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 30, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 34, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 39, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 47, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(id)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 51, Col: 10}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 52, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 53, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 54, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 55, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 56, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

component/customtextfield/customtextfieldv2password.templ

@@ -0,0 +1,68 @@
+package customtextfield
+
+import "cpone/models"
+
+templ CustomTextFieldPasswordv2(inp models.CustomTextFieldv2Prm) {
+	<div class="form-group">
+		<label
+			if inp.Type == "hidden" {
+				class="text-black d-none"
+			} else {
+				class="text-black"
+			}
+			style="font-family: Poppins; font-weight: 600;"
+		>{ inp.Label } </label>
+		<div class="input-group">
+			<input
+				id={ inp.Name }
+				name={ inp.Name }
+				type={ inp.Type }
+				placeholder={ inp.Placeholder }
+				value={ inp.Value }
+				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-1 h-auto py-6 px-6 rounded-lg is-invalid"
+				}
+			/>
+			<div class="input-group-append">
+				<button class="btn btn-secondary" type="button" id={ "toggle-" + inp.Name }>
+					<i class="fa-solid fa-eye" id={ "icon-" + inp.Name }></i>
+				</button>
+			</div>
+		</div>
+		<div class="invalid-feedback text-danger mt-3 ml-2">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+	<script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const toggleButton = document.getElementById('toggle-' + inp.Name);
+            const inputField = document.getElementById(inp.Name);
+            const icon = document.getElementById('icon-' + inp.Name);
+
+            toggleButton.addEventListener('click', function () {
+                if (inputField.type === 'password') {
+                    inputField.type = 'text';
+                    icon.classList.remove('fa-eye');
+                    icon.classList.add('fa-eye-slash');
+                } else {
+                    inputField.type = 'password';
+                    icon.classList.remove('fa-eye-slash');
+                    icon.classList.add('fa-eye');
+                }
+            });
+
+            // Initial state setup based on fieldType
+            if (fieldType === 'password') {
+                inputField.type = 'password';
+                icon.classList.add('fa-eye');
+                icon.classList.remove('fa-eye-slash');
+            } else {
+                inputField.type = 'text';
+                icon.classList.add('fa-eye-slash');
+                icon.classList.remove('fa-eye');
+            }
+        });
+    </script>
+}

component/customtextfield/customtextfieldv2password_templ.go

@@ -0,0 +1,184 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtextfield
+
+//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 CustomTextFieldPasswordv2(inp models.CustomTextFieldv2Prm) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-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\customtextfieldv2password.templ`, Line: 14, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label><div class=\"input-group\"><input id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2password.templ`, Line: 17, Col: 17}
+		}
+		_, 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("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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\customtextfieldv2password.templ`, Line: 18, Col: 19}
+		}
+		_, 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("\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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\customtextfieldv2password.templ`, Line: 19, Col: 19}
+		}
+		_, 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("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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\customtextfieldv2password.templ`, Line: 20, Col: 33}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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\customtextfieldv2password.templ`, Line: 21, Col: 21}
+		}
+		_, 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
+		}
+		if inp.ErrorMsg == "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, 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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div class=\"input-group-append\"><button class=\"btn btn-secondary\" type=\"button\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("toggle-" + inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2password.templ`, Line: 29, Col: 77}
+		}
+		_, 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("\"><i class=\"fa-solid fa-eye\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs("icon-" + inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2password.templ`, Line: 30, 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("\"></i></button></div></div><div class=\"invalid-feedback text-danger mt-3 ml-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2password.templ`, Line: 35, Col: 17}
+		}
+		_, 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("</div></div><script>\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n            const toggleButton = document.getElementById('toggle-' + inp.Name);\r\n            const inputField = document.getElementById(inp.Name);\r\n            const icon = document.getElementById('icon-' + inp.Name);\r\n\r\n            toggleButton.addEventListener('click', function () {\r\n                if (inputField.type === 'password') {\r\n                    inputField.type = 'text';\r\n                    icon.classList.remove('fa-eye');\r\n                    icon.classList.add('fa-eye-slash');\r\n                } else {\r\n                    inputField.type = 'password';\r\n                    icon.classList.remove('fa-eye-slash');\r\n                    icon.classList.add('fa-eye');\r\n                }\r\n            });\r\n\r\n            // Initial state setup based on fieldType\r\n            if (fieldType === 'password') {\r\n                inputField.type = 'password';\r\n                icon.classList.add('fa-eye');\r\n                icon.classList.remove('fa-eye-slash');\r\n            } else {\r\n                inputField.type = 'text';\r\n                icon.classList.add('fa-eye-slash');\r\n                icon.classList.remove('fa-eye');\r\n            }\r\n        });\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

handlers/dev/mastermenuuser.handlers.go

@@ -0,0 +1,363 @@
+package dev_handlers
+
+import (
+	breadcrumbadmin "cpone/component/breadcrumbadmin"
+	"cpone/component/customdropdown"
+	customtextfieldsearch "cpone/component/customtextfieldsearch"
+	navbarmenu "cpone/component/navbar"
+	"cpone/component/pagination"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	"cpone/models"
+	globalservices "cpone/services"
+	"cpone/utils"
+	mastermenuuser "cpone/views/dev/mastermenuuser"
+	mastermenuusergroup "cpone/views/dev/mastermenuusergroup"
+	"fmt"
+	"strconv"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type MasterMenuUserService interface {
+	// GetUserGroup() ([]models.UserGroup, error)
+	// GetUserGroupByID(id string) (models.UserGroup, error)
+	// try
+	GetListMasterUserGroup() ([]models.UserGroupV1, error)
+	GetListBreadCrumb(title string) (models.BreadCrumbV1, error)
+	// AddUserGroup(code string, name string) (models.UserGroupV1, error)
+	// EditUserGroup(id string, code string, name string) (models.UserGroupV1, error)
+	// DeleteUserGroup(id string) (models.UserGroupV1, error)
+	GetListMasterUserV2(search string, usergroup string, currentPage int, rowPerPage int) ([]models.MasterUser, int, error)
+	// GetUserGroupByIDV1(id string) (models.UserGroupV1, error)
+	GetUserGroupData() ([]models.UserGroupV1, error)
+}
+
+func NewMasterMenuUserHandler(us MasterMenuUserService) *MasterMenuUserHandler {
+	return &MasterMenuUserHandler{
+		MasterMenuUserService: us,
+	}
+}
+
+type MasterMenuUserHandler struct {
+	MasterMenuUserService MasterMenuUserService
+}
+
+// PAGINATION
+func (lh *MasterMenuUserHandler) HandlerShowMasterMenuUserPaginationV1(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	search := c.QueryParam("search")
+	usergroup := c.QueryParam("usergroup")
+	pageparam := c.QueryParam("page")
+	tableID := c.QueryParam("tableID")
+	searchID := c.QueryParam("searchID")
+
+	dropdownID := c.QueryParam("dropdownID")
+	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	// dialogEditID := c.QueryParam("dialogEditID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+	// dialogDeleteID := c.QueryParam("dialogDeleteID")
+	page, err := strconv.Atoi(pageparam)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM",
+			zap.Any("page", page),
+			zap.Any("error ", err),
+		)
+		return err
+	}
+
+	dataUserGroup, totalpage, err := lh.MasterMenuUserService.GetListMasterUserV2(search, usergroup, page, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+
+	contentUserGroupComponent := mastermenuuser.TableUser(
+		dataUserGroup, tableID, "/dev/usergroupshoweditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/usergroupshowdeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogDeleteBodyID, #dialogDeleteID, #dialogEditBodyID, #dialogEditID")
+
+	userGroupPaginationComponent := pagination.PaginationV2(totalpage,
+		page,
+		"/dev/userv1pagination",
+		paginationID,
+		// "#tableID, #searchID, #"+searchID+", #dropdownID, #"+dropdownID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID, [name='search'],  [name='usergroup']",
+		"#tableID, #searchID, #"+searchID+", #dropdownID, #"+dropdownID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID, [name='search'],  [name='usergroup']",
+		"#"+paginationID, "outerHTML", "", "")
+
+	retval := []templ.Component{contentUserGroupComponent, userGroupPaginationComponent}
+
+	return utils.ViewMulti(c, retval)
+}
+
+// LISTING FUNCTION INITIAL
+func (lh *MasterMenuUserHandler) HandlerShowMasterMenuUserV1(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	//get sidebarmenu
+
+	dataMenu, err := globalservices.GetMenu()
+	fmt.Println(dataMenu)
+	fmt.Println(err)
+	if err != nil {
+		fmt.Println(dataMenu)
+		return err
+	}
+
+	//get user login
+	dataUser, err := globalservices.GetUserLogin()
+	fmt.Println(dataUser)
+	fmt.Println(err)
+	if err != nil {
+		fmt.Println(dataUser)
+		return err
+	}
+
+	// dropdownUserGroupInitial :=
+
+	dataUserMasterInitialSelected, err := lh.MasterMenuUserService.GetUserGroupData()
+	fmt.Println(dataUserMasterInitialSelected)
+	fmt.Println(err)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR LIST USER MASTER Selected DEV",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserMasterInitialSelected)
+		return err
+	}
+
+	var initialSelectedUserGroup string = "0"
+	if len(dataUserMasterInitialSelected) > 0 {
+		initialSelectedUserGroup = strconv.Itoa(dataUserMasterInitialSelected[0].M_UserGroupID)
+	}
+
+	dataUserGroup, totalpage, err := lh.MasterMenuUserService.GetListMasterUserV2("", initialSelectedUserGroup, 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+
+	// si := mastermenuusergroup.ListMasterUserGroupInitial(dataUserGroup)
+
+	defer logger.Sync()
+	logger.Info("LOAD USER GROUP DEV",
+		zap.Any("data", dataUserGroup),
+	)
+
+	tableID := utils.GenerateRandomID("tablebody")
+	paginationID := utils.GenerateRandomID("paginationid")
+	searchID := utils.GenerateRandomID("searchid")
+	dropdownID := utils.GenerateRandomID("dropdownid")
+	dialogAddID := utils.GenerateRandomID("dialogaddID")
+	dialogAddBodyID := utils.GenerateRandomID("dialogaddbodyID")
+	dialogEditID := utils.GenerateRandomID("dialogEditID")
+	dialogEditBodyID := utils.GenerateRandomID("dialogEditbodyID")
+	dialogdeleteID := utils.GenerateRandomID("dialogdeleteID")
+	dialogdeleteBodyID := utils.GenerateRandomID("dialogdeletebodyID")
+
+	paramTitleBreadcrumbConvert := "Master User"
+
+	dataBreadCrumb, err := lh.MasterMenuUserService.GetListBreadCrumb(paramTitleBreadcrumbConvert)
+	fmt.Println(dataBreadCrumb)
+	fmt.Println(err)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataBreadCrumb)
+		return err
+	}
+
+	defer logger.Sync()
+	logger.Info("LOAD BREADCRUMB DEV",
+		zap.Any("data", dataBreadCrumb),
+	)
+
+	// navbar menu
+	navbarmenuComponent := navbarmenu.NavbarMenu(dataMenu)
+
+	// navbar user
+	navbaruserComponent := navbarmenu.Navbar(dataUser)
+
+	// sidebar
+	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)
+
+	// list item
+	dataUserGroupAll, err := lh.MasterMenuUserService.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
+	}
+	//Component modal add usergroup
+
+	modaladdcomponent := mastermenuuser.EmptyDiv1()
+
+	//Component modal edit usergroup
+	modalEditcomponent := mastermenuuser.EmptyDiv1()
+
+	//Component modal delete usergroup
+	modalDeletecomponent := mastermenuuser.EmptyDiv1()
+
+	//table listing user group component
+	contentUserGroupComponent := mastermenuuser.TableUser(
+		dataUserGroup, tableID,
+		"/dev/usergroupshoweditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/usergroupshowdeleteform",
+		"#"+dialogdeleteBodyID,
+		"outerHTML",
+		"#dialogDeleteBodyID, #dialogDeleteID, #dialogEditBodyID, #dialogEditID")
+
+	//filter user search component
+	// customtextfieldsearch.MainCustomTextFieldSearchV1("#"+contentIDSearch, "q", "Cari Nama Staff / Email", "text", "/dev/searchuserv1?"+link, "input changed delay:500ms, search", "#"+contentID, "#indicator", "", contentIDHtmxExtension, "[name='usergroup']")
+
+	userFilterComp := customtextfieldsearch.MainCustomTextFieldSearchV2(
+		searchID,
+		"search",
+		"Cari Nama Staff / Email",
+		"text",
+		"/dev/searchuserv1",
+		"input changed delay:500ms, search",
+		"#"+paginationID, "", "", "outerHTML",
+		"#tableID, #paginationID, #searchID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID, #dropdownID, [name='usergroup']")
+
+	// filter user group dropdown
+	listItemComponent := mastermenuuser.ItemDropdown(dataUserGroupAll)
+	dropdownUserGroupFilterComp := customdropdown.MainCustomDropdownV1(
+		"usergroup",
+		dropdownID,
+		"#"+paginationID,
+		"/dev/searchuserv1",
+		"",
+		"change from:select[name='usergroup'], input changed from:input[name='search']",
+		"#tableID, #paginationID, #searchID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID, #dropdownID, [name='search']",
+		listItemComponent,
+	)
+
+	// pagination usergroup component
+	userGroupPaginationComponent := pagination.PaginationV2(
+		totalpage,
+		1,
+		"/dev/userv1pagination",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #dropdownID, #"+dropdownID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID, [name='search'],  [name='usergroup']",
+		"#"+paginationID,
+		"outerHTML", "", "",
+	)
+
+	//Show user group screen
+	si := mastermenuuser.ShowMasterMenuUserV1x(
+		"Master Menu",
+		mastermenuuser.ContentMasterMenuUserV1(
+			tableID,
+			paginationID,
+			searchID,
+			dropdownID,
+			dialogAddID,
+			dialogAddBodyID,
+			dialogEditID,
+			dialogEditBodyID,
+			dialogdeleteID,
+			dialogdeleteBodyID,
+			breadcrumbadmin.MainBreadcrumbAdminV1(dataBreadCrumb),
+			contentUserGroupComponent,
+			userFilterComp,
+			dropdownUserGroupFilterComp,
+			userGroupPaginationComponent,
+			modaladdcomponent,
+			modalEditcomponent,
+			modalDeletecomponent,
+		),
+
+		mastermenuusergroup.CssMasterMenuUserGroupV1x(),
+		mastermenuusergroup.JSkuV1(),
+		navbarmenuComponent,
+		navbaruserComponent,
+		sidebaruserprofileComponent,
+	)
+
+	return utils.View(c, si)
+}
+
+// SEARCH PROSES
+func (lh *MasterMenuUserHandler) HandlerShowMasterMenuUserSearchV1(c echo.Context) error {
+	search := c.QueryParam("search")
+	usergroup := c.QueryParam("usergroup")
+	searchID := c.QueryParam("searchID")
+	dropdownID := c.QueryParam("dropdownID")
+	tableID := c.QueryParam("tableID")
+	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	// dialogEditID := c.QueryParam("dialogEditID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+	// dialogDeleteID := c.QueryParam("dialogDeleteID")
+
+	logger, _ := zap.NewProduction()
+
+	dataUserGroup, totalpage, err := lh.MasterMenuUserService.GetListMasterUserV2(search, usergroup, 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+
+	// totalPages := int(math.Ceil(float64(len(dataUserGroupFiltered)) / float64(rowPerPage)))
+
+	contentUserGroupComponent := mastermenuuser.TableUser(
+		dataUserGroup, tableID, "/dev/usergroupshoweditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/usergroupshowdeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogDeleteBodyID, #dialogDeleteID, #dialogEditBodyID, #dialogEditID")
+
+	userGroupPaginationComponent := pagination.PaginationV2(totalpage,
+		1,
+		"/dev/userv1pagination",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #dropdownID, #"+dropdownID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID, [name='search'],  [name='usergroup']",
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"",
+	)
+
+	// swapTable :=
+	// 	mastermenuusergroup.SwapTableUserGroup(userGroupPaginationComponent, contentUserGroupComponent)
+	retval := []templ.Component{contentUserGroupComponent, userGroupPaginationComponent}
+
+	return utils.ViewMulti(c, retval)
+	// return utils.View(c, si)
+}

handlers/routes.go

@@ -231,4 +231,12 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 
 	// clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
 	// clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
+
+	// dev master user
+	devUSServices := dev_services.NewServicesMasterMenuUser(appStore)
+	devUShandlers := dev_handlers.NewMasterMenuUserHandler(devUSServices)
+	dev.GET("/userv1", devUShandlers.HandlerShowMasterMenuUserV1)
+	dev.GET("/searchuserv1", devUShandlers.HandlerShowMasterMenuUserSearchV1)
+	dev.GET("/userv1pagination", devUShandlers.HandlerShowMasterMenuUserPaginationV1)
+	// dev.GET("/breadcrumbv1", devUShandlers)
 }

models/customdropdown.models.go

@@ -0,0 +1,18 @@
+package models
+
+// name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string,
+
+type CustomDropdownv1Prm struct {
+	HxTarget    string `default:"hxTarget"`
+	HxGet       string `default:"hxGet"`
+	HxIndicator string `default:"hxIndicator"`
+	HxInclude   string `default:"hxInclude"`
+	HxTrigger   string `default:"hxTrigger"`
+	Label       string `default:"Label"`
+	Name        string `default:"name"`
+	// Placeholder string `default:"Placeholder"`
+	// Type        string `default:"text"`
+	// Value       string `default:""`
+	ErrorMsg string `default:""`
+	ID       string
+}

models/masteruser.models.go

@@ -0,0 +1,58 @@
+package models
+
+import "github.com/a-h/templ"
+
+type MasterUser struct {
+	Nomor                   string `db:"nomor"`
+	M_UserID                int    `db:"M_UserID"`
+	M_UserEmail             string `db:"M_UserEmail"`
+	M_UserFullName          string `db:"M_UserFullName"`
+	M_UserLastAccess        string `db:"M_UserLastAccess"`
+	M_UserIsLoggedIn        string `db:"M_UserIsLoggedIn"`
+	M_UserActiveToken       string `db:"M_UserActiveToken"`
+	M_UserExpiredToken      string `db:"M_UserExpiredToken"`
+	M_UserIsActive          string `db:"M_UserIsActive"`
+	M_UserCreated           string `db:"M_UserCreated"`
+	M_UserCreatedUserID     int    `db:"M_UserCreatedUserID"`
+	M_UserLastUpdated       string `db:"M_UserLastUpdated"`
+	M_UserLastUpdatedUserID int    `db:"M_UserLastUpdatedUserID"`
+	M_UserDeletedUserID     int    `db:"M_UserDeletedUserID"`
+	M_UserDeleted           string `db:"M_UserDeleted"`
+	M_UserM_UserGroupID     int    `db:"M_UserM_UserGroupID"`
+	M_UserGroupID           int    `db:"M_UserGroupID"`
+	M_UserGroupCode         string `db:"M_UserGroupCode"`
+	M_UserGroupName         string `db:"M_UserGroupName"`
+}
+
+// form component
+type UserFormComponent struct {
+	IDComponent         string
+	Link                string
+	HxTarget            string
+	HxSwap              string
+	HxInclude           string
+	ModalID             string
+	ModalTitle          string
+	InputEmail          CustomTextFieldv2Prm
+	InputPassword       CustomTextFieldv2Prm
+	InputNamaStaff      CustomTextFieldv2Prm
+	InputID             CustomTextFieldv2Prm
+	DropdownUserGroup   CustomDropdownv1Prm
+	DropdownReportGroup CustomDropdownv1Prm
+	DialogBody          templ.Component
+	DialogAction        templ.Component
+	ButtonCLose         templ.Component
+}
+
+type UserFormConfirmation struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}

services/dev/mastermenuuser.services.go

@@ -0,0 +1,983 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	"fmt"
+	"math"
+	"strings"
+
+	dbx "cpone/package/database"
+
+	"go.uber.org/zap"
+)
+
+func NewServicesMasterMenuUser(uStore db.AppStore) *ServicesMasterMenuUser {
+
+	return &ServicesMasterMenuUser{
+
+		MasterMenuUserStore: uStore,
+	}
+}
+
+type ServicesMasterMenuUser struct {
+	MasterMenuUserStore db.AppStore
+}
+
+func (su *ServicesMasterMenuUser) GetMasterMenus() ([]MasterMenu, error) {
+
+	// dummyBreadcrumb := []Breadcrumb{
+	// 	{
+	// 		Name: "Dashboard",
+	// 		Url:  "/client/dashboard",
+	// 	},
+	// 	{
+	// 		Name: "Front Office",
+	// 		Url:  "/client/usermanagement",
+	// 	},
+	// }
+
+	dummyMenu := []MasterMenu{
+		// 1. Dashboard
+		{
+			ID:             "1",
+			ParentMenuID:   "0",
+			ParentMenuName: "Dashboard",
+			ParentUrl:      "/client/md/dashboard",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "1",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Master User",
+					ChildrenMenuURL:  "/client/md/user",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 2. Front Office
+		{
+			ID:             "2",
+			ParentMenuID:   "1",
+			ParentMenuName: "Front Office",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "1",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Registrasi",
+					ChildrenMenuURL:  "/fo/registrasi",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 3. Station
+		{
+			ID:             "3",
+			ParentMenuID:   "2",
+			ParentMenuName: "Station",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "2",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Sample Station",
+					ChildrenMenuURL:  "/station/sample",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 4. Management MCU
+		{
+			ID:             "4",
+			ParentMenuID:   "3",
+			ParentMenuName: "Management MCU",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				{
+					ChildrenParentID: "3",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Setup MCU",
+					ChildrenMenuURL:  "/mcu/setup",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+				{
+					ChildrenParentID: "3",
+					ChildrenMenuID:   "2",
+					ChildrenMenuName: "Pre-Registrasi",
+					ChildrenMenuURL:  "/mcu/preregister",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+
+		// 5. Master Data
+		{
+			ID:             "5",
+			ParentMenuID:   "4",
+			ParentMenuName: "Master Data",
+			ParentUrl:      "#",
+			ParentIcon:     "",
+			Children: []ChildrenMenu{
+				// * Master User
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "1",
+					ChildrenMenuName: "Master User",
+					ChildrenMenuURL:  "/client/md/user",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Master User Group
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "2",
+					ChildrenMenuName: "Master User Group",
+					ChildrenMenuURL:  "/client/md/usergroup",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Master Corporate
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "3",
+					ChildrenMenuName: "Corporate",
+					ChildrenMenuURL:  "/client/md/corp",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Test
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "4",
+					ChildrenMenuName: "Test",
+					ChildrenMenuURL:  "/client/md/test",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Bahan
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "5",
+					ChildrenMenuName: "Bahan",
+					ChildrenMenuURL:  "/client/md/bahan",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Sample Type
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "6",
+					ChildrenMenuName: "Sample Type",
+					ChildrenMenuURL:  "/client/sample/type",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Sample Station
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "7",
+					ChildrenMenuName: "Sample Station",
+					ChildrenMenuURL:  "/station/sample",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Result Non Lab
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "8",
+					ChildrenMenuName: "Result Non Lab",
+					ChildrenMenuURL:  "/client/md/resultnonlab",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Template Fisik
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "9",
+					ChildrenMenuName: "Template Fisik",
+					ChildrenMenuURL:  "/client/md/template-fisik",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Pasien
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "10",
+					ChildrenMenuName: "Pasien",
+					ChildrenMenuURL:  "/client/md/pasien",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Dokter
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "11",
+					ChildrenMenuName: "Dokter",
+					ChildrenMenuURL:  "/client/md/dokter",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Paket
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "12",
+					ChildrenMenuName: "Paket",
+					ChildrenMenuURL:  "/client/md/paket",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+
+				// * Harga Single
+				{
+					ChildrenParentID: "4",
+					ChildrenMenuID:   "13",
+					ChildrenMenuName: "Harga Single",
+					ChildrenMenuURL:  "/client/md/hargasingle",
+					// Breadcrumb: []Breadcrumb{
+					// 	{
+					// 		IDBreadcrumb: "1",
+					// 		Title:        "Dashboard",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "2",
+					// 		Title:        "Master",
+					// 		IsActive:     "N",
+					// 	},
+					// 	{
+					// 		IDBreadcrumb: "3",
+					// 		Title:        "User Group",
+					// 		IsActive:     "Y",
+					// 	},
+					// },
+				},
+			},
+		},
+	}
+
+	return dummyMenu, nil
+}
+
+func (ug *ServicesMasterMenuUser) GetUserGroup() ([]models.UserGroup, error) {
+	data := []models.UserGroup{
+		{UserGroupID: 1, UserGroupKode: "A", UserGroupName: "UG1"},
+		{UserGroupID: 2, UserGroupKode: "B", UserGroupName: "UG2"},
+		{UserGroupID: 3, UserGroupKode: "C", UserGroupName: "UG3"},
+	}
+	return data, nil
+}
+
+func (su *ServicesMasterMenuUser) GetListBreadCrumb(title string) (models.BreadCrumbV1, error) {
+	var ret models.BreadCrumbV1
+
+	dummyBreadcrumb := []models.BreadCrumbV1{
+		{
+			Title: "Master User Group",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User Group",
+					Url:  "",
+				},
+			},
+		},
+
+		{
+			Title: "Master User",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User",
+					Url:  "",
+				},
+			},
+		},
+	}
+
+	for _, breadcrumb := range dummyBreadcrumb {
+		// if utils.Contains(breadcrumb.Title, title) {
+		// 	ret = breadcrumb
+		// 	return ret, nil
+		// }
+		if breadcrumb.Title == title {
+			ret = breadcrumb
+			return ret, nil
+		}
+	}
+
+	return ret, nil
+}
+
+// try
+func (su *ServicesMasterMenuUser) GetListMasterUserGroup() ([]models.UserGroupV1, error) {
+	var userGroupList []models.UserGroupV1
+
+	query := `
+		SELECT
+			ROW_NUMBER() OVER () AS nomor,
+			M_UserGroupID,
+			M_UserGroupCode,
+			M_UserGroupName,
+			M_UserGroupCreated,
+			M_UserGroupLastUpdated,
+			M_UserGroupIsActive
+		FROM m_usergroup
+		WHERE M_UserGroupIsActive = 'Y'
+		order by M_UserGroupID ASC
+	`
+
+	if err := dbx.Handlex.Select(&userGroupList, query); err != nil {
+		return nil, fmt.Errorf("error querying database: %v", err)
+	}
+
+	return userGroupList, nil
+}
+
+func (su *ServicesMasterMenuUser) GetListMasterUser(searchDropdown string) ([]models.MasterUser, error) {
+	var userList []models.MasterUser
+
+	query := `
+		SELECT 
+			ROW_NUMBER() OVER () AS nomor,
+			IFNULL(M_UserEmail, '') AS M_UserEmail,
+			IFNULL(M_UserFullName, '') AS M_UserFullName,
+			IFNULL(M_UserLastAccess, '') AS M_UserLastAccess,
+			IFNULL(M_UserIsLoggedIn, '') AS M_UserIsLoggedIn,
+			IFNULL(M_UserActiveToken, '') AS M_UserActiveToken,
+			IFNULL(M_UserExpiredToken, '') AS M_UserExpiredToken,
+			IFNULL(M_UserIsActive, '') AS M_UserIsActive,
+			IFNULL(M_UserCreated, '') AS M_UserCreated,
+			IFNULL(M_UserCreatedUserID, '') AS M_UserCreatedUserID,
+			IFNULL(M_UserLastUpdated, '') AS M_UserLastUpdated,
+			IFNULL(M_UserLastUpdatedUserID, '') AS M_UserLastUpdatedUserID,
+			IFNULL(M_UserDeletedUserID, '') AS M_UserDeletedUserID,
+			IFNULL(M_UserDeleted, '') AS M_UserDeleted,
+			IFNULL(M_UserGroupCode, '') AS M_UserGroupCode,
+			IFNULL(M_UserGroupName, '') AS M_UserGroupName,
+			IFNULL(M_UserM_UserGroupID, '') AS M_UserM_UserGroupID,
+			IFNULL(M_UserGroupID, '') AS M_UserGroupID
+		FROM 
+			m_user 
+		JOIN m_usergroup
+		ON M_UserM_UserGroupID = M_UserGroupID
+		AND M_UserIsActive = 'Y'
+		AND M_UserGroupIsActive = 'Y'
+	`
+
+	if searchDropdown != "0" && searchDropdown != "" {
+		query += fmt.Sprintf("AND M_UserGroupID = '%s'", searchDropdown)
+	}
+
+	query += " ORDER BY M_UserID  ASC"
+
+	if err := dbx.Handlex.Select(&userList, query); err != nil {
+		return nil, fmt.Errorf("error querying database: %v", err)
+	}
+
+	return userList, nil
+}
+
+func (su *ServicesMasterMenuUser) GetListMasterUserFilteredBySearch(search string, searchDropdown string) ([]models.MasterUser, error) {
+	var userList []models.MasterUser
+
+	query := `
+		SELECT 
+			ROW_NUMBER() OVER () AS nomor,
+			M_UserID,
+			IFNULL(M_UserEmail, '') AS M_UserEmail,
+			IFNULL(M_UserFullName, '') AS M_UserFullName,
+			IFNULL(M_UserLastAccess, '') AS M_UserLastAccess,
+			IFNULL(M_UserIsLoggedIn, '') AS M_UserIsLoggedIn,
+			IFNULL(M_UserActiveToken, '') AS M_UserActiveToken,
+			IFNULL(M_UserExpiredToken, '') AS M_UserExpiredToken,
+			IFNULL(M_UserIsActive, '') AS M_UserIsActive,
+			IFNULL(M_UserCreated, '') AS M_UserCreated,
+			IFNULL(M_UserCreatedUserID, '') AS M_UserCreatedUserID,
+			IFNULL(M_UserLastUpdated, '') AS M_UserLastUpdated,
+			IFNULL(M_UserLastUpdatedUserID, '') AS M_UserLastUpdatedUserID,
+			IFNULL(M_UserDeletedUserID, '') AS M_UserDeletedUserID,
+			IFNULL(M_UserDeleted, '') AS M_UserDeleted,
+			IFNULL(M_UserGroupCode, '') AS M_UserGroupCode,
+			IFNULL(M_UserGroupName, '') AS M_UserGroupName,
+			IFNULL(M_UserM_UserGroupID, '') AS M_UserM_UserGroupID,
+			IFNULL(M_UserGroupID, '') AS M_UserGroupID
+		FROM 
+			m_user 
+		JOIN m_usergroup
+		ON M_UserM_UserGroupID = M_UserGroupID
+		AND M_UserIsActive = 'Y'
+		AND M_UserGroupIsActive = 'Y'
+	`
+
+	// check jika parameter search nya tidak kosong
+	if search != "" || (searchDropdown != "0" && searchDropdown != "") {
+		query += fmt.Sprintf(" AND (M_UserFullName LIKE '%%%s%%' OR M_UserEmail LIKE '%%%s%%')", search, search)
+	}
+
+	if searchDropdown != "0" && searchDropdown != "" {
+		query += fmt.Sprintf(" AND M_UserGroupID = '%s' ", searchDropdown)
+	} else {
+		search = "%%"
+	}
+
+	query += " ORDER BY M_UserID  ASC"
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+	logger.Info("QUERY SEARCH ONlY FOR COUNT TOTAL PAGES PAGINATION",
+		zap.String("query search", query),
+	)
+
+	if err := dbx.Handlex.Select(&userList, query); err != nil {
+		return nil, fmt.Errorf("error querying database: %v", err)
+	}
+
+	return userList, nil
+}
+
+func (su *ServicesMasterMenuUser) GetListMasterUserPagination(search string, searchDropdown string, currentPage int, rowPerPage int) ([]models.MasterUser, error) {
+	var userList []models.MasterUser
+
+	query := `
+		SELECT 
+			ROW_NUMBER() OVER () AS nomor,
+			M_UserID,
+			IFNULL(M_UserEmail, '') AS M_UserEmail,
+			IFNULL(M_UserFullName, '') AS M_UserFullName,
+			IFNULL(M_UserLastAccess, '') AS M_UserLastAccess,
+			IFNULL(M_UserIsLoggedIn, '') AS M_UserIsLoggedIn,
+			IFNULL(M_UserActiveToken, '') AS M_UserActiveToken,
+			IFNULL(M_UserExpiredToken, '') AS M_UserExpiredToken,
+			IFNULL(M_UserIsActive, '') AS M_UserIsActive,
+			IFNULL(M_UserCreated, '') AS M_UserCreated,
+			IFNULL(M_UserCreatedUserID, '') AS M_UserCreatedUserID,
+			IFNULL(M_UserLastUpdated, '') AS M_UserLastUpdated,
+			IFNULL(M_UserLastUpdatedUserID, '') AS M_UserLastUpdatedUserID,
+			IFNULL(M_UserDeletedUserID, '') AS M_UserDeletedUserID,
+			IFNULL(M_UserDeleted, '') AS M_UserDeleted,
+			IFNULL(M_UserGroupCode, '') AS M_UserGroupCode,
+			IFNULL(M_UserGroupName, '') AS M_UserGroupName,
+			IFNULL(M_UserM_UserGroupID, '') AS M_UserM_UserGroupID,
+			IFNULL(M_UserGroupID, '') AS M_UserGroupID
+		FROM 
+			m_user 
+		JOIN m_usergroup
+		ON M_UserM_UserGroupID = M_UserGroupID
+		AND M_UserIsActive = 'Y'
+		AND M_UserGroupIsActive = 'Y'
+	`
+
+	// rmaxPerPage := 2
+	// rpage := (currentPage - 1) * rmaxPerPage
+
+	offset := (currentPage - 1) * rowPerPage
+	// offset := currentPage
+
+	if search != "" {
+		query += fmt.Sprintf(" AND (M_UserEmail LIKE '%%%s%%' OR M_UserFullName LIKE '%%%s%%')", search, search)
+	}
+	if searchDropdown != "0" && searchDropdown != "" {
+		query += fmt.Sprintf(" AND M_UserGroupID = '%s' ", searchDropdown)
+	} else {
+		search = "%%"
+	}
+
+	query += fmt.Sprintf(" ORDER BY M_UserID ASC LIMIT %d OFFSET %d", rowPerPage, offset)
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+	logger.Info("QUERY SEARCH WITH PAGINATION",
+		zap.String("query search", query),
+	)
+
+	if err := dbx.Handlex.Select(&userList, query); err != nil {
+		return nil, fmt.Errorf("error querying database: %v", err)
+	}
+
+	return userList, nil
+}
+
+func (su *ServicesMasterMenuUser) GetListMasterUserGroupSearch() ([]models.UserGroupV1, error) {
+	var userGroupList []models.UserGroupV1
+
+	query := `
+		SELECT
+			ROW_NUMBER() OVER () AS nomor,
+			M_UserGroupID,
+			M_UserGroupCode,
+			M_UserGroupName,
+			M_UserGroupCreated,
+			M_UserGroupLastUpdated,
+			M_UserGroupIsActive
+		FROM m_usergroup
+		WHERE M_UserGroupIsActive = 'Y'
+	`
+	query += " order by M_UserGroupID ASC"
+
+	if err := dbx.Handlex.Select(&userGroupList, query); err != nil {
+		return nil, fmt.Errorf("error querying database: %v", err)
+	}
+
+	return userGroupList, nil
+}
+
+// versi 2
+func (su *ServicesMasterMenuUser) GetUserGroupData() ([]models.UserGroupV1, error) {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	var userList []models.UserGroupV1
+
+	queryList := `
+	SELECT *
+		FROM m_usergroup
+		WHERE M_UserGroupIsActive = 'Y'
+	order by M_UserGroupID ASC
+	LIMIT 0, 1
+	`
+
+	logger.Info("QUERY SEARCH INITIAL DATA USERGROUP",
+		zap.String("query search", queryList),
+	)
+
+	if err := dbx.Handlex.Select(&userList, queryList); err != nil {
+		return nil, fmt.Errorf("error querying database initial USERGROUP: %v", err)
+	}
+
+	return userList, nil
+}
+
+func (su *ServicesMasterMenuUser) GetListMasterUserV2(search string, usergroup string, currentPage int, rowPerPage int) ([]models.MasterUser, int, error) {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	var userList []models.MasterUser
+	var totalData int
+	offset := (currentPage - 1) * rowPerPage
+	var searchUserGroup string = ""
+	if usergroup != "0" {
+		searchUserGroup = usergroup
+	}
+
+	prm := "%" + strings.TrimSpace(search) + "%"
+
+	// search dropdown dan inputan search
+	if usergroup != "0" {
+		querytotal := `
+		SELECT COUNT(*) 
+		FROM m_user
+		JOIN m_usergroup
+			ON M_UserM_UserGroupID = M_UserGroupID
+			AND M_UserIsActive = 'Y'
+			AND M_UserGroupIsActive = 'Y'
+			AND (M_UserFullName LIKE ? OR M_UserEmail LIKE ?) 
+			AND M_UserGroupID = ?
+		JOIN r_reportgroup
+			ON M_UserR_ReportGroupID = R_ReportGroupID
+			AND R_ReportGroupIsActive = 'Y'
+	`
+
+		logger.Info("QUERY SEARCH INITIAL TOTAL COUNT",
+			zap.String("query search", querytotal),
+		)
+
+		if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm, searchUserGroup); err != nil {
+			return nil, 0, fmt.Errorf("error querying database: %v", err)
+		}
+		query := `
+		SELECT
+			ROW_NUMBER() OVER () AS nomor,
+			M_UserID,
+			IFNULL(M_UserEmail, '') AS M_UserEmail,
+			IFNULL(M_UserFullName, '') AS M_UserFullName,
+			IFNULL(M_UserLastAccess, '') AS M_UserLastAccess,
+			IFNULL(M_UserIsLoggedIn, '') AS M_UserIsLoggedIn,
+			IFNULL(M_UserActiveToken, '') AS M_UserActiveToken,
+			IFNULL(M_UserExpiredToken, '') AS M_UserExpiredToken,
+			IFNULL(M_UserIsActive, '') AS M_UserIsActive,
+			IFNULL(M_UserCreated, '') AS M_UserCreated,
+			IFNULL(M_UserCreatedUserID, '') AS M_UserCreatedUserID,
+			IFNULL(M_UserLastUpdated, '') AS M_UserLastUpdated,
+			IFNULL(M_UserLastUpdatedUserID, '') AS M_UserLastUpdatedUserID,
+			IFNULL(M_UserDeletedUserID, '') AS M_UserDeletedUserID,
+			IFNULL(M_UserDeleted, '') AS M_UserDeleted,
+			IFNULL(M_UserGroupCode, '') AS M_UserGroupCode,
+			IFNULL(M_UserGroupName, '') AS M_UserGroupName,
+			IFNULL(M_UserM_UserGroupID, '') AS M_UserM_UserGroupID,
+			IFNULL(M_UserGroupID, '') AS M_UserGroupID,
+			M_UserIsActive
+		FROM m_user
+		JOIN m_usergroup
+			ON M_UserM_UserGroupID = M_UserGroupID
+			AND M_UserIsActive = 'Y'
+			AND M_UserGroupIsActive = 'Y'
+			AND (M_UserFullName LIKE ? OR M_UserEmail LIKE ?) 
+			AND M_UserGroupID = ?
+		JOIN r_reportgroup
+			ON M_UserR_ReportGroupID = R_ReportGroupID
+			AND R_ReportGroupIsActive = 'Y'
+		order by M_UserID ASC
+		LIMIT ? OFFSET ?
+	`
+
+		logger.Info("QUERY SEARCH INITIAL",
+			zap.String("query search", query),
+		)
+
+		if err := dbx.Handlex.Select(&userList, query, prm, prm, searchUserGroup, rowPerPage, offset); err != nil {
+			return nil, 0, fmt.Errorf("error querying database: %v", err)
+		}
+	} else {
+		// search hanya inputan search
+		querytotal := `
+		SELECT COUNT(*) 
+		FROM m_user
+		JOIN m_usergroup
+			ON M_UserM_UserGroupID = M_UserGroupID
+			AND M_UserIsActive = 'Y'
+			AND M_UserGroupIsActive = 'Y'
+			AND (M_UserFullName LIKE ? OR M_UserEmail LIKE ?) 
+		JOIN r_reportgroup
+			ON M_UserR_ReportGroupID = R_ReportGroupID
+			AND R_ReportGroupIsActive = 'Y'
+	`
+
+		logger.Info("QUERY SEARCH INITIAL TOTAL COUNT",
+			zap.String("query search", querytotal),
+		)
+
+		if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm); err != nil {
+			return nil, 0, fmt.Errorf("error querying database: %v", err)
+		}
+		query := `
+		SELECT
+			ROW_NUMBER() OVER () AS nomor,
+			M_UserID,
+			IFNULL(M_UserEmail, '') AS M_UserEmail,
+			IFNULL(M_UserFullName, '') AS M_UserFullName,
+			IFNULL(M_UserLastAccess, '') AS M_UserLastAccess,
+			IFNULL(M_UserIsLoggedIn, '') AS M_UserIsLoggedIn,
+			IFNULL(M_UserActiveToken, '') AS M_UserActiveToken,
+			IFNULL(M_UserExpiredToken, '') AS M_UserExpiredToken,
+			IFNULL(M_UserIsActive, '') AS M_UserIsActive,
+			IFNULL(M_UserCreated, '') AS M_UserCreated,
+			IFNULL(M_UserCreatedUserID, '') AS M_UserCreatedUserID,
+			IFNULL(M_UserLastUpdated, '') AS M_UserLastUpdated,
+			IFNULL(M_UserLastUpdatedUserID, '') AS M_UserLastUpdatedUserID,
+			IFNULL(M_UserDeletedUserID, '') AS M_UserDeletedUserID,
+			IFNULL(M_UserDeleted, '') AS M_UserDeleted,
+			IFNULL(M_UserGroupCode, '') AS M_UserGroupCode,
+			IFNULL(M_UserGroupName, '') AS M_UserGroupName,
+			IFNULL(M_UserM_UserGroupID, '') AS M_UserM_UserGroupID,
+			IFNULL(M_UserGroupID, '') AS M_UserGroupID,
+			M_UserIsActive
+		FROM m_user
+		JOIN m_usergroup
+			ON M_UserM_UserGroupID = M_UserGroupID
+			AND M_UserIsActive = 'Y'
+			AND M_UserGroupIsActive = 'Y'
+			AND (M_UserFullName LIKE ? OR M_UserEmail LIKE ?) 
+		JOIN r_reportgroup
+			ON M_UserR_ReportGroupID = R_ReportGroupID
+			AND R_ReportGroupIsActive = 'Y'
+		order by M_UserID ASC
+		LIMIT ? OFFSET ?
+	`
+
+		logger.Info("QUERY SEARCH INITIAL",
+			zap.String("query search", query),
+		)
+
+		if err := dbx.Handlex.Select(&userList, 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 userList, totalPage, nil
+}

views/dev/mastermenuuser/mastermenuuser.templ

@@ -0,0 +1,394 @@
+package mastermenuuser
+
+import (
+	"cpone/layout"
+	"cpone/models"
+	"cpone/component/modal"
+	"strconv"
+	"cpone/component/table"
+	"cpone/component/customtextfield"
+)
+
+// "cpone/component/sidebar_user_profile"
+templ ContentMasterMenuUserV1(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dropdownID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterUser templ.Component,
+	filterUserGroup templ.Component,
+	paginationUser templ.Component,
+	modaladdform templ.Component,
+	modalEditform templ.Component,
+	modalDeleteform templ.Component,
+) {
+	<div class="container-fluid">
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
+			Name:  "tableID",
+			Type:  "hidden",
+			Value: tableID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
+			Name:  "paginationID",
+			Type:  "hidden",
+			Value: paginationID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dropdownID",
+			Name:  "dropdownID",
+			Type:  "hidden",
+			Value: dropdownID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID})
+		<div class="row align-items-center mb-10">
+			<div class="col-md-10 col-sm-12 p-0 ">
+				@breadcrumb
+			</div>
+			<div class="col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none">
+				// <div class="d-block align-items-center">
+				<div class="d-flex justify-content-end">
+					<button
+						type="button"
+						class="btn btn-primary"
+						data-toggle="modal"
+						data-target={ "#" + dialogAddID }
+					>Add New</button>
+				</div>
+			</div>
+			<div class="col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5">
+				<button
+					type="button"
+					class="btn btn-primary btn-block"
+					data-toggle="modal"
+					data-target={ "#" + dialogAddID }
+				>Add New</button>
+			</div>
+		</div>
+		// @filterUser
+		<div class="row">
+			<div class="col-6">
+				@filterUserGroup
+			</div>
+			<div class="col-6">
+				@filterUser
+			</div>
+		</div>
+		// table content
+		@tablecontent
+		@paginationUser
+		<div class="d-flex justify-content-center text-primary">
+			<div class="htmx-indicator spinner-border text-primary" role="status" id="indicator">
+				<span class="sr-only"></span>
+			</div>
+		</div>
+		// hx-on::after-request="showtoast()"
+		// hx-on::reponse-error="cobaerror()"
+		// hx-on::send-error="cobaerror()"
+		@modaladdform
+		@modalEditform
+		@modalDeleteform
+		// @modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
+		@JSkuMasterUserV1()
+	</div>
+}
+
+templ TableRowMasterUserV1(data []models.MasterUser,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string) {
+	if len(data) == 0 {
+		<tr>
+			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
+		</tr>
+	}
+	for _, v := range data {
+		<tr>
+			<td>{ v.M_UserEmail }</td>
+			<td>{ v.M_UserFullName }</td>
+			<td>{ v.M_UserGroupName }</td>
+			<td>
+				@TableAction(v.M_UserID, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete)
+			</td>
+		</tr>
+	}
+}
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	<div class="row px-5 d-flex justify-content-around">
+		<a
+			id="btneditug"
+			type="button"
+			class="btneditug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetEdit }
+			hx-swap={ hxSwapEdit }
+			hx-include={ hxIncludeEdit }
+		>
+			// { "/dev/usergroupshoweditform?id=" + strconv.Itoa(v.M_UserGroupID) }
+			// data-toggle="modal"
+			// data-target={ "#dialogEdit" + strconv.Itoa(v.M_UserGroupID) }
+			Edit
+		</a>
+		<a
+			id="btndeleteug"
+			type="button"
+			class=" btndeleteug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetDelete }
+			hx-swap={ hxSwapDelete }
+			hx-include={ hxIncludeDelete }
+		>
+			// hx-get={ "/dev/usergroupshowdeleteform?id=" + strconv.Itoa(v.M_UserGroupID) }
+			// data-toggle="modal"
+			// data-target={ "#dialogDelete" + strconv.Itoa(v.M_UserGroupID) }
+			Hapus
+		</a>
+	</div>
+}
+
+templ DialogDeleteMasterUserActionV1() {
+	<div>
+		<button
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="button"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+		>
+			Yakin
+		</button>
+	</div>
+}
+
+templ BtnCloseDeleteMasterUserV1() {
+	<button
+		type="button"
+		class="close"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ JSkuMasterUserV1() {
+	<script>
+		 function ShowLoading(evt) {
+        document
+          .getElementById("modalLoadEdit")
+          .setAttribute("style", "display:block !important;");
+        document
+          .getElementById("modalbdyEdit")
+          .setAttribute("style", "display:none !important;");
+		  console.log(evt);
+      }
+      function ShowForm() {
+        document
+          .getElementById("modalLoadEdit")
+          .setAttribute("style", "display:none !important;");
+        document
+          .getElementById("modalbdyEdit")
+          .setAttribute("style", "display:block !important;;");
+      }
+	</script>
+}
+
+templ CssMasterMenuUserV1x() {
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/poppins.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/publicsans.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/roboto.css"
+	/>
+	<style>
+    body {
+      background-color: white;
+      /* padding-right: 100px;
+            padding-left: 100px; */
+    }
+    #div-chart {
+        /* overflow-x: scroll; */
+        margin: 40px 10vw 40px 10vw;
+    }
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+    #title {
+        font-weight: 600;
+    }
+</style>
+}
+
+// for item dropdown
+templ ItemDropdown(dataDropdown []models.UserGroupV1) {
+	if len(dataDropdown) == 0 {
+		<option value="0" disabled selected>Tidak Ada Data</option>
+	} else {
+		for _, v := range dataDropdown {
+			<option value={ strconv.Itoa(v.M_UserGroupID) }>{ v.M_UserGroupName }</option>
+		}
+	}
+}
+
+// for empty div
+templ EmptyDiv1() {
+	<div></div>
+}
+
+templ ShowMasterMenuUserV1x(title string, cmp templ.Component, css templ.Component, js templ.Component,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) {
+	@layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
+		@cmp
+	}
+}
+
+// table
+templ TableUser(data []models.MasterUser, tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string) {
+	<div id={ tableID } hx-swap-oob="true">
+		@tablecomponent.TableV3([]string{"EMAIL", "NAMA STAFF", "USERGROUP", "AKSI"},
+			[]string{"30%", "30%", "20%", "20%"},
+			TableRowMasterUserV1(data, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete))
+	</div>
+}
+
+templ SwapTableUser(pagination templ.Component, table templ.Component) {
+	@pagination
+	@table
+}
+
+templ UserForm(data models.UserFormComponent) {
+	<div class="">
+		<form
+			id={ data.IDComponent }
+			hx-post={ data.Link }
+			class="form"
+			hx-target={ data.HxTarget }
+			hx-swap={ data.HxSwap }
+			hx-include={ data.HxInclude }
+			hx-on::before-request={ HandleFormBeforeRequest() }
+			hx-on::after-request={ HandleFormAfterRequest() }
+		>
+			@modalcomponent.Modal(data.ModalID,
+				data.ModalTitle,
+				data.DialogBody,
+				data.DialogAction,
+				data.ButtonCLose)
+		</form>
+	</div>
+}
+
+script HandleFormBeforeRequest() {
+	console.log("handle disable btn add");
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+		boxes[i].setAttribute('disabled', 'true');
+		
+	}
+}
+
+script HandleFormAfterRequest() {
+	console.log("handle enable btn add");
+
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+			boxes[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		<p>{ message }</p>
+		<div class="card rounded-lg">
+			<div class="card-body d-flex flex-row">
+				<div class="d-flex flex-column">
+					for _, v := range datHeader {
+						<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
+					}
+				</div>
+				<div class="d-flex flex-column ">
+					for _, v := range dataText {
+						<div class="mb-1 mt-1 font-weight-bold">
+							{ v }
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+		@customtextfield.CustomTextFieldv2(inputId)
+	</div>
+}

views/dev/mastermenuuser/modaladduser.templ

@@ -0,0 +1,108 @@
+package mastermenuuser
+
+import (
+	"cpone/models"
+	"cpone/component/customtextfield"
+	"cpone/component/customdropdown"
+)
+
+templ DialogNewBodyV1(
+	inputId models.CustomTextFieldv2Prm,
+	inputUsername models.CustomTextFieldv2Prm,
+	inputPassword models.CustomTextFieldv2Prm,
+	inputUserfullname models.CustomTextFieldv2Prm,
+	inputDropdownUserGroup models.CustomDropdownv1Prm,
+	listItemUserGroup templ.Component,
+	inputDropdownReportGroup models.CustomDropdownv1Prm,
+	listItemReportGroup templ.Component,
+	componentID string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		@customtextfield.CustomTextFieldv2(
+			inputId)
+		@customtextfield.CustomTextFieldv2(
+			inputUsername)
+		@customtextfield.CustomTextFieldv2(
+			inputPassword)
+		@customtextfield.CustomTextFieldv2(
+			inputUserfullname)
+		@customdropdown.MainCustomDropdownInput(
+			inputDropdownUserGroup, listItemUserGroup)
+		@customdropdown.MainCustomDropdownInput(
+			inputDropdownReportGroup, listItemReportGroup)
+	</div>
+}
+
+script HandleJSModalAddUG(modalID string) {
+	$(modalID).modal('hide')
+}
+
+script HandleJSModalAddUGShow(modalID string) {
+	$(modalID).modal('show')
+}
+
+templ DialogNewActionV1(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ HandleJSModalAddUG(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact"
+		>
+			Save
+		</button>
+	</div>
+}
+
+templ DialogNewAction() {
+	<div>
+		<button
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+		>
+			Save changes
+		</button>
+	</div>
+}
+
+templ BtnCloseNew() {
+	<button
+		type="button"
+		class="close"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ BtnCloseNewV1(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<button
+		hx-post={ LinkClose }
+		hx-target={ targetClose }
+		hx-swap={ hxSwapClose }
+		type="button"
+		hx-on::after-request={ HandleJSModalAddUG(modalID) }
+		class="close btnaddact"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}

views/dev/mastermenuuser/modaladduser_templ.go

@@ -0,0 +1,335 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package mastermenuuser
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"cpone/component/customdropdown"
+	"cpone/component/customtextfield"
+	"cpone/models"
+)
+
+func DialogNewBodyV1(
+	inputId models.CustomTextFieldv2Prm,
+	inputUsername models.CustomTextFieldv2Prm,
+	inputPassword models.CustomTextFieldv2Prm,
+	inputUserfullname models.CustomTextFieldv2Prm,
+	inputDropdownUserGroup models.CustomDropdownv1Prm,
+	listItemUserGroup templ.Component,
+	inputDropdownReportGroup models.CustomDropdownv1Prm,
+	listItemReportGroup templ.Component,
+	componentID string,
+	hxOnLoad templ.ComponentScript) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuuser\modaladduser.templ`, Line: 20, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputId).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputUsername).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputPassword).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputUserfullname).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customdropdown.MainCustomDropdownInput(
+			inputDropdownUserGroup, listItemUserGroup).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customdropdown.MainCustomDropdownInput(
+			inputDropdownReportGroup, listItemReportGroup).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func HandleJSModalAddUG(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleJSModalAddUG_da6c`,
+		Function: `function __templ_HandleJSModalAddUG_da6c(modalID){$(modalID).modal('hide')
+}`,
+		Call:       templ.SafeScript(`__templ_HandleJSModalAddUG_da6c`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_HandleJSModalAddUG_da6c`, modalID),
+	}
+}
+
+func HandleJSModalAddUGShow(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleJSModalAddUGShow_3147`,
+		Function: `function __templ_HandleJSModalAddUGShow_3147(modalID){$(modalID).modal('show')
+}`,
+		Call:       templ.SafeScript(`__templ_HandleJSModalAddUGShow_3147`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_HandleJSModalAddUGShow_3147`, modalID),
+	}
+}
+
+func DialogNewActionV1(LinkClose string, targetClose string, hxSwapClose string, modalID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleJSModalAddUG(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 templ.ComponentScript = HandleJSModalAddUG(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuuser\modaladduser.templ`, Line: 48, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuuser\modaladduser.templ`, Line: 49, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuuser\modaladduser.templ`, Line: 50, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact\" data-dismiss=\"modal\">Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact\">Save\r</button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func DialogNewAction() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><button type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4\" data-dismiss=\"modal\">Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\">Save changes\r</button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func BtnCloseNew() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func BtnCloseNewV1(LinkClose string, targetClose string, hxSwapClose string, modalID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleJSModalAddUG(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuuser\modaladduser.templ`, Line: 97, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuuser\modaladduser.templ`, Line: 98, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mastermenuuser\modaladduser.templ`, Line: 99, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 templ.ComponentScript = HandleJSModalAddUG(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnaddact\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/dev/mastermenuuser/modaledituser.templ

@@ -0,0 +1,79 @@
+package mastermenuuser
+
+import (
+	"cpone/models"
+	"cpone/component/customtextfield"
+)
+
+templ DialogEditForm(code string, name string) {
+	@customtextfield.CustomTextFieldv2(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode user group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user Group",
+			Type:        "text",
+			Value:       code,
+		})
+	@customtextfield.CustomTextFieldv2(
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama User Group",
+			Type:        "text",
+			Value:       name,
+		})
+}
+
+templ DialogEditBody(code string, name string) {
+	<div id="modalbdyEdit">
+		@DialogEditForm(code, name)
+	</div>
+	<div>
+		// <div class="text-center text-primary" id="modalLoadEdit" style="">
+		// 	<div class="spinner-border" role="status"></div>
+		// </div>
+	</div>
+}
+
+templ LoadingSpinner() {
+	<div id="modalbdyEdit">
+		<div class="text-center text-primary">
+			<div class="spinner-border" role="status"></div>
+		</div>
+	</div>
+}
+
+templ DialogEditAction() {
+	<div>
+		<button
+			id="btledit"
+			type="button"
+			hx-swap="delete"
+			hx-target="#modalbdyEdit"
+			onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="button"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+		>
+			Save changes
+		</button>
+	</div>
+}
+
+templ BtnCloseEdit() {
+	<button
+		type="button"
+		class="close"
+		data-dismiss="modal"
+		aria-label="Close"
+		hx-target="#modalbdyEdit"
+		onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}

views/dev/mastermenuuser/modaledituser_templ.go

@@ -0,0 +1,162 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package mastermenuuser
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"cpone/component/customtextfield"
+	"cpone/models"
+)
+
+func DialogEditForm(code string, name 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 = customtextfield.CustomTextFieldv2(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode user group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user Group",
+				Type:        "text",
+				Value:       code,
+			}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama User Group",
+				Type:        "text",
+				Value:       name,
+			}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func DialogEditBody(code string, name 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_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"modalbdyEdit\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = DialogEditForm(code, name).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func LoadingSpinner() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"modalbdyEdit\"><div class=\"text-center text-primary\"><div class=\"spinner-border\" role=\"status\"></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func DialogEditAction() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><button id=\"btledit\" type=\"button\" hx-swap=\"delete\" hx-target=\"#modalbdyEdit\" onclick=\"htmx.trigger(&#39;.btneditusgp&#39;, &#39;htmx:abort&#39;)\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4\" data-dismiss=\"modal\">Batal\r</button> <button type=\"button\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\">Save changes\r</button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func BtnCloseEdit() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" hx-target=\"#modalbdyEdit\" onclick=\"htmx.trigger(&#39;.btneditusgp&#39;, &#39;htmx:abort&#39;)\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}