add feature delete

handlers/dev/md.natunit.handlers.go

@@ -6,12 +6,14 @@ import (
 	navbarmenu "cpone/component/navbar"
 	"cpone/component/pagination"
 	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	customtoastv2 "cpone/component/toastbootstrap"
 	"cpone/models"
 	"cpone/services"
 	"cpone/utils"
 	dev_mdnatunitview "cpone/views/dev/mdnatunit"
 	"fmt"
 	"strconv"
+	"strings"
 
 	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
@@ -21,6 +23,10 @@ import (
 type MdNatUnitServices interface {
 	GetListMdNatUnit(search string, currentPage int, rowPerPage int) ([]models.NatUnit, int, error)
 	GetMdNatUnitBreadCrumb(title string) (models.BreadCrumbV1, error)
+	AddMdNatUnit(code string, name string) (models.NatUnit, error)
+	GetMdNatUnitByID(id string) (models.NatUnit, error)
+	EditMdNatUnit(id string, code string, name string) (models.NatUnit, error)
+	DeleteMdNatUnit(id string) (models.NatUnit, error)
 }
 
 func NeWMdNatUnitHandler(nu MdNatUnitServices) *MdNatUnitHandler {
@@ -39,6 +45,12 @@ func (nh *MdNatUnitHandler) HandleShowMdNatUnitScreen(c echo.Context) error {
 	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)
@@ -102,26 +114,179 @@ func (nh *MdNatUnitHandler) HandleShowMdNatUnitScreen(c echo.Context) error {
 
 	tableComponent := dev_mdnatunitview.TableNatUnit(dataNatUnit,
 		tableID,
+		"/dev/md/natunit/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/natunit/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 	)
 
-	//filter user group component
-	natUnitFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
+	//filter nat unit component
+	natUnitFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
 		"search",
 		"Cari Kode/Nama",
 		"text",
 		"/dev/md/natunit/filter",
 		"input changed delay:500ms, search",
-		"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID, #searchID")
+		"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableID, #paginationID, #searchID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent())
 
 	//Pagination
-	natUnitPaginationComponent := pagination.PaginationV2(
+	natUnitPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		1,
 		"/dev/md/natunit/changepage",
 		paginationID,
-		"#tableID, #searchID, #"+searchID+", #paginationID",
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
+	)
+
+	// modal add form
+	dialogAddBodyCmp := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama Unit",
+			Name:        "natunitname",
+			Placeholder: "Nama Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Type:        "hidden", ID: "natunitinputid"},
+		dialogAddBodyID, dev_mdnatunitview.JsHideModal(""),
+	)
+
+	modalActionAddCmp := dev_mdnatunitview.ActionFormNatUnit(
+		"/dev/md/natunit/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID,
+	)
+
+	btnCloseModalAdd := dev_mdnatunitview.BtnCloseFormNatUnit(
+		"/dev/md/natunit/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID,
+	)
+
+	modalAddFormComponent := dev_mdnatunitview.NatUnitForm(
+		models.NatUnitFormComponent{
+			IDComponent:  "formnatunit",
+			Link:         "/dev/md/natunit/add",
+			HxTarget:     "#" + dialogAddBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogAddBodyID, #dialogAddID, #dialogDeleteBodyID, #dialogEditBodyID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogAddID,
+			ModalTitle:   "New - Unit",
+			DialogBody:   dialogAddBodyCmp,
+			DialogAction: modalActionAddCmp,
+			ButtonCLose:  btnCloseModalAdd,
+		},
+	)
+
+	// modal edit form
+	dialogEditBodyCmp := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama Unit",
+			Name:        "natunitname",
+			Placeholder: "Nama Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Type:        "hidden", ID: "natunitinputid"},
+		dialogEditBodyID, dev_mdnatunitview.JsHideModal(""),
+	)
+
+	modalActionEditCmp := dev_mdnatunitview.ActionFormNatUnit(
+		"/dev/md/natunit/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID,
+	)
+
+	btnCloseModalEdit := dev_mdnatunitview.BtnCloseFormNatUnit(
+		"/dev/md/natunit/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID,
+	)
+
+	modalEditFormComponent := dev_mdnatunitview.NatUnitForm(
+		models.NatUnitFormComponent{
+			IDComponent:  "formnatunit",
+			Link:         "dev/md/natunit/edit",
+			HxTarget:     "#" + dialogEditBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogEditBodyID, #dialogEditID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogEditID,
+			ModalTitle:   "New - Unit",
+			DialogBody:   dialogEditBodyCmp,
+			DialogAction: modalActionEditCmp,
+			ButtonCLose:  btnCloseModalEdit,
+		},
+	)
+
+	// modal delete form
+	dialogDeleteBodyCmp := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama Unit",
+			Name:        "natunitname",
+			Placeholder: "Nama Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Type:        "hidden", ID: "natunitinputid"},
+		dialogDeleteBodyID, dev_mdnatunitview.JsHideModal(""))
+	modalActionDeleteCmp := dev_mdnatunitview.ActionFormNatUnit(
+		"/dev/md/natunit/closedeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#"+dialogDeleteID)
+	btnCloaseModalDelete := dev_mdnatunitview.BtnCloseFormNatUnit(
+		"/dev/md/natunit/closedeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#"+dialogDeleteID)
+	modalDeleteFormComponent := dev_mdnatunitview.NatUnitForm(
+		models.NatUnitFormComponent{
+			IDComponent:  "formnatunit",
+			Link:         "/dev/md/natunit/delete",
+			HxTarget:     "#" + dialogDeleteBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogDeleteID, #dialogEditBodyID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogDeleteID,
+			ModalTitle:   "New - Unit",
+			DialogBody:   dialogDeleteBodyCmp,
+			DialogAction: modalActionDeleteCmp,
+			ButtonCLose:  btnCloaseModalDelete,
+		},
 	)
 
 	// content, css, js
@@ -129,10 +294,19 @@ func (nh *MdNatUnitHandler) HandleShowMdNatUnitScreen(c echo.Context) error {
 		tableID,
 		paginationID,
 		searchID,
+		dialogAddID,
+		dialogAddBodyID,
+		dialogEditID,
+		dialogEditBodyID,
+		dialogDeleteID,
+		dialogDeleteBodyID,
 		breadcrumbComponent,
 		tableComponent,
 		natUnitFilterComponent,
 		natUnitPaginationComponent,
+		modalAddFormComponent,
+		modalEditFormComponent,
+		modalDeleteFormComponent,
 	)
 	css := dev_mdnatunitview.CssMdNatUnit()
 	js := dev_mdnatunitview.JsMdNatUnit()
@@ -155,6 +329,8 @@ func (nh *MdNatUnitHandler) HandleFilterMdNatUnit(c echo.Context) error {
 	searchID := c.QueryParam("searchID")
 	tableID := c.QueryParam("tableID")
 	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
 	var retval []templ.Component
 	logger, _ := zap.NewProduction()
 
@@ -168,15 +344,25 @@ func (nh *MdNatUnitHandler) HandleFilterMdNatUnit(c echo.Context) error {
 		return err
 	}
 	tableComponent := dev_mdnatunitview.TableNatUnit(dataNatUnit,
-		tableID)
-	natUnitPaginationComponent := pagination.PaginationV2(
+		tableID,
+		"/dev/md/natunit/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/natunit/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+	natUnitPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		1,
 		"/dev/md/natunit/changepage",
 		paginationID,
-		"#tableID, #searchID, #"+searchID+", #paginationID",
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, natUnitPaginationComponent)
@@ -189,6 +375,8 @@ func (nh *MdNatUnitHandler) HandlerChangePageMdNatUnit(c echo.Context) error {
 	tableID := c.QueryParam("tableID")
 	searchID := c.QueryParam("searchID")
 	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
 
 	var retval []templ.Component
 	logger, _ := zap.NewProduction()
@@ -212,17 +400,637 @@ func (nh *MdNatUnitHandler) HandlerChangePageMdNatUnit(c echo.Context) error {
 		return err
 	}
 	tableComponent := dev_mdnatunitview.TableNatUnit(dataNatUnit,
-		tableID)
-	natUnitPaginationComponent := pagination.PaginationV2(
+		tableID,
+		"/dev/md/natunit/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/natunit/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+	natUnitPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		page,
 		"/dev/md/natunit/changepage",
 		paginationID,
-		"#tableID, #searchID, #"+searchID+", #paginationID",
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, natUnitPaginationComponent)
 	return utils.ViewMulti(c, retval)
 }
+
+func (nh *MdNatUnitHandler) HandlerCloseFormAdd(c echo.Context) error {
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	newForm := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama Unit",
+			Name:        "natunitname",
+			Placeholder: "Nama Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Type:        "hidden", ID: "natunitinputid"},
+		dialogAddBodyID, dev_mdnatunitview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+
+func (nh *MdNatUnitHandler) HandlerAddNatUnit(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	// prm form addnatunit
+	code := c.FormValue("natunitcode")
+	name := c.FormValue("natunitname")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogAddID := c.FormValue("dialogAddID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD UNIT 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 unit tidak boleh kosong"
+		codeValidation = "Code unit tidak boleh kosong"
+		nameValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama unit tidak boleh kosong"
+		codeValidation = ""
+		nameValidation = "Nama unit tidak boleh kosong"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code dan nama unit tidak boleh kosong"
+		codeValidation = "Code unit tidak boleh kosong"
+		nameValidation = "Nama unit tidak boleh kosong"
+
+	}
+
+	if formValidation != "" || codeValidation != "" || nameValidation != "" {
+		newForm := dev_mdnatunitview.BodyFormNatUnit(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitcode",
+				Placeholder: "Kode Unit",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama Unit",
+				Name:        "natunitname",
+				Placeholder: "Nama Unit",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitid",
+				Placeholder: "Kode Unit",
+				Type:        "hidden", ID: "natunitinputid"},
+			dialogAddBodyID, dev_mdnatunitview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+
+	// add nat unit service
+	dataNatUnit, err := nh.MdNatUnitServices.AddMdNatUnit(code, name)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("code", code),
+			zap.Any("name", name),
+		)
+		newForm := dev_mdnatunitview.BodyFormNatUnit(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitcode",
+				Placeholder: "Kode Unit",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama Unit",
+				Name:        "natunitname",
+				Placeholder: "Nama Unit",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitid",
+				Placeholder: "Kode Unit",
+				Type:        "hidden", ID: "natunitinputid"},
+			dialogAddBodyID, dev_mdnatunitview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+	}
+	logger.Info("ADD UNIT",
+		zap.Any("return", dataNatUnit),
+		zap.Any("code", code),
+		zap.Any("name", name),
+	)
+
+	// get list nat unit for table
+	dataNatUnitList, totalPage, err := nh.MdNatUnitServices.GetListMdNatUnit(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET UNIT",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataNatUnit)
+		return err
+	}
+
+	// table component
+	tableComponent := dev_mdnatunitview.TableNatUnit(
+		dataNatUnitList,
+		tableID,
+		"/dev/md/natunit/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/natunit/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+
+	// pagination component
+	natUnitPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/natunit/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
+	)
+
+	newForm := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			ErrorMsg:    codeValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama Unit",
+			Name:        "natunitname",
+			Placeholder: "Nama Unit",
+			ErrorMsg:    nameValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Type:        "hidden", ID: "natunitinputid"},
+		dialogAddBodyID, dev_mdnatunitview.JsHideModal("#"+dialogAddID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil insert unit "+name, "success")
+
+	return utils.ViewMulti(c, []templ.Component{
+		toastSuccess,
+		tableComponent,
+		natUnitPaginationComponent,
+		newForm,
+	})
+}
+
+func (nh *MdNatUnitHandler) HandlerOpenEditForm(c echo.Context) error {
+	id := c.QueryParam("id")
+	dialogEditID := c.QueryParam("dialogEditID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+
+	dataNatUnit, err := nh.MdNatUnitServices.GetMdNatUnitByID(id)
+	if err != nil {
+		newForm := dev_mdnatunitview.BodyFormNatUnit(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitcode",
+				Placeholder: "Kode Unit",
+				Type:        "text", ID: "natunitinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama Unit",
+				Name:        "natunitname",
+				Placeholder: "Nama Unit",
+				Type:        "text", ID: "natunitinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitid",
+				Placeholder: "Kode Unit",
+				Type:        "hidden", ID: "natunitinputid"},
+			dialogEditBodyID, dev_mdnatunitview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get unit error", "danger"), newForm})
+	}
+	newForm := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			Value:       dataNatUnit.Nat_UnitCode,
+			Type:        "text",
+			ID:          "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitname",
+			Placeholder: "Kode Unit",
+			Value:       dataNatUnit.Nat_UnitName,
+			Type:        "text",
+			ID:          "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Value:       strconv.Itoa(dataNatUnit.Nat_UnitID),
+			Type:        "hidden",
+			ID:          "natunitinputid"},
+
+		dialogEditBodyID, dev_mdnatunitview.JsShowModal("#"+dialogEditID))
+
+	return utils.View(c, newForm)
+}
+
+func (nh *MdNatUnitHandler) HandlerCloseFormEdit(c echo.Context) error {
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	newForm := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama Unit",
+			Name:        "natunitname",
+			Placeholder: "Nama Unit",
+			Type:        "text", ID: "natunitinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Type:        "hidden", ID: "natunitinputid"},
+		dialogEditBodyID, dev_mdnatunitview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+
+func (nh *MdNatUnitHandler) HandlerEditNatUnit(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	// prm form addnatunit
+	code := c.FormValue("natunitcode")
+	name := c.FormValue("natunitname")
+	id := c.FormValue("natunitid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogEditID := c.FormValue("dialogEditID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD NAT UNIT 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 unit tidak boleh kosong"
+		codeValidation = "Code unit tidak boleh kosong"
+		nameValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama unit tidak boleh kosong"
+		codeValidation = ""
+		nameValidation = "Nama unit tidak boleh kosong"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code dan nama unit tidak boleh kosong"
+		codeValidation = "Code unit tidak boleh kosong"
+		nameValidation = "Nama unit tidak boleh kosong"
+
+	}
+
+	if formValidation != "" || codeValidation != "" || nameValidation != "" {
+		newForm := dev_mdnatunitview.BodyFormNatUnit(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitcode",
+				Placeholder: "Kode Unit",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama Unit",
+				Name:        "natunitname",
+				Placeholder: "Nama Unit",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitid",
+				Placeholder: "Kode Unit",
+				Type:        "hidden", ID: "natunitinputid"},
+			dialogEditBodyID, dev_mdnatunitview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+
+	// edit nat unit service
+	dataNatUnit, err := nh.MdNatUnitServices.EditMdNatUnit(id, code, name)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("code", code),
+			zap.Any("name", name),
+		)
+		newForm := dev_mdnatunitview.BodyFormNatUnit(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitcode",
+				Placeholder: "Kode Unit",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama Unit",
+				Name:        "natunitname",
+				Placeholder: "Nama Unit",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode Unit",
+				Name:        "natunitid",
+				Placeholder: "Kode Unit",
+				Type:        "hidden", ID: "natunitinputid"},
+			dialogEditBodyID, dev_mdnatunitview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"), newForm})
+	}
+
+	logger.Info("ADD NAT UNIT",
+		zap.Any("return", dataNatUnit),
+		zap.Any("code", code),
+		zap.Any("name", name),
+	)
+
+	// get list nat unit for table
+	dataNatUnitList, totalPage, err := nh.MdNatUnitServices.GetListMdNatUnit(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET NAT UNIT",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataNatUnit)
+		return err
+	}
+
+	// table component
+	tableComponent := dev_mdnatunitview.TableNatUnit(
+		dataNatUnitList,
+		tableID,
+		"/dev/md/natunit/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/natunit/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+
+	// pagination component
+	natUnitPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/natunit/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
+	)
+
+	var retVal []templ.Component
+	newForm := dev_mdnatunitview.BodyFormNatUnit(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitcode",
+			Placeholder: "Kode Unit",
+			ErrorMsg:    codeValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama Unit",
+			Name:        "natunitname",
+			Placeholder: "Nama Unit",
+			ErrorMsg:    nameValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode Unit",
+			Name:        "natunitid",
+			Placeholder: "Kode Unit",
+			Type:        "hidden", ID: "natunitinputid"},
+		dialogEditBodyID, dev_mdnatunitview.JsHideModal("#"+dialogEditID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil edit Unit "+name, "success")
+	retVal = append(retVal, toastSuccess)
+	retVal = append(retVal, tableComponent)
+	retVal = append(retVal, natUnitPaginationComponent)
+	retVal = append(retVal, newForm)
+	return utils.ViewMulti(c, retVal)
+}
+
+func (nh *MdNatUnitHandler) HandlerOpenDeleteForm(c echo.Context) error {
+	id := c.QueryParam("id")
+	dialogDeleteID := c.QueryParam("dialogDeleteID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+
+	dataNatUnit, err := nh.MdNatUnitServices.GetMdNatUnitByID(id)
+	if err != nil {
+		newForm := dev_mdnatunitview.DeleteConfirmationBody(
+			models.CustomTextFieldv2Prm{Name: "natunitid", Type: "hidden", Value: strconv.Itoa(dataNatUnit.Nat_UnitID)},
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus unit berikut ?",
+			[]string{"Kode", "Unit"},
+			[]string{"", ""},
+			dev_mdnatunitview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get unit error", "danger"), newForm})
+	}
+	newForm := dev_mdnatunitview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "natunitid", Type: "hidden", Value: strconv.Itoa(dataNatUnit.Nat_UnitID)},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus unit berikut ?",
+		[]string{"Kode", "Unit"},
+		[]string{dataNatUnit.Nat_UnitCode, dataNatUnit.Nat_UnitName},
+		dev_mdnatunitview.JsShowModal("#"+dialogDeleteID))
+	return utils.View(c, newForm)
+}
+
+func (nh *MdNatUnitHandler) HandlerCloseFormDelete(c echo.Context) error {
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+	newForm := dev_mdnatunitview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "natunitid", Type: "hidden", Value: ""},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus unit berikut ?",
+		[]string{"Kode", "Unit"},
+		[]string{"", ""},
+		dev_mdnatunitview.JsShowModal(""))
+	return utils.View(c, newForm)
+}
+
+func (nh *MdNatUnitHandler) HandlerDeleteNatUnit(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	// prm form addnatunit
+	id := c.FormValue("natunitid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogDeleteID := c.FormValue("dialogDeleteID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD NAT UNIT PARAM",
+
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+
+	// edit nat unit service
+	dataNatUnit, err := nh.MdNatUnitServices.DeleteMdNatUnit(id)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+		)
+		newForm := dev_mdnatunitview.DeleteConfirmationBody(
+			models.CustomTextFieldv2Prm{Name: "natunitid", Type: "hidden", Value: ""},
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus unit berikut ?",
+			[]string{"Kode", "Unit"},
+			[]string{"", ""},
+			dev_mdnatunitview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+	}
+	logger.Info("ADD Unit",
+		zap.Any("return", dataNatUnit),
+	)
+
+	// get list nat unit fo table
+	dataNatUnitList, totalPage, err := nh.MdNatUnitServices.GetListMdNatUnit(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET Unit",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataNatUnit)
+		return err
+	}
+	if len(dataNatUnitList) == 0 && totalPage > 1 {
+		currPage = currPage - 1
+		dataNatUnitList, _, err = nh.MdNatUnitServices.GetListMdNatUnit(search, currPage, 5)
+		if err != nil {
+			defer logger.Sync()
+			logger.Info("ERROR GET UNIT",
+				zap.Any("error", err),
+			)
+			return err
+		}
+	}
+
+	// table component
+	tableComponent := dev_mdnatunitview.TableNatUnit(
+		dataNatUnitList,
+		tableID,
+		"/dev/md/natunit/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/natunit/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+
+	// pagination component
+	natUnitPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/natunit/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
+	)
+
+	var retVal []templ.Component
+	newForm := dev_mdnatunitview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "natunitid", Type: "hidden", Value: ""},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus unit berikut ?",
+		[]string{"Kode", "Unit"},
+		[]string{"", ""},
+		dev_mdnatunitview.JsHideModal("#"+dialogDeleteID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil delete Unit ", "success")
+	retVal = append(retVal, toastSuccess)
+	retVal = append(retVal, tableComponent)
+	retVal = append(retVal, natUnitPaginationComponent)
+	retVal = append(retVal, newForm)
+	return utils.ViewMulti(c, retVal)
+}

