add echart barchart

component/chart/chart.templ

@@ -11,7 +11,7 @@ script GenerateChart(idDiv string, udata string) {
         var element = document.getElementById(idDiv);
         console.log("element ",element)
         if (element) {
-            element.style.height = "400px";
+            element.style.height = "450px";
             element.style.width = "100%";
         }
 
@@ -21,6 +21,35 @@ script GenerateChart(idDiv string, udata string) {
         // var myChart_001 = echarts.init(document.getElementById(idDiv));
         myChart[idDiv] = echarts.init(element);
 
+        // var option_001 = JSON.parse(udata);
+        option[idDiv] = JSON.parse(udata);
+        console.log("option ", option)
+        // myChart_001.setOption(option_001);
+        myChart[idDiv].setOption(option[idDiv]);
+    });
+}
+
+templ ShowChartFixed(idDiv string, udata string, width string, height string) {
+    <div id={ idDiv } class="mx-auto"></div>
+    @GenerateChartFixed(idDiv, udata, width, height)
+}
+
+script GenerateChartFixed(idDiv string, udata string, width string, height string) {
+    htmx.onLoad(function(elt) {
+        console.log("elt ",elt)
+        var element = document.getElementById(idDiv);
+        console.log("element ",element)
+        if (element) {
+            element.style.height = height;
+            element.style.width = width;
+        }
+
+        var myChart = {}; 
+        var option = {};
+
+        // var myChart_001 = echarts.init(document.getElementById(idDiv));
+        myChart[idDiv] = echarts.init(element);
+
         // var option_001 = JSON.parse(udata);
         option[idDiv] = JSON.parse(udata);
         console.log("option ", option)

component/chart/chart_templ.go

@@ -53,13 +53,13 @@ func ShowChart(idDiv string, udata string) templ.Component {
 
 func GenerateChart(idDiv string, udata string) templ.ComponentScript {
 	return templ.ComponentScript{
-		Name: `__templ_GenerateChart_4c73`,
-		Function: `function __templ_GenerateChart_4c73(idDiv, udata){htmx.onLoad(function(elt) {
+		Name: `__templ_GenerateChart_906c`,
+		Function: `function __templ_GenerateChart_906c(idDiv, udata){htmx.onLoad(function(elt) {
         console.log("elt ",elt)
         var element = document.getElementById(idDiv);
         console.log("element ",element)
         if (element) {
-            element.style.height = "400px";
+            element.style.height = "450px";
             element.style.width = "100%";
         }
 
@@ -76,7 +76,78 @@ func GenerateChart(idDiv string, udata string) templ.ComponentScript {
         myChart[idDiv].setOption(option[idDiv]);
     });
 }`,
-		Call:       templ.SafeScript(`__templ_GenerateChart_4c73`, idDiv, udata),
-		CallInline: templ.SafeScriptInline(`__templ_GenerateChart_4c73`, idDiv, udata),
+		Call:       templ.SafeScript(`__templ_GenerateChart_906c`, idDiv, udata),
+		CallInline: templ.SafeScriptInline(`__templ_GenerateChart_906c`, idDiv, udata),
+	}
+}
+
+func ShowChartFixed(idDiv string, udata string, width string, height string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(idDiv)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\chart\chart.templ`, Line: 33, Col: 19}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"mx-auto\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = GenerateChartFixed(idDiv, udata, width, height).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 GenerateChartFixed(idDiv string, udata string, width string, height string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_GenerateChartFixed_a276`,
+		Function: `function __templ_GenerateChartFixed_a276(idDiv, udata, width, height){htmx.onLoad(function(elt) {
+        console.log("elt ",elt)
+        var element = document.getElementById(idDiv);
+        console.log("element ",element)
+        if (element) {
+            element.style.height = height;
+            element.style.width = width;
+        }
+
+        var myChart = {}; 
+        var option = {};
+
+        // var myChart_001 = echarts.init(document.getElementById(idDiv));
+        myChart[idDiv] = echarts.init(element);
+
+        // var option_001 = JSON.parse(udata);
+        option[idDiv] = JSON.parse(udata);
+        console.log("option ", option)
+        // myChart_001.setOption(option_001);
+        myChart[idDiv].setOption(option[idDiv]);
+    });
+}`,
+		Call:       templ.SafeScript(`__templ_GenerateChartFixed_a276`, idDiv, udata, width, height),
+		CallInline: templ.SafeScriptInline(`__templ_GenerateChartFixed_a276`, idDiv, udata, width, height),
 	}
 }

handlers/corporate/mcudetail/tabkelainanfisik.hanlders.go

@@ -0,0 +1,66 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type TabKelainanFisikServices interface {
+	GetKelainanFisikBMI(mcuID string) (models.Piechart, error)
+	GetKelainanFisikHipertensi(mcuID string) (models.Piechart, error)
+}
+
+type TabKelainanFisikHandler struct {
+	TabKelainanFisikServices TabKelainanFisikServices
+}
+
+func NewTabKelainanFisikHandler(tkf TabKelainanFisikServices) *TabKelainanFisikHandler {
+	return &TabKelainanFisikHandler{
+		TabKelainanFisikServices: tkf,
+	}
+}
+
+func (tkf *TabKelainanFisikHandler) HandleShowTabKelainanFisik(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	logger.Info("Tab Kelainan Fisik")
+
+	id := c.Param("id")
+	logger.Info("Params", zap.Any("id", id))
+
+	bmi, err := tkf.TabKelainanFisikServices.GetKelainanFisikBMI(id)
+	if err != nil {
+		return err
+	}
+
+	hiper, err := tkf.TabKelainanFisikServices.GetKelainanFisikHipertensi(id)
+	if err != nil {
+		return err
+	}
+
+	bmijson, err := json.MarshalIndent(bmi, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	hiperjson, err := json.MarshalIndent(hiper, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	content := corporate_mcudetail.Tabkelainanfisik(
+		chart.ShowChartFixed("bmixs", string(bmijson), "300px", "450px"),
+		chart.ShowChartFixed("bmimd", string(bmijson), "500px", "450px"),
+		chart.ShowChartFixed("bmilg", string(bmijson), "600px", "450px"),
+		chart.ShowChartFixed("hprxs", string(hiperjson), "300px", "450px"),
+		chart.ShowChartFixed("hprmd", string(hiperjson), "500px", "450px"),
+		chart.ShowChartFixed("hprlg", string(hiperjson), "600px", "450px"),
+	)
+
+	return utils.View(c, content)
+}

handlers/corporate/mcudetail/tabkelainanglobal.handlers.go

@@ -0,0 +1,65 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type TabKelainanGlobalServices interface {
+	GetKelainanGlobalMCU(mcuID string) (models.Barchart, error)
+	GetKelainanFisik(mcuID string) (models.Barchart, error)
+}
+
+type TabKelainanGlobalHandler struct {
+	TabKelainanGlobalServices TabKelainanGlobalServices
+}
+
+func NewTabKelainanGlobalHandler(tkg TabKelainanGlobalServices) *TabKelainanGlobalHandler {
+	return &TabKelainanGlobalHandler{
+		TabKelainanGlobalServices: tkg,
+	}
+}
+
+func (tkg *TabKelainanGlobalHandler) HandleShowTabKelainanGlobal(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	id := c.Param("id")
+
+	logger.Info("params", zap.Any("id", id))
+
+	kelmcu, err := tkg.TabKelainanGlobalServices.GetKelainanGlobalMCU(id)
+	if err != nil {
+		return err
+	}
+
+	kelfisik, err := tkg.TabKelainanGlobalServices.GetKelainanFisik(id)
+	if err != nil {
+		return err
+	}
+
+	klmcujson, err := json.MarshalIndent(kelmcu, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	klfisjson, err := json.MarshalIndent(kelfisik, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	content := corporate_mcudetail.TabKelainanGlobal(
+		chart.ShowChartFixed("chartmcuxs", string(klmcujson), "300px", "450px"),
+		chart.ShowChartFixed("chartfisikxs", string(klfisjson), "300px", "450px"),
+		chart.ShowChartFixed("chartmcumd", string(klmcujson), "500px", "450px"),
+		chart.ShowChartFixed("chartfisikmd", string(klfisjson), "500px", "450px"),
+		chart.ShowChartFixed("chartmculg", string(klmcujson), "1000px", "450px"),
+		chart.ShowChartFixed("chartfisiklg", string(klfisjson), "1000px", "450px"),
+	)
+
+	return utils.View(c, content)
+}

handlers/corporate/mcudetail/tabkelainanlab.handlers.go

@@ -0,0 +1,105 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/labstack/echo/v4"
+)
+
+type TabKelainanLabServices interface {
+	GetDataPresentaseKelainanLab(mcuID string) (models.Barchart, error)
+	GetHematologi(mcuID string) (models.BarchartV2, error)
+	GetUrinalisa(mcuID string) (models.BarchartV2, error)
+	GetGangguanFungsiHati(mcuID string) (models.BarchartV2, error)
+	GetGangguanMetabolismeLemak(mcuID string) (models.BarchartV2, error)
+	GetPeningkatanGlukosa(mcuID string) (models.BarchartV2, error)
+}
+
+type TabKelainanLabHandler struct {
+	TabKelainanLabServices TabKelainanLabServices
+}
+
+func NewTabKelainanLabHandler(tkl TabKelainanLabServices) *TabKelainanLabHandler {
+	return &TabKelainanLabHandler{
+		TabKelainanLabServices: tkl,
+	}
+}
+
+func (tkl *TabKelainanLabHandler) HandleShowTabKelainanLab(c echo.Context) error {
+	id := c.Param("id")
+
+	datapre, err := tkl.TabKelainanLabServices.GetDataPresentaseKelainanLab(id)
+	if err != nil {
+		return err
+	}
+
+	hematologi, err := tkl.TabKelainanLabServices.GetHematologi(id)
+	if err != nil {
+		return err
+	}
+
+	urinalisa, err := tkl.TabKelainanLabServices.GetUrinalisa(id)
+	if err != nil {
+		return err
+	}
+
+	hati, err := tkl.TabKelainanLabServices.GetGangguanFungsiHati(id)
+	if err != nil {
+		return err
+	}
+
+	lemak, err := tkl.TabKelainanLabServices.GetGangguanMetabolismeLemak(id)
+	if err != nil {
+		return err
+	}
+
+	glukosa, err := tkl.TabKelainanLabServices.GetPeningkatanGlukosa(id)
+	if err != nil {
+		return err
+	}
+
+	dataprejson, err := json.MarshalIndent(datapre, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	hemajson, err := json.MarshalIndent(hematologi, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	urinjson, err := json.MarshalIndent(urinalisa, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	hatijson, err := json.MarshalIndent(hati, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	lemakjson, err := json.MarshalIndent(lemak, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	glukosjson, err := json.MarshalIndent(glukosa, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	content := corporate_mcudetail.TabKelainanLab(
+		chart.ShowChartFixed("dataprelg", string(dataprejson), "1000px", "450px"),
+		chart.ShowChartFixed("hemalg", string(hemajson), "600px", "450px"),
+		chart.ShowChartFixed("urinlg", string(urinjson), "600px", "450px"),
+		chart.ShowChartFixed("hatilg", string(hatijson), "600px", "450px"),
+		chart.ShowChartFixed("lemaklg", string(lemakjson), "600px", "450px"),
+		chart.ShowChartFixed("glukoslg", string(glukosjson), "600px", "450px"),
+	)
+
+	return utils.View(c, content)
+}

handlers/corporate/mcudetail/tabkelainannonlab.handlers.go

@@ -0,0 +1,57 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/labstack/echo/v4"
+)
+
+type TabKelainanNonLabServices interface {
+	GetDataKelNonLab(mcuID string) (models.Barchart, error)
+	GetThoraxPA(mcuID string) (models.BarchartV2, error)
+}
+
+type TabKelainanNonLabHandler struct {
+	TabKelainanNonLabServices TabKelainanNonLabServices
+}
+
+func NewTabKelainanNonLabHandler(tknl TabKelainanNonLabServices) *TabKelainanNonLabHandler {
+	return &TabKelainanNonLabHandler{
+		TabKelainanNonLabServices: tknl,
+	}
+}
+
+func (tknl *TabKelainanNonLabHandler) HandleShowTabKelainanNonLab(c echo.Context) error {
+	id := c.Param("id")
+
+	datapre, err := tknl.TabKelainanNonLabServices.GetDataKelNonLab(id)
+	if err != nil {
+		return err
+	}
+
+	thorax, err := tknl.TabKelainanNonLabServices.GetThoraxPA(id)
+	if err != nil {
+		return err
+	}
+
+	dataprejson, err := json.MarshalIndent(datapre, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	thrxjson, err := json.MarshalIndent(thorax, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	content := corporate_mcudetail.TabKelainanNonLab(
+		chart.ShowChartFixed("datanonlg", string(dataprejson), "1000px", "450px"),
+		chart.ShowChartFixed("thoraxlg", string(thrxjson), "600px", "450px"),
+	)
+
+	return utils.View(c, content)
+}

handlers/corporate/mcudetail/tabkepesertaan.handlers.go

@@ -12,6 +12,9 @@ import (
 )
 
 type TabKepersertaanServices interface {
+	GetTotalKepesertaanMCU(mcuID string) (models.Piechart, error)
+	GetKepesertaanByGender(mcuID string) (models.Piechart, error)
+	GetKepesertaanByUmur(mcuID string) (models.Piechart, error)
 }
 
 type TabKepersertaanHandler struct {
@@ -31,82 +34,47 @@ func (tkh *TabKepersertaanHandler) HandleShowTabKepesertaan(c echo.Context) erro
 	id := c.Param("id")
 	logger.Info("Params", zap.Any("id", id))
 
-	option := models.Piechart{
-		Title: struct {
-			Text    string `json:"text"`
-			SubText string `json:"subtext"`
-			Left    string `json:"left"`
-		}{
-			Text:    "Testing",
-			SubText: "Total Peserta 506",
-			Left:    "center",
-		},
-		Tooltip: struct {
-			Trigger string `json:"trigger"`
-		}{
-			Trigger: "item",
-		},
-		Legend: struct {
-			Top    string `json:"top"`
-			Left   string `json:"left"`
-			Orient string `json:"orient"`
-		}{
-			Top:    "bottom",
-			Left:   "center",
-			Orient: "vertical",
-		},
-		Series: []models.Series{
-			{
-				Label: struct {
-					Position  string `json:"position"`
-					Formatter string `json:"formatter"`
-				}{
-					Position:  "inner",
-					Formatter: "{d}%",
-				},
-				Name:   "Access From",
-				Type:   "pie",
-				Radius: []string{"20%", "50%"},
-				ItemStyle: struct {
-					BorderRadius int    `json:"borderRadius"`
-					BorderColor  string `json:"borderColor"`
-					BorderWidth  int    `json:"borderWidth"`
-				}{
-					BorderRadius: 10,
-					BorderColor:  "#fff",
-					BorderWidth:  2,
-				},
-				Data: []models.SeriesData{
-					{Value: 506, Name: "Sudah MCU : 506 Peserta"},
-					{Value: 54, Name: "Belum MCU : 54 Peserta"},
-				},
-				Emphasis: struct {
-					ItemStyle struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					} `json:"itemStyle"`
-				}{
-					ItemStyle: struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					}{
-						ShadowBlur:    10,
-						ShadowOffsetX: 0,
-						ShadowColor:   "rgba(0, 0, 0, 0.5)",
-					},
-				},
-			},
-		},
-	}
-
-	json, err := json.MarshalIndent(option, "", "    ")
+	peserta, err := tkh.TabKepersertaanServices.GetTotalKepesertaanMCU(id)
 	if err != nil {
 		return err
 	}
 
-	content := corporate_mcudetail.TabKepesertaan(chart.ShowChart("1", string(json)))
+	gender, err := tkh.TabKepersertaanServices.GetKepesertaanByGender(id)
+	if err != nil {
+		return err
+	}
+
+	umur, err := tkh.TabKepersertaanServices.GetKepesertaanByUmur(id)
+	if err != nil {
+		return err
+	}
+
+	totaljson, err := json.MarshalIndent(peserta, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	genderjson, err := json.MarshalIndent(gender, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	umurjson, err := json.MarshalIndent(umur, "", "    ")
+	if err != nil {
+		return err
+	}
+
+	content := corporate_mcudetail.TabKepesertaan(
+		chart.ShowChart("charttotal", string(totaljson)),
+		chart.ShowChart("chartgender", string(genderjson)),
+		chart.ShowChart("chartumur", string(umurjson)),
+		chart.ShowChart("charttotalxs", string(totaljson)),
+		chart.ShowChart("chartgenderxs", string(genderjson)),
+		chart.ShowChart("chartumurxs", string(umurjson)),
+		chart.ShowChart("charttotalmd", string(totaljson)),
+		chart.ShowChart("chartgendermd", string(genderjson)),
+		chart.ShowChart("chartumurmd", string(umurjson)),
+	)
 
 	return utils.View(c, content)
 }

handlers/routes.go

@@ -121,20 +121,44 @@ func SetupRoutesCorporate(app *echo.Echo, appStore db.AppStore) {
 	mcudHandr := corporate_handlers.NewMcuDetailHandler(mcudServ)
 	corp.GET("/dashboard_pic/detail/:id", mcudHandr.HandlerShowMcuDetailScreen)
 
+	// tab kepesertaan
 	kepesertaanSrvs := mcu_corporate_services.NewTabKepersertaanService(appStore)
 	kepesertaanHdlr := mcu_corporate_handlers.NewTabKepersertaanHandler(kepesertaanSrvs)
 	corp.GET("/dashboard_pic/detail/:id/tabkepesertaan", kepesertaanHdlr.HandleShowTabKepesertaan)
 
+	// tab kelainan global
+	kelainanglobalSrvs := mcu_corporate_services.NewTabKelainanGlobalServices(appStore)
+	kelainanglobalHdlr := mcu_corporate_handlers.NewTabKelainanGlobalHandler(kelainanglobalSrvs)
+	corp.GET("/dashboard_pic/detail/:id/tabkelainanglobal", kelainanglobalHdlr.HandleShowTabKelainanGlobal)
+
+	// tab kelainan lab
+	kelainanlabSrvs := mcu_corporate_services.NewTabKelainanLabServices(appStore)
+	kelainanlabHdlr := mcu_corporate_handlers.NewTabKelainanLabHandler(kelainanlabSrvs)
+	corp.GET("/dashboard_pic/detail/:id/tabkelainanlab", kelainanlabHdlr.HandleShowTabKelainanLab)
+
+	// tab kelainan non lab
+	kelnonlabSrvs := mcu_corporate_services.NewTabKelainanNonLabServices(appStore)
+	kelnonlabHdlr := mcu_corporate_handlers.NewTabKelainanNonLabHandler(kelnonlabSrvs)
+	corp.GET("/dashboard_pic/detail/:id/tabkelainannonlab", kelnonlabHdlr.HandleShowTabKelainanNonLab)
+
+	// tab kelainan fisik
+	kelainanfisikSrvs := mcu_corporate_services.NewTabKelainanFisikServices(appStore)
+	kelainanfisikHdlr := mcu_corporate_handlers.NewTabKelainanFisikHandler(kelainanfisikSrvs)
+	corp.GET("/dashboard_pic/detail/:id/tabkelainanfisik", kelainanfisikHdlr.HandleShowTabKelainanFisik)
+
+	// tab kesimpulan
 	kesimpulanSrv := mcu_corporate_services.NewTabKesimpulanServices(appStore)
 	kesimpulanHdr := mcu_corporate_handlers.NewTabKesimpulanHandler(kesimpulanSrv)
 	corp.GET("/dashboard_pic/detail/:id/tabkesimpulan", kesimpulanHdr.HandleShowTabKesimpulanScreen)
 
+	// tab daftar peserta
 	daftarpesertaServ := mcu_corporate_services.NewTabDaftarPesertaServices(appStore)
 	daftarpesertaHandl := mcu_corporate_handlers.NewTabDaftarPesertaHandlers(daftarpesertaServ)
 	corp.GET("/dashboard_pic/detail/:id/tabdaftarpeserta", daftarpesertaHandl.HandleShowTabDaftarPeserta)
 	corp.GET("/dashboard_pic/detail/:id/tabdaftarpeserta/changepage", daftarpesertaHandl.HandlePagination)
 	corp.GET("/dashboard_pic/detail/:id/tabdaftarpeserta/openreport", daftarpesertaHandl.HandleOpenReportDialog)
 
+	// tab keuangan
 	keuanganService := mcu_corporate_services.NewTabKeuanganServices(appStore)
 	keuanganHandler := mcu_corporate_handlers.NewTabKeuanganHandler(keuanganService)
 	corp.GET("/dashboard_pic/detail/:id/tabkeuangan", keuanganHandler.HandleShowTabKeuangan)

models/chart.models.go

@@ -41,6 +41,7 @@ type Piechart struct {
 		Top    string `json:"top"`
 		Left   string `json:"left"`
 		Orient string `json:"orient"`
+		Height int    `json:"height"`
 	} `json:"legend"`
 	Series []Series `json:"series"`
 }
@@ -84,4 +85,71 @@ type Barchart struct {
 			Y string `json:"y"`
 		} `json:"encode"`
 	} `json:"series"`
+	Tooltip struct {
+		Trigger     string `json:"trigger"`
+		AxisPointer struct {
+			Type string `json:"type"`
+		} `json:"axisPointer"`
+	} `json:"tooltip"`
+}
+
+type BarDataset struct {
+	Source [][]interface{} `json:"source"`
+}
+
+type BarchartV2 struct {
+	Title struct {
+		Text string `json:"text"`
+	} `json:"title"`
+	Dataset struct {
+		Source [][]interface{} `json:"source"`
+	} `json:"dataset"`
+	Grid struct {
+		ContainLabel bool `json:"containLabel"`
+	} `json:"grid"`
+	XAxis struct {
+		Name      string `json:"name"`
+		Type      string `json:"type"`
+		AxisLabel struct {
+			Interval int `json:"interval"`
+			Rotate   int `json:"rotate"`
+		} `json:"axisLabel"`
+	} `json:"xAxis"`
+	YAxis struct {
+		Type          string `json:"type"`
+		Name          string `json:"name"`
+		NameTextStyle struct {
+			Align string `json:"align"`
+		} `json:"nameTextStyle"`
+		NameGap int `json:"nameGap"`
+	} `json:"yAxis"`
+	VisualMap struct {
+		Orient    string `json:"orient"`
+		Left      string `json:"left"`
+		Min       int    `json:"min"`
+		Max       int    `json:"max"`
+		Dimension int    `json:"dimension"`
+		Show      bool   `json:"show"`
+		InRange   struct {
+			Color []string `json:"color"`
+		} `json:"inRange"`
+	} `json:"visualMap"`
+	Series []struct {
+		Label struct {
+			Position  string `json:"position"`
+			Show      bool   `json:"show"`
+			Formatter string `json:"formatter"`
+		} `json:"label"`
+		Type   string `json:"type"`
+		Encode struct {
+			X string `json:"x"`
+			Y string `json:"y"`
+		} `json:"encode"`
+	} `json:"series"`
+	Tooltip struct {
+		Trigger     string `json:"trigger"`
+		AxisPointer struct {
+			Type string `json:"type"`
+		} `json:"axisPointer"`
+	} `json:"tooltip"`
 }

models/tabkelainanfisik.models.go

@@ -0,0 +1,7 @@
+package models
+
+type KelainanFisikDataModel struct {
+	Test                      string `db:"test"`
+	Total                     int    `db:"total"`
+	Mcu_KelainanClasification string `db:"Mcu_KelainanClasification"`
+}

models/tabkelainanglobal.models.go

@@ -0,0 +1,11 @@
+package models
+
+type KelainanGlobalMCUModel struct {
+	Test  string `db:"Test"`
+	Total int    `db:"total"`
+}
+
+type KelainanGlobalFisikModel struct {
+	Mcu_KelainanName string `db:"Mcu_KelainanName"`
+	Total            int    `db:"total"`
+}

models/tabkelainanlab.models.go

@@ -0,0 +1,6 @@
+package models
+
+type KelainanLabModel struct {
+	Mcu_KelainanName string `db:"Mcu_KelainanName"`
+	Total            int    `db:"total"`
+}

models/tabkelainannonlab.models.go

@@ -0,0 +1,6 @@
+package models
+
+type KelNonLabModel struct {
+	Kelainan string `db:"kelainan"`
+	Total    int    `db:"total"`
+}

models/tabkepesertaan.models.go

@@ -0,0 +1,16 @@
+package models
+
+type TotalPesertaModel struct {
+	Peserta                 int `db:"peserta"`
+	Mgm_McuTotalParticipant int `db:"Mgm_McuTotalParticipant"`
+}
+
+type GenderPesertaModel struct {
+	M_PatientGender string `db:"M_PatientGender"`
+	Jumlah          int    `db:"Jumlah"`
+}
+
+type UmurPesertaModel struct {
+	Umur  string `db:"umur"`
+	Total int    `db:"total"`
+}

services/corporate/mcudetail/tabkelainanfisik.services.go

@@ -0,0 +1,207 @@
+package mcu_corporate_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"strconv"
+
+	"go.uber.org/zap"
+)
+
+type TabKelainanFisikServices struct {
+	TabKelainanFisikStore db.AppStore
+}
+
+func NewTabKelainanFisikServices(store db.AppStore) *TabKelainanFisikServices {
+	return &TabKelainanFisikServices{
+		TabKelainanFisikStore: store,
+	}
+}
+
+func (tkf *TabKelainanFisikServices) GetPieChartConf(title string, subtext string, data []models.SeriesData) (models.Piechart, error) {
+	option := models.Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: subtext,
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+			Height int    `json:"height"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+			Height: 75,
+		},
+		Series: []models.Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: data,
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+
+	return option, nil
+}
+
+func (tkf *TabKelainanFisikServices) GetKelainanFisikBMI(mcuID string) (models.Piechart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Piechart
+	var data []models.KelainanFisikDataModel
+
+	q := `
+	SELECT    
+	CASE
+	WHEN Mgm_HeaderIsNormal = "Y" THEN "Normal"  
+	WHEN Mgm_HeaderIsNormal = "N" THEN Mcu_KelainanName 
+	ELSE "Tidak diperiksa" END AS test,
+	COUNT(Mgm_HeaderT_OrderHeaderID)  AS total,
+	IFNULL(Mcu_KelainanClasification, "") AS Mcu_KelainanClasification
+	FROM mgm_header
+	LEFT JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID  AND Mgm_DetailIsActive = 'Y'
+	LEFT JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	LEFT JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	LEFT JOIN nat_test ON Nat_TestCode = Mgm_HeaderNat_TestCode 
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderNat_TestCode = 'STATUS GIZI'
+	GROUP BY 
+	CASE
+	WHEN Mgm_HeaderIsNormal = "Y" THEN "Normal"  
+	WHEN Mgm_HeaderIsNormal = "N" THEN Mcu_KelainanName ELSE
+	"Tidak diperiksa" END
+	ORDER BY  COUNT(Mgm_HeaderT_OrderHeaderID) DESC	
+	`
+
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get data kel fisik bmi %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Status Index Masa Tubuh (BMI)"
+	subtext := ""
+	chartData := []models.SeriesData{}
+
+	if data != nil {
+		for _, d := range data {
+			chartData = append(chartData, models.SeriesData{
+				Value: d.Total,
+				Name:  d.Test + ": " + strconv.Itoa(d.Total) + " Peserta",
+			})
+		}
+	} else {
+		chartData = append(chartData, models.SeriesData{Value: 0, Name: "No Data"})
+	}
+
+	option, err := tkf.GetPieChartConf(title, subtext, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error get & insert data into chart: %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkf *TabKelainanFisikServices) GetKelainanFisikHipertensi(mcuID string) (models.Piechart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Piechart
+	var data []models.KelainanFisikDataModel
+
+	q := `
+	SELECT
+	CASE
+	WHEN Mgm_HeaderIsNormal = "Y" THEN "Normal"  
+	WHEN Mgm_HeaderIsNormal = "N" THEN Mcu_KelainanName 
+	ELSE "Tidak diperiksa" END AS test,
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total,
+	IFNULL(Mcu_KelainanClasification, "") AS Mcu_KelainanClasification
+	FROM mgm_header
+	LEFT JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID AND Mgm_DetailIsActive = 'Y'
+	LEFT JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	LEFT JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	LEFT JOIN nat_test ON Nat_TestCode = Mgm_HeaderNat_TestCode 
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderNat_TestCode = 'TANDA VITAL'
+	GROUP BY 
+	CASE
+	WHEN Mgm_HeaderIsNormal = "Y" THEN "Normal"  
+	WHEN Mgm_HeaderIsNormal = "N" THEN Mcu_KelainanName 
+	ELSE "Tidak diperiksa" END 
+	ORDER BY count(Mgm_HeaderT_OrderHeaderID) DESC	
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get data kel fisik hipertensi: %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Kriteria Hipertensi"
+	subtext := ""
+	chartData := []models.SeriesData{}
+
+	if data != nil {
+		for _, d := range data {
+			chartData = append(chartData, models.SeriesData{
+				Value: d.Total,
+				Name:  d.Test + ": " + strconv.Itoa(d.Total) + " Peserta",
+			})
+		}
+	} else {
+		chartData = append(chartData, models.SeriesData{Value: 0, Name: "No Data"})
+	}
+
+	option, err := tkf.GetPieChartConf(title, subtext, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error get and insert data into piechart : %v", err)
+	}
+
+	return option, nil
+}

services/corporate/mcudetail/tabkelainanglobal.services.go

@@ -0,0 +1,201 @@
+package mcu_corporate_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+	"strconv"
+
+	"go.uber.org/zap"
+)
+
+type TabKelainanGlobalServices struct {
+	TabKelainanGlobalServicesStore db.AppStore
+}
+
+func NewTabKelainanGlobalServices(store db.AppStore) *TabKelainanGlobalServices {
+	return &TabKelainanGlobalServices{
+		TabKelainanGlobalServicesStore: store,
+	}
+}
+
+func (tkg *TabKelainanGlobalServices) GetBarChartConf(title string, data models.BarDataset) (models.Barchart, error) {
+	option := models.Barchart{}
+	option.Title = struct {
+		Text string "json:\"text\""
+	}{title}
+	option.Dataset = data
+	option.Grid.ContainLabel = true
+	option.XAxis.Name = "amount"
+	option.YAxis.Type = "category"
+	option.VisualMap.Orient = "horizontal"
+	option.VisualMap.Left = "center"
+	option.VisualMap.Min = 10
+	option.VisualMap.Max = 100
+	option.VisualMap.Show = false
+	option.VisualMap.Dimension = 0
+	option.VisualMap.InRange.Color = []string{"#42aaf5", "#00eaf2", "#035bff"}
+	option.Series = []struct {
+		Label struct {
+			Position  string "json:\"position\""
+			Show      bool   "json:\"show\""
+			Formatter string "json:\"formatter\""
+		} "json:\"label\""
+		Type   string "json:\"type\""
+		Encode struct {
+			X string "json:\"x\""
+			Y string "json:\"y\""
+		} "json:\"encode\""
+	}{
+		{
+			Label: struct {
+				Position  string "json:\"position\""
+				Show      bool   "json:\"show\""
+				Formatter string "json:\"formatter\""
+			}{
+				Position:  "right",
+				Show:      true,
+				Formatter: "{@[3]} %",
+			},
+			Type: "bar",
+			Encode: struct {
+				X string "json:\"x\""
+				Y string "json:\"y\""
+			}{
+				X: "score",
+				Y: "product",
+			},
+		},
+	}
+	option.Tooltip = struct {
+		Trigger     string "json:\"trigger\""
+		AxisPointer struct {
+			Type string "json:\"type\""
+		} "json:\"axisPointer\""
+	}{
+		Trigger: "axis",
+		AxisPointer: struct {
+			Type string "json:\"type\""
+		}{
+			Type: "shadow",
+		},
+	}
+
+	return option, nil
+}
+
+func (tkg *TabKelainanGlobalServices) GetKelainanGlobalMCU(mcuID string) (models.Barchart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Barchart
+	var data []models.KelainanGlobalMCUModel
+
+	q := `
+	SELECT
+	IFNULL(Nat_TestName ,Mcu_KelainanGroupName) AS Test,
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID AND Mgm_DetailIsActive = 'Y'
+	JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	LEFT JOIN nat_test ON Nat_TestCode = Mgm_HeaderNat_TestCode 
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderIsNormal = 'N' 
+	GROUP BY Mcu_KelainanGroupID ORDER BY COUNT(Mgm_HeaderT_OrderHeaderID) DESC	
+	`
+	// Mgm_DetailMcu_KelainanID ->> versi php
+	// Mcu_KelainanGroupID ->> versi excel
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get data kelainan global mcu %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Kelainan MCU"
+	chartData := models.BarDataset{
+		Source: [][]interface{}{
+			{"score", "amount", "product", "percentage"},
+		},
+	}
+
+	max := 1
+	for _, d := range data {
+		if d.Total >= max {
+			max = d.Total
+		}
+	}
+
+	for _, d := range data {
+		percentage := float64(d.Total) / float64(max) * 100
+		roundedPercentage := math.Round(percentage*100) / 100
+		percentStr := strconv.FormatFloat(roundedPercentage, 'f', -1, 64)
+		chartData.Source = append(chartData.Source, []interface{}{
+			d.Total, d.Total, d.Test, percentStr,
+		})
+	}
+
+	option, err := tkg.GetBarChartConf(title, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to barchart %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkg *TabKelainanGlobalServices) GetKelainanFisik(mcuID string) (models.Barchart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Barchart
+	var data []models.KelainanGlobalFisikModel
+
+	q := `
+	SELECT 
+	Mcu_KelainanName, 
+	COUNT(Mgm_HeaderT_OrderHeaderID)  AS total
+	FROM mgm_header
+	JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID  
+	AND Mgm_DetailIsActive = 'Y'
+	JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y'  AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderType = 'F'
+	AND Mgm_HeaderIsNormal = 'N'
+	GROUP BY Mcu_KelainanID  
+	ORDER BY total DESC	
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get data kelainan global fisik %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Kelainan Fisik"
+	chartData := models.BarDataset{
+		Source: [][]interface{}{
+			{"score", "amount", "product", "percentage"},
+		},
+	}
+
+	max := 1
+	for _, d := range data {
+		if d.Total >= max {
+			max = d.Total
+		}
+	}
+
+	for _, d := range data {
+		percentage := float64(d.Total) / float64(max) * 100
+		roundedPercentage := math.Round(percentage*100) / 100
+		percentStr := strconv.FormatFloat(roundedPercentage, 'f', -1, 64)
+		chartData.Source = append(chartData.Source, []interface{}{
+			d.Total, d.Total, d.Mcu_KelainanName, percentStr,
+		})
+	}
+
+	option, err := tkg.GetBarChartConf(title, chartData)
+	if err != nil {
+		return option, nil
+	}
+
+	return option, nil
+}

services/corporate/mcudetail/tabkelainanlab.services.go

@@ -0,0 +1,448 @@
+package mcu_corporate_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+	"strconv"
+
+	"go.uber.org/zap"
+)
+
+type TabKelainanLabServices struct {
+	TabKelainanLabStore db.AppStore
+}
+
+func NewTabKelainanLabServices(store db.AppStore) *TabKelainanLabServices {
+	return &TabKelainanLabServices{
+		TabKelainanLabStore: store,
+	}
+}
+
+func (tkl *TabKelainanLabServices) ConfBarchart(title string, data models.BarDataset) (models.Barchart, error) {
+	option := models.Barchart{}
+
+	option.Title = struct {
+		Text string "json:\"text\""
+	}{title}
+	option.Dataset = data
+	option.Grid.ContainLabel = true
+	option.XAxis.Name = "amount"
+	option.YAxis.Type = "category"
+	option.VisualMap.Orient = "horizontal"
+	option.VisualMap.Left = "center"
+	option.VisualMap.Min = 1
+	option.VisualMap.Max = 100
+	option.VisualMap.Show = false
+	option.VisualMap.Dimension = 0
+	option.VisualMap.InRange.Color = []string{"#42aaf5", "#00eaf2", "#035bff"}
+	option.Series = []struct {
+		Label struct {
+			Position  string "json:\"position\""
+			Show      bool   "json:\"show\""
+			Formatter string "json:\"formatter\""
+		} "json:\"label\""
+		Type   string "json:\"type\""
+		Encode struct {
+			X string "json:\"x\""
+			Y string "json:\"y\""
+		} "json:\"encode\""
+	}{
+		{
+			Label: struct {
+				Position  string "json:\"position\""
+				Show      bool   "json:\"show\""
+				Formatter string "json:\"formatter\""
+			}{
+				Position:  "right",
+				Show:      true,
+				Formatter: "{@[3]} %",
+			},
+			Type: "bar",
+			Encode: struct {
+				X string "json:\"x\""
+				Y string "json:\"y\""
+			}{
+				X: "score",
+				Y: "product",
+			},
+		},
+	}
+	option.Tooltip = struct {
+		Trigger     string "json:\"trigger\""
+		AxisPointer struct {
+			Type string "json:\"type\""
+		} "json:\"axisPointer\""
+	}{
+		Trigger: "axis",
+		AxisPointer: struct {
+			Type string "json:\"type\""
+		}{
+			Type: "shadow",
+		},
+	}
+
+	return option, nil
+}
+
+func (tkl *TabKelainanLabServices) ConfBarchartVertical(title string, data []models.KelainanLabModel) (models.BarchartV2, error) {
+
+	chartData := models.BarDataset{
+		Source: [][]interface{}{
+			{"score", "amount", "product"},
+		},
+	}
+
+	cnt := len(data)
+	for idx, d := range data {
+		chartData.Source = append(chartData.Source, []interface{}{
+			idx, d.Total, d.Mcu_KelainanName,
+		})
+	}
+
+	option := models.BarchartV2{
+		Title: struct {
+			Text string "json:\"text\""
+		}{title},
+		Dataset: struct {
+			Source [][]interface{} "json:\"source\""
+		}{chartData.Source},
+		Grid: struct {
+			ContainLabel bool "json:\"containLabel\""
+		}{true},
+		XAxis: struct {
+			Name      string "json:\"name\""
+			Type      string "json:\"type\""
+			AxisLabel struct {
+				Interval int "json:\"interval\""
+				Rotate   int "json:\"rotate\""
+			} "json:\"axisLabel\""
+		}{
+			Name: "",
+			Type: "category",
+			AxisLabel: struct {
+				Interval int "json:\"interval\""
+				Rotate   int "json:\"rotate\""
+			}{
+				Interval: 0,
+				Rotate:   0,
+			},
+		},
+		YAxis: struct {
+			Type          string "json:\"type\""
+			Name          string "json:\"name\""
+			NameTextStyle struct {
+				Align string "json:\"align\""
+			} "json:\"nameTextStyle\""
+			NameGap int "json:\"nameGap\""
+		}{
+			Type: "value",
+			Name: "",
+			NameTextStyle: struct {
+				Align string "json:\"align\""
+			}{
+				Align: "right",
+			},
+			NameGap: 20,
+		},
+		VisualMap: struct {
+			Orient    string "json:\"orient\""
+			Left      string "json:\"left\""
+			Min       int    "json:\"min\""
+			Max       int    "json:\"max\""
+			Dimension int    "json:\"dimension\""
+			Show      bool   "json:\"show\""
+			InRange   struct {
+				Color []string "json:\"color\""
+			} "json:\"inRange\""
+		}{
+			Orient:    "horizontal",
+			Left:      "center",
+			Min:       0,
+			Max:       cnt,
+			Dimension: 0,
+			Show:      false,
+			InRange: struct {
+				Color []string "json:\"color\""
+			}{
+				Color: []string{"#42aaf5", "#00eaf2", "#035bff"},
+			},
+		},
+		Series: []struct {
+			Label struct {
+				Position  string "json:\"position\""
+				Show      bool   "json:\"show\""
+				Formatter string "json:\"formatter\""
+			} "json:\"label\""
+			Type   string "json:\"type\""
+			Encode struct {
+				X string "json:\"x\""
+				Y string "json:\"y\""
+			} "json:\"encode\""
+		}{
+			{
+				Label: struct {
+					Position  string "json:\"position\""
+					Show      bool   "json:\"show\""
+					Formatter string "json:\"formatter\""
+				}{
+					Position:  "inside",
+					Show:      true,
+					Formatter: "{@[1]}",
+				},
+				Type: "bar",
+				Encode: struct {
+					X string "json:\"x\""
+					Y string "json:\"y\""
+				}{
+					X: "product",
+					Y: "amount",
+				},
+			},
+		},
+		Tooltip: struct {
+			Trigger     string "json:\"trigger\""
+			AxisPointer struct {
+				Type string "json:\"type\""
+			} "json:\"axisPointer\""
+		}{
+			Trigger: "axis",
+			AxisPointer: struct {
+				Type string "json:\"type\""
+			}{
+				Type: "shadow",
+			},
+		},
+	}
+
+	return option, nil
+}
+
+func (tkl *TabKelainanLabServices) GetDataPresentaseKelainanLab(mcuID string) (models.Barchart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Barchart
+	var data []models.KelainanLabModel
+
+	q := `
+	SELECT
+	Mcu_KelainanName, 
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID 
+	AND Mgm_DetailIsActive = 'Y'
+	JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderType = 'L'
+	AND Mgm_HeaderIsNormal = 'N'
+	GROUP BY Mcu_KelainanID  ORDER BY COUNT(Mgm_HeaderT_OrderHeaderID) DESC	
+	`
+
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get total presentase fisik %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := ""
+	chartData := models.BarDataset{
+		Source: [][]interface{}{
+			{"score", "amount", "product", "percentage"},
+		},
+	}
+
+	max := 1
+	for _, d := range data {
+		if d.Total >= max {
+			max = d.Total
+		}
+	}
+
+	for _, d := range data {
+		percentage := float64(d.Total) / float64(max) * 100
+		roundedPercentage := math.Round(percentage*100) / 100
+		percentStr := strconv.FormatFloat(roundedPercentage, 'f', -1, 64)
+		chartData.Source = append(chartData.Source, []interface{}{
+			d.Total, d.Total, d.Mcu_KelainanName, percentStr,
+		})
+	}
+
+	option, err := tkl.ConfBarchart(title, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to chart %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkl *TabKelainanLabServices) GetHematologi(mcuID string) (models.BarchartV2, error) {
+	logger, _ := zap.NewProduction()
+	var option models.BarchartV2
+	var data []models.KelainanLabModel
+
+	q := `
+	SELECT Mcu_KelainanName, 
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID AND Mgm_DetailIsActive = 'Y'
+	JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderType = 'L'
+	AND Mgm_HeaderIsNormal = 'N'
+	AND Mcu_KelainanGroupID = 14
+	GROUP BY Mcu_KelainanID 
+	ORDER BY COUNT(Mgm_HeaderT_OrderHeaderID) DESC
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get hematologi %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Hematologi"
+	option, err := tkl.ConfBarchartVertical(title, data)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to chart %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkl *TabKelainanLabServices) GetUrinalisa(mcuID string) (models.BarchartV2, error) {
+	logger, _ := zap.NewProduction()
+	var option models.BarchartV2
+	var data []models.KelainanLabModel
+
+	q := `
+	SELECT
+	Mcu_KelainanName,
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID 
+	AND Mgm_DetailIsActive = 'Y'
+	JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderType = 'L'
+	AND Mgm_HeaderIsNormal = 'N'
+	AND Mcu_KelainanGroupID = 15
+	GROUP BY Mcu_KelainanID  
+	ORDER BY COUNT(Mgm_HeaderT_OrderHeaderID) DESC	
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get urinalisa %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Urinalisa"
+	option, err := tkl.ConfBarchartVertical(title, data)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to chart %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkl *TabKelainanLabServices) GetGangguanFungsiHati(mcuID string) (models.BarchartV2, error) {
+	logger, _ := zap.NewProduction()
+	var option models.BarchartV2
+	var data []models.KelainanLabModel
+
+	q := `
+	SELECT Mcu_KelainanName, 
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID  
+	AND Mgm_DetailIsActive = 'Y'
+	JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderType = 'L'
+	AND Mgm_HeaderIsNormal = 'N'
+	AND Mcu_KelainanGroupID = 16
+	GROUP BY Mcu_KelainanID 
+	ORDER BY COUNT(Mgm_HeaderT_OrderHeaderID) DESC	
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get gangguan fungsi hati %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Gangguan Fungsi Hati"
+	option, err := tkl.ConfBarchartVertical(title, data)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to chart %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkl *TabKelainanLabServices) GetGangguanMetabolismeLemak(mcuID string) (models.BarchartV2, error) {
+	logger, _ := zap.NewProduction()
+	var option models.BarchartV2
+	var data []models.KelainanLabModel
+
+	q := `
+	SELECT 
+	IFNULL(Mcu_KelainanName,'Normal') AS Mcu_KelainanName,
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	LEFT JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID AND Mgm_DetailIsActive = 'Y'
+	LEFT JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	LEFT JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderNat_TestCode IN ( '10520300','10520400') 
+	AND Mgm_HeaderMgm_McuID = ?
+	GROUP BY Mcu_KelainanID
+	ORDER BY total DESC
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get gangguan metabolisme lemak  %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Gangguan Metabolisme Lemak"
+	option, err := tkl.ConfBarchartVertical(title, data)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to chart %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkl *TabKelainanLabServices) GetPeningkatanGlukosa(mcuID string) (models.BarchartV2, error) {
+	logger, _ := zap.NewProduction()
+	var option models.BarchartV2
+	var data []models.KelainanLabModel
+
+	q := `
+	SELECT IFNULL(Mcu_KelainanName,'Normal') AS Mcu_KelainanName,
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	LEFT JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID AND Mgm_DetailIsActive = 'Y'
+	LEFT JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	LEFT JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderNat_TestCode = 10540200 
+	AND Mgm_HeaderMgm_McuID = ?
+	GROUP BY Mcu_KelainanID	
+	ORDER BY total DESC
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get peningkatan glukosa %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Peningkatan Glukosa"
+	option, err := tkl.ConfBarchartVertical(title, data)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to chart %v", err)
+	}
+
+	return option, nil
+}

services/corporate/mcudetail/tabkelainannonlab.services.go

@@ -0,0 +1,309 @@
+package mcu_corporate_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"math"
+	"strconv"
+
+	"go.uber.org/zap"
+)
+
+type TabKelainanNonLabServices struct {
+	TabKelainanNonLabStore db.AppStore
+}
+
+func NewTabKelainanNonLabServices(store db.AppStore) *TabKelainanNonLabServices {
+	return &TabKelainanNonLabServices{
+		TabKelainanNonLabStore: store,
+	}
+}
+
+func (tknl *TabKelainanNonLabServices) GetBarChartConf(title string, data models.BarDataset) (models.Barchart, error) {
+	option := models.Barchart{}
+	option.Title = struct {
+		Text string "json:\"text\""
+	}{title}
+	option.Dataset = data
+	option.Grid.ContainLabel = true
+	option.XAxis.Name = "amount"
+	option.YAxis.Type = "category"
+	option.VisualMap.Orient = "horizontal"
+	option.VisualMap.Left = "center"
+	option.VisualMap.Min = 10
+	option.VisualMap.Max = 100
+	option.VisualMap.Show = false
+	option.VisualMap.Dimension = 0
+	option.VisualMap.InRange.Color = []string{"#42aaf5", "#00eaf2", "#035bff"}
+	option.Series = []struct {
+		Label struct {
+			Position  string "json:\"position\""
+			Show      bool   "json:\"show\""
+			Formatter string "json:\"formatter\""
+		} "json:\"label\""
+		Type   string "json:\"type\""
+		Encode struct {
+			X string "json:\"x\""
+			Y string "json:\"y\""
+		} "json:\"encode\""
+	}{
+		{
+			Label: struct {
+				Position  string "json:\"position\""
+				Show      bool   "json:\"show\""
+				Formatter string "json:\"formatter\""
+			}{
+				Position:  "right",
+				Show:      true,
+				Formatter: "{@[3]} %",
+			},
+			Type: "bar",
+			Encode: struct {
+				X string "json:\"x\""
+				Y string "json:\"y\""
+			}{
+				X: "score",
+				Y: "product",
+			},
+		},
+	}
+	option.Tooltip = struct {
+		Trigger     string "json:\"trigger\""
+		AxisPointer struct {
+			Type string "json:\"type\""
+		} "json:\"axisPointer\""
+	}{
+		Trigger: "axis",
+		AxisPointer: struct {
+			Type string "json:\"type\""
+		}{
+			Type: "shadow",
+		},
+	}
+
+	return option, nil
+}
+
+func (tknl *TabKelainanNonLabServices) ConfBarchartVertical(title string, data []models.KelNonLabModel) (models.BarchartV2, error) {
+	chartData := models.BarDataset{
+		Source: [][]interface{}{
+			{"score", "amount", "product"},
+		},
+	}
+
+	cnt := len(data)
+	for idx, d := range data {
+		chartData.Source = append(chartData.Source, []interface{}{
+			idx, d.Total, d.Kelainan,
+		})
+	}
+
+	option := models.BarchartV2{
+		Title: struct {
+			Text string "json:\"text\""
+		}{title},
+		Dataset: struct {
+			Source [][]interface{} "json:\"source\""
+		}{chartData.Source},
+		Grid: struct {
+			ContainLabel bool "json:\"containLabel\""
+		}{true},
+		XAxis: struct {
+			Name      string "json:\"name\""
+			Type      string "json:\"type\""
+			AxisLabel struct {
+				Interval int "json:\"interval\""
+				Rotate   int "json:\"rotate\""
+			} "json:\"axisLabel\""
+		}{
+			Name: "",
+			Type: "category",
+			AxisLabel: struct {
+				Interval int "json:\"interval\""
+				Rotate   int "json:\"rotate\""
+			}{
+				Interval: 0,
+				Rotate:   0,
+			},
+		},
+		YAxis: struct {
+			Type          string "json:\"type\""
+			Name          string "json:\"name\""
+			NameTextStyle struct {
+				Align string "json:\"align\""
+			} "json:\"nameTextStyle\""
+			NameGap int "json:\"nameGap\""
+		}{
+			Type: "value",
+			Name: "",
+			NameTextStyle: struct {
+				Align string "json:\"align\""
+			}{
+				Align: "right",
+			},
+			NameGap: 20,
+		},
+		VisualMap: struct {
+			Orient    string "json:\"orient\""
+			Left      string "json:\"left\""
+			Min       int    "json:\"min\""
+			Max       int    "json:\"max\""
+			Dimension int    "json:\"dimension\""
+			Show      bool   "json:\"show\""
+			InRange   struct {
+				Color []string "json:\"color\""
+			} "json:\"inRange\""
+		}{
+			Orient:    "horizontal",
+			Left:      "center",
+			Min:       0,
+			Max:       cnt,
+			Dimension: 0,
+			Show:      false,
+			InRange: struct {
+				Color []string "json:\"color\""
+			}{
+				Color: []string{"#42aaf5", "#00eaf2", "#035bff"},
+			},
+		},
+		Series: []struct {
+			Label struct {
+				Position  string "json:\"position\""
+				Show      bool   "json:\"show\""
+				Formatter string "json:\"formatter\""
+			} "json:\"label\""
+			Type   string "json:\"type\""
+			Encode struct {
+				X string "json:\"x\""
+				Y string "json:\"y\""
+			} "json:\"encode\""
+		}{
+			{
+				Label: struct {
+					Position  string "json:\"position\""
+					Show      bool   "json:\"show\""
+					Formatter string "json:\"formatter\""
+				}{
+					Position:  "inside",
+					Show:      true,
+					Formatter: "{@[1]}",
+				},
+				Type: "bar",
+				Encode: struct {
+					X string "json:\"x\""
+					Y string "json:\"y\""
+				}{
+					X: "product",
+					Y: "amount",
+				},
+			},
+		},
+		Tooltip: struct {
+			Trigger     string "json:\"trigger\""
+			AxisPointer struct {
+				Type string "json:\"type\""
+			} "json:\"axisPointer\""
+		}{
+			Trigger: "axis",
+			AxisPointer: struct {
+				Type string "json:\"type\""
+			}{
+				Type: "shadow",
+			},
+		},
+	}
+
+	return option, nil
+}
+
+func (tknl *TabKelainanNonLabServices) GetDataKelNonLab(mcuID string) (models.Barchart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Barchart
+	var data []models.KelNonLabModel
+
+	q := `
+	SELECT concat(Nat_TestName,"/",Mcu_KelainanName) AS kelainan, 
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	LEFT JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID AND Mgm_DetailIsActive = 'Y'
+	LEFT JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	LEFT JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	LEFT JOIN nat_test ON Nat_TestCode = Mgm_HeaderNat_TestCode 
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderMgm_McuID = ?
+	AND Mgm_HeaderType = 'NL'
+	AND Mgm_HeaderIsNormal = 'N'
+	GROUP BY Mcu_KelainanID  
+	ORDER BY COUNT(Mgm_HeaderT_OrderHeaderID) DESC
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get data kelainan global mcu %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := ""
+	chartData := models.BarDataset{
+		Source: [][]interface{}{
+			{"score", "amount", "product", "percentage"},
+		},
+	}
+
+	max := 1
+	for _, d := range data {
+		if d.Total >= max {
+			max = d.Total
+		}
+	}
+
+	for _, d := range data {
+		percentage := float64(d.Total) / float64(max) * 100
+		roundedPercentage := math.Round(percentage*100) / 100
+		percentStr := strconv.FormatFloat(roundedPercentage, 'f', -1, 64)
+		chartData.Source = append(chartData.Source, []interface{}{
+			d.Total, d.Total, d.Kelainan, percentStr,
+		})
+	}
+
+	option, err := tknl.GetBarChartConf(title, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error insert data to barchart %v", err)
+	}
+
+	return option, nil
+}
+
+func (tknl *TabKelainanNonLabServices) GetThoraxPA(mcuID string) (models.BarchartV2, error) {
+	logger, _ := zap.NewProduction()
+	var option models.BarchartV2
+	var data []models.KelNonLabModel
+
+	q := `
+	SELECT 
+	IFNULL(Mcu_KelainanName,'Normal') AS kelainan,
+	COUNT(Mgm_HeaderT_OrderHeaderID) AS total
+	FROM mgm_header
+	LEFT JOIN mgm_detail ON Mgm_DetailMgm_HeaderID = Mgm_HeaderID AND Mgm_DetailIsActive = 'Y'
+	LEFT JOIN mcu_kelainan ON Mgm_DetailMcu_KelainanID = Mcu_KelainanID
+	LEFT JOIN mcu_kelainangroup ON Mgm_DetailMcu_KelainanGroupID = Mcu_KelainanGroupID
+	WHERE Mgm_HeaderIsActive = 'Y' AND Mgm_HeaderNat_TestCode = 30150100 
+	AND Mgm_HeaderIsNormal = 'N' AND Mgm_HeaderMgm_McuID = ?
+	GROUP BY Mcu_KelainanID 
+	ORDER BY total DESC
+	`
+
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get data kelainan global mcu %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Thorax PA"
+	option, err := tknl.ConfBarchartVertical(title, data)
+	if err != nil {
+		return option, fmt.Errorf("error insert data into chart %v", err)
+	}
+
+	return option, nil
+}

services/corporate/mcudetail/tabkepesertaan.services.go

@@ -1,6 +1,14 @@
 package mcu_corporate_services
 
-import "cpone/db"
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"strconv"
+
+	"go.uber.org/zap"
+)
 
 type TabKepersertaanServices struct {
 	TabKepersertaanServiceStore db.AppStore
@@ -11,3 +19,232 @@ func NewTabKepersertaanService(store db.AppStore) *TabKepersertaanServices {
 		TabKepersertaanServiceStore: store,
 	}
 }
+
+func (tkp *TabKepersertaanServices) GetPieChartConf(title string, subtext string, data []models.SeriesData) (models.Piechart, error) {
+
+	option := models.Piechart{
+		Title: struct {
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
+		}{
+			Text:    title,
+			SubText: subtext,
+			Left:    "center",
+		},
+		Tooltip: struct {
+			Trigger string `json:"trigger"`
+		}{
+			Trigger: "item",
+		},
+		Legend: struct {
+			Top    string `json:"top"`
+			Left   string `json:"left"`
+			Orient string `json:"orient"`
+			Height int    `json:"height"`
+		}{
+			Top:    "bottom",
+			Left:   "center",
+			Orient: "vertical",
+			Height: 75,
+		},
+		Series: []models.Series{
+			{
+				Label: struct {
+					Position  string `json:"position"`
+					Formatter string `json:"formatter"`
+				}{
+					Position:  "inner",
+					Formatter: "{d}%",
+				},
+				Name:   "Access From",
+				Type:   "pie",
+				Radius: []string{"20%", "50%"},
+				ItemStyle: struct {
+					BorderRadius int    `json:"borderRadius"`
+					BorderColor  string `json:"borderColor"`
+					BorderWidth  int    `json:"borderWidth"`
+				}{
+					BorderRadius: 10,
+					BorderColor:  "#fff",
+					BorderWidth:  2,
+				},
+				Data: data,
+				Emphasis: struct {
+					ItemStyle struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					} `json:"itemStyle"`
+				}{
+					ItemStyle: struct {
+						ShadowBlur    int    `json:"shadowBlur"`
+						ShadowOffsetX int    `json:"shadowOffsetX"`
+						ShadowColor   string `json:"shadowColor"`
+					}{
+						ShadowBlur:    10,
+						ShadowOffsetX: 0,
+						ShadowColor:   "rgba(0, 0, 0, 0.5)",
+					},
+				},
+			},
+		},
+	}
+
+	return option, nil
+}
+
+func (tkp *TabKepersertaanServices) GetTotalKepesertaanMCU(mcuID string) (models.Piechart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Piechart
+	var data models.TotalPesertaModel
+
+	q := `
+		SELECT 
+		COUNT(mo.Mcu_OrderID) AS peserta,
+		mm.Mgm_McuTotalParticipant
+		FROM mgm_mcu mm
+		LEFT JOIN t_orderheader toh ON toh.T_OrderHeaderMgm_McuID = mm.Mgm_McuID
+		AND T_OrderHeaderIsActive = 'Y'
+		LEFT JOIN mcu_order mo ON mo.Mcu_OrderT_OrderHeaderID = toh.T_OrderHeaderID
+		WHERE mm.Mgm_McuID = ? AND mm.Mgm_McuIsActive = 'Y'
+	`
+	if err := dbx.Handlex.Get(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get total participant %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	title := "Peserta MCU"
+	subtext := "Total Peserta " + strconv.Itoa(data.Mgm_McuTotalParticipant)
+	chartData := []models.SeriesData{}
+
+	if data.Mgm_McuTotalParticipant == 0 {
+		chartData = append(chartData, models.SeriesData{Value: 0, Name: "No Data"})
+	} else {
+		chartData = []models.SeriesData{
+			{
+				Value: data.Peserta,
+				Name:  "Sudah MCU: " + strconv.Itoa(data.Peserta) + " peserta",
+			},
+			{
+				Value: data.Mgm_McuTotalParticipant - data.Peserta,
+				Name:  "Belum MCU: " + strconv.Itoa(data.Mgm_McuTotalParticipant-data.Peserta) + " peserta",
+			},
+		}
+	}
+
+	option, err := tkp.GetPieChartConf(title, subtext, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error get piechart total peserta: %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkp *TabKepersertaanServices) GetKepesertaanByGender(mcuID string) (models.Piechart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Piechart
+	var data []models.GenderPesertaModel
+
+	title := "Peserta MCU"
+	subtext := "Berdasarkan jenis kelamin"
+	chartData := []models.SeriesData{}
+
+	q := `
+		SELECT
+		CASE
+        	WHEN M_PatientGender = 'male' THEN 'Laki-laki'
+        	WHEN M_PatientGender = 'female' THEN 'Perempuan'
+        	ELSE M_PatientGender
+    	END AS M_PatientGender,
+		COUNT(*) AS Jumlah
+		FROM mcu_order
+		JOIN t_orderheader ON Mcu_OrderT_OrderHeaderID = T_OrderHeaderID 
+		AND T_OrderHeaderIsActive = 'Y'
+		LEFT JOIN m_patient ON T_OrderHeaderM_PatientID = M_PatientID 
+		AND M_PatientIsActive = 'Y'
+		WHERE Mcu_OrderMgm_McuID = ?
+		GROUP BY M_PatientGender
+	`
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get total gender %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("resp data", zap.Any("data", data))
+
+	if data != nil {
+		for _, d := range data {
+			chartData = append(chartData, models.SeriesData{
+				Value: d.Jumlah,
+				Name:  d.M_PatientGender + ": " + strconv.Itoa(d.Jumlah) + " Peserta",
+			})
+		}
+	} else {
+		chartData = append(chartData, models.SeriesData{Value: 0, Name: "No Data"})
+	}
+
+	option, err := tkp.GetPieChartConf(title, subtext, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error get piechart total gender: %v", err)
+	}
+
+	return option, nil
+}
+
+func (tkp *TabKepersertaanServices) GetKepesertaanByUmur(mcuID string) (models.Piechart, error) {
+	logger, _ := zap.NewProduction()
+	var option models.Piechart
+	var data []models.UmurPesertaModel
+
+	title := "Peserta MCU"
+	subtext := "Berdasarkan umur"
+	chartData := []models.SeriesData{}
+
+	q := `
+		SELECT  
+		CASE 
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2) < '30'  then  "1. < 30 tahun"  
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2) >=    '30' AND LEFT(T_OrderHeaderM_PatientAge,2)  < '40'  then   "2. 30 -< 40 tahun"  
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2) >=   '40' AND LEFT(T_OrderHeaderM_PatientAge,2)  < '50'  then   "3. 40 - < 50 tahun"  
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2)   >= '50' then   "4. > 50 tahun" else  "" 
+		END AS umur,
+		COUNT(Mcu_OrderT_OrderHeaderID) AS total
+		FROM mcu_order 
+		JOIN t_orderheader ON Mcu_OrderT_OrderHeaderID = T_OrderHeaderID AND T_OrderHeaderIsActive = 'Y'
+		LEFT JOIN m_patient ON T_OrderHeaderM_PatientID = M_PatientID  AND M_PatientIsActive = 'Y'
+		WHERE  Mcu_OrderMgm_McuID = ?
+		GROUP BY 
+		CASE 
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2) < '30'  then  "1. < 30 tahun"
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2) >=    '30' AND LEFT(T_OrderHeaderM_PatientAge,2)  < '40'  then   "2. 30 -< 40 tahun"
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2) >=   '40' AND LEFT(T_OrderHeaderM_PatientAge,2)  < '50'  then   "3. 40 - < 50 tahun"
+			WHEN LEFT(T_OrderHeaderM_PatientAge,2)   >= '50' then   "4. > 50 tahun" else  ""
+		END
+		ORDER BY umur
+	`
+
+	if err := dbx.Handlex.Select(&data, q, mcuID); err != nil {
+		return option, fmt.Errorf("error get data jumlah umur: %v", err)
+	}
+	defer logger.Sync()
+	logger.Info("response data", zap.Any("data", data))
+
+	if data != nil {
+		for _, d := range data {
+			chartData = append(chartData, models.SeriesData{
+				Value: d.Total,
+				Name:  d.Umur + ": " + strconv.Itoa(d.Total) + " Peserta",
+			})
+		}
+	} else {
+		chartData = append(chartData, models.SeriesData{Value: 0, Name: "No Data"})
+	}
+
+	option, err := tkp.GetPieChartConf(title, subtext, chartData)
+	if err != nil {
+		return option, fmt.Errorf("error get piechart jumlah umur: %v", err)
+	}
+
+	return option, nil
+}

utils/chartcolor.utils.go

@@ -0,0 +1,28 @@
+package utils
+
+import (
+	"fmt"
+	"math"
+)
+
+// InterpolateColor calculates a color between two given colors based on progress (0 to 1)
+func InterpolateColor(start, end string, progress float64) string {
+	r1, g1, b1 := HexToRGB(start)
+	r2, g2, b2 := HexToRGB(end)
+
+	r := int(math.Round(float64(r1)*(1-progress) + float64(r2)*progress))
+	g := int(math.Round(float64(g1)*(1-progress) + float64(g2)*progress))
+	b := int(math.Round(float64(b1)*(1-progress) + float64(b2)*progress))
+
+	return fmt.Sprintf("#%02x%02x%02x", r, g, b)
+}
+
+// Helper function to convert hex to RGB
+func HexToRGB(hex string) (int, int, int) {
+	var r, g, b int
+	_, err := fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
+	if err != nil {
+		return 0, 0, 0
+	}
+	return r, g, b
+}

views/corporate/mcu/mcudetail.templ

@@ -57,7 +57,8 @@ templ CSSMcuDetail(
     @CssKesimpulan
 }
 
-templ JSMcuDetail() {   
+templ JSMcuDetail() {
+    <script src="assets/js/echarts-js/echart.min.js"></script>
 }
 
 templ ShowMcuDetail(

views/corporate/mcu/mcudetail_templ.go

@@ -98,6 +98,10 @@ func JSMcuDetail() templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"assets/js/echarts-js/echart.min.js\"></script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}

views/corporate/mcu/mcutab/tabkelainanfisik.templ

@@ -0,0 +1,44 @@
+package corporate_mcudetail
+
+templ Tabkelainanfisik(
+    chartbmixs templ.Component,
+    chartbmimd templ.Component,
+    chartbmilg templ.Component,
+    charthprxs templ.Component,
+    charthprmd templ.Component,
+    charthprlg templ.Component,
+) {
+    <div class="container-fluid">
+        <div class="d-flex justify-content-center py-10">
+            <h2 class="title text-black" style="margin-bottom: 0;">Data Presentase Kelainan Fisik</h2>
+        </div>
+
+        // xs
+        <div class="d-xs-block d-sm-block d-md-none">
+            <div class="d-flex justify-content-center mb-8">
+                @chartbmixs
+            </div>
+            <div class="d-flex justify-content-center mb-8">
+                @charthprxs
+            </div>
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="d-flex justify-content-center mb-8">
+                @chartbmimd
+            </div>
+            <div class="d-flex justify-content-center mb-8">
+                @charthprmd
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="d-flex justify-content-center mb-8">
+                @chartbmilg
+                @charthprlg
+            </div>
+        </div>
+    </div>
+}

views/corporate/mcu/mcutab/tabkelainanfisik_templ.go

@@ -0,0 +1,86 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_mcudetail
+
+//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"
+
+func Tabkelainanfisik(
+	chartbmixs templ.Component,
+	chartbmimd templ.Component,
+	chartbmilg templ.Component,
+	charthprxs templ.Component,
+	charthprmd templ.Component,
+	charthprlg templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Presentase Kelainan Fisik</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"d-flex justify-content-center mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartbmixs.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex justify-content-center mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = charthprxs.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"d-flex justify-content-center mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartbmimd.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex justify-content-center mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = charthprmd.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"d-flex justify-content-center mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartbmilg.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = charthprlg.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/corporate/mcu/mcutab/tabkelainanglobal.templ

@@ -0,0 +1,46 @@
+package corporate_mcudetail
+
+templ TabKelainanGlobal(
+    chartmcuxs templ.Component,
+    chartfisikxs templ.Component,
+    chartmcumd templ.Component,
+    chartfisikmd templ.Component,
+    chartmculg templ.Component,
+    chartfisiklg templ.Component,
+) {
+    <div class="container-fluid">
+        <div class="d-flex justify-content-center py-10">
+            <h2 class="title text-black" style="margin-bottom: 0;">Data Kelainan Global</h2>
+        </div>
+        
+        // xs
+        <div class="d-xs-block d-sm-block d-md-none">
+            <div class="mb-8">
+                @chartmcuxs
+            </div>
+            <div class="mb-8">
+                @chartfisikxs
+            </div>
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="mb-8">
+                @chartmcumd
+            </div>
+            <div class="mb-8">
+                @chartfisikmd
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="mb-8">
+                @chartmculg
+            </div>
+            <div class="mb-8">
+                @chartfisiklg
+            </div>
+        </div>
+    </div>
+}

views/corporate/mcu/mcutab/tabkelainanglobal_templ.go

@@ -0,0 +1,90 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_mcudetail
+
+//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"
+
+func TabKelainanGlobal(
+	chartmcuxs templ.Component,
+	chartfisikxs templ.Component,
+	chartmcumd templ.Component,
+	chartfisikmd templ.Component,
+	chartmculg templ.Component,
+	chartfisiklg templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kelainan Global</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartmcuxs.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartfisikxs.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartmcumd.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartfisikmd.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartmculg.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartfisiklg.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/corporate/mcu/mcutab/tabkelainanlab.templ

@@ -0,0 +1,44 @@
+package corporate_mcudetail
+
+templ TabKelainanLab(
+    chartpresentase templ.Component,
+    charthematologi templ.Component,
+    charturinalisa templ.Component,
+    chartganghati templ.Component,
+    chartmetalemak templ.Component,
+    chartglukosa templ.Component,
+) {
+    <div class="container-fluid">
+        <div class="d-flex justify-content-center py-10">
+            <h2 class="title text-black" style="margin-bottom: 0;">Data Kelainan Lab</h2>
+        </div>
+        
+        // xs
+        <div class="d-xs-block d-sm-block d-md-none">
+
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="mb-8">
+                @chartpresentase
+            </div>
+            <div class="row mb-8">
+                @charthematologi
+                @charturinalisa
+            </div>
+            <div class="row mb-8">
+                @chartganghati
+                @chartmetalemak
+            </div>
+            <div class="row mb-8">
+                @chartglukosa
+            </div>
+        </div>
+    </div>
+}

views/corporate/mcu/mcutab/tabkelainanlab_templ.go

@@ -0,0 +1,82 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_mcudetail
+
+//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"
+
+func TabKelainanLab(
+	chartpresentase templ.Component,
+	charthematologi templ.Component,
+	charturinalisa templ.Component,
+	chartganghati templ.Component,
+	chartmetalemak templ.Component,
+	chartglukosa templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kelainan Lab</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"></div><div class=\"d-none d-md-block d-lg-none\"></div><div class=\"d-none d-lg-block\"><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartpresentase.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = charthematologi.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = charturinalisa.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartganghati.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartmetalemak.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartglukosa.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/corporate/mcu/mcutab/tabkelainannonlab.templ

@@ -0,0 +1,32 @@
+package corporate_mcudetail
+
+templ TabKelainanNonLab(
+    chartpresentase templ.Component,
+    chartthorax templ.Component,
+) {
+    <div class="container-fluid">
+        <div class="d-flex justify-content-center py-10">
+            <h2 class="title text-black" style="margin-bottom: 0;">Data Kelainan Non Lab</h2>
+        </div>
+        
+        // xs
+        <div class="d-xs-block d-sm-block d-md-none">
+
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="mb-8">
+                @chartpresentase
+            </div>
+            <div class="mb-8">
+                @chartthorax
+            </div>
+        </div>
+    </div>
+}

views/corporate/mcu/mcutab/tabkelainannonlab_templ.go

@@ -0,0 +1,54 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package corporate_mcudetail
+
+//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"
+
+func TabKelainanNonLab(
+	chartpresentase templ.Component,
+	chartthorax templ.Component,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kelainan Non Lab</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"></div><div class=\"d-none d-md-block d-lg-none\"></div><div class=\"d-none d-lg-block\"><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartpresentase.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartthorax.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/corporate/mcu/mcutab/tabkepesertaan.templ

@@ -1,20 +1,74 @@
 package corporate_mcudetail
 
 templ TabKepesertaan(
-    chart templ.Component,
+    chartalpha templ.Component,
+    chartbeta templ.Component,
+    chartdelta templ.Component,
+    chartalphaxs templ.Component,
+    chartbetaxs templ.Component,
+    chartdeltaxs templ.Component,
+    chartalphamd templ.Component,
+    chartbetamd templ.Component,
+    chartdeltamd templ.Component,
 ) {
     <div class="container-fluid">
         <div class="d-flex justify-content-center py-10">
             <h2 class="title text-black" style="margin-bottom: 0;">Data Kepesertaan MCU</h2>
         </div>
-        <div id="loading-parent" class="rounded">
-            @chart
-            <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>
+
+        // xs
+        <div class="d-xs-block d-sm-block d-md-none">
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 400px;">
+                    @chartalphaxs
+                </div>
+            </div>
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 400px;">
+                    @chartbetaxs
+                </div>
+            </div>
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 400px;">
+                    @chartdeltaxs
+                </div>
+            </div>
+        </div>
+        
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 500px;">
+                    @chartalphamd
+                </div>
+            </div>
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 500px;">
+                    @chartbetamd
+                </div>
+            </div>
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 500px;">
+                    @chartdeltamd
+                </div>
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 600px;">
+                    @chartalpha
+                </div>
+                <div style="width: 600px;">
+                    @chartbeta
+                </div>
+            </div>
+            <div class="d-flex justify-content-center mb-8">
+                <div style="width: 600px;">
+                    @chartdelta
                 </div>
             </div>
         </div>
-        <div id="loadingcontent"></div>
     </div>
 }

views/corporate/mcu/mcutab/tabkepesertaan_templ.go

@@ -11,7 +11,15 @@ import "io"
 import "bytes"
 
 func TabKepesertaan(
-	chart templ.Component,
+	chartalpha templ.Component,
+	chartbeta templ.Component,
+	chartdelta templ.Component,
+	chartalphaxs templ.Component,
+	chartbetaxs templ.Component,
+	chartdeltaxs templ.Component,
+	chartalphamd templ.Component,
+	chartbetamd templ.Component,
+	chartdeltamd 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)
@@ -25,15 +33,79 @@ func TabKepesertaan(
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kepesertaan MCU</h2></div><div id=\"loading-parent\" class=\"rounded\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kepesertaan MCU</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 400px;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = chart.Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = chartalphaxs.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>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 400px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartbetaxs.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 400px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartdeltaxs.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 class=\"d-none d-md-block d-lg-none\"><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 500px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartalphamd.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 500px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartbetamd.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 500px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartdeltamd.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 class=\"d-none d-lg-block\"><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 600px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartalpha.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div style=\"width: 600px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartbeta.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 600px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chartdelta.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
 		}

views/corporate/mcu/mcutabview.templ

@@ -6,19 +6,19 @@ templ TabViewMcuDetail(
 	<div>
 		<ul class="nav nav-tabs nav-tabs-line">
 			<li class="nav-item">
-				<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkepesertaan"} hx-target="#tabkepesertaan">Peserta</a>
+				<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkepesertaan"} hx-target="#tabkepesertaan" hx-trigger="load">Peserta</a>
 			</li>
 			<li class="nav-item">
-				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Kelainan global</a>
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkelainanglobal"} hx-target="#tabkelainanglobal" hx-trigger="click">Kelainan global</a>
 			</li>
 			<li class="nav-item">
-				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_3">Kelainan Lab</a>
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_3" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkelainanlab"} hx-target="#tabkelainanlab" hx-trigger="click">Kelainan Lab</a>
 			</li>
 			<li class="nav-item">
-				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4">kelainan Non Lab</a>
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkelainannonlab"} hx-target="#tabkelainannonlab" hx-trigger="click">kelainan Non Lab</a>
 			</li>
 			<li class="nav-item">
-				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5">kelainan Fisik</a>
+				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkelainanfisik"} hx-target="#tabkelainanfisik" hx-trigger="click">kelainan Fisik</a>
 			</li>
 			<li class="nav-item">
 				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_6" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkesimpulan"} hx-target="#tabkesimpulan">Kesimpulan</a>
@@ -35,21 +35,25 @@ templ TabViewMcuDetail(
 		</ul>
 	</div>
 	<div class="tab-content mt-5" id="myTabContent">
-		<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2" style="height: 800px;">
+		<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_1">
 			// <object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_001.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
 			<div id="tabkepesertaan"></div>
 		</div>
-		<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2" style="height: 800px;">
-			<object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_002.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+		<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">
+			// <object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_002.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+			<div id="tabkelainanglobal"></div>
 		</div>
-		<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3" style="height: 800px;">
-			<object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_003.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+		<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3">
+			// <object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_003.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+			<div id="tabkelainanlab"></div>
 		</div>
 		<div class="tab-pane fade" id="kt_tab_pane_4" role="tabpanel" aria-labelledby="kt_tab_pane_4" style="height: 800px;">
-			<object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_004.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+			// <object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_004.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+			<div id="tabkelainannonlab"></div>
 		</div>
-		<div class="tab-pane fade" id="kt_tab_pane_5" role="tabpanel" aria-labelledby="kt_tab_pane_5" style="height: 800px;">
-			<object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_005.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+		<div class="tab-pane fade" id="kt_tab_pane_5" role="tabpanel" aria-labelledby="kt_tab_pane_5">
+			// <object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_005.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
+			<div id="tabkelainanfisik"></div>
 		</div>
 		<div class="tab-pane fade" id="kt_tab_pane_6" role="tabpanel" aria-labelledby="kt_tab_pane_6">
 			<div id="tabkesimpulan"></div>

views/corporate/mcu/mcutabview_templ.go

@@ -38,16 +38,68 @@ func TabViewMcuDetail(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkepesertaan\">Peserta</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_2\">Kelainan global</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_3\">Kelainan Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_4\">kelainan Non Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_5\">kelainan Fisik</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_6\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkepesertaan\" hx-trigger=\"load\">Peserta</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_2\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkesimpulan")
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkelainanglobal")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 12, Col: 128}
+		}
+		_, 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-target=\"#tabkelainanglobal\" hx-trigger=\"click\">Kelainan global</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_3\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkelainanlab")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 15, Col: 125}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkelainanlab\" hx-trigger=\"click\">Kelainan Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_4\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkelainannonlab")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 18, Col: 128}
+		}
+		_, 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-target=\"#tabkelainannonlab\" hx-trigger=\"click\">kelainan Non Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_5\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkelainanfisik")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 21, Col: 127}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkelainanfisik\" hx-trigger=\"click\">kelainan Fisik</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_6\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkesimpulan")
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 24, Col: 124}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -55,12 +107,12 @@ func TabViewMcuDetail(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var4 string
-		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabdaftarpeserta")
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabdaftarpeserta")
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 27, Col: 127}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -68,75 +120,23 @@ func TabViewMcuDetail(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkeuangan")
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkeuangan")
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 33, Col: 122}
 		}
-		_, 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-target=\"#tabkeuangan\">Keuangan</a></li></ul></div><div class=\"tab-content mt-5\" id=\"myTabContent\"><div class=\"tab-pane fade show active\" id=\"kt_tab_pane_1\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><div id=\"tabkepesertaan\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_2\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><object data=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_002.rptdesign&__format=pdf&PID=" + id + "&username=adhi&tm=1717726294764")
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 43, Col: 167}
-		}
-		_, 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("\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_3\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_3\" style=\"height: 800px;\"><object data=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_003.rptdesign&__format=pdf&PID=" + id + "&username=adhi&tm=1717726294764")
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 46, Col: 167}
-		}
-		_, 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("\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_4\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_4\" style=\"height: 800px;\"><object data=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_004.rptdesign&__format=pdf&PID=" + id + "&username=adhi&tm=1717726294764")
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 49, Col: 167}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_5\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_5\" style=\"height: 800px;\"><object data=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs("https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_005.rptdesign&__format=pdf&PID=" + id + "&username=adhi&tm=1717726294764")
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 52, Col: 167}
-		}
 		_, 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("\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_6\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_6\"><div id=\"tabkesimpulan\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_7\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_7\"><div id=\"tabdaftarpeserta\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_8\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_8\" style=\"height: 800px;\"><object data=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkeuangan\">Keuangan</a></li></ul></div><div class=\"tab-content mt-5\" id=\"myTabContent\"><div class=\"tab-pane fade show active\" id=\"kt_tab_pane_1\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_1\"><div id=\"tabkepesertaan\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_2\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\"><div id=\"tabkelainanglobal\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_3\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_3\"><div id=\"tabkelainanlab\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_4\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_4\" style=\"height: 800px;\"><div id=\"tabkelainannonlab\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_5\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_5\"><div id=\"tabkelainanfisik\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_6\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_6\"><div id=\"tabkesimpulan\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_7\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_7\"><div id=\"tabdaftarpeserta\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_8\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_8\" style=\"height: 800px;\"><object data=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_summary_executive.rptdesign&__format=pdf&PID=" + id + "&username=adhi&tm=1717726294764")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 61, Col: 171}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 65, Col: 171}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {