progress + modal form table

2024-05-22 10:27:00 +07:00
parent 91a5f3270d
commit ccfd11fb80
11 changed files with 784 additions and 29 deletions
--- a/component/modal/modal.templ
+++ b/component/modal/modal.templ
@@ -28,3 +28,32 @@ templ Modal(modalID string, modalTitle string, modalBody templ.Component, modalA
 		</div>
 	</div>
 }
+
+templ ModalXL(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose templ.Component) {
+	<div
+		class="modal fade"
+		style="display: none"
+		id={ modalID }
+		tabindex="-1"
+		role="dialog"
+		data-backdrop="static"
+		aria-hidden="true"
+	>
+		<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+			<div class="modal-content rounded-lg">
+				<div class="modal-header border-bottom-0">
+					<h6 class="modal-title text-black font-weight-bolder">
+						{ modalTitle }
+					</h6>
+					@btnClose
+				</div>
+				<div class="modal-body border-bottom-0">
+					@modalBody
+				</div>
+				<div class="modal-footer border-top-0">
+					@modalAction
+				</div>
+			</div>
+		</div>
+	</div>
+}
--- a/component/modal/modal_templ.go
+++ b/component/modal/modal_templ.go
@@ -83,3 +83,77 @@ func Modal(modalID string, modalTitle string, modalBody templ.Component, modalAc
 		return templ_7745c5c3_Err
 	})
 }
+
+func ModalXL(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"modal fade\" style=\"display: none\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(modalID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal.templ`, Line: 36, Col: 14}
+		}
+		_, 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("\" tabindex=\"-1\" role=\"dialog\" data-backdrop=\"static\" aria-hidden=\"true\"><div class=\"modal-dialog modal-dialog-centered modal-xl\" role=\"document\"><div class=\"modal-content rounded-lg\"><div class=\"modal-header border-bottom-0\"><h6 class=\"modal-title text-black font-weight-bolder\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(modalTitle)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal.templ`, Line: 46, Col: 18}
+		}
+		_, 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("</h6>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = btnClose.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"modal-body border-bottom-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalBody.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"modal-footer border-top-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalAction.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/handlers/dev/mastermenuusergroup.handlers.go
+++ b/handlers/dev/mastermenuusergroup.handlers.go
@@ -245,7 +245,7 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupV1(c echo.Co
 		1,
 		"/dev/usergroupv1pagination",
 		paginationID,
-		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "",
+		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "", "",
 	)

 	si := mastermenuusergroup.ShowMasterMenuUserGroupV1x(
@@ -446,7 +446,7 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupSearchV1(c e
 		1,
 		"/dev/usergroupv1pagination",
 		paginationID,
-		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "")
+		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "", "")

 	swapTable :=
 		mastermenuusergroup.SwapTableUserGroup(userGroupPaginationComponent, contentUserGroupComponent)
@@ -491,7 +491,7 @@ func (lh *MasterMenuUserGroupHandler) HandlerShowMasterMenuUserGroupPaginationV1
 		page,
 		"/dev/usergroupv1pagination",
 		paginationID,
-		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "")
+		"#tableID, #searchID, #paginationID", "#"+paginationID, "outerHTML", "", "")

 	swapTable :=
 		mastermenuusergroup.SwapTableUserGroup(userGroupPaginationComponent, contentUserGroupComponent)
