diff --git a/component/radiobtn/radiobtn.templ b/component/radiobtn/radiobtn.templ
new file mode 100644
index 0000000..99e22ca
--- /dev/null
+++ b/component/radiobtn/radiobtn.templ
@@ -0,0 +1,43 @@
+package radiobtn
+
+import "cpone/models"
+
+templ CustomRadioBtn(input models.CustomRadioBtn) {
+    <div class="form-group">
+        <label
+            if input.Type == "hidden" {
+                class="text-black d-none"
+            } else {
+                class="text-black"
+            }
+            style="font-family: Poppins; font-weight: 600;"
+        >
+            { input.Label }
+        </label>
+        <div class="radio-inline" style="display: flex; justify-content: flex-start;">
+            for _, d := range input.Item {
+                <label class={ input.Type + " mr-24"}>
+                    <input 
+                        id={input.Name}
+                        type={ input.Type } 
+                        name={ input.Name } 
+                        value={ d.ItemValue }
+                        if d.ItemValue == input.Value {
+                            checked="checked"
+                        }
+                        if input.ErrorMsg == "" {
+                            class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                        } else {
+                            class="form-control bg-field border-1 h-auto py-6 px-6 rounded-lg is-invalid"
+                        }
+                    />
+                    <span></span>
+                    { d.ItemLabel }
+                </label>
+            }
+        </div>
+        <div class="invalid-feedback text-danger mt-3 ml-2">
+            { input.ErrorMsg }
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/component/radiobtn/radiobtn_templ.go b/component/radiobtn/radiobtn_templ.go
new file mode 100644
index 0000000..20fb2da
--- /dev/null
+++ b/component/radiobtn/radiobtn_templ.go
@@ -0,0 +1,192 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package radiobtn
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "cpone/models"
+
+func CustomRadioBtn(input models.CustomRadioBtn) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-group\"><label")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if input.Type == "hidden" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"text-black d-none\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"text-black\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" style=\"font-family: Poppins; font-weight: 600;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(input.Label)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 15, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label><div class=\"radio-inline\" style=\"display: flex; justify-content: flex-start;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range input.Item {
+			var templ_7745c5c3_Var3 = []any{input.Type + " mr-24"}
+			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<label class=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 1, Col: 0}
+			}
+			_, 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("\"><input id=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(input.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 21, Col: 38}
+			}
+			_, 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("\" type=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(input.Type)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 22, Col: 41}
+			}
+			_, 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("\" name=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var7 string
+			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(input.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 23, Col: 41}
+			}
+			_, 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("\" value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var8 string
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(d.ItemValue)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 24, Col: 43}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if d.ItemValue == input.Value {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked=\"checked\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			if input.ErrorMsg == "" {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control bg-field border-1 h-auto py-6 px-6 rounded-lg is-invalid\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("> <span></span> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var9 string
+			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(d.ItemLabel)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 35, Col: 33}
+			}
+			_, 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("</label>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"invalid-feedback text-danger mt-3 ml-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(input.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\radiobtn\radiobtn.templ`, Line: 40, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		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
+	})
+}
diff --git a/handlers/dev/mdpaket.handlers.go b/handlers/dev/mdpaket.handlers.go
index 7942af3..1f8a78c 100644
--- a/handlers/dev/mdpaket.handlers.go
+++ b/handlers/dev/mdpaket.handlers.go
@@ -108,6 +108,7 @@ func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) er
 	namaSearchID := utils.GenerateRandomID("namasearchid")
 	itemTableID := utils.GenerateRandomID("itemtableid")
 	itemPaginationID := utils.GenerateRandomID("itempaginationid")
+	selectedTableID := utils.GenerateRandomID("selectedtableid")
 
 	filterKodePaket := customtextfieldsearch.MainCustomTextFieldSearchV2(kodeSearchID,
 		"searchkode",
@@ -140,6 +141,8 @@ func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) er
 		"",
 	)
 
+	selectedTable := devmdpaket.TableItemSelected(dataPaketItem, selectedTableID)
+
 	// input the component
 	cmp_mdp := devmdpaket.ShowMasterDataPaket(
 		"Master Paket",
@@ -152,6 +155,7 @@ func (mdp *MasterDataPaketHandler) HandlerShowMasterDataPaket(c echo.Context) er
 			filterKodePaket,
 			filterNamaPaket,
 			itemTable,
+			selectedTable,
 			paginationItem,
 		),
 		devmdpaket.CSSMasterDataPaket(),
diff --git a/models/customradiobtn.models.go b/models/customradiobtn.models.go
new file mode 100644
index 0000000..6dc3322
--- /dev/null
+++ b/models/customradiobtn.models.go
@@ -0,0 +1,16 @@
+package models
+
+type CustomRadioBtn struct {
+	ID       string
+	Label    string `default:"Label"`
+	Type     string `default:"radio"`
+	Name     string `default:"name"`
+	Value    string `default:""`
+	ErrorMsg string `default:""`
+	Item     []Radio
+}
+
+type Radio struct {
+	ItemLabel string `default:"item"`
+	ItemValue string `default:""`
+}
diff --git a/models/paket.models.go b/models/paket.models.go
index 032e11a..aa3c395 100644
--- a/models/paket.models.go
+++ b/models/paket.models.go
@@ -12,5 +12,7 @@ type MDPaketItem struct {
 	ItemID       int    `json:"item_id"`
 	ItemKode     string `json:"item_kode"`
 	ItemNama     string `json:"item_nama"`
+	HargaAwal    string `json:"harga_awal"`
+	HargaPaket   string `json:"harga_paket"`
 	ItemIsActive string `json:"item_is_active"`
 }
diff --git a/services/dev/mdpaket.services.go b/services/dev/mdpaket.services.go
index 93d0c19..2661a42 100644
--- a/services/dev/mdpaket.services.go
+++ b/services/dev/mdpaket.services.go
@@ -124,36 +124,48 @@ func (smdp *ServiceMasterDataPaket) GetListItemPaket(keyword string, currentPage
 			ItemID:       1,
 			ItemKode:     "01",
 			ItemNama:     "Natrium",
+			HargaAwal:    "50000",
+			HargaPaket:   "50000",
 			ItemIsActive: "Y",
 		},
 		{
 			ItemID:       2,
 			ItemKode:     "02",
 			ItemNama:     "Kalium",
+			HargaAwal:    "50000",
+			HargaPaket:   "50000",
 			ItemIsActive: "Y",
 		},
 		{
 			ItemID:       3,
 			ItemKode:     "03",
 			ItemNama:     "Chlorida",
+			HargaAwal:    "35000",
+			HargaPaket:   "35000",
 			ItemIsActive: "Y",
 		},
 		{
 			ItemID:       4,
 			ItemKode:     "04",
 			ItemNama:     "SGOT",
+			HargaAwal:    "40000",
+			HargaPaket:   "40000",
 			ItemIsActive: "Y",
 		},
 		{
 			ItemID:       5,
 			ItemKode:     "05",
 			ItemNama:     "SGPT",
+			HargaAwal:    "60000",
+			HargaPaket:   "60000",
 			ItemIsActive: "Y",
 		},
 		{
 			ItemID:       6,
 			ItemKode:     "06",
 			ItemNama:     "HERMATOLOGI LENGKAP",
+			HargaAwal:    "100000",
+			HargaPaket:   "100000",
 			ItemIsActive: "Y",
 		},
 	}
diff --git a/views/dev/mdpaket/mdpaket.templ b/views/dev/mdpaket/mdpaket.templ
index 1b5b694..311ba19 100644
--- a/views/dev/mdpaket/mdpaket.templ
+++ b/views/dev/mdpaket/mdpaket.templ
@@ -18,6 +18,7 @@ templ ContentMasterDataPaket(
     filterkode templ.Component,
     filternama templ.Component,
     tableitem templ.Component,
+    tableselected templ.Component,
     paginationitem templ.Component,
 ) {
     <div class="container-fluid">
@@ -62,7 +63,7 @@ templ ContentMasterDataPaket(
         >
             @modalcomponent.ModalXL("dialogNew",
                 "New - Paket",
-                DialogNewPaketBody("","","New","","", filterkode, filternama, tableitem, paginationitem),
+                DialogNewPaketBody("","","New","","", filterkode, filternama, tableitem, tableselected, paginationitem),
                 DialogNewPaketAction(),
                 DialogBtnClose(),
             )
diff --git a/views/dev/mdpaket/mdpaket_templ.go b/views/dev/mdpaket/mdpaket_templ.go
index e300d5f..8eb404f 100644
--- a/views/dev/mdpaket/mdpaket_templ.go
+++ b/views/dev/mdpaket/mdpaket_templ.go
@@ -28,6 +28,7 @@ func ContentMasterDataPaket(
 	filterkode templ.Component,
 	filternama templ.Component,
 	tableitem templ.Component,
+	tableselected templ.Component,
 	paginationitem templ.Component,
 ) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
@@ -86,7 +87,7 @@ func ContentMasterDataPaket(
 		}
 		templ_7745c5c3_Err = modalcomponent.ModalXL("dialogNew",
 			"New - Paket",
-			DialogNewPaketBody("", "", "New", "", "", filterkode, filternama, tableitem, paginationitem),
+			DialogNewPaketBody("", "", "New", "", "", filterkode, filternama, tableitem, tableselected, paginationitem),
 			DialogNewPaketAction(),
 			DialogBtnClose(),
 		).Render(ctx, templ_7745c5c3_Buffer)
@@ -124,7 +125,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: 74, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 75, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -137,7 +138,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: 74, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 75, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -191,7 +192,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: 89, Col: 29}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 90, Col: 29}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -204,7 +205,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: 90, Col: 30}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 91, Col: 30}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -217,7 +218,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: 91, Col: 29}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 92, Col: 29}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -230,7 +231,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: 99, Col: 77}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\mdpaket.templ`, Line: 100, Col: 77}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
diff --git a/views/dev/mdpaket/modaladdpaket.templ b/views/dev/mdpaket/modaladdpaket.templ
index 017db27..cefe5f4 100644
--- a/views/dev/mdpaket/modaladdpaket.templ
+++ b/views/dev/mdpaket/modaladdpaket.templ
@@ -3,6 +3,7 @@ package devmdpaket
 import "cpone/component/customtextfield"
 import "cpone/models"
 import "cpone/component/table"
+import "cpone/component/radiobtn"
 
 templ DialogNewPaketBody(
     code string,
@@ -13,18 +14,19 @@ templ DialogNewPaketBody(
     filterkode templ.Component,
     filternama templ.Component,
     tableitem templ.Component,
+    tableselected 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,
-            })
+        <div class="col-6 border-right">
+            // @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",
@@ -50,6 +52,19 @@ templ DialogNewPaketBody(
             </div>            
         </div>
         <div class="col-6">
+            @radiobtn.CustomRadioBtn(models.CustomRadioBtn{
+                Label: "Jenis Paket",
+                Type: "radio",
+                Name: "radiojenispaket",
+                Value: "",
+                ErrorMsg: "",
+                Item: []models.Radio{
+                    {ItemLabel: "Panel", ItemValue: "panel"},
+                    {ItemLabel: "Profile", ItemValue: "profile"},
+                },
+            })
+            <h5>Detail Paket</h5>
+            @tableselected
         </div>
     </div>
 }
@@ -87,6 +102,38 @@ templ TableItemData(data []models.MDPaketItem) {
     }
 }
 