handlers/routes.go

@@ -253,4 +253,12 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	dev.GET("/md/natunit", devMdNatUnitHandlers.HandleShowMdNatUnitScreen)
 	dev.GET("/md/natunit/filter", devMdNatUnitHandlers.HandleFilterMdNatUnit)
 	dev.GET("/md/natunit/changepage", devMdNatUnitHandlers.HandlerChangePageMdNatUnit)
+	dev.POST("/md/natunit/closeaddform", devMdNatUnitHandlers.HandlerCloseFormAdd)
+	dev.POST("/md/natunit/add", devMdNatUnitHandlers.HandlerAddNatUnit)
+	dev.GET("/md/natunit/openedit", devMdNatUnitHandlers.HandlerOpenEditForm)
+	dev.POST("/md/natunit/closeeditform", devMdNatUnitHandlers.HandlerCloseFormEdit)
+	dev.POST("/md/natunit/edit", devMdNatUnitHandlers.HandlerEditNatUnit)
+	dev.GET("/md/natunit/opendelete", devMdNatUnitHandlers.HandlerOpenDeleteForm)
+	dev.POST("/md/natunit/closedeleteform", devMdNatUnitHandlers.HandlerCloseFormDelete)
+	dev.POST("/md/natunit/delete", devMdNatUnitHandlers.HandlerDeleteNatUnit)
 }