--- a/handlers/dev/mdpaket.handlers.go
+++ b/handlers/dev/mdpaket.handlers.go
@@ -2,6 +2,7 @@ package dev_handlers

 import (
 	breadcrumadmin "cpone/component/breadcrumbadmin"
+	customtextfieldsearch "cpone/component/customtextfieldsearch"
 	navbarmenu "cpone/component/navbar"
 	"cpone/component/pagination"
 	sidebaruserprofile "cpone/component/sidebar_user_profile"
@@ -9,6 +10,7 @@ import (
 	globalservices "cpone/services"
 	"cpone/utils"
 	"fmt"
+	"strconv"

 	devmdpaket "cpone/views/dev/mdpaket"

@@ -20,6 +22,7 @@ import (
 type MasterDataPaketService interface {
 	GetListBreadCrumb() (models.BreadCrumbV1, error)
 	GetListMasterDataPaket(keyword string, currenPage int, rowPerPage int) ([]models.MDPaket, int, error)
+	GetListItemPaket(keyword string, currenPage int, rowPerPage int) ([]models.MDPaketItem, int, error)
 }

 func NewMasterDataPaketServiceHandler(us MasterDataPaketService) *MasterDataPaketHandler {
@@ -41,6 +44,7 @@ func (usr *MasterDataPaketHandler) View(c echo.Context, cmp templ.Component) err
 func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) error {
 	logger, _ := zap.NewProduction()

+	// get data from db
 	dataMenu, err := globalservices.GetMenu()
 	if err != nil {
 		return err
@@ -61,19 +65,30 @@ func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) er
 		return err
 	}

+	dataPaketItem, totalItemPage, err := mdp.MasterDataPaketService.GetListItemPaket("", 1, 3)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET DATA ITEM",
+			zap.Any("error", err),
+		)
+		return err
+	}
+
 	defer logger.Sync()

-	tableID := utils.GenerateRandomID("tablebody")
-	paginationID := utils.GenerateRandomID("paginationid")
+	// navbar + header
+	navbarmenuComponent := navbarmenu.NavbarMenu(dataMenu)
+	navbaruserComponent := navbarmenu.Navbar(dataUser)
+	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)

+	// content master data paket
 	dataBreadCrumb, err := mdp.MasterDataPaketService.GetListBreadCrumb()
 	if err != nil {
 		return err
 	}

-	navbarmenuComponent := navbarmenu.NavbarMenu(dataMenu)
-	navbaruserComponent := navbarmenu.Navbar(dataUser)
-	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)
+	tableID := utils.GenerateRandomID("tablebody")
+	paginationID := utils.GenerateRandomID("paginationid")

 	contentTablePaket := devmdpaket.TablePaket(dataPaket, tableID)
 	paginationPaket := pagination.PaginationV2(
@@ -85,8 +100,47 @@ func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) er
 		"#"+paginationID,
 		"outerHTML",
 		"",
+		"",
 	)

+	// initialize modal tambah paket component
+	kodeSearchID := utils.GenerateRandomID("kodesearchid")
+	namaSearchID := utils.GenerateRandomID("namasearchid")
+	itemTableID := utils.GenerateRandomID("itemtableid")
+	itemPaginationID := utils.GenerateRandomID("itempaginationid")
+
+	filterKodePaket := customtextfieldsearch.MainCustomTextFieldSearchV2(kodeSearchID,
+		"searchkode",
+		"Cari Kode",
+		"text",
+		"/dev/searchtambahpaket",
+		"input changed delay:500ms, search",
+		"#"+paginationID, "", "", "outerHTML", "#itemTableID, #itemPaginationID",
+	)
+
+	filterNamaPaket := customtextfieldsearch.MainCustomTextFieldSearchV2(namaSearchID,
+		"searchnama",
+		"Cari Nama",
+		"text",
+		"/dev/searchtambahpaket",
+		"input changed delay:500ms, search",
+		"#"+paginationID, "", "", "outerHTML", "#itemTableID, #itemPaginationID",
+	)
+
+	itemTable := devmdpaket.TableItem(dataPaketItem, itemTableID)
+	paginationItem := pagination.PaginationV2(
+		totalItemPage,
+		1,
+		"/dev/paketitempagination",
+		itemPaginationID,
+		"#itemTableID, #itemPaginationID",
+		"#"+itemPaginationID,
+		"outerHTML",
+		"",
+		"",
+	)
+
+	// input the component
 	cmp_mdp := devmdpaket.ShowMasterDataPaket(
 		"Master Paket",
 		devmdpaket.ContentMasterDataPaket(
@@ -95,6 +149,10 @@ func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) er
 			breadcrumadmin.MainBreadcrumbAdminV1(dataBreadCrumb),
 			contentTablePaket,
 			paginationPaket,
+			filterKodePaket,
+			filterNamaPaket,
+			itemTable,
+			paginationItem,
 		),
 		devmdpaket.CSSMasterDataPaket(),
 		devmdpaket.JsMasterDataPaket(),
@@ -105,3 +163,88 @@ func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) er

 	return utils.View(c, cmp_mdp)
 }