+templ TableItemSelected(data []models.MDPaketItem, tableID string) {
+    <div id={ tableID } hx-swap-oob={ "#"+tableID }>
+        @tablecomponent.TableV3([]string{"NAMA", "HARGA AWAL", "HARGA PAKET", "AKSI"},
+            []string{"25%", "25%", "25%", "25%"},
+            TableItemSelectedData(data))
+    </div>
+}
+
+templ TableItemSelectedData(data []models.MDPaketItem) {
+    if len(data) == 0 {
+        <tr>
+            <td colspan="4" class="text-center">Data Tidak Ditemukan</td>
+        </tr>
+    }
+    for _, v := range data {
+        <tr>
+            <td>{ v.ItemNama }</td>
+            <td>{ v.HargaAwal }</td>
+            <td>{ v.HargaPaket }</td>
+            <td>
+                <div class="row px-5 d-flex justify-content-around">
+                    <a
+                        id="btnremove"
+                        type="button"
+                        class="btnremove col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                    >X</a>
+                </div>
+            </td>
+        </tr>
+    }
+}
+
 templ DialogNewPaketAction() {
     <div>
         <button 
diff --git a/views/dev/mdpaket/modaladdpaket_templ.go b/views/dev/mdpaket/modaladdpaket_templ.go
index 25f9d2f..a4d68cb 100644
--- a/views/dev/mdpaket/modaladdpaket_templ.go
+++ b/views/dev/mdpaket/modaladdpaket_templ.go
@@ -13,6 +13,7 @@ import "bytes"
 import "cpone/component/customtextfield"
 import "cpone/models"
 import "cpone/component/table"
+import "cpone/component/radiobtn"
 
 func DialogNewPaketBody(
 	code string,
@@ -23,6 +24,7 @@ func DialogNewPaketBody(
 	filterkode templ.Component,
 	filternama templ.Component,
 	tableitem templ.Component,
+	tableselected templ.Component,
 	paginationitem templ.Component,
 ) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
@@ -37,18 +39,7 @@ func DialogNewPaketBody(
 			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)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"modalpaketbody\" class=\"row\"><div class=\"col-6 border-right\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -91,7 +82,33 @@ func DialogNewPaketBody(
 		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>")
+		_, 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\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = radiobtn.CustomRadioBtn(models.CustomRadioBtn{
+			Label:    "Jenis Paket",
+			Type:     "radio",
+			Name:     "radiojenispaket",
+			Value:    "",
+			ErrorMsg: "",
+			Item: []models.Radio{
+				{ItemLabel: "Panel", ItemValue: "panel"},
+				{ItemLabel: "Profile", ItemValue: "profile"},
+			},
+		}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h5>Detail Paket</h5>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tableselected.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
 		}
@@ -122,7 +139,7 @@ func TableItem(data []models.MDPaketItem, itemTableID string) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 73, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -135,7 +152,7 @@ func TableItem(data []models.MDPaketItem, itemTableID string) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 73, Col: 59}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -189,7 +206,7 @@ func TableItemData(data []models.MDPaketItem) templ.Component {
 			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}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 88, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -202,7 +219,7 @@ func TableItemData(data []models.MDPaketItem) templ.Component {
 			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}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 89, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -220,6 +237,137 @@ func TableItemData(data []models.MDPaketItem) templ.Component {
 	})
 }
 