models/natunit.models.go

@@ -1,5 +1,7 @@
 package models
 
+import "github.com/a-h/templ"
+
 type NatUnit struct {
 	Nomor               string `db:"nomor"`
 	Nat_UnitID          int    `db:"Nat_UnitID"`
@@ -9,3 +11,19 @@ type NatUnit struct {
 	Nat_UnitLastUpdated string `db:"Nat_UnitLastUpdated"`
 	Nat_UnitIsActive    string `db:"Nat_UnitIsActive"`
 }
+
+type NatUnitFormComponent struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	InputName    CustomTextFieldv2Prm
+	InputCode    CustomTextFieldv2Prm
+	InputID      CustomTextFieldv2Prm
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}

services/dev/md.natunit.services.go

@@ -6,7 +6,10 @@ import (
 	dbx "cpone/package/database"
 	"fmt"
 	"math"
+	"strconv"
 	"strings"
+
+	"go.uber.org/zap"
 )
 
 func NewMdNatUnitServices(uStore db.AppStore) *MdNatUnitServices {
@@ -104,3 +107,156 @@ func (nu *MdNatUnitServices) GetMdNatUnitBreadCrumb(title string) (models.BreadC
 
 	return ret, nil
 }
+
+func (nu *MdNatUnitServices) GetMdNatUnitByID(id string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+
+	var data models.NatUnit
+	err := dbx.Handlex.Get(&data, `SELECT * FROM nat_unit
+	WHERE Nat_UnitID = ?`, id)
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get data unit by id",
+			zap.String("ID", id),
+			zap.Error(err),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (nu *MdNatUnitServices) AddMdNatUnit(code string, name string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+	var data models.NatUnit
+	var datacek []models.NatUnit
+
+	qryCek := `SELECT Nat_UnitCode FROM nat_unit
+		WHERE Nat_UnitCode = ? AND Nat_UnitIsActive = '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 nat_unit
+		(Nat_UnitCode,
+		Nat_UnitName) VALUES(?,?)`
+	rst := dbx.Handlex.MustExec(qry, code, name)
+	insertedID, err := rst.LastInsertId()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Insert natunit",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	s := strconv.Itoa(int(insertedID))
+	data, err = nu.GetMdNatUnitByID(s)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get natunit by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (nu *MdNatUnitServices) EditMdNatUnit(id string, code string, name string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+	var data models.NatUnit
+	var datacek []models.NatUnit
+
+	qryCek := `SELECT Nat_UnitCode FROM nat_unit
+		WHERE Nat_UnitCode = ? AND Nat_UnitIsActive = 'Y' AND Nat_UnitID <> ?`
+	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 nat_unit
+		SET Nat_UnitCode = ?,
+		Nat_UnitName = ?,
+		Nat_UnitLastUpdated = NOW()
+		WHERE Nat_UnitID = ?`
+	rst := dbx.Handlex.MustExec(qry, code, name, id)
+	_, err = rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error Update natunit",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = nu.GetMdNatUnitByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get natunit by id",
+			zap.String("code", code),
+			zap.String("name", name),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}
+
+func (nu *MdNatUnitServices) DeleteMdNatUnit(id string) (models.NatUnit, error) {
+	logger, _ := zap.NewProduction()
+	var data models.NatUnit
+	qry := `UPDATE nat_unit
+		SET Nat_UnitLastUpdated = NOW(),
+		Nat_UnitIsActive = 'N'
+		WHERE Nat_UnitID = ?`
+	rst := dbx.Handlex.MustExec(qry, id)
+	_, err := rst.RowsAffected()
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error delete nat unit",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+
+	data, err = nu.GetMdNatUnitByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get nat unit by id",
+			zap.String("id", id),
+		)
+		return data, fmt.Errorf("QUERY_FAILED")
+	}
+	return data, nil
+}

views/dev/mdnatunit/mdnatunit.templ

@@ -10,10 +10,19 @@ templ MdNatUnitScreen(
 	tableID string,
 	paginationID string,
 	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
 	breadcrumb templ.Component,
 	tablecontent templ.Component,
 	filterComponent templ.Component,
-	paginationComponent templ.Component) {
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm templ.Component) {
 	<div class="container-fluid">
 		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
 			Name:  "tableID",
@@ -27,6 +36,30 @@ templ MdNatUnitScreen(
 			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
@@ -38,6 +71,7 @@ templ MdNatUnitScreen(
 						type="button"
 						class="btn btn-primary"
 						data-toggle="modal"
+						data-target={ "#" + dialogAddID }
 					>Add New</button>
 				</div>
 			</div>
@@ -46,12 +80,25 @@ templ MdNatUnitScreen(
 					type="button"
 					class="btn btn-primary btn-block"
 					data-toggle="modal"
+					data-target={ "#" + dialogAddID }
 				>Add New</button>
 			</div>
 		</div>
 		@filterComponent
-		@tablecontent
-		@paginationComponent
+		<div id="loading-parent" class=" rounded">
+			@tablecontent
+			@paginationComponent
+			@modalAddForm
+			@modalEditForm
+			@modalDeleteForm
+			<div id="loading-child" class=" rounded bg-transparent">
+				// <div class="spinner spinner-lg spinner-primary"></div>
+				<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+		</div>
+		<div id="loadingcontent"></div>
 	</div>
 }
 
@@ -89,6 +136,70 @@ templ CssMdNatUnit() {
 }
 
 templ JsMdNatUnit() {
+	<script>
+        function onLoadingStart() {
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.add("overlay");
+			// loadingParent.classList.add("overlay-block");
+			// loadingChild.classList.add("overlay-layer");
+			// loadingSpinner.classList.remove("d-none");
+
+            // Additional logic when loading starts
+        }
+
+        function onLoadingEnd() {
+            console.log('Loading ended');
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.remove("overlay");
+			// loadingParent.classList.remove("overlay-block");
+			// loadingChild.classList.remove("overlay-layer");
+			// loadingSpinner.classList.add("d-none");
+        }
+
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+			console.log(event.detail.xhr)
+			console.log(event.detail.elt)
+            if (indicator) {
+                onLoadingStart();
+            }
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+            if (indicator) {
+                onLoadingEnd();
+            }
+        });
+    </script>
+}
+
+script BeforeRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}
+
+script AfterRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
 }
 
 templ ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,

views/dev/mdnatunit/mdnatunit_templ.go

@@ -20,10 +20,19 @@ func MdNatUnitScreen(
 	tableID string,
 	paginationID string,
 	searchID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
 	breadcrumb templ.Component,
 	tablecontent templ.Component,
 	filterComponent templ.Component,
-	paginationComponent templ.Component) templ.Component {
+	paginationComponent templ.Component,
+	modalAddForm templ.Component,
+	modalEditForm templ.Component,
+	modalDeleteForm templ.Component) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -61,6 +70,48 @@ func MdNatUnitScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row align-items-center mb-10\"><div class=\"col-md-10 col-sm-12 p-0 \">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -69,7 +120,33 @@ func MdNatUnitScreen(
 		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\">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\">Add New</button></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none\"><div class=\"d-flex justify-content-end\"><button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunit.templ`, Line: 74, Col: 37}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div><div class=\"col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5\"><button type=\"button\" class=\"btn btn-primary btn-block\" data-toggle=\"modal\" data-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogAddID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunit.templ`, Line: 83, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -77,6 +154,10 @@ func MdNatUnitScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\" rounded\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		templ_7745c5c3_Err = tablecontent.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -85,7 +166,19 @@ func MdNatUnitScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		templ_7745c5c3_Err = modalAddForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalEditForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalDeleteForm.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\" rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -104,9 +197,9 @@ func CssMdNatUnit() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var2 == nil {
-			templ_7745c5c3_Var2 = templ.NopComponent
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, 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    </style>")
@@ -128,11 +221,15 @@ func JsMdNatUnit() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var3 == nil {
-			templ_7745c5c3_Var3 = templ.NopComponent
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n        function onLoadingStart() {\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.add(\"overlay\");\r\n\t\t\t// loadingParent.classList.add(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.add(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.remove(\"d-none\");\r\n\r\n            // Additional logic when loading starts\r\n        }\r\n\r\n        function onLoadingEnd() {\r\n            console.log('Loading ended');\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.remove(\"overlay\");\r\n\t\t\t// loadingParent.classList.remove(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.remove(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.add(\"d-none\");\r\n        }\r\n\r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.elt)\r\n            if (indicator) {\r\n                onLoadingStart();\r\n            }\r\n        });\r\n\r\n        document.addEventListener('htmx:afterRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n            if (indicator) {\r\n                onLoadingEnd();\r\n            }\r\n        });\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}
@@ -140,6 +237,40 @@ func JsMdNatUnit() templ.Component {
 	})
 }
 
+func BeforeRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_BeforeRequestContent_911f`,
+		Function: `function __templ_BeforeRequestContent_911f(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_BeforeRequestContent_911f`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContent_911f`),
+	}
+}
+
+func AfterRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContent_6cc0`,
+		Function: `function __templ_AfterRequestContent_6cc0(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_AfterRequestContent_6cc0`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_6cc0`),
+	}
+}
+
 func ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
 	navbarmenu templ.Component,
 	navbaruser templ.Component,