+
+func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaketPagination(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	pageparam := c.QueryParam("page")
+	tableID := c.QueryParam("tableID")
+	paginationID := c.QueryParam("paginationID")
+	page, err := strconv.Atoi(pageparam)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM",
+			zap.Any("page", page),
+			zap.Any("error", err),
+		)
+		return err
+	}
+
+	dataPaket, totalpage, err := mdp.MasterDataPaketService.GetListMasterDataPaket("", page, 3)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET DATA PAKET",
+			zap.Any("error", err),
+		)
+		return err
+	}
+
+	contentDataPaketComp := devmdpaket.TablePaket(dataPaket, tableID)
+	paginationDataPaketComp := pagination.PaginationV2(
+		totalpage,
+		page,
+		"/dev/paketpagination",
+		paginationID,
+		"#tableID, #paginationID",
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"",
+	)
+
+	swapTable := devmdpaket.SwapTablePaket(paginationDataPaketComp, contentDataPaketComp)
+
+	return utils.View(c, swapTable)
+}
+
+func (mdp *MasterDataPaketHandler) HandlerPaginationItemTable(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	pageparam := c.QueryParam("page")
+	itemTableID := c.QueryParam("itemTableID")
+	itemPaginationID := c.QueryParam("itemPaginationID")
+	page, err := strconv.Atoi(pageparam)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM",
+			zap.Any("page", page),
+			zap.Any("error", err),
+		)
+		return err
+	}
+
+	dataPaketItem, totalPage, err := mdp.MasterDataPaketService.GetListItemPaket("", page, 3)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET DATA PAKET",
+			zap.Any("error", err),
+		)
+		return err
+	}
+
+	itemTableComp := devmdpaket.TableItem(dataPaketItem, itemTableID)
+	paginationItemComp := pagination.PaginationV2(
+		totalPage,
+		page,
+		"/dev/paketitempagination",
+		itemPaginationID,
+		"#itemTableID, #itemPaginationID",
+		"#"+itemPaginationID,
+		"outerHTML",
+		"",
+		"",
+	)
+
+	swapTable := devmdpaket.SwapTablePaket(paginationItemComp, itemTableComp)
+	return utils.View(c, swapTable)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -209,6 +209,8 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	devMDPServices := dev_services.NewServiceMasterDataPaket(appStore)
 	devMDPHandlers := dev_handlers.NewMasterDataPaketServiceHandler(devMDPServices)
 	dev.GET("/paket", devMDPHandlers.HandlerShowMasterDataPaket)
+	dev.GET("/paketpagination", devMDPHandlers.HandlerShowMasterDataPaketPagination)
+	dev.GET("/paketitempagination", devMDPHandlers.HandlerPaginationItemTable)

 	// clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
 	// clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
--- a/models/paket.models.go
+++ b/models/paket.models.go
@@ -5,5 +5,12 @@ type MDPaket struct {
 	PaketKode     string `json:"paket_kode"`
 	PaketJenis    string `json:"paket_jenis"`
 	PaketNama     string `json:"paket_nama"`
-	PaketIsActive string `json:"paket_Is_Active"`
+	PaketIsActive string `json:"paket_is_active"`
+}
+
+type MDPaketItem struct {
+	ItemID       int    `json:"item_id"`
+	ItemKode     string `json:"item_kode"`
+	ItemNama     string `json:"item_nama"`
+	ItemIsActive string `json:"item_is_active"`
 }
--- a/services/dev/mdpaket.services.go
+++ b/services/dev/mdpaket.services.go
@@ -107,6 +107,62 @@ func (smdp *ServiceMasterDataPaket) GetListMasterDataPaket(keyword string, curre
 		},
 	}

