kelainan global chart

2024-04-30 17:16:21 +07:00
17 changed files with 960 additions and 1355 deletions
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
@@ -4000,19 +4000,6 @@ a.text-white:focus {
  box-shadow: 0px 9px 16px 0px rgba(var(--dangerrgb), var(--opacity03)) !important;
 }

-/* ###  NAV*/
-.nav-tabs .nav-link.active,
-.nav-tabs .nav-item.show .nav-link {
-  color: var(--primary) !important;
-  background-color: #ffffff;
-  border-color: #e4e6ef #e4e6ef #ffffff;
-}
-.nav-pills .nav-link.active,
-.nav-pills .show > .nav-link {
-  color: #ffffff;
-  background-color: var(--primary) !important;
-}
-/* ### BUTTON HOVER TEXT */
 /* ## PRIMARY */
 .btn.btn-hover-text-primary:not(:disabled):not(.disabled):active:not(.btn-text),
 .btn.btn-hover-text-primary:not(:disabled):not(.disabled).active,
@@ -4057,7 +4044,63 @@ a.text-white:focus {
 .show .btn.btn-hover-text-danger.btn-dropdown {
  color: var(--danger) !important;
 }
+/* ###  NAV & BREADCRUMB*/

+.breadcrumb {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  padding: 0px 0px !important;
+  padding-left: 0 !important;
+  margin-bottom: 1rem;
+  list-style: none;
+  background-color: var(--white) !important;
+  border-radius: 0.42rem;
+}
+
+.breadcrumb-item a {
+  color: var(--text-black) !important;
+  font-family: Poppins !important;
+  font-size: 13px !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 21px !important;
+}
+
+.breadcrumb-item.active {
+  color: var(--text-disabled) !important;
+  font-family: Poppins !important;
+  font-size: 13px !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 21px !important;
+}
+.nav-tabs {
+  border-bottom: 0px solid #000000 !important;
+}
+.nav-link {
+  color: var(--text-grey) !important;
+  font-family: Public Sans !important;
+  font-size: 14px !important;
+  font-style: normal !important;
+  font-weight: 600 !important;
+  line-height: 22px !important;
+  text-align: center !important;
+}
+
+.nav-link.active {
+  color: var(--text-black) !important; /* Warna teks untuk tab yang aktif */
+  border-bottom: 2px solid var(--primary) !important; /* Garis bawah untuk tab yang aktif */
+  font-family: Public Sans !important;
+  font-size: 14px !important;
+  font-style: normal !important;
+  font-weight: 600 !important;
+  line-height: 22px !important;
+  text-align: center !important;
+}
+/* ### BUTTON HOVER TEXT */
 /* ###  */
 /* ## PRIMARY */
 /* ## SECONDARY */
--- a/assets/mcu/kelainan-global.html
+++ b/assets/mcu/kelainan-global.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<!--
+Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: https://1.envato.market/EA4JP
+Renew Support: https://1.envato.market/EA4JP
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en">
+  <!--begin::Head-->
+
+  <head>
+    <base href="../" />
+    <meta charset="utf-8" />
+    <title>KELAINAN GLOBAL | MCU004</title>
+    <meta name="description" content="Login page example" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!--begin::Fonts-->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+    />
+    <!--end::Fonts-->
+
+    <!--begin::Page Custom Styles(used by this page)-->
+    <link
+      href="assets/css/pages/login/login-1.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Page Custom Styles-->
+
+    <!--begin::Global Theme Styles(used by all pages)-->
+    <link
+      href="assets/plugins/global/plugins.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/plugins/custom/prismjs/prismjs.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
+    <!--end::Global Theme Styles-->
+
+    <!--begin::Layout Themes(used by all pages)-->
+
+    <link
+      href="assets/css/themes/layout/header/base/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/header/menu/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/brand/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/aside/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Layout Themes-->
+
+    <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
+    <style>
+      #mcu-004 {
+        height: 50%;
+        width: auto;
+      }
+
+      #mcu-005 {
+        height: 40%;
+        width: "100%";
+      }
+    </style>
+  </head>
+  <!--end::Head-->
+
+  <!--begin::Body-->
+
+  <body
+    id="kt_body"
+    class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
+  >
+    <!--begin::Main-->
+    <div class="d-flex flex-column flex-root bg-white">
+      <!-- begin::Navbar -->
+      <div class="d-flex justify-content-center">
+        <h3 class="mb-3">Data Persentase Kelainan Global</h3>
+      </div>
+
+      <div id="mcu-004" class="mt-5"></div>
+      <div id="mcu-005"></div>
+      <!-- end::Navbar -->
+    </div>
+    <!--end::Main-->
+    <script>
+      var HOST_URL =
+        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
+    </script>
+    <!--begin::Global Config(global config for global JS scripts)-->
+    <script>
+      var KTAppSettings = {
+        breakpoints: {
+          sm: 576,
+          md: 768,
+          lg: 992,
+          xl: 1200,
+          xxl: 1400,
+        },
+        colors: {
+          theme: {
+            base: {
+              white: "#ffffff",
+              primary: "#3699FF",
+              secondary: "#E5EAEE",
+              success: "#1BC5BD",
+              info: "#8950FC",
+              warning: "#FFA800",
+              danger: "#F64E60",
+              light: "#E4E6EF",
+              dark: "#181C32",
+            },
+            light: {
+              white: "#ffffff",
+              primary: "#E1F0FF",
+              secondary: "#EBEDF3",
+              success: "#C9F7F5",
+              info: "#EEE5FF",
+              warning: "#FFF4DE",
+              danger: "#FFE2E5",
+              light: "#F3F6F9",
+              dark: "#D6D6E0",
+            },
+            inverse: {
+              white: "#ffffff",
+              primary: "#ffffff",
+              secondary: "#3F4254",
+              success: "#ffffff",
+              info: "#ffffff",
+              warning: "#ffffff",
+              danger: "#ffffff",
+              light: "#464E5F",
+              dark: "#ffffff",
+            },
+          },
+          gray: {
+            "gray-100": "#F3F6F9",
+            "gray-200": "#EBEDF3",
+            "gray-300": "#E4E6EF",
+            "gray-400": "#D1D3E0",
+            "gray-500": "#B5B5C3",
+            "gray-600": "#7E8299",
+            "gray-700": "#5E6278",
+            "gray-800": "#3F4254",
+            "gray-900": "#181C32",
+          },
+        },
+        "font-family": "Poppins",
+      };
+    </script>
+    <!--end::Global Config-->
+    <!--begin::Global Theme Bundle(used by all pages)-->
+    <script src="assets/plugins/global/plugins.bundle.js"></script>
+    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+    <script src="assets/js/scripts.bundle.js"></script>
+    <!--end::Global Theme Bundle-->
+
+    <!--begin::Page Vendors(used by this page)-->
+    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
+    <!--end::Page Vendors-->
+
+    <!--begin::Page Scripts(used by this page)-->
+    <script src="assets/js/pages/widgets.js"></script>
+    <!--end::Page Scripts-->
+    <!-- echartjs.min.js -->
+    <script src="assets/js/echarts-js/echart.min.js"></script>
+    <!-- SCRIPT -->
+    <script type="text/javascript">
+      // Initialize the echarts instance based on the prepared dom
+      var chartMCU004 = echarts.init(document.getElementById("mcu-004"));
+      var optMCU004 = {
+        title: {
+          text: "Kelainan MCU",
+          //   subtext: 'Living Expenses in Shenzhen'
+        },
+        dataset: {
+          source: [
+            ["score", "amount", "product", "percentage"],
+            [200, 447, "Body Mass Index"],
+            [150, 314, "Pemeriksaan Mata"],
+            [125, 314, "Fungsi Lemak"],
+            [100, 254, "Autospirometri"],
+            [90, 200, "Hematologi"],
+            [80, 180, "ECG"],
+            [75, 160, "Hiperuricemia"],
+            [70, 125, "Tekanan Darah"],
+            [60, 118, "Urine Lengkap"],
+            [50, 87, "Fungsi Hati"],
+          ],
+        },
+        grid: {
+          containLabel: true,
+        },
+        xAxis: {
+          name: "amount",
+        },
+        yAxis: {
+          type: "category",
+        },
+        visualMap: {
+          orient: "horizontal",
+          left: "center",
+          min: 10,
+          max: 100,
+          show: false,
+
+          // text: ['High Score', 'Low Score'],
+          // Map the score column to color
+          dimension: 0,
+          inRange: {
+            color: ["#42aaf5", "#00eaf2", "#035bff"],
+          },
+        },
+        series: [
+          {
+            label: {
+              position: "right",
+              show: true,
+              formatter: "{@[3]} %",
+            },
+            type: "bar",
+            encode: {
+              // Map the "amount" column to X axis.
+              x: "amount",
+              // Map the "product" column to Y axis
+              y: "product",
+            },
+          },
+        ],
+      };
+
+      window.addEventListener("resize", function () {
+        chartMCU004.resize();
+      });
+
+      // Display the chart using the configuration items and data just specified.
+      chartMCU004.setOption(optMCU004);
+
+      //MCU005
+      // Initialize the echarts instance based on the prepared dom
+      var chartMCU005 = echarts.init(document.getElementById("mcu-005"));
+      var optMCU005 = {
+        title: {
+          text: "Kelainan Fisik",
+          //   subtext: 'Living Expenses in Shenzhen'
+        },
+        dataset: {
+          source: [
+            ["score", "amount", "product", "percentage"],
+            [200, 400, "Obesitas Stage 1"],
+            [150, 300, "Pre Hipertensi"],
+            [133, 250, "Kelainan Refraksi"],
+            [125, 180, "Overweight"],
+            [100, 125, "Obesitas Stage 2"],
+            [80, 100, "Hipertensi grade 1"],
+            [70, 80, "Kel. Refrakti terkoreksi"],
+            [60, 70, "Kel. Refrakti tidak terkoreksi"],
+            [55, 55, "Hipertensi grade 2"],
+          ],
+        },
+        grid: {
+          containLabel: true,
+        },
+        xAxis: {
+          name: "amount",
+        },
+        yAxis: {
+          type: "category",
+        },
+        visualMap: {
+          orient: "horizontal",
+          left: "center",
+          min: 10,
+          max: 100,
+          show: false,
+          // text: ['High Score', 'Low Score'],
+          // Map the score column to color
+          dimension: 0,
+          inRange: {
+            color: ["#42aaf5", "#00eaf2", "#035bff"],
+          },
+        },
+        series: [
+          {
+            label: {
+              position: "right",
+              show: true,
+              formatter: "{@[3]} %",
+            },
+            type: "bar",
+            encode: {
+              // Map the "amount" column to X axis.
+              x: "amount",
+              // Map the "product" column to Y axis
+              y: "product",
+            },
+          },
+        ],
+      };
+
+      window.addEventListener("resize", function () {
+        chartMCU005.resize();
+      });
+
+      // Display the chart using the configuration items and data just specified.
+      chartMCU005.setOption(optMCU005);
+    </script>
+    <!-- SCRIPT -->
+  </body>
+  <!--end::Body-->
+</html>
--- a/assets/mcu/kelainan-global.php
+++ b/assets/mcu/kelainan-global.php
@@ -1,301 +0,0 @@
-<!DOCTYPE html>
-<!--
-Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
-Author: KeenThemes
-Website: http://www.keenthemes.com/
-Contact: support@keenthemes.com
-Follow: www.twitter.com/keenthemes
-Dribbble: www.dribbble.com/keenthemes
-Like: www.facebook.com/keenthemes
-Purchase: https://1.envato.market/EA4JP
-Renew Support: https://1.envato.market/EA4JP
-License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
-<html lang="en">
-<!--begin::Head-->
-
-<head>
-    <base href="../" />
-    <meta charset="utf-8" />
-    <title>KELAINAN GLOBAL | MCU004</title>
-    <meta name="description" content="Login page example" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-
-    <!--begin::Fonts-->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
-    <!--end::Fonts-->
-
-    <!--begin::Page Custom Styles(used by this page)-->
-    <link href="assets/css/pages/login/login-1.css" rel="stylesheet" type="text/css" />
-    <!--end::Page Custom Styles-->
-
-    <!--begin::Global Theme Styles(used by all pages)-->
-    <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
-    <link href="assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
-    <!--end::Global Theme Styles-->
-
-    <!--begin::Layout Themes(used by all pages)-->
-
-    <link href="assets/css/themes/layout/header/base/light.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/themes/layout/header/menu/light.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/themes/layout/brand/dark.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/themes/layout/aside/dark.css" rel="stylesheet" type="text/css" />
-    <!--end::Layout Themes-->
-
-    <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
-    <style>
-        #mcu-004 {
-            height: 100vh;
-            /* overflow-x: scroll; */
-            width: "100%";
-        }
-
-        #mcu-005 {
-            height: 100vh;
-            /* overflow-x: scroll; */
-            width: "100%";
-        }
-    </style>
-</head>
-<!--end::Head-->
-
-<!--begin::Body-->
-
-<body id="kt_body" class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading">
-    <!--begin::Main-->
-    <div class="d-flex flex-column flex-root bg-white">
-        <!-- begin::Navbar -->
-        <div class="d-flex justify-content-center ">
-            <h3 class="mb-3">Data Persentase Kelainan Global</h3>
-        </div>
-
-        <div id="mcu-004" class="mt-5">
-        </div>
-        <div id="mcu-005">
-        </div>
-        <!-- end::Navbar -->
-    </div>
-    <!--end::Main-->
-    <script>
-        var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
-    </script>
-    <!--begin::Global Config(global config for global JS scripts)-->
-    <script>
-        var KTAppSettings = {
-            "breakpoints": {
-                "sm": 576,
-                "md": 768,
-                "lg": 992,
-                "xl": 1200,
-                "xxl": 1400
-            },
-            "colors": {
-                "theme": {
-                    "base": {
-                        "white": "#ffffff",
-                        "primary": "#3699FF",
-                        "secondary": "#E5EAEE",
-                        "success": "#1BC5BD",
-                        "info": "#8950FC",
-                        "warning": "#FFA800",
-                        "danger": "#F64E60",
-                        "light": "#E4E6EF",
-                        "dark": "#181C32"
-                    },
-                    "light": {
-                        "white": "#ffffff",
-                        "primary": "#E1F0FF",
-                        "secondary": "#EBEDF3",
-                        "success": "#C9F7F5",
-                        "info": "#EEE5FF",
-                        "warning": "#FFF4DE",
-                        "danger": "#FFE2E5",
-                        "light": "#F3F6F9",
-                        "dark": "#D6D6E0"
-                    },
-                    "inverse": {
-                        "white": "#ffffff",
-                        "primary": "#ffffff",
-                        "secondary": "#3F4254",
-                        "success": "#ffffff",
-                        "info": "#ffffff",
-                        "warning": "#ffffff",
-                        "danger": "#ffffff",
-                        "light": "#464E5F",
-                        "dark": "#ffffff"
-                    }
-                },
-                "gray": {
-                    "gray-100": "#F3F6F9",
-                    "gray-200": "#EBEDF3",
-                    "gray-300": "#E4E6EF",
-                    "gray-400": "#D1D3E0",
-                    "gray-500": "#B5B5C3",
-                    "gray-600": "#7E8299",
-                    "gray-700": "#5E6278",
-                    "gray-800": "#3F4254",
-                    "gray-900": "#181C32"
-                }
-            },
-            "font-family": "Poppins"
-        };
-    </script>
-    <!--end::Global Config-->
-    <!--begin::Global Theme Bundle(used by all pages)-->
-    <script src="assets/plugins/global/plugins.bundle.js"></script>
-    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
-    <script src="assets/js/scripts.bundle.js"></script>
-    <!--end::Global Theme Bundle-->
-
-    <!--begin::Page Vendors(used by this page)-->
-    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
-    <!--end::Page Vendors-->
-
-    <!--begin::Page Scripts(used by this page)-->
-    <script src="assets/js/pages/widgets.js"></script>
-    <!--end::Page Scripts-->
-    <!-- echartjs.min.js -->
-    <script src="assets/js/echarts-js/echart.min.js"></script>
-    <!-- SCRIPT -->
-    <script type="text/javascript">
-        // Initialize the echarts instance based on the prepared dom
-        var chartMCU004 = echarts.init(document.getElementById('mcu-004'));
-        var optMCU004 = {
-            title: {
-                text: 'Kelainan MCU',
-                //   subtext: 'Living Expenses in Shenzhen'
-            },
-            dataset: {
-                source: [
-                    ['score', 'amount', 'product', 'percentage'],
-                    [200, 447, 'Body Mass Index'],
-                    [150, 314, 'Pemeriksaan Mata'],
-                    [125, 314, 'Fungsi Lemak'],
-                    [100, 254, 'Autospirometri'],
-                    [90, 200, 'Hematologi'],
-                    [80, 180, 'ECG'],
-                    [75, 160, 'Hiperuricemia'],
-                    [70, 125, 'Tekanan Darah'],
-                    [60, 118, 'Urine Lengkap'],
-                    [50, 87, 'Fungsi Hati']
-                ]
-            },
-            grid: {
-                containLabel: true
-            },
-            xAxis: {
-                name: 'amount'
-            },
-            yAxis: {
-                type: 'category'
-            },
-            visualMap: {
-                orient: 'horizontal',
-                left: 'center',
-                min: 10,
-                max: 100,
-                show: false,
-
-                // text: ['High Score', 'Low Score'],
-                // Map the score column to color
-                dimension: 0,
-                inRange: {
-                    color: ['#42aaf5', '#00eaf2', '#035bff']
-                }
-            },
-            series: [{
-                label: {
-                    position: 'right',
-                    show: true,
-                    formatter: "{@[3]} %"
-                },
-                type: 'bar',
-                encode: {
-                    // Map the "amount" column to X axis.
-                    x: 'amount',
-                    // Map the "product" column to Y axis
-                    y: 'product'
-                }
-            }]
-        };
-
-        window.addEventListener('resize', function() {
-            chartMCU004.resize();
-        });
-
-        // Display the chart using the configuration items and data just specified.
-        chartMCU004.setOption(optMCU004);
-
-        //MCU005
-        // Initialize the echarts instance based on the prepared dom
-        var chartMCU005 = echarts.init(document.getElementById('mcu-005'));
-        var optMCU005 = {
-            title: {
-                text: 'Kelainan Fisik',
-                //   subtext: 'Living Expenses in Shenzhen'
-            },
-            dataset: {
-                source: [
-                    ['score', 'amount', 'product', 'percentage'],
-                    [200, 400, 'Obesitas Stage 1'],
-                    [150, 300, 'Pre Hipertensi'],
-                    [133, 250, 'Kelainan Refraksi'],
-                    [125, 180, 'Overweight'],
-                    [100, 125, 'Obesitas Stage 2'],
-                    [80, 100, 'Hipertensi grade 1'],
-                    [70, 80, 'Kel. Refrakti terkoreksi'],
-                    [60, 70, 'Kel. Refrakti tidak terkoreksi'],
-                    [55, 55, 'Hipertensi grade 2']
-                ]
-            },
-            grid: {
-                containLabel: true
-            },
-            xAxis: {
-                name: 'amount'
-            },
-            yAxis: {
-                type: 'category'
-            },
-            visualMap: {
-                orient: 'horizontal',
-                left: 'center',
-                min: 10,
-                max: 100,
-                show: false,
-                // text: ['High Score', 'Low Score'],
-                // Map the score column to color
-                dimension: 0,
-                inRange: {
-                    color: ['#42aaf5', '#00eaf2', '#035bff']
-                }
-            },
-            series: [{
-                label: {
-                    position: 'right',
-                    show: true,
-                    formatter: "{@[3]} %"
-                },
-                type: 'bar',
-                encode: {
-                    // Map the "amount" column to X axis.
-                    x: 'amount',
-                    // Map the "product" column to Y axis
-                    y: 'product'
-                }
-            }]
-        };;
-
-        window.addEventListener('resize', function() {
-            chartMCU005.resize();
-        });
-
-        // Display the chart using the configuration items and data just specified.
-        chartMCU005.setOption(optMCU005);
-    </script>
-    <!-- SCRIPT -->
-</body>
-<!--end::Body-->
-
-</html>
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -42,14 +42,6 @@ func main() {

 	handlers.SetupRoutes(app, h)

-	LStore, err := db.NewLoginStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	l := services.NewServicesLogin(services.Login{}, LStore)
-	lh := handlers.NewLoginHandler(l)
-	handlers.SetupRoutesLogin(app, lh)
-
 	xStore, err := db.NewXsampleStore(dbName)
 	if err != nil {
 		app.Logger.Fatalf("failed to create store: %s", err)
@@ -70,8 +62,12 @@ func main() {
 	if err != nil {
 		app.Logger.Fatalf("failed to create store: %s", err)
 	}
+	bchart, err := db.NewBarChartStore(dbName)
+	if err != nil {
+		app.Logger.Fatalf("failed to create store: %s", err)
+	}

-	lpchart := services.NewServicesPiechart(services.Piechart{}, LpchartStore)
+	lpchart := services.NewServicesPiechart(services.Piechart{}, services.Barchart{}, LpchartStore, bchart)
 	lphsx := handlers.NewPiechartHandler(lpchart)
 	handlers.SetupRoutesPieChart(app, lphsx)

--- a/db/chart.store.go
+++ b/db/chart.store.go
@@ -9,6 +9,9 @@ import (
 type PieChartStore struct {
 	Db *sql.DB
 }
+type BarChartStore struct {
+	Db *sql.DB
+}

 func NewPieChartStore(dbName string) (PieChartStore, error) {
 	Db, err := getConnection(dbName)
@@ -24,3 +27,17 @@ func NewPieChartStore(dbName string) (PieChartStore, error) {
 		Db,
 	}, nil
 }
+func NewBarChartStore(dbName string) (BarChartStore, error) {
+	Db, err := getConnection(dbName)
+	if err != nil {
+		return BarChartStore{}, err
+	}
+
+	if err := createMigrations(dbName, Db); err != nil {
+		return BarChartStore{}, err
+	}
+
+	return BarChartStore{
+		Db,
+	}, nil
+}
--- a/db/login.store.go
+++ b/db/login.store.go
@@ -1,26 +0,0 @@
-package db
-
-import (
-	"database/sql"
-
-	_ "github.com/glebarez/go-sqlite"
-)
-
-type LoginStore struct {
-	Db *sql.DB
-}
-
-func NewLoginStore(dbName string) (LoginStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return LoginStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return LoginStore{}, err
-	}
-
-	return LoginStore{
-		Db,
-	}, nil
-}
--- a/handlers/chart.handlers.go
+++ b/handlers/chart.handlers.go
@@ -10,14 +10,16 @@ import (

 	"github.com/a-h/templ"
 	"github.com/emarifer/go-templ-project-structure/services"
-	mcupeserta "github.com/emarifer/go-templ-project-structure/views/mcu/peserta"
+	kelainanglobal "github.com/emarifer/go-templ-project-structure/views/mcu/kelainan_global"
 	"github.com/emarifer/go-templ-project-structure/views/piechart"
 	"github.com/emarifer/go-templ-project-structure/views/xsample"
+
 	"github.com/labstack/echo/v4"
 )

 type PiechartService interface {
 	GetPieChart(string, int) (string, services.Piechart, error)
+	GetBarChart(code string, id int) (string, services.Barchart, error)
 }

 func NewPiechartHandler(us PiechartService) *PiechartHandler {
@@ -35,7 +37,6 @@ func (uh *PiechartHandler) Hello(c echo.Context) error {
 	return uh.View(c, helo)
 }

-// example pie chart
 func (uh *PiechartHandler) ShowPieChart(c echo.Context) error {
 	// helo := piechart.MainPieChart("main_001")
 	var code = "mcu006"
@@ -61,73 +62,45 @@ func (uh *PiechartHandler) ShowPieChart(c echo.Context) error {
 	helo := piechart.ShowPieChart("Chart", piechart.MainPieChart(randomID, string(jsonData)), piechart.CssPieChart(), piechart.JsPieChart())
 	return uh.View(c, helo)
 }
-
-// mcu peserta
-func (uh *PiechartHandler) ShowMcuPeserta(c echo.Context) error {
-
-	// 1
-	var code001 = "mcu001"
-	title001, udata001, err001 := uh.PiechartService.GetPieChart(code001, 1)
-	if err001 != nil {
-		return err001
+func (uh *PiechartHandler) ShowBarChart(c echo.Context) error {
+	// helo := piechart.MainPieChart("main_001")
+	var code = "mcu004"
+	title, udata, err := uh.PiechartService.GetBarChart(code, 1)
+	if err != nil {
+		// fmt.Println(err)
+		return err
+	}
+	var code2 = "mcu005"
+	title2, udata2, err := uh.PiechartService.GetBarChart(code2, 1)
+	if err != nil {
+		// fmt.Println(err)
+		return err
 	}

-	jsonData001, err001 := json.MarshalIndent(udata001, "", "    ")
-	if err001 != nil {
-		fmt.Println("Error:", err001)
-		return err001
+	jsonData, err := json.MarshalIndent(udata, "", "    ")
+	if err != nil {
+		fmt.Println("Error:", err)
+		return err
+	}
+	jsonData2, err := json.MarshalIndent(udata2, "", "    ")
+	if err != nil {
+		fmt.Println("Error:", err)
+		return err
 	}

-	seed001 := title001 + time.Now().String()
-	hash001 := md5.Sum([]byte(seed001))
-	randomID001 := hex.EncodeToString(hash001[:])
-	randomID001 = strings.ReplaceAll(randomID001, "-", "")
+	// randomID := md5.Sum([]byte(title + time.Now().String()))
+	seed := title + time.Now().String()
+	hash := md5.Sum([]byte(seed))
+	randomID := hex.EncodeToString(hash[:])
+	randomID = strings.ReplaceAll(randomID, "-", "")

-	// 2
-	var code002 = "mcu002"
-	title002, udata002, err002 := uh.PiechartService.GetPieChart(code002, 1)
-	if err002 != nil {
-		return err002
-	}
-
-	jsonData002, err002 := json.MarshalIndent(udata002, "", "    ")
-	if err002 != nil {
-		fmt.Println("Error:", err002)
-		return err002
-	}
-
-	seed002 := title002 + time.Now().String()
-	hash002 := md5.Sum([]byte(seed002))
-	randomID002 := hex.EncodeToString(hash002[:])
-	randomID002 = strings.ReplaceAll(randomID002, "-", "")
-
-	// 3
-	var code003 = "mcu003"
-	title003, udata003, err003 := uh.PiechartService.GetPieChart(code003, 1)
-	if err003 != nil {
-		return err003
-	}
-
-	jsonData003, err003 := json.MarshalIndent(udata003, "", "    ")
-	if err003 != nil {
-		fmt.Println("Error:", err003)
-		return err003
-	}
-
-	seed003 := title003 + time.Now().String()
-	hash003 := md5.Sum([]byte(seed003))
-	randomID003 := hex.EncodeToString(hash003[:])
-	randomID003 = strings.ReplaceAll(randomID003, "-", "")
-
-	helo := mcupeserta.ShowMcuPeserta("Peserta", mcupeserta.MainMcuPeserta(
-		randomID001, string(jsonData001),
-		randomID002, string(jsonData002),
-		randomID003, string(jsonData003),
-	),
-		mcupeserta.CssMcuPeserta(),
-		mcupeserta.JsMcuPeserta(),
-	)
+	seed2 := title2 + time.Now().String()
+	hash2 := md5.Sum([]byte(seed2))
+	randomID2 := hex.EncodeToString(hash2[:])
+	randomID2 = strings.ReplaceAll(randomID2, "-", "")

+	// randomID := hex.EncodeToString(md5.Sum([]byte(title + time.Now().String())))
+	helo := kelainanglobal.ShowKelainanGlobal("Kelainan global", kelainanglobal.MainKelainanGlobal(randomID, string(jsonData), randomID2, string(jsonData2)), kelainanglobal.CssKelainanGlobal(), kelainanglobal.JsKelainanGlobal())
 	return uh.View(c, helo)
 }

--- a/handlers/login.handlers.go
+++ b/handlers/login.handlers.go
@@ -2,34 +2,19 @@ package handlers

 import (
 	"github.com/a-h/templ"
-	"github.com/emarifer/go-templ-project-structure/services"
 	"github.com/emarifer/go-templ-project-structure/views/login"

 	"github.com/labstack/echo/v4"
 )

-type LoginService interface {
-	GetLogin(Email string, Password string) (services.Login, error)
+func HandlerShowLoginCompany(c echo.Context) error {
+
+	// si := user.ShowIndex("| Home", user.Show(udata))
+	si := login.ShowLogin("Login ", login.DivLogin(), login.CssLogin(), login.JsLogin())
+
+	return ViewLoginCompany(c, si)
 }
-
-func NewLoginHandler(us LoginService) *LoginHandler {
-	return &LoginHandler{
-		LoginService: us,
-	}
-}
-
-type LoginHandler struct {
-	LoginService LoginService
-}
-
-func (lh *LoginHandler) HandlerShowLogin(c echo.Context) error {
-
-	si := login.ShowLogin("Login ", login.MainLogin(), login.CssLogin(), login.JsLogin())
-
-	return lh.ViewLogin(c, si)
-}
-
-func (uh *LoginHandler) ViewLogin(c echo.Context, cmp templ.Component) error {
+func ViewLoginCompany(c echo.Context, cmp templ.Component) error {
 	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)

 	return cmp.Render(c.Request().Context(), c.Response().Writer)
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -11,10 +11,6 @@ func SetupRoutes(app *echo.Echo, h *UserHandler) {
 }

 //PLAYGROUND TESTING
-func SetupRoutesLogin(app *echo.Echo, h *LoginHandler) {
-	l := app.Group("/login")
-	l.GET("/", h.HandlerShowLogin)
-}
 func SetupRoutesXsample(app *echo.Echo, h *XsampleHandler) {
 	xSample := app.Group("/xsample")
 	xSample.GET("/xsample01", h.Hello)
@@ -26,7 +22,7 @@ func SetupRoutesLandingPage(app *echo.Echo, h *LandingPageHandler) {
 func SetupRoutesPieChart(app *echo.Echo, h *PiechartHandler) {
 	Lp := app.Group("/pie_chart")
 	Lp.GET("/", h.ShowPieChart)
-	Lp.GET("/peserta", h.ShowMcuPeserta)
+	Lp.GET("/bar", h.ShowBarChart)
 }
 func SetupRoutesProject(app *echo.Echo) {

--- a/services/chart.services.go
+++ b/services/chart.services.go
@@ -6,10 +6,12 @@ import (
 	"github.com/emarifer/go-templ-project-structure/db"
 )

-func NewServicesPiechart(u Piechart, uStore db.PieChartStore) *ServicesPiechart {
+func NewServicesPiechart(u Piechart, b Barchart, uStore db.PieChartStore, bStore db.BarChartStore) *ServicesPiechart {

 	return &ServicesPiechart{
 		Piechart:      u,
+		Barchart:      b,
+		BarChartStore: bStore,
 		PieChartStore: uStore,
 	}
 }
@@ -106,9 +108,8 @@ type Piechart struct {
 	// CreatedAt   time.Time `json:"created_at,omitempty"`

 	Title struct {
-		Text    string `json:"text"`
-		SubText string `json:"subtext"`
-		Left    string `json:"left"`
+		Text string `json:"text"`
+		Left string `json:"left"`
 	} `json:"title"`
 	Tooltip struct {
 		Trigger string `json:"trigger"`
@@ -123,6 +124,8 @@ type Piechart struct {

 type ServicesPiechart struct {
 	Piechart      Piechart
+	Barchart      Barchart
+	BarChartStore db.BarChartStore
 	PieChartStore db.PieChartStore
 }

@@ -181,16 +184,14 @@ type ServicesPiechart struct {

 // Peserta MCU -- MCU001
 func GetPieChartMcu001(code string, id int) (string, Piechart, error) {
-	var title = "Peserta  MCU"
+	var title = "Status Index Masa Tubuh (BMI)"
 	option := Piechart{
 		Title: struct {
-			Text    string `json:"text"`
-			SubText string `json:"subtext"`
-			Left    string `json:"left"`
+			Text string `json:"text"`
+			Left string `json:"left"`
 		}{
-			Text:    title,
-			SubText: "Total Peserta 506",
-			Left:    "center",
+			Text: title,
+			Left: "center",
 		},
 		Tooltip: struct {
 			Trigger string `json:"trigger"`
@@ -205,11 +206,6 @@ func GetPieChartMcu001(code string, id int) (string, Piechart, error) {
 			Top:    "bottom",
 			Left:   "center",
 			Orient: "vertical",
-
-			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
-			// Top:    "bottom",
-			// Left:   "center",
-			// Orient: "horizontal",
 		},
 		Series: []Series{
 			{
@@ -260,179 +256,17 @@ func GetPieChartMcu001(code string, id int) (string, Piechart, error) {
 }

 // Kepersertaan MCU Berdasarkan Jenis Kelamin -- MCU002
-func GetPieChartMcu002(code string, id int) (string, Piechart, error) {
-	var title = "Kepesertaan  MCU"
-	option := Piechart{
-		Title: struct {
-			Text    string `json:"text"`
-			SubText string `json:"subtext"`
-			Left    string `json:"left"`
-		}{
-			Text:    title,
-			SubText: "Berdasarkan Jenis Kelamin",
-			Left:    "center",
-		},
-		Tooltip: struct {
-			Trigger string `json:"trigger"`
-		}{
-			Trigger: "item",
-		},
-		Legend: struct {
-			Top    string `json:"top"`
-			Left   string `json:"left"`
-			Orient string `json:"orient"`
-		}{
-			Top:    "bottom",
-			Left:   "center",
-			Orient: "vertical",
-
-			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
-			// Top:    "bottom",
-			// Left:   "center",
-			// Orient: "horizontal",
-		},
-		Series: []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: []SeriesData{
-					{Value: 143, Name: "Laki-laki : 143 Peserta"},
-					{Value: 114, Name: "Perempuan : 114 Peserta"},
-				},
-				Emphasis: struct {
-					ItemStyle struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					} `json:"itemStyle"`
-				}{
-					ItemStyle: struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					}{
-						ShadowBlur:    10,
-						ShadowOffsetX: 0,
-						ShadowColor:   "rgba(0, 0, 0, 0.5)",
-					},
-				},
-			},
-		},
-	}
-	return title, option, nil
-}
-
-// Peserta MCU berdasarkan umur
-func GetPieChartMcu003(code string, id int) (string, Piechart, error) {
-	var title = "Peserta MCU"
-	option := Piechart{
-		Title: struct {
-			Text    string `json:"text"`
-			SubText string `json:"subtext"`
-			Left    string `json:"left"`
-		}{
-			Text:    title,
-			SubText: "Berdasarkan Umur",
-			Left:    "center",
-		},
-		Tooltip: struct {
-			Trigger string `json:"trigger"`
-		}{
-			Trigger: "item",
-		},
-		Legend: struct {
-			Top    string `json:"top"`
-			Left   string `json:"left"`
-			Orient string `json:"orient"`
-		}{
-			Top:    "bottom",
-			Left:   "center",
-			Orient: "vertical",
-
-			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
-			// Top:    "bottom",
-			// Left:   "center",
-			// Orient: "horizontal",
-		},
-		Series: []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: []SeriesData{
-					{Value: 188, Name: "< 30 Tahun : 188 Peserta"},
-					{Value: 194, Name: "30 - < 40 Tahun : 194 Peserta"},
-					{Value: 123, Name: "40 - < 50 Tahun : 123 Peserta"},
-					{Value: 55, Name: "≥ 50 Tahun : 55 Peserta"},
-				},
-				Emphasis: struct {
-					ItemStyle struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					} `json:"itemStyle"`
-				}{
-					ItemStyle: struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					}{
-						ShadowBlur:    10,
-						ShadowOffsetX: 0,
-						ShadowColor:   "rgba(0, 0, 0, 0.5)",
-					},
-				},
-			},
-		},
-	}
-	return title, option, nil
-}

 // Status Index Masa Tubuh (BMI) -- MCU006
 func GetPieChartMcu006(code string, id int) (string, Piechart, error) {
 	var title = "Status Index Masa Tubuh (BMI)"
 	option := Piechart{
 		Title: struct {
-			Text    string `json:"text"`
-			SubText string `json:"subtext"`
-			Left    string `json:"left"`
+			Text string `json:"text"`
+			Left string `json:"left"`
 		}{
-			Text:    title,
-			SubText: "",
-			Left:    "center",
+			Text: title,
+			Left: "center",
 		},
 		Tooltip: struct {
 			Trigger string `json:"trigger"`
@@ -447,11 +281,6 @@ func GetPieChartMcu006(code string, id int) (string, Piechart, error) {
 			Top:    "bottom",
 			Left:   "center",
 			Orient: "vertical",
-
-			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
-			// Top:    "bottom",
-			// Left:   "center",
-			// Orient: "horizontal",
 		},
 		Series: []Series{
 			{
@@ -504,196 +333,141 @@ func GetPieChartMcu006(code string, id int) (string, Piechart, error) {
 	return title, option, nil
 }

-// Kriteria Hipertensi -- MCU007
-func GetPieChartMcu007(code string, id int) (string, Piechart, error) {
-	var title = "Kriteria Hipertensi"
-	option := Piechart{
-		Title: struct {
-			Text    string `json:"text"`
-			SubText string `json:"subtext"`
-			Left    string `json:"left"`
-		}{
-			Text:    title,
-			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"`
-		}{
-			Top:    "bottom",
-			Left:   "center",
-			Orient: "vertical",
-
-			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
-			// Top:    "bottom",
-			// Left:   "center",
-			// Orient: "horizontal",
-		},
-		Series: []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: []SeriesData{
-					{Value: 237, Name: "Normal : 237 Peserta"},
-					{Value: 215, Name: "Prehipertensi : 215 Peserta"},
-					{Value: 66, Name: "Hipertensi Grade I  : 66 Peserta"},
-					{Value: 33, Name: "Hipertensi Grade II : 33 Peserta"},
-				},
-				Emphasis: struct {
-					ItemStyle struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					} `json:"itemStyle"`
-				}{
-					ItemStyle: struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					}{
-						ShadowBlur:    10,
-						ShadowOffsetX: 0,
-						ShadowColor:   "rgba(0, 0, 0, 0.5)",
-					},
-				},
-			},
-		},
+// Kelainan MCU - MCU004
+func GetBarChartMcu004(code string, id int) (string, Barchart, error) {
+	title := "Kelainan MCU"
+	option := Barchart{}
+	option.Title = struct {
+		Text string "json:\"text\""
+	}{title}
+	option.Dataset = struct {
+		Source [][]interface{} "json:\"source\""
+	}{[][]interface{}{
+		{"score", "amount", "product", "percentage"},
+		{200, 447, "Body Mass Index"},
+		{150, 314, "Pemeriksaan Mata"},
+		{125, 314, "Fungsi Lemak"},
+		{100, 254, "Autospirometri"},
+		{90, 200, "Hematologi"},
+		{80, 180, "ECG"},
+		{75, 160, "Hiperuricemia"},
+		{70, 125, "Tekanan Darah"},
+		{60, 118, "Urine Lengkap"},
+		{50, 87, "Fungsi Hati"},
+	}}
+	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"}},
 	}

 	return title, option, nil
+
 }

-// Visus Jauh -- MCU008
-func GetPieChartMcu008(code string, id int) (string, Piechart, error) {
-	var title = "Visus Jauh"
-	option := Piechart{
-		Title: struct {
-			Text    string `json:"text"`
-			SubText string `json:"subtext"`
-			Left    string `json:"left"`
-		}{
-			Text:    title,
-			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"`
-		}{
-			Top:    "bottom",
-			Left:   "center",
-			Orient: "vertical",
-
-			// KALAU BERTABRAKAN DGN ATASNYA SETTING PAKE DIBAWAH INI
-			// Top:    "bottom",
-			// Left:   "center",
-			// Orient: "horizontal",
-		},
-		Series: []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: []SeriesData{
-					{Value: 237, Name: "Normal : 237 Peserta"},
-					{Value: 194, Name: "Kelainan Refraksi : 194 Peserta"},
-					{Value: 64, Name: "Kelainan Refraksi terkoreksi : 64 Peserta"},
-					{Value: 56, Name: "Kelainan Refraksi tidak terkoreksi : 56 Peserta"},
-				},
-				Emphasis: struct {
-					ItemStyle struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					} `json:"itemStyle"`
-				}{
-					ItemStyle: struct {
-						ShadowBlur    int    `json:"shadowBlur"`
-						ShadowOffsetX int    `json:"shadowOffsetX"`
-						ShadowColor   string `json:"shadowColor"`
-					}{
-						ShadowBlur:    10,
-						ShadowOffsetX: 0,
-						ShadowColor:   "rgba(0, 0, 0, 0.5)",
-					},
-				},
-			},
-		},
+// Kelainan MCU - MCU004
+func GetBarChartMcu005(code string, id int) (string, Barchart, error) {
+	title := "Kelainan Fisik"
+	option := Barchart{}
+	option.Title = struct {
+		Text string "json:\"text\""
+	}{title}
+	option.Dataset = struct {
+		Source [][]interface{} "json:\"source\""
+	}{[][]interface{}{
+		{"score", "amount", "product", "percentage"},
+		{200, 400, "Obesitas Stage 1"},
+		{150, 300, "Pre Hipertensi"},
+		{133, 250, "Kelainan Refraksi"},
+		{125, 180, "Overweight"},
+		{100, 125, "Obesitas Stage 2"},
+		{80, 100, "Hipertensi grade 1"},
+		{70, 80, "Kel. Refrakti terkoreksi"},
+		{60, 70, "Kel. Refrakti tidak terkoreksi"},
+		{55, 55, "Hipertensi grade 2"},
+	}}
+	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"}},
 	}

 	return title, option, nil
-}

+}
 func (su *ServicesPiechart) GetPieChart(code string, id int) (string, Piechart, error) {
 	if code == "mcu001" {
 		return GetPieChartMcu001(code, id)
 	}

-	if code == "mcu002" {
-		return GetPieChartMcu002(code, id)
-	}
-
-	if code == "mcu003" {
-		return GetPieChartMcu003(code, id)
-	}
-
 	if code == "mcu006" {
 		return GetPieChartMcu006(code, id)
 	}

-	if code == "mcu007" {
-		return GetPieChartMcu007(code, id)
-	}
-
-	if code == "mcu008" {
-		return GetPieChartMcu008(code, id)
-	}
-
 	return "", Piechart{}, fmt.Errorf("code " + code + " not found")
 }
+func (su *ServicesPiechart) GetBarChart(code string, id int) (string, Barchart, error) {
+
+	if code == "mcu004" {
+		return GetBarChartMcu004(code, id)
+	}
+	if code == "mcu005" {
+		return GetBarChartMcu005(code, id)
+	}
+
+	return "", Barchart{}, fmt.Errorf("code " + code + " not found")
+}
--- a/services/login.services.go
+++ b/services/login.services.go
@@ -1,59 +0,0 @@
-package services
-
-import (
-	"time"
-
-	"github.com/emarifer/go-templ-project-structure/db"
-)
-
-func NewServicesLogin(u Login, uStore db.LoginStore) *ServicesLogin {
-
-	return &ServicesLogin{
-		Login:      u,
-		LoginStore: uStore,
-	}
-}
-
-type Login struct {
-	ID        int       `json:"id"`
-	Loginname string    `json:"Loginname"`
-	Email     string    `json:"Email"`
-	Password  string    `json:"Password"`
-	CreatedAt time.Time `json:"created_at,omitempty"`
-}
-
-type ServicesLogin struct {
-	Login      Login
-	LoginStore db.LoginStore
-}
-
-func (su *ServicesLogin) GetLogin(Email string, Password string) (Login, error) {
-
-	query := `SELECT id, Loginname, Email, Password, created_at FROM Login
-		WHERE Email = ? AND Password = ?`
-
-	stmt, err := su.LoginStore.Db.Prepare(query)
-	if err != nil {
-		return Login{}, err
-	}
-
-	defer stmt.Close()
-
-	su.Login.Email = Email
-	su.Login.Password = Password
-	err = stmt.QueryRow(
-		su.Login.Email,
-		su.Login.Password,
-	).Scan(
-		&su.Login.ID,
-		&su.Login.Loginname,
-		&su.Login.Email,
-		&su.Login.Password,
-		&su.Login.CreatedAt,
-	)
-	if err != nil {
-		return Login{}, err
-	}
-
-	return su.Login, nil
-}
--- a/views/login/login.templ
+++ b/views/login/login.templ
@@ -4,14 +4,44 @@ import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 )

-templ MainLogin() {
+templ DivLogin() {
 	<div class="d-flex flex-column flex-root">
 		<div
 			class="login login-1 login-signin-on d-flex flex-column flex-lg-row flex-column-fluid bg-white"
 			id="kt_login"
 		>
 			<!--begin::Aside-->
-			@AsideLeft()
+			<div
+				class="login-aside d-flex flex-column flex-row-auto"
+				style="background-color: #3b4f9f"
+			>
+				<!--begin::Aside Top-->
+				<div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15 px-10">
+					<!--begin::Aside header-->
+					<div class="aside-title mb-5">
+						Empowering Your Workforce's Health
+					</div>
+					<!--end::Aside header-->
+					<!--begin::Aside title-->
+					<div class="aside-subtitle">
+						Discover peace of mind and prioritize your health with our
+						comprehensive medical check-up packages
+					</div>
+					<!--end::Aside title-->
+				</div>
+				<!--end::Aside Top-->
+				<!--begin::Aside Bottom-->
+				<div
+					class="d-flex bgi-no-repeat flex-row-fluid justify-content-center align-items-end"
+				>
+					<img
+						src="asset-corporate-portal/media/login-company-vector.png"
+						class="img-fluid"
+						style="height: 55vh; width: 55vh"
+					/>
+				</div>
+				<!--end::Aside Bottom-->
+			</div>
 			<!--begin::Aside-->
 			<!--begin::Content-->
 			<div
@@ -22,21 +52,254 @@ templ MainLogin() {
 					<!--begin::Signin-->
 					<div class="login-form login-signin">
 						<!--begin::Form-->
-						@FormSignin()
+						<form
+							class="form"
+							novalidate="novalidate"
+							id="kt_login_signin_form"
+						>
+							<!--begin::Title-->
+							<div class="d-flex justify-content-center mb-5">
+								<img
+									src="asset-corporate-portal/media/logo.png"
+									alt=""
+									style="height: 103px"
+								/>
+							</div>
+							<div class="pt-2">
+								<h3
+									class="d-flex justify-content-center title-company"
+									style="color: black"
+								>
+									Welcome to Corporate Portal
+								</h3>
+							</div>
+							<div class="pb-10 pt-0">
+								<h3 class="subtitle-company" style="color: #a7a8bb">
+									Sign in to access your account
+								</h3>
+							</div>
+							<!--begin::Title-->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<label class="font-size-h6 font-weight-bolder text-dark">Email</label>
+								<input
+									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
+									type="text"
+									name="username"
+									autocomplete="off"
+									placeholder="Enter your email"
+								/>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<div class="d-flex justify-content-between mt-n5">
+									<label
+										class="font-size-h6 font-weight-bolder text-dark pt-5"
+									>Password</label>
+								</div>
+								<div class="input-group">
+									<!-- form-control form-control-solid -->
+									<input
+										class="h-auto form-control form-control-solid py-7 px-6 rounded-lg rounded-right-0"
+										type="password"
+										name="password"
+										id="user-password"
+										autocomplete="off"
+										placeholder="Enter your password"
+									/>
+									<div class="input-group-append">
+										<span
+											class="input-group-text rounded-lg rounded-left-0"
+											style="border: 0"
+										>
+											<!-- far fa-eye-slash -->
+											<a class="btn" role="button" id="btn-show">
+												<i class="far fa-eye-slash" id="password-icon"></i>
+											</a>
+										</span>
+									</div>
+								</div>
+							</div>
+							<div class="d-flex justify-content-end">
+								<a
+									href="javascript:;"
+									class="font-size-h6 font-weight-bolder text-hover-primary mb-5"
+									id="kt_login_forgot"
+									style="color: #0c518c"
+								>
+									Forgot Password ?
+								</a>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Action-->
+							<div class="pb-lg-0 pb-5 pt-5">
+								<button
+									type="button"
+									id="kt_login_signin_submit"
+									style="background-color: #0c518c"
+									class="btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5"
+								>
+									Sign In
+								</button>
+							</div>
+							<!--end::Action-->
+						</form>
 						<!--end::Form-->
 					</div>
 					<!--end::Signin-->
 					<!--begin::Signup -->
 					<div class="login-form login-signup">
 						<!--begin::Form -->
-						@FormSignup()
+						<form
+							class="form"
+							novalidate="novalidate"
+							id="kt_login_signup_form"
+						>
+							<!--begin::Title -->
+							<div class="pb-13 pt-lg-0 pt-5">
+								<h3
+									class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
+								>
+									Sign Up
+								</h3>
+								<p class="text-muted font-weight-bold font-size-h4">
+									Enter your details to create your account
+								</p>
+							</div>
+							<!--end::Title -->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<input
+									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+									type="text"
+									placeholder="Fullname"
+									name="fullname"
+									autocomplete="off"
+								/>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<input
+									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+									type="email"
+									placeholder="Email"
+									name="email"
+									autocomplete="off"
+								/>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<input
+									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+									type="password"
+									placeholder="Password"
+									name="password"
+									autocomplete="off"
+								/>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<input
+									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+									type="password"
+									placeholder="Confirm password"
+									name="cpassword"
+									autocomplete="off"
+								/>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<label class="checkbox mb-0">
+									<input type="checkbox" name="agree"/>I Agree the
+									<a href="#">terms and conditions</a>.
+									<span></span>
+								</label>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Form group-->
+							<div class="form-group d-flex flex-wrap pb-lg-0 pb-3">
+								<button
+									type="button"
+									id="kt_login_signup_submit"
+									class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
+								>
+									Submit
+								</button>
+								<button
+									type="button"
+									id="kt_login_signup_cancel"
+									class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
+								>
+									Cancel
+								</button>
+							</div>
+							<!--end::Form group-->
+						</form>
 						<!--end::Form -->
 					</div>
 					<!--end::Signup -->
 					<!--begin::Forgot-->
 					<div class="login-form login-forgot">
 						<!--begin::Form-->
-						@ForgotPassword()
+						<form
+							class="form"
+							novalidate="novalidate"
+							id="kt_login_forgot_form"
+						>
+							<!--begin::Title-->
+							<div class="d-flex justify-content-center mb-5">
+								<img
+									src="asset-corporate-portal/media/logo.png"
+									alt=""
+									style="height: 103px"
+								/>
+							</div>
+							<div class="pb-13 pt-lg-0 pt-5">
+								<h3
+									class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
+								>
+									Forgotten Password ?
+								</h3>
+								<p class="text-muted font-weight-bold font-size-h4">
+									Enter your email to reset your password
+								</p>
+							</div>
+							<!--end::Title-->
+							<!--begin::Form group-->
+							<div class="form-group">
+								<input
+									class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
+									type="email"
+									placeholder="Email"
+									name="email"
+									autocomplete="off"
+								/>
+							</div>
+							<!--end::Form group-->
+							<!--begin::Form group-->
+							<div class="form-group d-flex flex-wrap pb-lg-0">
+								<button
+									type="button"
+									id="kt_login_forgot_submit"
+									class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-submit"
+								>
+									Submit
+								</button>
+								<button
+									type="button"
+									id="kt_login_forgot_cancel"
+									class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-cancel"
+								>
+									Cancel
+								</button>
+							</div>
+							<!--end::Form group-->
+						</form>
 						<!--end::Form-->
 					</div>
 					<!--end::Forgot-->
@@ -52,52 +315,73 @@ templ MainLogin() {

 templ CssLogin() {
 	<style>
-      .title-company {
-        color: #181c32;
-        font-family: Poppins;
-        font-size: 31px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        letter-spacing: -0.3px;
-      }
-      .subtitle-company {
-        color: #a7a8bb;
-        font-family: Poppins;
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-      }
-      .aside-title {
-        color: #fff;
-        text-align: center;
-        font-family: Poppins;
-        font-size: 28px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        letter-spacing: -0.84px;
-      }
-      .aside-subtitle {
-        color: #fff;
-        text-align: center;
-        font-family: Poppins;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 30px; /* 187.5% */
-        letter-spacing: -0.48px;
-      }
-    </style>
+
+		.title-company {
+    color: #181c32;
+    font-family: Poppins;
+    font-size: 31px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: -0.3px;
+}
+.subtitle-company {
+    color: #a7a8bb;
+    font-family: Poppins;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 }

+.aside-title {
+    color: #fff;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: -0.84px;
+}
+
+.aside-subtitle {
+    color: #fff;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 30px;
+    /* 187.5% */
+    letter-spacing: -0.48px;
+}
+
+.btn-submit {
+    background-color: #3b4f9f !important
+}
+
+.btn-cancel {
+    color: #3b4f9f !important;
+    background-color: #e1f0ff !important;
+}
+
+	</style>
+}
+
+// templ CssLoginCompany() {
+// 	<link
+// 		rel="stylesheet"
+// 		type="text/css"
+// 		href="asset-corporate-portal/css/login.css"
+// 	/>
+// }
 templ JsLogin() {
-	<script src="../../asset-corporate-portal/js/login-general.js"></script>
+	<script src="asset-corporate-portal/js/login-general.js"></script>
 }

 templ ShowLogin(title string, cmp templ.Component, css templ.Component, js templ.Component) {
-	@layout.PlaygroundLayout(title, css, js) {
+	@layout.CanvasLayout(title, css, js) {
 		@cmp
 	}
 }
--- a/views/login/login_templ.go
+++ b/views/login/login_templ.go
--- a/views/login/logincomponent.templ
+++ b/views/login/logincomponent.templ
@@ -1,274 +0,0 @@
-package login
-
-templ AsideLeft() {
-	<div class="login-aside d-flex flex-column flex-row-auto bg-primary">
-		<!--begin::Aside Top-->
-		<div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15 px-10">
-			<!--begin::Aside header-->
-			<div class="aside-title mb-5">
-				Empowering Your Workforce's Health
-			</div>
-			<!--end::Aside header-->
-			<!--begin::Aside title-->
-			<div class="aside-subtitle">
-				Discover peace of mind and prioritize your health with our
-				comprehensive medical check-up packages
-			</div>
-			<!--end::Aside title-->
-		</div>
-		<!--end::Aside Top-->
-		<!--begin::Aside Bottom-->
-		<div
-			class="d-flex bgi-no-repeat flex-row-fluid justify-content-center align-items-end"
-		>
-			<img
-				src="../../asset-corporate-portal/media/login/login-company-vector.png"
-				class="img-fluid"
-				style="height: 55vh; width: 55vh"
-			/>
-		</div>
-		<!--end::Aside Bottom-->
-	</div>
-}
-
-templ FormSignin() {
-	<form
-		class="form"
-		novalidate="novalidate"
-		id="kt_login_signin_form"
-	>
-		<!--begin::Title-->
-		<div class="d-flex justify-content-center mb-5">
-			<img
-				src="../../asset-corporate-portal/media/logo/logo.png"
-				alt=""
-				style="height: 103px"
-			/>
-		</div>
-		<div class="pt-2">
-			<h3
-				class="d-flex justify-content-center title-company text-dark"
-			>
-				Welcome to Corporate Portal
-			</h3>
-		</div>
-		<div class="pb-10 pt-0">
-			<h3 class="subtitle-company" style="color: #a7a8bb">
-				Sign in to access your account
-			</h3>
-		</div>
-		<!--begin::Title-->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<label class="font-size-h6 font-weight-bolder text-dark">Email</label>
-			<input
-				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
-				type="text"
-				name="username"
-				autocomplete="off"
-				placeholder="Enter your email"
-			/>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<div class="d-flex justify-content-between mt-n5">
-				<label
-					class="font-size-h6 font-weight-bolder text-dark pt-5"
-				>Password</label>
-			</div>
-			<div class="input-group">
-				<!-- form-control form-control-solid -->
-				<input
-					class="h-auto form-control form-control-solid py-7 px-6 rounded-lg rounded-right-0"
-					type="password"
-					name="password"
-					id="user-password"
-					autocomplete="off"
-					placeholder="Enter your password"
-				/>
-				<div class="input-group-append">
-					<span
-						class="input-group-text rounded-lg rounded-left-0"
-						style="border: 0"
-					>
-						<!-- far fa-eye-slash -->
-						<a class="btn" role="button" id="btn-show">
-							<i class="far fa-eye-slash" id="password-icon"></i>
-						</a>
-					</span>
-				</div>
-			</div>
-		</div>
-		<div class="d-flex justify-content-end">
-			<a
-				href="javascript:;"
-				class="font-size-h6 font-weight-bolder text-hover-primary mb-5 text-primary"
-				id="kt_login_forgot"
-			>
-				Forgot Password ?
-			</a>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Action-->
-		<div class="pb-lg-0 pb-5 pt-5">
-			<button
-				type="button"
-				id="kt_login_signin_submit"
-				class="btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5 btn-primary"
-			>
-				Sign In
-			</button>
-		</div>
-		<!--end::Action-->
-	</form>
-}
-
-templ FormSignup() {
-	<form
-		class="form"
-		novalidate="novalidate"
-		id="kt_login_signup_form"
-	>
-		<!--begin::Title -->
-		<div class="pb-13 pt-lg-0 pt-5">
-			<h3
-				class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
-			>
-				Sign Up
-			</h3>
-			<p class="text-muted font-weight-bold font-size-h4">
-				Enter your details to create your account
-			</p>
-		</div>
-		<!--end::Title -->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<input
-				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-				type="text"
-				placeholder="Fullname"
-				name="fullname"
-				autocomplete="off"
-			/>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<input
-				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-				type="email"
-				placeholder="Email"
-				name="email"
-				autocomplete="off"
-			/>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<input
-				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-				type="password"
-				placeholder="Password"
-				name="password"
-				autocomplete="off"
-			/>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<input
-				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-				type="password"
-				placeholder="Confirm password"
-				name="cpassword"
-				autocomplete="off"
-			/>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<label class="checkbox mb-0">
-				<input type="checkbox" name="agree"/>I Agree the
-				<a href="#">terms and conditions</a>.
-				<span></span>
-			</label>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Form group-->
-		<div class="form-group d-flex flex-wrap pb-lg-0 pb-3">
-			<button
-				type="button"
-				id="kt_login_signup_submit"
-				class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
-			>
-				Submit
-			</button>
-			<button
-				type="button"
-				id="kt_login_signup_cancel"
-				class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
-			>
-				Cancel
-			</button>
-		</div>
-		<!--end::Form group-->
-	</form>
-}
-
-templ ForgotPassword() {
-	<form
-		class="form"
-		novalidate="novalidate"
-		id="kt_login_forgot_form"
-	>
-		<!--begin::Title-->
-		<div class="d-flex justify-content-center mb-5">
-			<img
-				src="../../asset-corporate-portal/media/logo/logo.png"
-				alt=""
-				style="height: 103px"
-			/>
-		</div>
-		<div class="pb-13 pt-lg-0 pt-5">
-			<h3
-				class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
-			>
-				Forgotten Password ?
-			</h3>
-			<p class="text-muted font-weight-bold font-size-h4">
-				Enter your email to reset your password
-			</p>
-		</div>
-		<!--end::Title-->
-		<!--begin::Form group-->
-		<div class="form-group">
-			<input
-				class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
-				type="email"
-				placeholder="Email"
-				name="email"
-				autocomplete="off"
-			/>
-		</div>
-		<!--end::Form group-->
-		<!--begin::Form group-->
-		<div class="form-group d-flex flex-wrap pb-lg-0">
-			<button
-				type="button"
-				id="kt_login_forgot_submit"
-				class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-submit"
-			>
-				Submit
-			</button>
-			<button
-				type="button"
-				id="kt_login_forgot_cancel"
-				class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-cancel"
-			>
-				Cancel
-			</button>
-		</div>
-		<!--end::Form group-->
-	</form>
-}
--- a/views/login/logincomponent_templ.go
+++ b/views/login/logincomponent_templ.go
@@ -1,107 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.663
-package login
-
-//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 AsideLeft() 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=\"login-aside d-flex flex-column flex-row-auto bg-primary\"><!--begin::Aside Top--><div class=\"d-flex flex-column-auto flex-column pt-lg-40 pt-15 px-10\"><!--begin::Aside header--><div class=\"aside-title mb-5\">Empowering Your Workforce's Health\r</div><!--end::Aside header--><!--begin::Aside title--><div class=\"aside-subtitle\">Discover peace of mind and prioritize your health with our\r comprehensive medical check-up packages\r</div><!--end::Aside title--></div><!--end::Aside Top--><!--begin::Aside Bottom--><div class=\"d-flex bgi-no-repeat flex-row-fluid justify-content-center align-items-end\"><img src=\"../../asset-corporate-portal/media/login/login-company-vector.png\" class=\"img-fluid\" style=\"height: 55vh; width: 55vh\"></div><!--end::Aside Bottom--></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 FormSignin() 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("<form class=\"form\" novalidate=\"novalidate\" id=\"kt_login_signin_form\"><!--begin::Title--><div class=\"d-flex justify-content-center mb-5\"><img src=\"../../asset-corporate-portal/media/logo/logo.png\" alt=\"\" style=\"height: 103px\"></div><div class=\"pt-2\"><h3 class=\"d-flex justify-content-center title-company text-dark\">Welcome to Corporate Portal\r</h3></div><div class=\"pb-10 pt-0\"><h3 class=\"subtitle-company\" style=\"color: #a7a8bb\">Sign in to access your account\r</h3></div><!--begin::Title--><!--begin::Form group--><div class=\"form-group\"><label class=\"font-size-h6 font-weight-bolder text-dark\">Email</label> <input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg\" type=\"text\" name=\"username\" autocomplete=\"off\" placeholder=\"Enter your email\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><div class=\"d-flex justify-content-between mt-n5\"><label class=\"font-size-h6 font-weight-bolder text-dark pt-5\">Password</label></div><div class=\"input-group\"><!-- form-control form-control-solid --><input class=\"h-auto form-control form-control-solid py-7 px-6 rounded-lg rounded-right-0\" type=\"password\" name=\"password\" id=\"user-password\" autocomplete=\"off\" placeholder=\"Enter your password\"><div class=\"input-group-append\"><span class=\"input-group-text rounded-lg rounded-left-0\" style=\"border: 0\"><!-- far fa-eye-slash --><a class=\"btn\" role=\"button\" id=\"btn-show\"><i class=\"far fa-eye-slash\" id=\"password-icon\"></i></a></span></div></div></div><div class=\"d-flex justify-content-end\"><a href=\"javascript:;\" class=\"font-size-h6 font-weight-bolder text-hover-primary mb-5 text-primary\" id=\"kt_login_forgot\">Forgot Password ?\r</a></div><!--end::Form group--><!--begin::Action--><div class=\"pb-lg-0 pb-5 pt-5\"><button type=\"button\" id=\"kt_login_signin_submit\" class=\"btn btn-block font-weight-bolder text-white font-size-h6 px-8 py-4 my-3 mr-3 mt-5 btn-primary\">Sign In\r</button></div><!--end::Action--></form>")
-		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 FormSignup() 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("<form class=\"form\" novalidate=\"novalidate\" id=\"kt_login_signup_form\"><!--begin::Title --><div class=\"pb-13 pt-lg-0 pt-5\"><h3 class=\"font-weight-bolder text-dark font-size-h4 font-size-h1-lg\">Sign Up\r</h3><p class=\"text-muted font-weight-bold font-size-h4\">Enter your details to create your account\r</p></div><!--end::Title --><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"text\" placeholder=\"Fullname\" name=\"fullname\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"email\" placeholder=\"Email\" name=\"email\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"password\" placeholder=\"Password\" name=\"password\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"password\" placeholder=\"Confirm password\" name=\"cpassword\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group\"><label class=\"checkbox mb-0\"><input type=\"checkbox\" name=\"agree\">I Agree the\r <a href=\"#\">terms and conditions</a>.\r <span></span></label></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group d-flex flex-wrap pb-lg-0 pb-3\"><button type=\"button\" id=\"kt_login_signup_submit\" class=\"btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4\">Submit\r</button> <button type=\"button\" id=\"kt_login_signup_cancel\" class=\"btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3\">Cancel\r</button></div><!--end::Form group--></form>")
-		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 ForgotPassword() templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form class=\"form\" novalidate=\"novalidate\" id=\"kt_login_forgot_form\"><!--begin::Title--><div class=\"d-flex justify-content-center mb-5\"><img src=\"../../asset-corporate-portal/media/logo/logo.png\" alt=\"\" style=\"height: 103px\"></div><div class=\"pb-13 pt-lg-0 pt-5\"><h3 class=\"font-weight-bolder text-dark font-size-h4 font-size-h1-lg\">Forgotten Password ?\r</h3><p class=\"text-muted font-weight-bold font-size-h4\">Enter your email to reset your password\r</p></div><!--end::Title--><!--begin::Form group--><div class=\"form-group\"><input class=\"form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6\" type=\"email\" placeholder=\"Email\" name=\"email\" autocomplete=\"off\"></div><!--end::Form group--><!--begin::Form group--><div class=\"form-group d-flex flex-wrap pb-lg-0\"><button type=\"button\" id=\"kt_login_forgot_submit\" class=\"btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-submit\">Submit\r</button> <button type=\"button\" id=\"kt_login_forgot_cancel\" class=\"btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 btn-block btn-cancel\">Cancel\r</button></div><!--end::Form group--></form>")
-		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/mcu/kelainan_global/kelainan_global.templ
+++ b/views/mcu/kelainan_global/kelainan_global.templ
@@ -1,33 +1,32 @@
-package mcupeserta
+package kelainanglobal

 import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
 )

-templ MainMcuPeserta(divPesertaMcu string, dataPesertaMcu string, divKepesertaanMcu string, dataKepesertaanMcu string, divPesertaMcuUmur string, dataPesertaMcuUmur string) {
+templ MainKelainanGlobal(divMcu string, dataMcu string, divFisik string, dataFisik string) {
 	<div id="div-chart">
-		@HeaderMcuPeserta()
+		@HeaderKelainanGlobal()
 		<div class="d-flex flex-column flex-root bg-white mt-25">
+			<!-- begin::Navbar -->
 			<div class="d-flex justify-content-center ">
-				<h3 class="mb-3 title">Data Kepesertaan MCU</h3>
+				<h3 class="mb-3 title">Data Persentase Kelainan Global</h3>
 			</div>
 			<div class="row justify-content-center">
 				<div class="col-12 text-center mb-10">
-					@chart.ShowChart(divPesertaMcu, dataPesertaMcu)
-				</div>
-				<div class="col-12 text-center mb-10">
-					@chart.ShowChart(divKepesertaanMcu, dataKepesertaanMcu)
+					@chart.ShowChart(divMcu, dataMcu)
 				</div>
 				<div class="col-12 text-center">
-					@chart.ShowChart(divPesertaMcuUmur, dataPesertaMcuUmur)
+					@chart.ShowChart(divFisik, dataFisik)
 				</div>
 			</div>
+			<!-- end::Navbar -->
 		</div>
 	</div>
 }

-templ CssMcuPeserta() {
+templ CssKelainanGlobal() {
 	<link
 		rel="stylesheet"
 		href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
@@ -61,12 +60,12 @@ templ CssMcuPeserta() {
 </style>
 }

-templ JsMcuPeserta() {
+templ JsKelainanGlobal() {
 	// echart
 	<script src="assets/js/echarts-js/echart.min.js"></script>
 }

-templ HeaderMcuPeserta() {
+templ HeaderKelainanGlobal() {
 	<!-- breadcrumb & icon tanya START -->
 	<div class="row">
 		<div class="col-11">
@@ -101,7 +100,7 @@ templ HeaderMcuPeserta() {
 	<div class="mt-10">
 		<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" 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>
@@ -119,13 +118,13 @@ templ HeaderMcuPeserta() {
 				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_6">Kesimpulan & Saran</a>
 			</li>
 			<li class="nav-item">
-				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
+				<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
 			</li>
 		</ul>
 	</div>
 }

-templ ShowMcuPeserta(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+templ ShowKelainanGlobal(title string, cmp templ.Component, css templ.Component, js templ.Component) {
 	@layout.PlaygroundLayout(title, css, js) {
 		@cmp
 	}
--- a/views/mcu/kelainan_global/kelainan_global_templ.go
+++ b/views/mcu/kelainan_global/kelainan_global_templ.go
@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.

 // templ: version: v0.2.663
-package mcupeserta
+package kelainanglobal

 //lint:file-ignore SA4006 This context is only used if a nested component is present.

@@ -15,7 +15,7 @@ import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 )

-func MainMcuPeserta(divPesertaMcu string, dataPesertaMcu string, divKepesertaanMcu string, dataKepesertaanMcu string, divPesertaMcuUmur string, dataPesertaMcuUmur string) templ.Component {
+func MainKelainanGlobal(divMcu string, dataMcu string, divFisik string, dataFisik 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 {
@@ -32,23 +32,15 @@ func MainMcuPeserta(divPesertaMcu string, dataPesertaMcu string, divKepesertaanM
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = HeaderMcuPeserta().Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = HeaderKelainanGlobal().Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex flex-column flex-root bg-white mt-25\"><!-- begin::Navbar --><div class=\"d-flex justify-content-center \"><h3 class=\"mb-3 title\">Data Kepesertaan MCU</h3></div><div class=\"row justify-content-center\"><div class=\"col-12 text-center mb-10\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex flex-column flex-root bg-white mt-25\"><!-- begin::Navbar --><div class=\"d-flex justify-content-center \"><h3 class=\"mb-3 title\">Data Persentase Kelainan Global</h3></div><div class=\"row justify-content-center\"><div class=\"col-12 text-center mb-10\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = chart.ShowChart(divPesertaMcu, dataPesertaMcu).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-12 text-center mb-10\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = chart.ShowChart(divKepesertaanMcu, dataKepesertaanMcu).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = chart.ShowChart(divMcu, dataMcu).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -56,7 +48,7 @@ func MainMcuPeserta(divPesertaMcu string, dataPesertaMcu string, divKepesertaanM
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = chart.ShowChart(divPesertaMcuUmur, dataPesertaMcuUmur).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = chart.ShowChart(divFisik, dataFisik).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -71,7 +63,7 @@ func MainMcuPeserta(divPesertaMcu string, dataPesertaMcu string, divKepesertaanM
 	})
 }

-func CssMcuPeserta() templ.Component {
+func CssKelainanGlobal() 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 {
@@ -95,7 +87,7 @@ func CssMcuPeserta() templ.Component {
 	})
 }

-func JsMcuPeserta() templ.Component {
+func JsKelainanGlobal() 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 {
@@ -119,7 +111,7 @@ func JsMcuPeserta() templ.Component {
 	})
 }

-func HeaderMcuPeserta() templ.Component {
+func HeaderKelainanGlobal() 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 {
@@ -132,7 +124,7 @@ func HeaderMcuPeserta() templ.Component {
 			templ_7745c5c3_Var4 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- breadcrumb & icon tanya START --><div class=\"row\"><div class=\"col-11\"><h1 class=\"title text-black\" style=\"margin-bottom: 0\">PT. Sadhana Abiyasa Sampoerna\r</h1><nav aria-label=\"breadcrumb\"><ol class=\"breadcrumb\" style=\"margin-bottom: 0\"><li class=\"breadcrumb-item\"><a href=\"#\">Dashboard</a></li><li class=\"breadcrumb-item\"><a href=\"#\">Employee Health Medical Analytic</a></li><li class=\"breadcrumb-item\"><a href=\"#\">PT. Sadhana Abiyasa Sampoerna</a></li><li class=\"breadcrumb-item active\" aria-current=\"page\">Mcu Karyawan\r</li></ol></nav></div><div class=\"col-1 align-content-center\"><!-- align-content-center --><div class=\"d-flex justify-content-end\"><a href=\"#\"><i class=\"fas fa-info-circle text-primary\"></i></a></div></div></div><!-- breadcrumb & icon tanya END --><div class=\"mt-10\"><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\">Kesimpulan & Saran</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_7\">Daftar Peserta</a></li></ul></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- breadcrumb & icon tanya START --><div class=\"row\"><div class=\"col-11\"><h1 class=\"title text-black\" style=\"margin-bottom: 0\">PT. Sadhana Abiyasa Sampoerna\r</h1><nav aria-label=\"breadcrumb\"><ol class=\"breadcrumb\" style=\"margin-bottom: 0\"><li class=\"breadcrumb-item\"><a href=\"#\">Dashboard</a></li><li class=\"breadcrumb-item\"><a href=\"#\">Employee Health Medical Analytic</a></li><li class=\"breadcrumb-item\"><a href=\"#\">PT. Sadhana Abiyasa Sampoerna</a></li><li class=\"breadcrumb-item active\" aria-current=\"page\">Mcu Karyawan\r</li></ol></nav></div><div class=\"col-1 align-content-center\"><!-- align-content-center --><div class=\"d-flex justify-content-end\"><a href=\"#\"><i class=\"fas fa-info-circle text-primary\"></i></a></div></div></div><!-- breadcrumb & icon tanya END --><div class=\"mt-10\"><ul class=\"nav nav-tabs nav-tabs-line\"><li class=\"nav-item\"><a class=\"nav-link\" 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\">Kesimpulan & Saran</a></li><li class=\"nav-item\"><a class=\"nav-link active\" data-toggle=\"tab\" href=\"#kt_tab_pane_7\">Daftar Peserta</a></li></ul></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -143,7 +135,7 @@ func HeaderMcuPeserta() templ.Component {
 	})
 }

-func ShowMcuPeserta(title string, cmp templ.Component, css templ.Component, js templ.Component) templ.Component {
+func ShowKelainanGlobal(title string, cmp templ.Component, css templ.Component, js 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 {