@@ -151,12 +282,12 @@ func ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component,
 			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
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var5 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		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()
@@ -171,7 +302,7 @@ func ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component,
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var5), templ_7745c5c3_Buffer)
+		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
 		}

views/dev/mdnatunit/mdnatunitformmodal.templ

@@ -0,0 +1,187 @@
+package dev_mdnatunitview
+
+import "cpone/models"
+import "cpone/component/modal"
+import "cpone/component/customtextfield"
+
+templ NatUnitForm(data models.NatUnitFormComponent) {
+	<div class="">
+		<form
+			id={ data.IDComponent }
+			hx-post={ data.Link }
+			class="form"
+			hx-target={ data.HxTarget }
+			hx-swap={ data.HxSwap }
+			hx-include={ data.HxInclude }
+			hx-indicator=".formloading"
+			hx-on::before-request={ HandleFormBeforeRequest() }
+			hx-on::after-request={ HandleFormAfterRequest() }
+		>
+			@modalcomponent.Modal(data.ModalID,
+				data.ModalTitle,
+				data.DialogBody,
+				data.DialogAction,
+				data.ButtonCLose)
+		</form>
+	</div>
+}
+
+script HandleFormBeforeRequest() {
+	console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
+		
+	}
+}
+
+script HandleFormAfterRequest() {
+	console.log("handle enable btn add");
+
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ BodyFormNatUnit(inputId models.CustomTextFieldv2Prm,
+	inputCode models.CustomTextFieldv2Prm,
+	inputName models.CustomTextFieldv2Prm,
+	componentID string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		@customtextfield.CustomTextFieldv2(
+			inputId)
+		@customtextfield.CustomTextFieldv2(
+			inputCode)
+		@customtextfield.CustomTextFieldv2(
+			inputName)
+	</div>
+}
+
+script JsHideModal(modalID string) {
+	$(modalID).modal('hide')
+}
+
+script JsShowModal(modalID string) {
+	$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ ActionFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModal(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel "
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Simpan
+		</button>
+	</div>
+}
+
+templ BtnCloseFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<button
+		hx-post={ LinkClose }
+		hx-target={ targetClose }
+		hx-swap={ hxSwapClose }
+		type="button"
+		hx-on::after-request={ JsHideModal(modalID) }
+		class="close btnactcancel"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		<p>{ message }</p>
+		<div class="card rounded-lg">
+			<div class="card-body d-flex flex-row">
+				<div class="d-flex flex-column">
+					for _, v := range datHeader {
+						<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
+					}
+				</div>
+				<div class="d-flex flex-column ">
+					for _, v := range dataText {
+						<div class="mb-1 mt-1 font-weight-bold">
+							{ v }
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+		@customtextfield.CustomTextFieldv2(inputId)
+	</div>
+}
+
+templ ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModal(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Yakin
+		</button>
+	</div>
+}

views/dev/mdnatunit/mdnatunitformmodal_templ.go

@@ -0,0 +1,649 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdnatunitview
+
+//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 NatUnitForm(data models.NatUnitFormComponent) 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\mdnatunit\mdnatunitformmodal.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\mdnatunit\mdnatunitformmodal.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\mdnatunit\mdnatunitformmodal.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\mdnatunit\mdnatunitformmodal.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\mdnatunit\mdnatunitformmodal.templ`, Line: 15, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".formloading\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 templ.ComponentScript = HandleFormBeforeRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.ComponentScript = HandleFormAfterRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalcomponent.Modal(data.ModalID,
+			data.ModalTitle,
+			data.DialogBody,
+			data.DialogAction,
+			data.ButtonCLose).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func HandleFormBeforeRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormBeforeRequest_2922`,
+		Function: `function __templ_HandleFormBeforeRequest_2922(){console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_2922`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_2922`),
+	}
+}
+
+func HandleFormAfterRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormAfterRequest_956b`,
+		Function: `function __templ_HandleFormAfterRequest_956b(){console.log("handle enable btn add");
+
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormAfterRequest_956b`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterRequest_956b`),
+	}
+}
+
+func BodyFormNatUnit(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\mdnatunit\mdnatunitformmodal.templ`, Line: 66, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputId).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputCode).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
+			inputName).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JsHideModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsHideModal_da6c`,
+		Function: `function __templ_JsHideModal_da6c(modalID){$(modalID).modal('hide')
+}`,
+		Call:       templ.SafeScript(`__templ_JsHideModal_da6c`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsHideModal_da6c`, modalID),
+	}
+}
+
+func JsShowModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JsShowModal_b74d`,
+		Function: `function __templ_JsShowModal_b74d(modalID){$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}`,
+		Call:       templ.SafeScript(`__templ_JsShowModal_b74d`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JsShowModal_b74d`, modalID),
+	}
+}
+
+func ActionFormNatUnit(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\mdnatunit\mdnatunitformmodal.templ`, Line: 100, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 101, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 102, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel \" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Simpan\r</button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func BtnCloseFormNatUnit(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\mdnatunit\mdnatunitformmodal.templ`, Line: 123, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 124, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 125, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"close btnactcancel\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var22 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var22 == nil {
+			templ_7745c5c3_Var22 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 142, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var24.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 143, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><div class=\"card rounded-lg\"><div class=\"card-body d-flex flex-row\"><div class=\"d-flex flex-column\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range datHeader {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 text-disabled font-weight-bold mr-5\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var26 string
+			templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 148, Col: 68}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range dataText {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 font-weight-bold\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var27 string
+			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 154, Col: 10}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(inputId).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose string, modalID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var28 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var28 == nil {
+			templ_7745c5c3_Var28 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JsHideModal(modalID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var29 templ.ComponentScript = JsHideModal(modalID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var29.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 168, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var31 string
+		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 169, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 string
+		templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunitformmodal.templ`, Line: 170, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel\" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Yakin\r</button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/dev/mdnatunit/mdnatunittable.templ

@@ -3,19 +3,46 @@ package dev_mdnatunitview
 import (
 	"cpone/component/table"
 	"cpone/models"
+	"strconv"
 )
 
 templ TableNatUnit(data []models.NatUnit,
 	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
 ) {
 	<div id={ tableID } hx-swap-oob="true">
 		@tablecomponent.TableV3([]string{"KODE", "UNIT", "AKSI"},
 			[]string{"40%", "40%", "20%"},
-			RowNatUnit(data))
+			RowNatUnit(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			))
 	</div>
 }
 
-templ RowNatUnit(data []models.NatUnit) {
+templ RowNatUnit(data []models.NatUnit,
+	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>
@@ -26,8 +53,78 @@ templ RowNatUnit(data []models.NatUnit) {
 			<td>{ v.Nat_UnitCode }</td>
 			<td>{ v.Nat_UnitName }</td>
 			<td>
-				Action
+				@TableAction(v.Nat_UnitID,
+					hxGetEdit,
+					hxTargetEdit,
+					hxSwapEdit,
+					hxIncludeEdit,
+					hxGetDelete,
+					hxTargetDelete,
+					hxSwapDelete,
+					hxIncludeDelete,
+				)
 			</td>
 		</tr>
 	}
 }
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	<div class="row px-5 d-flex justify-content-around">
+		<a
+			type="button"
+			class="btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm"
+			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetEdit }
+			hx-swap={ hxSwapEdit }
+			hx-include={ hxIncludeEdit }
+			hx-indicator={ "#spnredt" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnredt" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Edit
+		</a>
+		<a
+			type="button"
+			class=" btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
+			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetDelete }
+			hx-swap={ hxSwapDelete }
+			hx-include={ hxIncludeDelete }
+			hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Hapus
+		</a>
+	</div>
+}
+
+script HandleBeforeRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	// console.log(id)
+}
+
+script HandleAfterRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	// console.log(id)
+}

views/dev/mdnatunit/mdnatunittable_templ.go

@@ -13,10 +13,19 @@ import "bytes"
 import (
 	"cpone/component/table"
 	"cpone/models"
+	"strconv"
 )
 
 func TableNatUnit(data []models.NatUnit,
 	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
 ) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
@@ -37,7 +46,7 @@ func TableNatUnit(data []models.NatUnit,
 		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\mdnatunit\mdnatunittable.templ`, Line: 11, Col: 18}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 20, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -49,7 +58,16 @@ func TableNatUnit(data []models.NatUnit,
 		}
 		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"KODE", "UNIT", "AKSI"},
 			[]string{"40%", "40%", "20%"},
-			RowNatUnit(data)).Render(ctx, templ_7745c5c3_Buffer)
+			RowNatUnit(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			)).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -64,7 +82,16 @@ func TableNatUnit(data []models.NatUnit,
 	})
 }
 
