add xs layout echarts

add echart barchart
add echart kelainan lab
2024-07-08 08:47:56 +07:00 · 2024-07-05 10:55:47 +07:00 · 2024-07-03 10:47:43 +07:00 · 2024-07-01 15:58:35 +07:00 · 2024-06-27 15:56:43 +07:00 · 2024-06-26 18:13:48 +07:00
34 changed files with 3105 additions and 102 deletions
--- a/component/chart/chart.templ
+++ b/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)
--- a/component/chart/chart_templ.go
+++ b/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),
 	}
 }
--- a/handlers/corporate/mcudetail/tabkelainanfisik.hanlders.go
+++ b/handlers/corporate/mcudetail/tabkelainanfisik.hanlders.go
@@ -0,0 +1,79 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/a-h/templ"
+	"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
+	}
+
+	chartsxs := []templ.Component{
+		chart.ShowChartFixed("bmixs", string(bmijson), "400px", "450px"),
+		chart.ShowChartFixed("hprxs", string(hiperjson), "400px", "450px"),
+	}
+
+	chartsmd := []templ.Component{
+		chart.ShowChartFixed("bmimd", string(bmijson), "450px", "450px"),
+		chart.ShowChartFixed("hprmd", string(hiperjson), "450px", "450px"),
+	}
+
+	chartslg := []templ.Component{
+		chart.ShowChartFixed("bmilg", string(bmijson), "600px", "450px"),
+		chart.ShowChartFixed("hprlg", string(hiperjson), "600px", "450px"),
+	}
+
+	content := corporate_mcudetail.Tabkelainanfisik(
+		chartsxs,
+		chartsmd,
+		chartslg,
+	)
+
+	return utils.View(c, content)
+}
--- a/handlers/corporate/mcudetail/tabkelainanglobal.handlers.go
+++ b/handlers/corporate/mcudetail/tabkelainanglobal.handlers.go
@@ -0,0 +1,78 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/a-h/templ"
+	"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
+	}
+
+	chartsxs := []templ.Component{
+		chart.ShowChartFixed("chartmcuxs", string(klmcujson), "400px", "450px"),
+		chart.ShowChartFixed("chartfisikxs", string(klfisjson), "400px", "450px"),
+	}
+
+	chartsmd := []templ.Component{
+		chart.ShowChartFixed("chartmcumd", string(klmcujson), "500px", "450px"),
+		chart.ShowChartFixed("chartfisikmd", string(klfisjson), "500px", "450px"),
+	}
+
+	chartslg := []templ.Component{
+		chart.ShowChartFixed("chartmculg", string(klmcujson), "1000px", "450px"),
+		chart.ShowChartFixed("chartfisiklg", string(klfisjson), "1000px", "450px"),
+	}
+
+	content := corporate_mcudetail.TabKelainanGlobal(
+		chartsxs,
+		chartsmd,
+		chartslg,
+	)
+
+	return utils.View(c, content)
+}
--- a/handlers/corporate/mcudetail/tabkelainanlab.handlers.go
+++ b/handlers/corporate/mcudetail/tabkelainanlab.handlers.go
@@ -0,0 +1,130 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/a-h/templ"
+	"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
+	}
+
+	chartsxs := []templ.Component{
+		chart.ShowChartFixed("dataprexs", string(dataprejson), "400px", "450px"),
+		chart.ShowChartFixed("hemaxs", string(hemajson), "400px", "450px"),
+		chart.ShowChartFixed("urinxs", string(urinjson), "400px", "450px"),
+		chart.ShowChartFixed("hatixs", string(hatijson), "400px", "450px"),
+		chart.ShowChartFixed("lemakxs", string(lemakjson), "400px", "450px"),
+		chart.ShowChartFixed("glukosxs", string(glukosjson), "400px", "450px"),
+	}
+
+	chartsmd := []templ.Component{
+		chart.ShowChartFixed("datapremd", string(dataprejson), "500px", "450px"),
+		chart.ShowChartFixed("hemamd", string(hemajson), "500px", "450px"),
+		chart.ShowChartFixed("urinmd", string(urinjson), "500px", "450px"),
+		chart.ShowChartFixed("hatimd", string(hatijson), "500px", "450px"),
+		chart.ShowChartFixed("lemakmd", string(lemakjson), "500px", "450px"),
+		chart.ShowChartFixed("glukosmd", string(glukosjson), "500px", "450px"),
+	}
+
+	chartslg := []templ.Component{
+		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"),
+	}
+
+	content := corporate_mcudetail.TabKelainanLab(
+		chart.ShowChartFixed("dataprelg", string(dataprejson), "1000px", "450px"),
+		chartsxs,
+		chartsmd,
+		chartslg,
+	)
+
+	return utils.View(c, content)
+}
--- a/handlers/corporate/mcudetail/tabkelainannonlab.handlers.go
+++ b/handlers/corporate/mcudetail/tabkelainannonlab.handlers.go
@@ -0,0 +1,74 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/a-h/templ"
+	"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
+	}
+
+	chartsxs := []templ.Component{
+		chart.ShowChartFixed("datanonxs", string(dataprejson), "400px", "450px"),
+		chart.ShowChartFixed("thoraxxs", string(thrxjson), "400px", "450px"),
+	}
+
+	chartsmd := []templ.Component{
+		chart.ShowChartFixed("datanonmd", string(dataprejson), "500px", "450px"),
+		chart.ShowChartFixed("thoraxmd", string(thrxjson), "500px", "450px"),
+	}
+
+	chartslg := []templ.Component{
+		chart.ShowChartFixed("datanonlg", string(dataprejson), "1000px", "450px"),
+		chart.ShowChartFixed("thoraxlg", string(thrxjson), "600px", "450px"),
+	}
+
+	content := corporate_mcudetail.TabKelainanNonLab(
+		chartsxs,
+		chartsmd,
+		chartslg,
+	)
+
+	return utils.View(c, content)
+}
--- a/handlers/corporate/mcudetail/tabkepesertaan.handlers.go
+++ b/handlers/corporate/mcudetail/tabkepesertaan.handlers.go
@@ -0,0 +1,93 @@
+package mcu_corporate_handlers
+
+import (
+	"cpone/component/chart"
+	"cpone/models"
+	"cpone/utils"
+	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
+	"encoding/json"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type TabKepersertaanServices interface {
+	GetTotalKepesertaanMCU(mcuID string) (models.Piechart, error)
+	GetKepesertaanByGender(mcuID string) (models.Piechart, error)
+	GetKepesertaanByUmur(mcuID string) (models.Piechart, error)
+}
+
+type TabKepersertaanHandler struct {
+	TabKepersertaanServices TabKepersertaanServices
+}
+
+func NewTabKepersertaanHandler(tkh TabKepersertaanServices) *TabKepersertaanHandler {
+	return &TabKepersertaanHandler{
+		TabKepersertaanServices: tkh,
+	}
+}
+
+func (tkh *TabKepersertaanHandler) HandleShowTabKepesertaan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	logger.Info("Tab Kepesertaan")
+
+	id := c.Param("id")
+	logger.Info("Params", zap.Any("id", id))
+
+	peserta, err := tkh.TabKepersertaanServices.GetTotalKepesertaanMCU(id)
+	if err != nil {
+		return err
+	}
+
+	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
+	}
+
+	chartsxs := []templ.Component{
+		chart.ShowChartFixed("charttotalxs", string(totaljson), "400px", "450px"),
+		chart.ShowChartFixed("chartgenderxs", string(genderjson), "400px", "450px"),
+		chart.ShowChartFixed("chartumurxs", string(umurjson), "400px", "450px"),
+	}
+
+	chartsmd := []templ.Component{
+		chart.ShowChartFixed("charttotalmd", string(totaljson), "450px", "450px"),
+		chart.ShowChartFixed("chartgendermd", string(genderjson), "450px", "450px"),
+		chart.ShowChartFixed("chartumurmd", string(umurjson), "450px", "450px"),
+	}
+
+	chartslg := []templ.Component{
+		chart.ShowChartFixed("charttotal", string(totaljson), "600px", "450px"),
+		chart.ShowChartFixed("chartgender", string(genderjson), "600px", "450px"),
+		chart.ShowChartFixed("chartumur", string(umurjson), "600px", "450px"),
+	}
+
+	content := corporate_mcudetail.TabKepesertaan(
+		chartsxs,
+		chartsmd,
+		chartslg,
+	)
+
+	return utils.View(c, content)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -121,16 +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)
--- a/models/chart.models.go
+++ b/models/chart.models.go
@@ -0,0 +1,155 @@
+package models
+
+type SeriesData struct {
+	Value int    `json:"value"`
+	Name  string `json:"name"`
+}
+
+type Series struct {
+	Label struct {
+		Position  string `json:"position"`
+		Formatter string `json:"formatter"`
+	} `json:"label"`
+	Name      string   `json:"name"`
+	Type      string   `json:"type"`
+	Radius    []string `json:"radius"`
+	ItemStyle struct {
+		BorderRadius int    `json:"borderRadius"`
+		BorderColor  string `json:"borderColor"`
+		BorderWidth  int    `json:"borderWidth"`
+	} `json:"itemStyle"`
+	Data     []SeriesData `json:"data"`
+	Emphasis struct {
+		ItemStyle struct {
+			ShadowBlur    int    `json:"shadowBlur"`
+			ShadowOffsetX int    `json:"shadowOffsetX"`
+			ShadowColor   string `json:"shadowColor"`
+		} `json:"itemStyle"`
+	} `json:"emphasis"`
+}
+
+type Piechart struct {
+	Title struct {
+		Text    string `json:"text"`
+		SubText string `json:"subtext"`
+		Left    string `json:"left"`
+	} `json:"title"`
+	Tooltip struct {
+		Trigger string `json:"trigger"`
+	} `json:"tooltip"`
+	Legend struct {
+		Top    string `json:"top"`
+		Left   string `json:"left"`
+		Orient string `json:"orient"`
+		Height int    `json:"height"`
+	} `json:"legend"`
+	Series []Series `json:"series"`
+}
+
+type Barchart 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"`
+	} `json:"xAxis"`
+	YAxis struct {
+		Type string `json:"type"`
+	} `json:"yAxis"`
+	VisualMap struct {
+		Orient    string `json:"orient"`
+		Left      string `json:"left"`
+		Min       int    `json:"min"`
+		Max       int    `json:"max"`
+		Show      bool   `json:"show"`
+		Dimension int    `json:"dimension"`
+		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"`
+}
+
+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"`
+}
--- a/models/tabkelainanfisik.models.go
+++ b/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"`
+}
--- a/models/tabkelainanglobal.models.go
+++ b/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"`
+}
--- a/models/tabkelainanlab.models.go
+++ b/models/tabkelainanlab.models.go
@@ -0,0 +1,6 @@
+package models
+
+type KelainanLabModel struct {
+	Mcu_KelainanName string `db:"Mcu_KelainanName"`
+	Total            int    `db:"total"`
+}
--- a/models/tabkelainannonlab.models.go
+++ b/models/tabkelainannonlab.models.go
@@ -0,0 +1,6 @@
+package models
+
+type KelNonLabModel struct {
+	Kelainan string `db:"kelainan"`
+	Total    int    `db:"total"`
+}
--- a/models/tabkepesertaan.models.go
+++ b/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"`
+}
--- a/services/corporate/mcudetail/tabkelainanfisik.services.go
+++ b/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
+}
--- a/services/corporate/mcudetail/tabkelainanglobal.services.go
+++ b/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
+}
--- a/services/corporate/mcudetail/tabkelainanlab.services.go
+++ b/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 := "Data Presentase Kelainan Lab"
+	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
+}
--- a/services/corporate/mcudetail/tabkelainannonlab.services.go
+++ b/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: "amount",
+				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 := "Data Presentase Kelainan Non Lab"
+	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
+}
--- a/services/corporate/mcudetail/tabkepesertaan.services.go
+++ b/services/corporate/mcudetail/tabkepesertaan.services.go
@@ -0,0 +1,250 @@
+package mcu_corporate_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"fmt"
+	"strconv"
+
+	"go.uber.org/zap"
+)
+
+type TabKepersertaanServices struct {
+	TabKepersertaanServiceStore db.AppStore
+}
+
+func NewTabKepersertaanService(store db.AppStore) *TabKepersertaanServices {
+	return &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
+}
--- a/utils/chartcolor.utils.go
+++ b/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
+}
--- a/views/corporate/mcu/mcudetail.templ
+++ 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(
--- a/views/corporate/mcu/mcudetail_templ.go
+++ b/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)
 		}