-	ret = dummyData
+	if currentPage == 1 {
+		ret = dummyData[:3]
+	} else if currentPage == 2 {
+		ret = dummyData[len(dummyData)-3:]
+	}
+
+	return ret, 2, nil
+}
+
+func (smdp *ServiceMasterDataPaket) GetListItemPaket(keyword string, currentPage int, rowPerPage int) ([]models.MDPaketItem, int, error) {
+	var ret []models.MDPaketItem
+
+	dummyData := []models.MDPaketItem{
+		{
+			ItemID:       1,
+			ItemKode:     "01",
+			ItemNama:     "Natrium",
+			ItemIsActive: "Y",
+		},
+		{
+			ItemID:       2,
+			ItemKode:     "02",
+			ItemNama:     "Kalium",
+			ItemIsActive: "Y",
+		},
+		{
+			ItemID:       3,
+			ItemKode:     "03",
+			ItemNama:     "Chlorida",
+			ItemIsActive: "Y",
+		},
+		{
+			ItemID:       4,
+			ItemKode:     "04",
+			ItemNama:     "SGOT",
+			ItemIsActive: "Y",
+		},
+		{
+			ItemID:       5,
+			ItemKode:     "05",
+			ItemNama:     "SGPT",
+			ItemIsActive: "Y",
+		},
+		{
+			ItemID:       6,
+			ItemKode:     "06",
+			ItemNama:     "HERMATOLOGI LENGKAP",
+			ItemIsActive: "Y",
+		},
+	}
+
+	if currentPage == 1 {
+		ret = dummyData[:3]
+	} else if currentPage == 2 {
+		ret = dummyData[len(dummyData)-3:]
+	}
+
 	return ret, 2, nil
 }
--- a/views/dev/mdpaket/mdpaket.templ
+++ b/views/dev/mdpaket/mdpaket.templ
@@ -6,6 +6,7 @@ import (
    "cpone/component/table"
    "cpone/models"
 	"strconv"
+	"cpone/component/modal"
 )

 templ ContentMasterDataPaket(
@@ -14,6 +15,10 @@ templ ContentMasterDataPaket(
    breadcrumb templ.Component,
    tablecontent templ.Component,
    paginationPaket templ.Component,
+    filterkode templ.Component,
+    filternama templ.Component,
+    tableitem templ.Component,
+    paginationitem templ.Component,
 ) {
    <div class="container-fluid">
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
@@ -34,7 +39,7 @@ templ ContentMasterDataPaket(
                        type="button"
                        class="btn btn-primary"
                        data-toggle="modal"
-                        data-target="#dialognew"
+                        data-target="#dialogNew"
                    >Add New</button>
                </div>
            </div>
@@ -55,7 +60,12 @@ templ ContentMasterDataPaket(
            hx-target="#dialogNew"
            hx-swap="innerHTML"
        >
-            
+            @modalcomponent.ModalXL("dialogNew",
+                "New - Paket",
+                DialogNewPaketBody("","","New","","", filterkode, filternama, tableitem, paginationitem),
+                DialogNewPaketAction(),
+                DialogBtnClose(),
+            )
        </form>
    </div>
 }
@@ -103,6 +113,11 @@ templ TableDataPaket(data []models.MDPaket) {
    }
 }

+templ SwapTablePaket(pagination templ.Component, table templ.Component) {
+    @pagination
+    @table
+}
+
 templ CSSMasterDataPaket() {
 	<link
 		rel="stylesheet"
--- a/views/dev/mdpaket/mdpaket_templ.go
+++ b/views/dev/mdpaket/mdpaket_templ.go
@@ -12,6 +12,7 @@ import "bytes"

 import (
 	"cpone/component/customtextfield"
+	"cpone/component/modal"
 	"cpone/component/table"
 	"cpone/layout"
 	"cpone/models"
@@ -24,6 +25,10 @@ func ContentMasterDataPaket(
 	breadcrumb templ.Component,
 	tablecontent templ.Component,
 	paginationPaket templ.Component,
+	filterkode templ.Component,
+	filternama templ.Component,
+	tableitem templ.Component,
+	paginationitem 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)
@@ -63,7 +68,7 @@ func ContentMasterDataPaket(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none\"><div class=\"d-flex justify-content-end\"><button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#dialognew\">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\">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=\"#dialogNew\">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\">Add New</button></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -75,7 +80,20 @@ func ContentMasterDataPaket(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-center text-primary\"><div class=\"htmx-indicator spinner-border\" role=\"status\" id=\"indicator\"><span class=\"sr-only\"></span></div></div><form hx-post=\"/dev/paket/add\" class=\"form\" hx-target=\"#dialogNew\" hx-swap=\"innerHTML\"></form></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-center text-primary\"><div class=\"htmx-indicator spinner-border\" role=\"status\" id=\"indicator\"><span class=\"sr-only\"></span></div></div><form hx-post=\"/dev/paket/add\" class=\"form\" hx-target=\"#dialogNew\" hx-swap=\"innerHTML\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalcomponent.ModalXL("dialogNew",
+			"New - Paket",
+			DialogNewPaketBody("", "", "New", "", "", filterkode, filternama, tableitem, paginationitem),
+			DialogNewPaketAction(),
+			DialogBtnClose(),
+		).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
 		}
@@ -106,7 +124,7 @@ func TablePaket(data []models.MDPaket, tableID string) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(tableID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 64, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 74, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -119,7 +137,7 @@ func TablePaket(data []models.MDPaket, tableID string) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("#" + tableID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 64, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 74, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -173,7 +191,7 @@ func TableDataPaket(data []models.MDPaket) templ.Component {
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v.PaketKode)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 79, Col: 29}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 89, Col: 29}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -186,7 +204,7 @@ func TableDataPaket(data []models.MDPaket) templ.Component {
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(v.PaketJenis)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 80, Col: 30}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 90, Col: 30}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -199,7 +217,7 @@ func TableDataPaket(data []models.MDPaket) templ.Component {
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(v.PaketNama)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 81, Col: 29}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 91, Col: 29}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -212,7 +230,7 @@ func TableDataPaket(data []models.MDPaket) templ.Component {
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs("#dialogEdit" + strconv.Itoa(v.PaketID))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 89, Col: 77}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 99, Col: 77}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -230,7 +248,7 @@ func TableDataPaket(data []models.MDPaket) templ.Component {
 	})
 }