-func RowNatUnit(data []models.NatUnit) templ.Component {
+func RowNatUnit(data []models.NatUnit,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -91,7 +118,7 @@ func RowNatUnit(data []models.NatUnit) templ.Component {
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.Nat_UnitCode)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 26, Col: 23}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 53, Col: 23}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -104,13 +131,30 @@ func RowNatUnit(data []models.NatUnit) templ.Component {
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v.Nat_UnitName)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 27, Col: 23}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 54, Col: 23}
 			}
 			_, 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>Action\r</td></tr>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = TableAction(v.Nat_UnitID,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td></tr>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -121,3 +165,275 @@ func RowNatUnit(data []models.NatUnit) templ.Component {
 		return templ_7745c5c3_Err
 	})
 }
+
+func TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\"btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetEdit + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 86, 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\mdnatunit\mdnatunittable.templ`, Line: 87, 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\mdnatunit\mdnatunittable.templ`, Line: 88, 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\mdnatunit\mdnatunittable.templ`, Line: 89, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs("#spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 90, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs("spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 94, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Edit\r</a> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\" btnactionug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetDelete + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 100, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 101, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 102, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 103, Col: 31}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs("#spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 104, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var20.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs("spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdnatunit\mdnatunittable.templ`, Line: 108, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Hapus\r</a></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func HandleBeforeRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleBeforeRequestRow_9a4e`,
+		Function: `function __templ_HandleBeforeRequestRow_9a4e(id){var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	// console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleBeforeRequestRow_9a4e`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleBeforeRequestRow_9a4e`, id),
+	}
+}
+
+func HandleAfterRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleAfterRequestRow_9e81`,
+		Function: `function __templ_HandleAfterRequestRow_9e81(id){var cusid_ele = document.getElementsByClassName('btnactionug');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	// console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleAfterRequestRow_9e81`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleAfterRequestRow_9e81`, id),
+	}
+}