--- a/views/corporate/mcu/mcutab/tabkelainanfisik.templ
+++ b/views/corporate/mcu/mcutab/tabkelainanfisik.templ
@@ -0,0 +1,46 @@
+package corporate_mcudetail
+
+templ Tabkelainanfisik(
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []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="row justify-content-center">
+                for _, c := range chartsxs {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="row justify-content-center">
+                for _, c := range chartsmd {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }                
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="row justify-content-center">
+                for _, c := range chartslg {
+                    <div class="col-6 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
--- a/views/corporate/mcu/mcutab/tabkelainanfisik_templ.go
+++ b/views/corporate/mcu/mcutab/tabkelainanfisik_templ.go
@@ -0,0 +1,93 @@
+// 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(
+	chartsxs []templ.Component,
+	chartsmd []templ.Component,
+	chartslg []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=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsxs {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsmd {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartslg {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-6 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, 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
+	})
+}
--- a/views/corporate/mcu/mcutab/tabkelainanglobal.templ
+++ b/views/corporate/mcu/mcutab/tabkelainanglobal.templ
@@ -0,0 +1,46 @@
+package corporate_mcudetail
+
+templ TabKelainanGlobal(
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []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="row justify-content-center">
+                for _, c := range chartsxs {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="row justify-content-center">
+                for _, c := range chartsmd {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="row justify-content-center">
+                for _, c := range chartslg {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
--- a/views/corporate/mcu/mcutab/tabkelainanglobal_templ.go
+++ b/views/corporate/mcu/mcutab/tabkelainanglobal_templ.go
@@ -0,0 +1,93 @@
+// 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(
+	chartsxs []templ.Component,
+	chartsmd []templ.Component,
+	chartslg []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=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsxs {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsmd {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartslg {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, 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
+	})
+}
--- a/views/corporate/mcu/mcutab/tabkelainanlab.templ
+++ b/views/corporate/mcu/mcutab/tabkelainanlab.templ
@@ -0,0 +1,50 @@
+package corporate_mcudetail
+
+templ TabKelainanLab(
+    chartpresentaselg templ.Component,
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []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 class="row justify-content-center">
+                for _, c := range chartsxs {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="row justify-content-center">
+                for _, c := range chartsmd {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="row justify-content-center">
+                <div class="col-12 my-4">
+                    @ChartCard(chartpresentaselg)
+                </div>
+                for _, c := range chartslg{
+                    <div class="col-6 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
--- a/views/corporate/mcu/mcutab/tabkelainanlab_templ.go
+++ b/views/corporate/mcu/mcutab/tabkelainanlab_templ.go
@@ -0,0 +1,102 @@
+// 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(
+	chartpresentaselg templ.Component,
+	chartsxs []templ.Component,
+	chartsmd []templ.Component,
+	chartslg []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 class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsxs {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsmd {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"row justify-content-center\"><div class=\"col-12 my-4\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ChartCard(chartpresentaselg).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartslg {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-6 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, 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
+	})
+}
--- a/views/corporate/mcu/mcutab/tabkelainannonlab.templ
+++ b/views/corporate/mcu/mcutab/tabkelainannonlab.templ
@@ -0,0 +1,62 @@
+package corporate_mcudetail
+
+templ TabKelainanNonLab(
+    // chartpresentase templ.Component,
+    // chartthorax templ.Component,
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []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 class="row justify-content-center">
+                for _, c := range chartsxs {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="row justify-content-center">
+                for _, c := range chartsmd {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="row justify-content-center">
+                // <div class="col-12 my-4">
+                //     <div class="card shadow p-4" style="display: flex; justify-content: center; align-items: center; height: 100%;">
+                //         <div class="d-flex flex-column pt-8">
+                //             @chartpresentase
+                //         </div>
+                //     </div>
+                // </div>
+                // <div class="col-12 my-4">
+                //     <div class="card shadow p-4" style="display: flex; justify-content: center; align-items: center; height: 100%;">
+                //         <div class="d-flex flex-column pt-8">
+                //             @chartthorax
+                //         </div>
+                //     </div>
+                // </div>
+                for _, c := range chartslg {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
--- a/views/corporate/mcu/mcutab/tabkelainannonlab_templ.go
+++ b/views/corporate/mcu/mcutab/tabkelainannonlab_templ.go
@@ -0,0 +1,95 @@
+// 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,
+	chartsxs []templ.Component,
+	chartsmd []templ.Component,
+	chartslg []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 class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsxs {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsmd {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartslg {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, 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
+	})
+}
--- a/views/corporate/mcu/mcutab/tabkepesertaan.templ
+++ b/views/corporate/mcu/mcutab/tabkepesertaan.templ
@@ -0,0 +1,56 @@
+package corporate_mcudetail
+
+templ TabKepesertaan(
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []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>
+
+        // xs
+        <div class="d-xs-block d-sm-block d-md-none">
+            <div class="row justify-content-center">
+                for _, c := range chartsxs {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+        
+        // md
+        <div class="d-none d-md-block d-lg-none">
+            <div class="row justify-content-center">
+                for _, c := range chartsmd {
+                    <div class="col-12 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+
+        // lg
+        <div class="d-none d-lg-block">
+            <div class="row justify-content-center">
+                for _, c := range chartslg {
+                    <div class="col-6 my-4">
+                        @ChartCard(c)
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+templ ChartCard(
+    charts templ.Component,
+) {
+    <div class="card shadow p-4" style="display: flex; justify-content: center; align-items: center; height: 100%;">
+        <div class="d-flex flex-column pt-8">
+            @charts
+        </div>
+    </div>
+}
--- a/views/corporate/mcu/mcutab/tabkepesertaan_templ.go
+++ b/views/corporate/mcu/mcutab/tabkepesertaan_templ.go
@@ -0,0 +1,127 @@
+// 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 TabKepesertaan(
+	chartsxs []templ.Component,
+	chartsmd []templ.Component,
+	chartslg []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 Kepesertaan MCU</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsxs {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartsmd {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-12 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"row justify-content-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, c := range chartslg {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-6 my-4\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ChartCard(c).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, 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
+	})
+}
+
+func ChartCard(
+	charts 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_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"card shadow p-4\" style=\"display: flex; justify-content: center; align-items: center; height: 100%;\"><div class=\"d-flex flex-column pt-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = charts.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/views/corporate/mcu/mcutabview.templ
+++ b/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">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,35 +35,37 @@ 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;">
-			<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 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>
+			<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 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={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_summary_executive.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
 		</div>
 		<div class="tab-pane fade" id="kt_tab_pane_9" role="tabpanel" aria-labelledby="kt_tab_pane_9">
-			<div id="tabkeuangan">
-			</div>
+			<div id="tabkeuangan"></div>
 		</div>		
 	</div>
 }
--- a/views/corporate/mcu/mcutabview_templ.go
+++ b/views/corporate/mcu/mcutabview_templ.go
@@ -25,16 +25,81 @@ func TabViewMcuDetail(
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<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\">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("<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=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkesimpulan")
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs("/corp/dashboard_pic/detail/" + id + "/tabkepesertaan")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\corporate\mcu\mcutabview.templ`, Line: 9, Col: 132}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-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 + "/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_Var2))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -42,12 +107,12 @@ func TabViewMcuDetail(
 		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 + "/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_Var3))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -55,88 +120,23 @@ 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 + "/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_Var4))
-		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;\"><object data=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_001.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: 39, Col: 167}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" type=\"application/pdf\" width=\"100%\" height=\"100%\"></object></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: 42, 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: 45, 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: 48, 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: 51, 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: 62, 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 {
Author	SHA1	Message	Date
adibwp	e4364f0c4f	add xs layout echarts	2024-07-08 08:47:56 +07:00
adibwp	f2d8207f25	add echart barchart	2024-07-05 10:55:47 +07:00
adibwp	eb7343117b	add echart kelainan lab	2024-07-03 10:47:43 +07:00
adibwp	7a22f5e4d0	add tab kelainan fisik echarts	2024-07-01 15:58:35 +07:00
adibwp	1c7e223195	add chart tab kepesertaan	2024-06-27 15:56:43 +07:00
adibwp	2a25c60cc2	add piechart dummy tab peserta	2024-06-26 18:13:48 +07:00
adibwp	9008cac97d	add tabview kepersetaan	2024-06-26 18:13:48 +07:00
adibwp	91a157b023	add tab view kepesertaan	2024-06-26 18:13:48 +07:00
adibwp	54de2a0ece	add tabchartkepesertaan	2024-06-26 18:13:48 +07:00