revisi open dialog edit & edit user group

open and close edit form
add user group
2024-05-22 15:37:37 +07:00 · 2024-05-22 14:00:17 +07:00 · 2024-05-22 11:02:58 +07:00 · 2024-05-22 08:40:54 +07:00 · 2024-05-21 16:51:57 +07:00 · 2024-05-21 16:20:41 +07:00
9 changed files with 2260 additions and 0 deletions
--- a/handlers/dev/md.usergroup.handlers.go
+++ b/handlers/dev/md.usergroup.handlers.go
@@ -0,0 +1,765 @@
+package dev_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	customtextfieldsearch "cpone/component/customtextfieldsearch"
+	navbarmenu "cpone/component/navbar"
+	"cpone/component/pagination"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	customtoastv2 "cpone/component/toastbootstrap"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	dev_mdusergroupview "cpone/views/dev/mdusergroup"
+	"strconv"
+	"strings"
+
+	"fmt"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type MdUserGroupServices interface {
+	GetListMdUserGroup(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, int, error)
+	GetMdUserGroupByID(id string) (models.UserGroupV1, error)
+	AddMdUserGroup(code string, name string) (models.UserGroupV1, error)
+	EditMdUsergroup(id string, code string, name string) (models.UserGroupV1, error)
+	DeleteMdUserGroup(id string) (models.UserGroupV1, error)
+	GetMdUserGroupBreadCrumb(title string) (models.BreadCrumbV1, error)
+}
+
+func NewMdUserGroupHandler(us MdUserGroupServices) *MdUserGroupHandler {
+	return &MdUserGroupHandler{
+		MdUserGroupServices: us,
+	}
+}
+
+type MdUserGroupHandler struct {
+	MdUserGroupServices MdUserGroupServices
+}
+
+func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	//get sidebarmenu
+	tableID := utils.GenerateRandomID("tablebody")
+	paginationID := utils.GenerateRandomID("paginationid")
+	searchID := utils.GenerateRandomID("searchid")
+	dialogAddID := utils.GenerateRandomID("dialogaddID")
+	dialogAddBodyID := utils.GenerateRandomID("dialogaddbodyID")
+	dialogEditID := utils.GenerateRandomID("dialogEditID")
+	dialogEditBodyID := utils.GenerateRandomID("dialogEditbodyID")
+	// dialogDeleteID := utils.GenerateRandomID("dialogDeleteID")
+	// dialogDeleteBodyID := utils.GenerateRandomID("dialogDeletebodyID")
+	dataMenu, err := services.GetMenu()
+	fmt.Println(dataMenu)
+	fmt.Println(err)
+	if err != nil {
+		fmt.Println(dataMenu)
+		return err
+	}
+
+	//get user login
+	dataUser, err := services.GetUserLogin()
+	fmt.Println(dataUser)
+	fmt.Println(err)
+	if err != nil {
+		fmt.Println(dataUser)
+		return err
+	}
+	defer logger.Sync()
+	logger.Info("LOAD USER DEV",
+		zap.Any("data", dataUser),
+	)
+
+	title := "Master User Group"
+
+	dataBreadCrumb, err := lh.MdUserGroupServices.GetMdUserGroupBreadCrumb(title)
+	fmt.Println(dataBreadCrumb)
+	fmt.Println(err)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataBreadCrumb)
+		return err
+	}
+
+	defer logger.Sync()
+	logger.Info("LOAD BREADCRUMB DEV",
+		zap.Any("data", dataBreadCrumb),
+	)
+	//Breadcrumb component
+	breadcrumbComponent := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadCrumb)
+	// navbar menu
+	navbarmenuComponent := navbarmenu.NavbarMenu(dataMenu)
+
+	// navbar user
+	navbaruserComponent := navbarmenu.Navbar(dataUser)
+
+	// sidebar
+	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)
+
+	//Table component
+	dataUserGroup, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup("", 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID",
+	)
+
+	//filter user group component
+	usergroupFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
+		"search",
+		"Cari Kode/Nama",
+		"text",
+		"/dev/md/usergroupv2/filter",
+		"input changed delay:500ms, search",
+		"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID, #searchID, #dialogEditBodyID, #dialogEditID")
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV2(
+		totalPage,
+		1,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+	)
+
+	//modal add form
+	dialogAddBodyCmp := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioAddCmp := dev_mdusergroupview.ActionFormUserGroup(
+		"/dev/md/usergroupv2/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID)
+	btnCloaseModalAdd := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID)
+	modalAddFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/add",
+			HxTarget:     "#" + dialogAddBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogAddBodyID, #dialogAddID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogAddID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogAddBodyCmp,
+			DialogAction: modalActioAddCmp,
+			ButtonCLose:  btnCloaseModalAdd,
+		},
+	)
+
+	//modal edit form
+	dialogEditBodyCmp := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioEditCmp := dev_mdusergroupview.ActionFormUserGroup(
+		"/dev/md/usergroupv2/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID)
+	btnCloaseModalEdit := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID)
+	modalEditFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/edit",
+			HxTarget:     "#" + dialogEditBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogEditBodyID, #dialogEditID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogEditID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogEditBodyCmp,
+			DialogAction: modalActioEditCmp,
+			ButtonCLose:  btnCloaseModalEdit,
+		},
+	)
+
+	//content js & css
+	content := dev_mdusergroupview.MdUserGroupScreen(
+		tableID,
+		paginationID,
+		searchID,
+		dialogAddID,
+		dialogAddBodyID,
+		dialogEditID,
+		dialogEditBodyID,
+		breadcrumbComponent,
+		tableComponent,
+		usergroupFilterComponent,
+		userGroupPaginationComponent,
+		modalAddFormComponent,
+		modalEditFormComponent)
+	css := dev_mdusergroupview.CssMdUserGroup()
+	js := dev_mdusergroupview.JsMdUserGroup()
+
+	view := dev_mdusergroupview.ShowMdUserGroupScreen(title,
+		content,
+		css,
+		js,
+		navbarmenuComponent,
+		navbaruserComponent,
+		sidebaruserprofileComponent)
+	return utils.View(c, view)
+}
+func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
+	search := c.QueryParam("search")
+	searchID := c.QueryParam("searchID")
+	tableID := c.QueryParam("tableID")
+	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	var retval []templ.Component
+	logger, _ := zap.NewProduction()
+
+	dataUserGroup, totalpage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID")
+	userGroupPaginationComponent := pagination.PaginationV2(
+		totalpage,
+		1,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID,  #dialogEditBodyID, #dialogEditID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+	)
+	retval = append(retval, tableComponent)
+	retval = append(retval, userGroupPaginationComponent)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdUserGroupHandler) HandleChangePageMdUserGroup(c echo.Context) error {
+	search := c.QueryParam("search")
+	pageparam := c.QueryParam("page")
+	tableID := c.QueryParam("tableID")
+	searchID := c.QueryParam("searchID")
+	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	var retval []templ.Component
+	logger, _ := zap.NewProduction()
+	page, err := strconv.Atoi(pageparam)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM",
+			zap.Any("page", page),
+			zap.Any("error ", err),
+		)
+		return err
+	}
+	dataUserGroup, totalpage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, page, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID",
+	)
+	userGroupPaginationComponent := pagination.PaginationV2(
+		totalpage,
+		page,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+	)
+	retval = append(retval, tableComponent)
+	retval = append(retval, userGroupPaginationComponent)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormAdd(c echo.Context) error {
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+	code := c.FormValue("usergroupcode")
+	name := c.FormValue("usergroupname")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogAddID := c.FormValue("dialogAddID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD USER GROUP PARAM",
+		zap.Any("code", code),
+		zap.Any("nama", name),
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+	formValidation := ""
+	codeValidation := ""
+	nameValidation := ""
+	if strings.TrimSpace(code) == "" {
+		formValidation = "Code user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama user group tidak boleh kosong"
+		codeValidation = ""
+		nameValidation = "Nama user group tidak boleh kosong"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code dan nama user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = "Nama user group tidak boleh kosong"
+
+	}
+
+	if formValidation != "" || codeValidation != "" || nameValidation != "" {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	//Add user group service
+	dataUserGroup, err := lh.MdUserGroupServices.AddMdUserGroup(code, name)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("code", code),
+			zap.Any("name", name),
+		)
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+
+	}
+	logger.Info("ADD USER GROUP",
+		zap.Any("return", dataUserGroup),
+		zap.Any("code", code),
+		zap.Any("name", name),
+	)
+	//get list user group for table
+	dataUserGroupList, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	//table component
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID")
+
+	//pagination component
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV2(
+		totalPage,
+		currPage,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+	)
+
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			ErrorMsg:    codeValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			ErrorMsg:    nameValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal("#"+dialogAddID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil insert User group "+name, "success")
+
+	return utils.ViewMulti(c, []templ.Component{
+		toastSuccess,
+		tableComponent,
+		userGroupPaginationComponent,
+		newForm})
+}
+func (lh *MdUserGroupHandler) HandleOpenEditForm(c echo.Context) error {
+	id := c.QueryParam("id")
+	dialogEditID := c.QueryParam("dialogEditID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+
+	dataUserGroup, err := lh.MdUserGroupServices.GetMdUserGroupByID(id)
+	if err != nil {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				Type:        "text", ID: "usergroupinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				Type:        "text", ID: "usergroupinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get user group error", "danger"), newForm})
+	}
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Value:       dataUserGroup.M_UserGroupCode,
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Value:       dataUserGroup.M_UserGroupName,
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Value:       strconv.Itoa(dataUserGroup.M_UserGroupID),
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsShowModal("#"+dialogEditID))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormEdit(c echo.Context) error {
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleEditUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+	code := c.FormValue("usergroupcode")
+	name := c.FormValue("usergroupname")
+	id := c.FormValue("usergroupid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogEditID := c.FormValue("dialogEditID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD USER GROUP PARAM",
+		zap.Any("code", code),
+		zap.Any("nama", name),
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+	formValidation := ""
+	codeValidation := ""
+	nameValidation := ""
+	if strings.TrimSpace(code) == "" {
+		formValidation = "Code user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama user group tidak boleh kosong"
+		codeValidation = ""
+		nameValidation = "Nama user group tidak boleh kosong"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code dan nama user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = "Nama user group tidak boleh kosong"
+
+	}
+
+	if formValidation != "" || codeValidation != "" || nameValidation != "" {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	//edit user group service
+	dataUserGroup, err := lh.MdUserGroupServices.EditMdUsergroup(id, code, name)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("code", code),
+			zap.Any("name", name),
+		)
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+
+	}
+	logger.Info("ADD USER GROUP",
+		zap.Any("return", dataUserGroup),
+		zap.Any("code", code),
+		zap.Any("name", name),
+	)
+	//get list user group for table
+	dataUserGroupList, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	//table component
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID")
+
+	//pagination component
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV2(
+		totalPage,
+		currPage,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+	)
+	var retVal []templ.Component
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			ErrorMsg:    codeValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			ErrorMsg:    nameValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal("#"+dialogEditID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil edit User group "+name, "success")
+	retVal = append(retVal, toastSuccess)
+	retVal = append(retVal, tableComponent)
+	retVal = append(retVal, userGroupPaginationComponent)
+	retVal = append(retVal, newForm)
+	return utils.ViewMulti(c, retVal)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -211,4 +211,17 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {

 	// clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
 	// clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
+
+	//New User Group
+	devMdUserGroupServices := dev_services.NewMdUserGroupServices(appStore)
+	devMdUserGroupHandlers := dev_handlers.NewMdUserGroupHandler(devMdUserGroupServices)
+	dev.GET("/md/usergroupv2", devMdUserGroupHandlers.HandleShowMdUserGroupScreen)
+	dev.GET("/md/usergroupv2/filter", devMdUserGroupHandlers.HandleFilterMdUserGroup)
+	dev.GET("/md/usergroupv2/changepage", devMdUserGroupHandlers.HandleChangePageMdUserGroup)
+	dev.POST("/md/usergroupv2/closeaddform", devMdUserGroupHandlers.HandleCloseFormAdd)
+	dev.POST("/md/usergroupv2/add", devMdUserGroupHandlers.HandleAddUserGroup)
+	dev.GET("/md/usergroupv2/openedit", devMdUserGroupHandlers.HandleOpenEditForm)
+	dev.POST("/md/usergroupv2/closeeditform", devMdUserGroupHandlers.HandleCloseFormEdit)
+	dev.POST("/md/usergroupv2/edit", devMdUserGroupHandlers.HandleEditUserGroup)
+
 }
--- a/services/dev/md.usergroup.service.go
+++ b/services/dev/md.usergroup.service.go
@@ -0,0 +1,259 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+	"strconv"
+	"strings"
+
+	"go.uber.org/zap"
+)
+
+func NewMdUserGroupServices(uStore db.AppStore) *MdUserGroupServices {
+
+	return &MdUserGroupServices{
+
+		MdUserGroupStore: uStore,
+	}
+}
+
+type MdUserGroupServices struct {
+	MdUserGroupStore db.AppStore
+}
+
+func (su *MdUserGroupServices) GetListMdUserGroup(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, int, error) {
+	var userGroupList []models.UserGroupV1
+	var totalData int
+	offset := (currentPage - 1) * rowPerPage
+	prm := "%" + strings.TrimSpace(search) + "%"
+	querytotal := `
+		SELECT COUNT(*) 
+		FROM m_usergroup
+		WHERE M_UserGroupIsActive = 'Y'
+		AND (M_UserGroupCode LIKE ? OR M_UserGroupName LIKE ?) 
+	`
+	if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+	query := `
+		SELECT
+			ROW_NUMBER() OVER () AS nomor,
+			M_UserGroupID,
+			M_UserGroupCode,
+			M_UserGroupName,
+			M_UserGroupCreated,
+			M_UserGroupLastUpdated,
+			M_UserGroupIsActive
+		FROM m_usergroup
+		WHERE M_UserGroupIsActive = 'Y'
+		AND (M_UserGroupCode LIKE ? OR M_UserGroupName LIKE ?)
+		order by M_UserGroupID ASC
+		LIMIT ? OFFSET ?
+	`
+
+	if err := dbx.Handlex.Select(&userGroupList, query, prm, prm, rowPerPage, offset); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+	totalPage := int(math.Ceil(float64(totalData) / float64(rowPerPage)))
+
+	return userGroupList, totalPage, nil
+}
+func (ug *MdUserGroupServices) GetMdUserGroupByID(id string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+
+	var data models.UserGroupV1
+	err := dbx.Handlex.Get(&data, `SELECT * FROM m_usergroup
+	WHERE M_UserGroupID = ?`, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get data ug by id vs",
+			zap.String("ID", id),
+			zap.Error(err),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (ug *MdUserGroupServices) AddMdUserGroup(code string, name string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+	var data models.UserGroupV1
+	var datacek []models.UserGroupV1
+
+	qryCek := `SELECT M_UserGroupCode FROM m_usergroup WHERE M_UserGroupCode = ? AND M_UserGroupIsActive = 'Y'`
+	err := dbx.Handlex.Select(&datacek, qryCek, code)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by code",
+			zap.String("code", code),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Code already taken by another data",
+			zap.String("code", code),
+		)
+		return data, fmt.Errorf("code sudah dipakai")
+	}
+	qry := `INSERT INTO m_usergroup
+			(M_UserGroupCode,
+			M_UserGroupName)
+			VALUES (?,?);`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, code, name)
+	insertedID, err := rst.LastInsertId()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Insert usergroup",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	s := strconv.Itoa(int(insertedID))
+	data, err = ug.GetMdUserGroupByID(s)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+func (ug *MdUserGroupServices) EditMdUsergroup(id string, code string, name string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+	var data models.UserGroupV1
+	var datacek []models.UserGroupV1
+
+	qryCek := `SELECT M_UserGroupCode FROM m_usergroup WHERE M_UserGroupCode = ? AND M_UserGroupIsActive = 'Y' AND M_UserGroupID <> ?`
+	err := dbx.Handlex.Select(&datacek, qryCek, code, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error cek data by code",
+			zap.String("code", code),
+			zap.Any("datacek", datacek),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	if len(datacek) > 0 {
+		defer logger.Sync()
+		logger.Error("Code already taken by another data",
+			zap.String("code", code),
+		)
+		return data, fmt.Errorf("code sudah dipakai")
+	}
+	qry := `UPDATE m_usergroup
+			SET M_UserGroupCode = ?,
+			M_UserGroupName= ?
+			WHERE M_UserGroupID = ?;`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, code, name, id)
+	_, err = rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Update usergroup",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetMdUserGroupByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (ug *MdUserGroupServices) DeleteMdUserGroup(id string) (models.UserGroupV1, error) {
+	logger, _ := zap.NewProduction()
+	var data models.UserGroupV1
+	qry := `UPDATE m_usergroup
+			SET M_UserGroupIsActive = 'N'
+			WHERE M_UserGroupID = ?;`
+	// time.Sleep(5 * time.Second)
+	rst := dbx.Handlex.MustExec(qry, id)
+	_, err := rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error delete usergroup",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = ug.GetMdUserGroupByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get usergroup by id",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+func (su *MdUserGroupServices) GetMdUserGroupBreadCrumb(title string) (models.BreadCrumbV1, error) {
+	var ret models.BreadCrumbV1
+
+	dummyBreadcrumb := []models.BreadCrumbV1{
+		{
+			Title: "Master User Group",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User Group",
+					Url:  "",
+				},
+			},
+		},
+
+		{
+			Title: "Master User",
+			Item: []models.ItemBreadCrumbV1{
+				{
+					Item: "Dashboard",
+					Url:  "/dev/dashboard",
+				},
+				{
+					Item: "Master",
+					Url:  "/dev/master",
+				},
+				{
+					Item: "User",
+					Url:  "",
+				},
+			},
+		},
+	}
+
+	for _, breadcrumb := range dummyBreadcrumb {
+		if breadcrumb.Title == title {
+			ret = breadcrumb
+			return ret, nil
+		}
+	}
+
+	return ret, nil
+}
--- a/views/dev/mdusergroup/mdusergroup.templ
+++ b/views/dev/mdusergroup/mdusergroup.templ
@@ -0,0 +1,128 @@
+package dev_mdusergroupview
+
+import (
+	"cpone/layout"
+	"cpone/component/customtextfield"
+	"cpone/models"
+)
+
+templ MdUserGroupScreen(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterComponent templ.Component,
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component) {
+	<div class="container-fluid">
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
+			Name:  "tableID",
+			Type:  "hidden",
+			Value: tableID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
+			Name:  "paginationID",
+			Type:  "hidden",
+			Value: paginationID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID})
+		<div class="row align-items-center mb-10">
+			<div class="col-md-10 col-sm-12 p-0 ">
+				@breadcrumb
+			</div>
+			<div class="col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none">
+				// <div class="d-block align-items-center">
+				<div class="d-flex justify-content-end">
+					<button
+						type="button"
+						class="btn btn-primary"
+						data-toggle="modal"
+						data-target={ "#" + dialogAddID }
+					>Add New</button>
+				</div>
+			</div>
+			<div class="col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5">
+				<button
+					type="button"
+					class="btn btn-primary btn-block"
+					data-toggle="modal"
+					data-target={ "#" + dialogAddID }
+				>Add New</button>
+			</div>
+		</div>
+		@filterComponent
+		@tablecontent
+		@paginationComponent
+		@modalAddForm
+		@modalEditForm
+	</div>
+}
+
+templ CssMdUserGroup() {
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/poppins.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/publicsans.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/roboto.css"
+	/>
+	<style>
+    body {
+      background-color: white;
+      /* padding-right: 100px;
+            padding-left: 100px; */
+    }
+    #div-chart {
+        /* overflow-x: scroll; */
+        margin: 40px 10vw 40px 10vw;
+    }
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+    #title {
+        font-weight: 600;
+    }
+    
+</style>
+}
+
+templ JsMdUserGroup() {
+}
+
+templ ShowMdUserGroupScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) {
+	@layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
+		@cmp
+	}
+}
--- a/views/dev/mdusergroup/mdusergroup_templ.go
+++ b/views/dev/mdusergroup/mdusergroup_templ.go
@@ -0,0 +1,251 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdusergroupview
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"cpone/component/customtextfield"
+	"cpone/layout"
+	"cpone/models"
+)
+
+func MdUserGroupScreen(
+	tableID string,
+	paginationID string,
+	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterComponent templ.Component,
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
+			Name:  "tableID",
+			Type:  "hidden",
+			Value: tableID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
+			Name:  "paginationID",
+			Type:  "hidden",
+			Value: paginationID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "searchID",
+			Name:  "searchID",
+			Type:  "hidden",
+			Value: searchID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row align-items-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0 \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = breadcrumb.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none\"><div class=\"d-flex justify-content-end\"><button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 63, Col: 37}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div><div class=\"col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5\"><button type=\"button\" class=\"btn btn-primary btn-block\" data-toggle=\"modal\" data-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroup.templ`, Line: 72, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = filterComponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecontent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = paginationComponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalAddForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalEditForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = 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 CssMdUserGroup() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    #div-chart {\r\n        /* overflow-x: scroll; */\r\n        margin: 40px 10vw 40px 10vw;\r\n    }\r\n    .title {\r\n        font-size:20px;\r\n        font-weight: bold;\r\n    }\r\n    #title {\r\n        font-weight: 600;\r\n    }\r\n    \r\n</style>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JsMdUserGroup() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowMdUserGroupScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var7 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+			if !templ_7745c5c3_IsBuffer {
+				templ_7745c5c3_Buffer = templ.GetBuffer()
+				defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var7), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/dev/mdusergroup/mdusergroupformmodal.templ
+++ b/views/dev/mdusergroup/mdusergroupformmodal.templ
@@ -0,0 +1,107 @@
+package dev_mdusergroupview
+
+import "cpone/models"
+import "cpone/component/modal"
+import "cpone/component/customtextfield"
+
+templ UserGroupForm(data models.UserGroupFormComponent) {
+	<div class="">
+		<form
+			id={ data.IDComponent }
+			hx-post={ data.Link }
+			class="form"
+			hx-target={ data.HxTarget }
+			hx-swap={ data.HxSwap }
+			hx-include={ data.HxInclude }
+			hx-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 BodyFormUserGroup(inputId models.CustomTextFieldv2Prm,
+	inputCode models.CustomTextFieldv2Prm,
+	inputName models.CustomTextFieldv2Prm,
+	componentID string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		@customtextfield.CustomTextFieldv2(
+			inputId)
+		@customtextfield.CustomTextFieldv2(
+			inputCode)
+		@customtextfield.CustomTextFieldv2(
+			inputName)
+	</div>
+}
+
+script JsHideModal(modalID string) {
+	$(modalID).modal('hide')
+}
+
+script JsShowModal(modalID string) {
+	$(modalID).modal('show')
+}
+
+templ ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModal(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			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 BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<button
+		hx-post={ LinkClose }
+		hx-target={ targetClose }
+		hx-swap={ hxSwapClose }
+		type="button"
+		hx-on::after-request={ JsHideModal(modalID) }
+		class="close btnaddact"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
--- a/views/dev/mdusergroup/mdusergroupformmodal_templ.go
+++ b/views/dev/mdusergroup/mdusergroupformmodal_templ.go
@@ -0,0 +1,424 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdusergroupview
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/models"
+import "cpone/component/modal"
+import "cpone/component/customtextfield"
+
+func UserGroupForm(data models.UserGroupFormComponent) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleFormBeforeRequest(), HandleFormAfterRequest())
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(data.IDComponent)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 10, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(data.Link)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 11, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 13, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 14, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(data.HxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 15, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 templ.ComponentScript = HandleFormBeforeRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.ComponentScript = HandleFormAfterRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalcomponent.Modal(data.ModalID,
+			data.ModalTitle,
+			data.DialogBody,
+			data.DialogAction,
+			data.ButtonCLose).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func HandleFormBeforeRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormBeforeRequest_1e3f`,
+		Function: `function __templ_HandleFormBeforeRequest_1e3f(){console.log("handle disable btn add");
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+		boxes[i].setAttribute('disabled', 'true');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_1e3f`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_1e3f`),
+	}
+}
+
+func HandleFormAfterRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormAfterRequest_ee07`,
+		Function: `function __templ_HandleFormAfterRequest_ee07(){console.log("handle enable btn add");
+
+	const boxes = document.querySelectorAll('.btnaddact');
+
+	for (let i = 0; i < boxes.length; i++) {
+			boxes[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormAfterRequest_ee07`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterRequest_ee07`),
+	}
+}
+
+func BodyFormUserGroup(inputId models.CustomTextFieldv2Prm,
+	inputCode models.CustomTextFieldv2Prm,
+	inputName models.CustomTextFieldv2Prm,
+	componentID string,
+	hxOnLoad templ.ComponentScript) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 54, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputId).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputCode).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputName).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JsHideModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsHideModal_da6c`,
+		Function: `function __templ_JsHideModal_da6c(modalID){$(modalID).modal('hide')
+}`,
+		Call:       templ.SafeScript(`__templ_JsHideModal_da6c`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsHideModal_da6c`, modalID),
+	}
+}
+
+func JsShowModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsShowModal_3147`,
+		Function: `function __templ_JsShowModal_3147(modalID){$(modalID).modal('show')
+}`,
+		Call:       templ.SafeScript(`__templ_JsShowModal_3147`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsShowModal_3147`, modalID),
+	}
+}
+
+func ActionFormUserGroup(LinkClose string, targetClose string, hxSwapClose string, modalID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModal(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 76, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 77, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 78, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnaddact\" data-dismiss=\"modal\">Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnaddact\">Save\r</button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func BtnCloseFormUserGroup(LinkClose string, targetClose string, hxSwapClose string, modalID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var17 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var17 == nil {
+			templ_7745c5c3_Var17 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModal(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 96, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 97, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergroupformmodal.templ`, Line: 98, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnaddact\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/dev/mdusergroup/mdusergrouptable.templ
+++ b/views/dev/mdusergroup/mdusergrouptable.templ
@@ -0,0 +1,81 @@
+package dev_mdusergroupview
+
+import "cpone/component/table"
+import "cpone/models"
+import "strconv"
+
+templ TableUserGroup(data []models.UserGroupV1,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+) {
+	<div id={ tableID } hx-swap-oob="true">
+		@tablecomponent.TableV3([]string{"KODE", "USERGROUP", "AKSI"},
+			[]string{"40%", "40%", "20%"},
+			RowUserGroup(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+			))
+	</div>
+}
+
+templ RowUserGroup(data []models.UserGroupV1,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+) {
+	if len(data) == 0 {
+		<tr>
+			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
+		</tr>
+	}
+	for _, v := range data {
+		<tr>
+			<td>{ v.M_UserGroupCode }</td>
+			<td>{ v.M_UserGroupName }</td>
+			<td>
+				@TableAction(v.M_UserGroupID,
+					hxGetEdit,
+					hxTargetEdit,
+					hxSwapEdit,
+					hxIncludeEdit,
+				)
+			</td>
+		</tr>
+	}
+}
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit 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 }
+		>
+			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"
+		>
+			Hapus
+		</a>
+	</div>
+}
--- a/views/dev/mdusergroup/mdusergrouptable_templ.go
+++ b/views/dev/mdusergroup/mdusergrouptable_templ.go
@@ -0,0 +1,232 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdusergroupview
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/component/table"
+import "cpone/models"
+import "strconv"
+
+func TableUserGroup(data []models.UserGroupV1,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(tableID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 14, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"true\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"KODE", "USERGROUP", "AKSI"},
+			[]string{"40%", "40%", "20%"},
+			RowUserGroup(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+			)).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func RowUserGroup(data []models.UserGroupV1,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(data) == 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td colspan=\"3\" class=\"text-center\">Data Tidak Ditemukan</td></tr>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		for _, v := range data {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupCode)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 39, Col: 26}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_UserGroupName)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 40, Col: 26}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = TableAction(v.M_UserGroupID,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+			).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td></tr>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\"><a id=\"btneditug\" type=\"button\" class=\"btneditug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetEdit + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 66, Col: 49}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 67, Col: 27}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 68, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdusergroup\mdusergrouptable.templ`, Line: 69, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Edit\r</a> <a id=\"btndeleteug\" type=\"button\" class=\" btndeleteug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2\">Hapus\r</a></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
Author	SHA1	Message	Date
Sas Andy	caa6dba306	revisi open dialog edit & edit user group	2024-05-22 15:37:37 +07:00
Sas Andy	4c12c45aa8	open and close edit form	2024-05-22 14:00:17 +07:00
Sas Andy	fd3609f82f	add user group	2024-05-22 11:02:58 +07:00
Sas Andy	e6afeb74b8	searching & pagination	2024-05-22 08:40:54 +07:00
Sas Andy	b1dc143e83	table listing	2024-05-21 16:51:57 +07:00
Sas Andy	e1f76430fc	init handler & empty view	2024-05-21 16:20:41 +07:00
Sas Andy	edef960ae5	user group services	2024-05-21 15:37:05 +07:00