add xs layout echarts

2024-07-08 08:47:56 +07:00
parent f2d8207f25
commit e4364f0c4f
17 changed files with 518 additions and 336 deletions
--- a/handlers/corporate/mcudetail/tabkelainanfisik.hanlders.go
+++ b/handlers/corporate/mcudetail/tabkelainanfisik.hanlders.go
@@ -7,6 +7,7 @@ import (
 	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
 	"encoding/json"

+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 	"go.uber.org/zap"
 )
@@ -53,13 +54,25 @@ func (tkf *TabKelainanFisikHandler) HandleShowTabKelainanFisik(c echo.Context) e
 		return err
 	}

-	content := corporate_mcudetail.Tabkelainanfisik(
-		chart.ShowChartFixed("bmixs", string(bmijson), "300px", "450px"),
-		chart.ShowChartFixed("bmimd", string(bmijson), "500px", "450px"),
+	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("hprxs", string(hiperjson), "300px", "450px"),
-		chart.ShowChartFixed("hprmd", string(hiperjson), "500px", "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
@@ -7,6 +7,7 @@ import (
 	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
 	"encoding/json"

+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 	"go.uber.org/zap"
 )
@@ -52,13 +53,25 @@ func (tkg *TabKelainanGlobalHandler) HandleShowTabKelainanGlobal(c echo.Context)
 		return err
 	}

-	content := corporate_mcudetail.TabKelainanGlobal(
-		chart.ShowChartFixed("chartmcuxs", string(klmcujson), "300px", "450px"),
-		chart.ShowChartFixed("chartfisikxs", string(klfisjson), "300px", "450px"),
+	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
@@ -7,6 +7,7 @@ import (
 	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
 	"encoding/json"

+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 )

@@ -92,13 +93,37 @@ func (tkl *TabKelainanLabHandler) HandleShowTabKelainanLab(c echo.Context) error
 		return err
 	}

-	content := corporate_mcudetail.TabKelainanLab(
-		chart.ShowChartFixed("dataprelg", string(dataprejson), "1000px", "450px"),
+	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
@@ -7,6 +7,7 @@ import (
 	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
 	"encoding/json"

+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 )

@@ -48,9 +49,25 @@ func (tknl *TabKelainanNonLabHandler) HandleShowTabKelainanNonLab(c echo.Context
 		return err
 	}

-	content := corporate_mcudetail.TabKelainanNonLab(
+	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
@@ -7,6 +7,7 @@ import (
 	corporate_mcudetail "cpone/views/corporate/mcu/mcutab"
 	"encoding/json"

+	"github.com/a-h/templ"
 	"github.com/labstack/echo/v4"
 	"go.uber.org/zap"
 )
@@ -64,16 +65,28 @@ func (tkh *TabKepersertaanHandler) HandleShowTabKepesertaan(c echo.Context) erro
 		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(
-		chart.ShowChart("charttotal", string(totaljson)),
-		chart.ShowChart("chartgender", string(genderjson)),
-		chart.ShowChart("chartumur", string(umurjson)),
-		chart.ShowChart("charttotalxs", string(totaljson)),
-		chart.ShowChart("chartgenderxs", string(genderjson)),
-		chart.ShowChart("chartumurxs", string(umurjson)),
-		chart.ShowChart("charttotalmd", string(totaljson)),
-		chart.ShowChart("chartgendermd", string(genderjson)),
-		chart.ShowChart("chartumurmd", string(umurjson)),
+		chartsxs,
+		chartsmd,
+		chartslg,
 	)

 	return utils.View(c, content)
--- a/services/corporate/mcudetail/tabkelainanlab.services.go
+++ b/services/corporate/mcudetail/tabkelainanlab.services.go
@@ -246,7 +246,7 @@ func (tkl *TabKelainanLabServices) GetDataPresentaseKelainanLab(mcuID string) (m
 	defer logger.Sync()
 	logger.Info("resp data", zap.Any("data", data))

-	title := ""
+	title := "Data Presentase Kelainan Lab"
 	chartData := models.BarDataset{
 		Source: [][]interface{}{
 			{"score", "amount", "product", "percentage"},
--- a/services/corporate/mcudetail/tabkelainannonlab.services.go
+++ b/services/corporate/mcudetail/tabkelainannonlab.services.go
@@ -64,7 +64,7 @@ func (tknl *TabKelainanNonLabServices) GetBarChartConf(title string, data models
 				X string "json:\"x\""
 				Y string "json:\"y\""
 			}{
-				X: "score",
+				X: "amount",
 				Y: "product",
 			},
 		},
@@ -243,7 +243,7 @@ func (tknl *TabKelainanNonLabServices) GetDataKelNonLab(mcuID string) (models.Ba
 	defer logger.Sync()
 	logger.Info("resp data", zap.Any("data", data))

-	title := ""
+	title := "Data Presentase Kelainan Non Lab"
 	chartData := models.BarDataset{
 		Source: [][]interface{}{
 			{"score", "amount", "product", "percentage"},
--- a/views/corporate/mcu/mcutab/tabkelainanfisik.templ
+++ b/views/corporate/mcu/mcutab/tabkelainanfisik.templ
@@ -1,12 +1,9 @@
 package corporate_mcudetail

 templ Tabkelainanfisik(
-    chartbmixs templ.Component,
-    chartbmimd templ.Component,
-    chartbmilg templ.Component,
-    charthprxs templ.Component,
-    charthprmd templ.Component,
-    charthprlg templ.Component,
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []templ.Component,    
 ) {
    <div class="container-fluid">
        <div class="d-flex justify-content-center py-10">
@@ -15,29 +12,34 @@ templ Tabkelainanfisik(

        // xs
        <div class="d-xs-block d-sm-block d-md-none">
-            <div class="d-flex justify-content-center mb-8">
-                @chartbmixs
-            </div>
-            <div class="d-flex justify-content-center mb-8">
-                @charthprxs
+            <div 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="d-flex justify-content-center mb-8">
-                @chartbmimd
-            </div>
-            <div class="d-flex justify-content-center mb-8">
-                @charthprmd
+            <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="d-flex justify-content-center mb-8">
-                @chartbmilg
-                @charthprlg
+            <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
@@ -11,12 +11,9 @@ import "io"
 import "bytes"

 func Tabkelainanfisik(
-	chartbmixs templ.Component,
-	chartbmimd templ.Component,
-	chartbmilg templ.Component,
-	charthprxs templ.Component,
-	charthprmd templ.Component,
-	charthprlg 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)
@@ -30,49 +27,59 @@ func Tabkelainanfisik(
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Presentase Kelainan Fisik</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"d-flex justify-content-center mb-8\">")
+		_, 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
 		}
-		templ_7745c5c3_Err = chartbmixs.Render(ctx, templ_7745c5c3_Buffer)
+		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
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex justify-content-center mb-8\">")
+		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
 		}
-		templ_7745c5c3_Err = charthprxs.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"d-flex justify-content-center mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartbmimd.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex justify-content-center mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = charthprmd.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"d-flex justify-content-center mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartbmilg.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = charthprlg.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
+		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 {
--- a/views/corporate/mcu/mcutab/tabkelainanglobal.templ
+++ b/views/corporate/mcu/mcutab/tabkelainanglobal.templ
@@ -1,12 +1,9 @@
 package corporate_mcudetail

 templ TabKelainanGlobal(
-    chartmcuxs templ.Component,
-    chartfisikxs templ.Component,
-    chartmcumd templ.Component,
-    chartfisikmd templ.Component,
-    chartmculg templ.Component,
-    chartfisiklg templ.Component,
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []templ.Component,
 ) {
    <div class="container-fluid">
        <div class="d-flex justify-content-center py-10">
@@ -15,31 +12,34 @@ templ TabKelainanGlobal(
        
        // xs
        <div class="d-xs-block d-sm-block d-md-none">
-            <div class="mb-8">
-                @chartmcuxs
-            </div>
-            <div class="mb-8">
-                @chartfisikxs
+            <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="mb-8">
-                @chartmcumd
-            </div>
-            <div class="mb-8">
-                @chartfisikmd
+            <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="mb-8">
-                @chartmculg
-            </div>
-            <div class="mb-8">
-                @chartfisiklg
+            <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
@@ -11,12 +11,9 @@ import "io"
 import "bytes"

 func TabKelainanGlobal(
-	chartmcuxs templ.Component,
-	chartfisikxs templ.Component,
-	chartmcumd templ.Component,
-	chartfisikmd templ.Component,
-	chartmculg templ.Component,
-	chartfisiklg 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)
@@ -30,53 +27,59 @@ func TabKelainanGlobal(
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kelainan Global</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"mb-8\">")
+		_, 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
 		}
-		templ_7745c5c3_Err = chartmcuxs.Render(ctx, templ_7745c5c3_Buffer)
+		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
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
+		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
 		}
-		templ_7745c5c3_Err = chartfisikxs.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartmcumd.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartfisikmd.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-none d-lg-block\"><div class=\"mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartmculg.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartfisiklg.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
+		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 {
--- a/views/corporate/mcu/mcutab/tabkelainanlab.templ
+++ b/views/corporate/mcu/mcutab/tabkelainanlab.templ
@@ -1,12 +1,10 @@
 package corporate_mcudetail

 templ TabKelainanLab(
-    chartpresentase templ.Component,
-    charthematologi templ.Component,
-    charturinalisa templ.Component,
-    chartganghati templ.Component,
-    chartmetalemak templ.Component,
-    chartglukosa templ.Component,
+    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">
@@ -15,29 +13,37 @@ templ TabKelainanLab(
        
        // 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="mb-8">
-                @chartpresentase
-            </div>
-            <div class="row mb-8">
-                @charthematologi
-                @charturinalisa
-            </div>
-            <div class="row mb-8">
-                @chartganghati
-                @chartmetalemak
-            </div>
-            <div class="row mb-8">
-                @chartglukosa
+            <div 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
@@ -11,12 +11,10 @@ import "io"
 import "bytes"

 func TabKelainanLab(
-	chartpresentase templ.Component,
-	charthematologi templ.Component,
-	charturinalisa templ.Component,
-	chartganghati templ.Component,
-	chartmetalemak templ.Component,
-	chartglukosa templ.Component,
+	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)
@@ -30,45 +28,67 @@ func TabKelainanLab(
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kelainan Lab</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"></div><div class=\"d-none d-md-block d-lg-none\"></div><div class=\"d-none d-lg-block\"><div class=\"mb-8\">")
+		_, 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
 		}
-		templ_7745c5c3_Err = chartpresentase.Render(ctx, templ_7745c5c3_Buffer)
+		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
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row mb-8\">")
+		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 = charthematologi.Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = ChartCard(chartpresentaselg).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = charturinalisa.Render(ctx, templ_7745c5c3_Buffer)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartganghati.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartmetalemak.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"row mb-8\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chartglukosa.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
+		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 {
--- a/views/corporate/mcu/mcutab/tabkelainannonlab.templ
+++ b/views/corporate/mcu/mcutab/tabkelainannonlab.templ
@@ -1,8 +1,11 @@
 package corporate_mcudetail

 templ TabKelainanNonLab(
-    chartpresentase templ.Component,
-    chartthorax templ.Component,
+    // 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">
@@ -11,21 +14,48 @@ templ TabKelainanNonLab(
        
        // 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="mb-8">
-                @chartpresentase
-            </div>
-            <div class="mb-8">
-                @chartthorax
+            <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
@@ -11,8 +11,11 @@ import "io"
 import "bytes"

 func TabKelainanNonLab(
-	chartpresentase templ.Component,
-	chartthorax templ.Component,
+	// 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)
@@ -26,21 +29,59 @@ func TabKelainanNonLab(
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kelainan Non Lab</h2></div><div class=\"d-xs-block d-sm-block d-md-none\"></div><div class=\"d-none d-md-block d-lg-none\"></div><div class=\"d-none d-lg-block\"><div class=\"mb-8\">")
+		_, 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
 		}
-		templ_7745c5c3_Err = chartpresentase.Render(ctx, templ_7745c5c3_Buffer)
+		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
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mb-8\">")
+		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
 		}
-		templ_7745c5c3_Err = chartthorax.Render(ctx, templ_7745c5c3_Buffer)
-		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 {
--- a/views/corporate/mcu/mcutab/tabkepesertaan.templ
+++ b/views/corporate/mcu/mcutab/tabkepesertaan.templ
@@ -1,15 +1,9 @@
 package corporate_mcudetail

 templ TabKepesertaan(
-    chartalpha templ.Component,
-    chartbeta templ.Component,
-    chartdelta templ.Component,
-    chartalphaxs templ.Component,
-    chartbetaxs templ.Component,
-    chartdeltaxs templ.Component,
-    chartalphamd templ.Component,
-    chartbetamd templ.Component,
-    chartdeltamd templ.Component,
+    chartsxs []templ.Component,
+    chartsmd []templ.Component,
+    chartslg []templ.Component,
 ) {
    <div class="container-fluid">
        <div class="d-flex justify-content-center py-10">
@@ -18,57 +12,45 @@ templ TabKepesertaan(

        // xs
        <div class="d-xs-block d-sm-block d-md-none">
-            <div class="d-flex justify-content-center mb-8">
-                <div style="width: 400px;">
-                    @chartalphaxs
-                </div>
-            </div>
-            <div class="d-flex justify-content-center mb-8">
-                <div style="width: 400px;">
-                    @chartbetaxs
-                </div>
-            </div>
-            <div class="d-flex justify-content-center mb-8">
-                <div style="width: 400px;">
-                    @chartdeltaxs
-                </div>
+            <div 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="d-flex justify-content-center mb-8">
-                <div style="width: 500px;">
-                    @chartalphamd
-                </div>
-            </div>
-            <div class="d-flex justify-content-center mb-8">
-                <div style="width: 500px;">
-                    @chartbetamd
-                </div>
-            </div>
-            <div class="d-flex justify-content-center mb-8">
-                <div style="width: 500px;">
-                    @chartdeltamd
-                </div>
+            <div 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="d-flex justify-content-center mb-8">
-                <div style="width: 600px;">
-                    @chartalpha
-                </div>
-                <div style="width: 600px;">
-                    @chartbeta
-                </div>
-            </div>
-            <div class="d-flex justify-content-center mb-8">
-                <div style="width: 600px;">
-                    @chartdelta
-                </div>
+            <div 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
@@ -11,15 +11,9 @@ import "io"
 import "bytes"

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