-func CSSMasterDataPaket() templ.Component {
+func SwapTablePaket(pagination templ.Component, table templ.Component) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -243,6 +261,34 @@ func CSSMasterDataPaket() templ.Component {
 			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = pagination.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = table.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CSSMasterDataPaket() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n        body {\r\n        background-color: white;\r\n        /* padding-right: 100px;\r\n                padding-left: 100px; */\r\n        }\r\n        #div-chart {\r\n            /* overflow-x: scroll; */\r\n            margin: 40px 10vw 40px 10vw;\r\n        }\r\n        .title {\r\n            font-size:20px;\r\n            font-weight: bold;\r\n        }\r\n        #title {\r\n            font-weight: 600;\r\n        }\r\n    </style>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -262,9 +308,9 @@ func JsMasterDataPaket() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !templ_7745c5c3_IsBuffer {
@@ -290,12 +336,12 @@ func ShowMasterDataPaket(
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var12 == nil {
-			templ_7745c5c3_Var12 = templ.NopComponent
+		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var13 == nil {
+			templ_7745c5c3_Var13 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var13 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var14 := 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()
@@ -310,7 +356,7 @@ func ShowMasterDataPaket(
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var13), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile).Render(templ.WithChildren(ctx, templ_7745c5c3_Var14), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/views/dev/mdpaket/modaladdpaket.templ
+++ b/views/dev/mdpaket/modaladdpaket.templ
@@ -0,0 +1,114 @@
+package devmdpaket
+
+import "cpone/component/customtextfield"
+import "cpone/models"
+import "cpone/component/table"
+
+templ DialogNewPaketBody(
+    code string,
+    name string,
+    id string,
+    codeErrorMsg string,
+    nameErrorMsg string,
+    filterkode templ.Component,
+    filternama templ.Component,
+    tableitem templ.Component,
+    paginationitem templ.Component,
+) {
+    <div id="modalpaketbody" class="row">
+        <div class="col-6">
+            @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+                Label: "id paket",
+                Name: "paketid",
+                Placeholder: "id paket",
+                Type: "hidden",
+                Value: code,
+                ErrorMsg: codeErrorMsg,
+            })
+            @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+                Label: "Nama Paket",
+                Name: "namapaket",
+                Placeholder: "Nama Paket",
+                Type: "text",
+                Value: name,
+                ErrorMsg: nameErrorMsg,
+            })
+            <div class="row">
+                <div class="col-6">
+                    @filterkode
+                </div>
+                <div class="col-6">
+                    @filternama
+                </div>
+            </div>
+            @tableitem
+            @paginationitem
+            <div class="d-flex justify-content-center text-primary">
+                <div class="htmx-indicator spinner-border" role="status" id="indicator">
+                    <span class="sr-only"></span>
+                </div>
+            </div>            
+        </div>
+        <div class="col-6">
+        </div>
+    </div>
+}
+
+templ TableItem(data []models.MDPaketItem, itemTableID string) {
+    <div id={ itemTableID } hx-swap-oob={ "#" + itemTableID }>
+        @tablecomponent.TableV3([]string{"KODE", "NAMA", "AKSI"},
+            []string{"20%", "50%", "30%"},
+            TableItemData(data))
+    </div>
+}
+
+templ TableItemData(data []models.MDPaketItem) {
+    if len(data) == 0 {
+        <tr>
+            <td colspan="3" class="text-center">Data Tidak Ditemukan</td>
+        </tr>
+    }
+    for _, v := range data {
+        <tr>
+            <td>{ v.ItemKode }</td>
+            <td>{ v.ItemNama }</td>
+            <td>
+                <div class="row px-5 d-flex justify-content-around">
+                    <a
+                        id="btnitempilih"
+                        type="button"
+                        class="btnitempilih col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-success mb-2"
+                    >
+                        Pilih
+                    </a>                        
+                </div>
+            </td>
+        </tr>
+    }
+}
+
+templ DialogNewPaketAction() {
+    <div>
+        <button 
+            type="button" 
+            class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+            data-dismiss="modal"
+        >Batal</button>
+        <button 
+            type="button" 
+            class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+            data-dismiss="modal"
+        >Simpan</button>
+    </div>
+}
+
+templ DialogBtnClose() {
+    <button 
+        type="button" 
+        class="close"
+        data-dismiss="modal"
+        aria-label="Close"
+    >
+        <i aria-hidden="true" class="ki ki-close"></i>
+    </button>
+}
--- a/views/dev/mdpaket/modaladdpaket_templ.go
+++ b/views/dev/mdpaket/modaladdpaket_templ.go
@@ -0,0 +1,269 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package devmdpaket
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/component/customtextfield"
+import "cpone/models"
+import "cpone/component/table"
+
+func DialogNewPaketBody(
+	code string,
+	name string,
+	id string,
+	codeErrorMsg string,
+	nameErrorMsg string,
+	filterkode templ.Component,
+	filternama templ.Component,
+	tableitem templ.Component,
+	paginationitem templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"modalpaketbody\" class=\"row\"><div class=\"col-6\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			Label:       "id paket",
+			Name:        "paketid",
+			Placeholder: "id paket",
+			Type:        "hidden",
+			Value:       code,
+			ErrorMsg:    codeErrorMsg,
+		}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			Label:       "Nama Paket",
+			Name:        "namapaket",
+			Placeholder: "Nama Paket",
+			Type:        "text",
+			Value:       name,
+			ErrorMsg:    nameErrorMsg,
+		}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row\"><div class=\"col-6\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = filterkode.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-6\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = filternama.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tableitem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = paginationitem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-center text-primary\"><div class=\"htmx-indicator spinner-border\" role=\"status\" id=\"indicator\"><span class=\"sr-only\"></span></div></div></div><div class=\"col-6\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func TableItem(data []models.MDPaketItem, itemTableID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(itemTableID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 58, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("#" + itemTableID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 58, Col: 59}
+		}
+		_, 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"KODE", "NAMA", "AKSI"},
+			[]string{"20%", "50%", "30%"},
+			TableItemData(data)).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func TableItemData(data []models.MDPaketItem) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(data) == 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td colspan=\"3\" class=\"text-center\">Data Tidak Ditemukan</td></tr>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		for _, v := range data {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v.ItemKode)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 73, Col: 28}
+			}
+			_, 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("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var7 string
+			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(v.ItemNama)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 74, Col: 28}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td><div class=\"row px-5 d-flex justify-content-around\"><a id=\"btnitempilih\" type=\"button\" class=\"btnitempilih col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-success mb-2\">Pilih\r</a></div></td></tr>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func DialogNewPaketAction() 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_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><button type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4\" data-dismiss=\"modal\">Batal</button> <button type=\"button\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\" data-dismiss=\"modal\">Simpan</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 DialogBtnClose() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}