+func TableItemSelected(data []models.MDPaketItem, tableID string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_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 id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(tableID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 106, Col: 21}
+		}
+		_, 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-swap-oob=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("#" + tableID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 106, Col: 49}
+		}
+		_, 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"NAMA", "HARGA AWAL", "HARGA PAKET", "AKSI"},
+			[]string{"25%", "25%", "25%", "25%"},
+			TableItemSelectedData(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 TableItemSelectedData(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_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(data) == 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td colspan=\"4\" 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_Var12 string
+			templ_7745c5c3_Var12, 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: 121, Col: 28}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var13 string
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(v.HargaAwal)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 122, Col: 29}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var14 string
+			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(v.HargaPaket)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpaket\modaladdpaket.templ`, Line: 123, Col: 30}
+			}
+			_, 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("</td><td><div class=\"row px-5 d-flex justify-content-around\"><a id=\"btnremove\" type=\"button\" class=\"btnremove col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2\">X</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)
@@ -228,9 +376,9 @@ func DialogNewPaketAction() templ.Component {
 			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
+		templ_7745c5c3_Var15 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var15 == nil {
+			templ_7745c5c3_Var15 = 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>")
@@ -252,9 +400,9 @@ func DialogBtnClose() templ.Component {
 			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
+		templ_7745c5c3_Var16 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var16 == nil {
+			templ_7745c5c3_Var16 = 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>")