fix cdn all dan google font

assets/asset-corporate-portal/css/sas.bundle.css

@@ -219,6 +219,9 @@ a.text-white:focus {
 .bg-gray {
   background-color: var(--gray) !important;
 }
+.bg-field {
+  background-color: var(--fieldbg) !important;
+}
 /* ### BACKGROUND TRANSPARENT */
 .bg-black-transparent {
   background-color: var(--dark) !important;
@@ -4000,19 +4003,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 +4047,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 */

assets/assets/css/googlefont/poppins.css

@@ -0,0 +1,80 @@
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }

assets/assets/css/googlefont/publicsans.css

@@ -0,0 +1,120 @@
+/* vietnamese */
+@font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }

assets/assets/css/googlefont/roboto.css

@@ -0,0 +1,224 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }

assets/assets/css/slick/slick-theme.css

@@ -0,0 +1,2 @@
+@charset 'UTF-8';.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}.slick-next:before{content:'→'}[dir=rtl] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-family:slick;font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000}
+/*# sourceMappingURL=slick-theme.min.css.map */

assets/assets/css/slick/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

assets/hanan/employee-medical-analytic.html

@@ -0,0 +1,431 @@
+<!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>Westerindo</title>
+    <meta name="description" content="Updates and statistics" />
+    <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"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
+    />
+    <!--end::Fonts-->
+
+    <!--begin::Page Vendors Styles(used by this page)-->
+    <link
+      href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Page Vendors 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"
+    />
+    <!-- <link href="asset-corporate-portal/media/landingpage/" rel="stylesheet" type="text/css" /> -->
+    <!--end::Layout Themes-->
+
+    <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
+    <link
+      href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+
+    <script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
+
+    <!-- CUSTOM BUNDLE CSS -->
+    <link
+      href="asset-corporate-portal/css/sas.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style>
+      body {
+        background-color: white;
+        /* padding-right: 100px;
+            padding-left: 100px; */
+      }
+
+      .navbar-lp {
+        padding-top: 40px;
+        padding-bottom: 40px;
+      }
+
+      .title {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 15px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 700;
+      }
+
+      .custom-card-lp {
+        border-radius: 24px;
+        border: 1px solid #d9d9d9;
+        margin-top: 40px;
+      }
+
+      .wrapper-custom {
+        /* background: #1B1D1F; */
+        padding-left: 10vw;
+        padding-right: 10vw;
+      }
+
+      .media-left-icon {
+        width: 40px;
+        height: 40px;
+      }
+
+      .items-content {
+        padding: 24px;
+        margin-bottom: 24px;
+      }
+      .content-page {
+        padding-top: 24px;
+        padding-left: 24px;
+        padding-right: 24px;
+        padding-bottom: 24px;
+      }
+      .item-foto {
+        width: 32px;
+        height: 32px;
+      }
+      .heading {
+        padding-top: 40px;
+      }
+      .card:hover {
+        background-color: rgba(197, 200, 211, 0.5);
+      }
+    </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"
+  >
+    <div class="wrapper-custom">
+      <!-- Navbar Start -->
+      <nav
+        class="navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between"
+      >
+        <a class="navbar-brand" href="#">
+          <img
+            src="../assets/asset-corporate-portal/media/landingpage/logo.png"
+            width="126"
+            height="40"
+            class="d-inline-block align-top"
+            alt="Your Brand"
+          />
+        </a>
+        <img
+          src="../assets/asset-corporate-portal/media/logo/foto.png"
+          alt="..."
+          class="item-foto rounded-circle"
+        />
+      </nav>
+      <!-- Navbar End -->
+
+      <!--begin::Page Heading-->
+      <div class="heading d-flex justify-content-between">
+        <div class="align-items-center flex-wrap">
+          <!--begin::Page Title-->
+          <h5 class="text-dark font-weight-bold my-1 mr-5">
+            PT. Sadhana Abiyasa Sampoerna
+          </h5>
+          <!--end::Page Title-->
+
+          <!--begin::Breadcrumb-->
+          <ul
+            class="breadcrumb breadcrumb-transparent font-weight-bold p-0 my-2 font-size-sm"
+          >
+            <li class="breadcrumb-item">
+              <a href="" class="text-muted">Dashboard</a>
+            </li>
+            <li class="breadcrumb-item">
+              <a href="" class="text-muted">Employee Health Medical Analytic</a>
+            </li>
+          </ul>
+          <!--end::Breadcrumb-->
+        </div>
+
+        <div class="d-flex align-items-center">
+          <!--begin::Actions-->
+          <a href="#" class="btn btn-primary font-weight-bolder btn-lg">
+            <i class="fas fa-filter"></i> Filter
+          </a>
+          <!--end::Actions-->
+        </div>
+      </div>
+      <!--end::Page Heading-->
+
+      <!-- content -->
+      <div class="align-items-center pt-15 flex-column">
+        <div class="bg-field rounded">
+          <div class="content-page">
+            <!-- card -->
+            <a href="">
+              <div class="items-content card shadow">
+                <div class="row d-flex align-items-center">
+                  <div class="col-7">
+                    <h3 class="text-black">MCU Calon Karyawan</h3>
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >Tanggal Pelaksanaan</span
+                    >
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >01/04/2024 - 06/04/2024</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </a>
+            <!-- end card -->
+
+            <!-- card -->
+            <a href="">
+              <div class="items-content card shadow">
+                <div class="row d-flex align-items-center">
+                  <div class="col-7">
+                    <h3 class="text-black">MCU Karyawan</h3>
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >Tanggal Pelaksanaan</span
+                    >
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >01/04/2024 - 06/04/2024</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </a>
+            <!-- end card -->
+
+            <!-- card -->
+            <a href="">
+              <div class="items-content card shadow">
+                <div class="row d-flex align-items-center">
+                  <div class="col-7">
+                    <h3 class="text-black">MCU Eselon 1</h3>
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >Tanggal Pelaksanaan</span
+                    >
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >01/04/2024 - 06/04/2024</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </a>
+            <!-- end card -->
+
+            <!-- card -->
+            <a href="">
+              <div class="items-content card shadow">
+                <div class="row d-flex align-items-center">
+                  <div class="col-7">
+                    <h3 class="text-black">MCU Eselon 2</h3>
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >Tanggal Pelaksanaan</span
+                    >
+                  </div>
+                  <div class="col-md col-lg text-right">
+                    <span class="text-black font-weight-bolde"
+                      >01/04/2024 - 06/04/2024</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </a>
+            <!-- end card -->
+          </div>
+        </div>
+      </div>
+      <!-- end content -->
+    </div>
+
+    <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>
+
+    <!-- helper htmx -->
+    <script src="assets/js/helper-htmx/helper.js"></script>
+
+    <!-- iconify -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"
+      integrity="sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+
+    <!-- htmx -->
+    <script
+      src="https://unpkg.com/htmx.org@1.9.11/dist/htmx.js"
+      integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue"
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- SCRIPT -->
+    <script type="text/javascript" async></script>
+    <!-- SCRIPT -->
+  </body>
+  <!--end::Body-->
+</html>

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>

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>

cmd/main.go

@@ -42,6 +42,14 @@ 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)
@@ -62,11 +70,23 @@ 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)
 
+	eStore, err := db.NewEmployeeStore(dbName)
+	if err != nil {
+		app.Logger.Fatalf("failed to create store: %s", err)
+	}
+	el := services.NewServicesEmployee(services.Employee{}, eStore)
+	ehs := handlers.NewEmployeeHandler(el)
+	handlers.SetupRoutesEmployee(app, ehs)
+
 	app.Logger.Fatal(app.Start(":5000"))
 }
 

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
+}

db/employee.store.go

@@ -0,0 +1,26 @@
+package db
+
+import (
+	"database/sql"
+
+	_ "github.com/glebarez/go-sqlite"
+)
+
+type EmployeeStore struct {
+	Db *sql.DB
+}
+
+func NewEmployeeStore(dbName string) (EmployeeStore, error) {
+	Db, err := getConnection(dbName)
+	if err != nil {
+		return EmployeeStore{}, err
+	}
+
+	if err := createMigrations(dbName, Db); err != nil {
+		return EmployeeStore{}, err
+	}
+
+	return EmployeeStore{
+		Db,
+	}, nil
+}

db/login.store.go

@@ -0,0 +1,26 @@
+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
+}

handlers/chart.handlers.go

@@ -10,14 +10,16 @@ import (
 
 	"github.com/a-h/templ"
 	"github.com/emarifer/go-templ-project-structure/services"
+	kelainanglobal "github.com/emarifer/go-templ-project-structure/views/mcu/kelainan_global"
+	mcupeserta "github.com/emarifer/go-templ-project-structure/views/mcu/peserta"
 	"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,6 +37,7 @@ 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"
@@ -60,6 +63,116 @@ 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)
 }
+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
+	}
+
+	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
+	}
+
+	// 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, "-", "")
+
+	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)
+}
+
+// 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
+	}
+
+	jsonData001, err001 := json.MarshalIndent(udata001, "", "    ")
+	if err001 != nil {
+		fmt.Println("Error:", err001)
+		return err001
+	}
+
+	seed001 := title001 + time.Now().String()
+	hash001 := md5.Sum([]byte(seed001))
+	randomID001 := hex.EncodeToString(hash001[:])
+	randomID001 = strings.ReplaceAll(randomID001, "-", "")
+
+	// 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(),
+	)
+
+	return uh.View(c, helo)
+}
 
 func (uh *PiechartHandler) View(c echo.Context, cmp templ.Component) error {
 	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)

handlers/employee.handler.go

@@ -0,0 +1,42 @@
+package handlers
+
+import (
+	"fmt"
+
+	"github.com/a-h/templ"
+	"github.com/emarifer/go-templ-project-structure/services"
+	"github.com/emarifer/go-templ-project-structure/views/employee"
+	"github.com/labstack/echo/v4"
+)
+
+type EmployeeService interface {
+	GetEmployeeService() ([]services.EmployeeService, error)
+}
+
+func NewEmployeeHandler(us EmployeeService) *EmployeeHandler {
+	return &EmployeeHandler{
+		EmployeeService: us,
+	}
+}
+
+type EmployeeHandler struct {
+	EmployeeService EmployeeService
+}
+
+func (eh *EmployeeHandler) ShowEmployee(c echo.Context) error {
+	udata, err := eh.EmployeeService.GetEmployeeService()
+	if err != nil {
+		// fmt.Println(err)
+		return err
+	}
+
+	fmt.Printf("%+v\n", udata)
+	e := employee.ShowEmployee("Employee", employee.MainEmployee(employee.ListCardService(udata)), employee.CssEmployee(), employee.JsEmployee())
+	return eh.View(c, e)
+}
+
+func (eh *EmployeeHandler) View(c echo.Context, cmp templ.Component) error {
+	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
+
+	return cmp.Render(c.Request().Context(), c.Response().Writer)
+}

handlers/login.handlers.go

@@ -2,19 +2,34 @@ 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"
 )
 
-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)
+type LoginService interface {
+	GetLogin(Email string, Password string) (services.Login, error)
 }
-func ViewLoginCompany(c echo.Context, cmp templ.Component) error {
+
+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 {
 	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
 
 	return cmp.Render(c.Request().Context(), c.Response().Writer)

handlers/routes.go

@@ -11,6 +11,10 @@ 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)
@@ -22,6 +26,12 @@ 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 SetupRoutesEmployee(app *echo.Echo, e *EmployeeHandler) {
+	employee := app.Group("/employee")
+	employee.GET("/", e.ShowEmployee)
 }
 func SetupRoutesProject(app *echo.Echo) {
 

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,8 +108,9 @@ type Piechart struct {
 	// CreatedAt   time.Time `json:"created_at,omitempty"`
 
 	Title struct {
-		Text string `json:"text"`
-		Left string `json:"left"`
+		Text    string `json:"text"`
+		SubText string `json:"subtext"`
+		Left    string `json:"left"`
 	} `json:"title"`
 	Tooltip struct {
 		Trigger string `json:"trigger"`
@@ -122,6 +125,8 @@ type Piechart struct {
 
 type ServicesPiechart struct {
 	Piechart      Piechart
+	Barchart      Barchart
+	BarChartStore db.BarChartStore
 	PieChartStore db.PieChartStore
 }
 
@@ -180,14 +185,16 @@ type ServicesPiechart struct {
 
 // Peserta MCU -- MCU001
 func GetPieChartMcu001(code string, id int) (string, Piechart, error) {
-	var title = "Status Index Masa Tubuh (BMI)"
+	var title = "Peserta  MCU"
 	option := Piechart{
 		Title: struct {
-			Text string `json:"text"`
-			Left string `json:"left"`
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
 		}{
-			Text: title,
-			Left: "center",
+			Text:    title,
+			SubText: "Total Peserta 506",
+			Left:    "center",
 		},
 		Tooltip: struct {
 			Trigger string `json:"trigger"`
@@ -202,6 +209,11 @@ 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{
 			{
@@ -252,17 +264,17 @@ func GetPieChartMcu001(code string, id int) (string, Piechart, error) {
 }
 
 // Kepersertaan MCU Berdasarkan Jenis Kelamin -- MCU002
-
-// Status Index Masa Tubuh (BMI) -- MCU006
-func GetPieChartMcu006(code string, id int) (string, Piechart, error) {
-	var title = "Status Index Masa Tubuh (BMI)"
+func GetPieChartMcu002(code string, id int) (string, Piechart, error) {
+	var title = "Kepesertaan  MCU"
 	option := Piechart{
 		Title: struct {
-			Text string `json:"text"`
-			Left string `json:"left"`
+			Text    string `json:"text"`
+			SubText string `json:"subtext"`
+			Left    string `json:"left"`
 		}{
-			Text: title,
-			Left: "center",
+			Text:    title,
+			SubText: "Berdasarkan Jenis Kelamin",
+			Left:    "center",
 		},
 		Tooltip: struct {
 			Trigger string `json:"trigger"`
@@ -277,6 +289,173 @@ 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{
+			{
+				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:    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{
 			{
@@ -329,14 +508,323 @@ 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)",
+					},
+				},
+			},
+		},
+	}
+
+	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)",
+					},
+				},
+			},
+		},
+	}
+
+	return title, option, nil
+}
+
+// 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
+
+}
+
+// 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")
+}

services/employee.services.go

@@ -0,0 +1,71 @@
+package services
+
+import (
+	"time"
+
+	"github.com/emarifer/go-templ-project-structure/db"
+)
+
+func NewServicesEmployee(u Employee, uStore db.EmployeeStore) *ServicesEmployee {
+
+	return &ServicesEmployee{
+		Employee:      u,
+		EmployeeStore: uStore,
+	}
+}
+
+type Employee struct {
+	ID           int       `json:"id"`
+	Employeename string    `json:"Employeename"`
+	Email        string    `json:"email"`
+	CreatedAt    time.Time `json:"created_at,omitempty"`
+}
+
+type EmployeeService struct {
+	EmployeeID          int    `json:"EmployeeID"`
+	EmployeeTitle       string `json:"EmployeeTitle"`
+	EmployeeDescription string `json:"EmployeeDescription"`
+	EmployeeStartDate   string `json:"EmployeeStartDate"`
+	EmployeeEndDate     string `json:"EmployeeEndDate"`
+}
+
+type ServicesEmployee struct {
+	Employee      Employee
+	EmployeeStore db.EmployeeStore
+}
+
+func (se *ServicesEmployee) GetEmployeeService() ([]EmployeeService, error) {
+
+	data := []EmployeeService{
+		{
+			EmployeeID:          1,
+			EmployeeTitle:       "MCU Calon Karyawan",
+			EmployeeDescription: "Tanggal Pelaksanaan",
+			EmployeeStartDate:   "01/04/2024",
+			EmployeeEndDate:     "06/04/2024",
+		},
+		{
+			EmployeeID:          2,
+			EmployeeTitle:       "MCU Karyawan",
+			EmployeeDescription: "Tanggal Pelaksanaan",
+			EmployeeStartDate:   "01/04/2024",
+			EmployeeEndDate:     "06/04/2024",
+		},
+		{
+			EmployeeID:          1,
+			EmployeeTitle:       "MCU Eselon 1",
+			EmployeeDescription: "Tanggal Pelaksanaan",
+			EmployeeStartDate:   "01/04/2024",
+			EmployeeEndDate:     "06/04/2024",
+		},
+		{
+			EmployeeID:          1,
+			EmployeeTitle:       "MCU Eselon 2",
+			EmployeeDescription: "Tanggal Pelaksanaan",
+			EmployeeStartDate:   "01/04/2024",
+			EmployeeEndDate:     "06/04/2024",
+		},
+	}
+
+	return data, nil
+}

services/login.services.go

@@ -0,0 +1,59 @@
+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
+}

views/employee/employee.templ

@@ -0,0 +1,121 @@
+package employee
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+	"github.com/emarifer/go-templ-project-structure/views/under_development"
+)
+
+templ MainEmployee(cardServiceComponent templ.Component) {
+	<div class="wrapper-custom">
+		<!-- Navbar Start -->
+		<nav
+			class="navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between"
+		>
+			<a class="navbar-brand" href="#">
+				<img
+					src="/asset-corporate-portal/media/landingpage/logo.png"
+					width="126"
+					height="40"
+					class="d-inline-block align-top"
+					alt="Your Brand"
+				/>
+			</a>
+			<img
+				src="/asset-corporate-portal/media/logo/foto.png"
+				alt="..."
+				class="item-foto rounded-circle"
+			/>
+		</nav>
+		<!-- Navbar End -->
+		<div class="d-block d-lg-none d-xl-none">
+			@under_development.UnderDevelopment()
+		</div>
+		<div class="d-none d-lg-block">
+			<!--begin::Page Heading-->
+			@HeadingEmployee("PT. Sadhana Abiyasa Sampoerna")
+			<!--end::Page Heading-->
+			<!-- content -->
+			<div class="align-items-center pt-15 flex-column">
+				<div class="bg-field rounded">
+					<div class="content-page">
+						<!-- card -->
+						@cardServiceComponent
+						<!-- end card -->
+					</div>
+				</div>
+			</div>
+			<!-- end content -->
+		</div>
+	</div>
+}
+
+templ CssEmployee() {
+	<style>
+      body {
+        background-color: white;
+        /* padding-right: 100px;
+            padding-left: 100px; */
+      }
+
+      .navbar-lp {
+        padding-top: 40px;
+        padding-bottom: 40px;
+      }
+
+      .title {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 15px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 700;
+      }
+
+      .custom-card-lp {
+        border-radius: 24px;
+        border: 1px solid #d9d9d9;
+        margin-top: 40px;
+      }
+
+      .wrapper-custom {
+        /* background: #1B1D1F; */
+        padding-left: 10vw;
+        padding-right: 10vw;
+      }
+
+      .media-left-icon {
+        width: 40px;
+        height: 40px;
+      }
+
+      .items-content {
+        padding: 24px;
+        margin-bottom: 24px;
+      }
+      .content-page {
+        padding-top: 24px;
+        padding-left: 24px;
+        padding-right: 24px;
+        padding-bottom: 24px;
+      }
+      .item-foto {
+        width: 32px;
+        height: 32px;
+      }
+      .heading {
+        padding-top: 40px;
+      }
+      .card:hover {
+        background-color: rgba(197, 200, 211, 0.5);
+      }
+    </style>
+}
+
+templ JsEmployee() {
+}
+
+templ ShowEmployee(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}

views/employee/employee_templ.go

@@ -0,0 +1,147 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package employee
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+	"github.com/emarifer/go-templ-project-structure/views/under_development"
+)
+
+func MainEmployee(cardServiceComponent templ.Component) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"wrapper-custom\"><!-- Navbar Start --><nav class=\"navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between\"><a class=\"navbar-brand\" href=\"#\"><img src=\"/asset-corporate-portal/media/landingpage/logo.png\" width=\"126\" height=\"40\" class=\"d-inline-block align-top\" alt=\"Your Brand\"></a> <img src=\"/asset-corporate-portal/media/logo/foto.png\" alt=\"...\" class=\"item-foto rounded-circle\"></nav><!-- Navbar End --><div class=\"d-block d-lg-none d-xl-none\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = under_development.UnderDevelopment().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-none d-lg-block\"><!--begin::Page Heading-->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = HeadingEmployee("PT. Sadhana Abiyasa Sampoerna").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Page Heading--><!-- content --><div class=\"align-items-center pt-15 flex-column\"><div class=\"bg-field rounded\"><div class=\"content-page\"><!-- card -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = cardServiceComponent.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- end card --></div></div></div><!-- end content --></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 CssEmployee() 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("<style>\r\n      body {\r\n        background-color: white;\r\n        /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n      }\r\n\r\n      .navbar-lp {\r\n        padding-top: 40px;\r\n        padding-bottom: 40px;\r\n      }\r\n\r\n      .title {\r\n        /* color: #FFF; */\r\n        font-family: Poppins;\r\n        font-size: 15px;\r\n        /* font-size: 1vw; */\r\n        font-style: normal;\r\n        font-weight: 700;\r\n      }\r\n\r\n      .custom-card-lp {\r\n        border-radius: 24px;\r\n        border: 1px solid #d9d9d9;\r\n        margin-top: 40px;\r\n      }\r\n\r\n      .wrapper-custom {\r\n        /* background: #1B1D1F; */\r\n        padding-left: 10vw;\r\n        padding-right: 10vw;\r\n      }\r\n\r\n      .media-left-icon {\r\n        width: 40px;\r\n        height: 40px;\r\n      }\r\n\r\n      .items-content {\r\n        padding: 24px;\r\n        margin-bottom: 24px;\r\n      }\r\n      .content-page {\r\n        padding-top: 24px;\r\n        padding-left: 24px;\r\n        padding-right: 24px;\r\n        padding-bottom: 24px;\r\n      }\r\n      .item-foto {\r\n        width: 32px;\r\n        height: 32px;\r\n      }\r\n      .heading {\r\n        padding-top: 40px;\r\n      }\r\n      .card:hover {\r\n        background-color: rgba(197, 200, 211, 0.5);\r\n      }\r\n    </style>")
+		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 JsEmployee() 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)
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowEmployee(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 {
+			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_Var5 := 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)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var5), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/employee/employeecomponent.templ

@@ -0,0 +1,60 @@
+package employee
+
+import (
+	"github.com/emarifer/go-templ-project-structure/services"
+)
+
+templ CardService(title string, description string, startdate string, enddate string) {
+	<a href="">
+		<div class="items-content card shadow">
+			<div class="row d-flex align-items-center">
+				<div class="col-7">
+					<h3 class="text-black">{ title }</h3>
+				</div>
+				<div class="col-md col-lg text-right">
+					<span class="text-black font-weight-bolde">{ description }</span>
+				</div>
+				<div class="col-md col-lg text-right">
+					<span class="text-black font-weight-bolde">{ startdate } - { enddate }</span>
+				</div>
+			</div>
+		</div>
+	</a>
+}
+
+templ ListCardService(cardData []services.EmployeeService) {
+	for _, d := range cardData {
+		@CardService(d.EmployeeTitle, d.EmployeeDescription, d.EmployeeStartDate, d.EmployeeEndDate)
+	}
+}
+
+templ HeadingEmployee(title string) {
+	<div class="heading d-flex justify-content-between">
+		<div class="align-items-center flex-wrap">
+			<!--begin::Page Title-->
+			<h5 class="text-dark font-weight-bold my-1 mr-5">
+				{ title }
+			</h5>
+			<!--end::Page Title-->
+			<!--begin::Breadcrumb-->
+			<ul
+				class="breadcrumb breadcrumb-transparent font-weight-bold p-0 my-2 font-size-sm"
+			>
+				<li class="breadcrumb-item">
+					<a href="" class="text-muted">Dashboard</a>
+				</li>
+				<li class="breadcrumb-item">
+					<a href="" class="text-muted">Employee Health Medical Analytic</a>
+				</li>
+			</ul>
+			<!--end::Breadcrumb-->
+		</div>
+		<div class="d-flex align-items-center">
+			<!--begin::Actions-->
+			<a href="#" class="btn btn-primary font-weight-bolder btn-lg">
+				<i class="fas fa-filter"></i> Filter
+			</a>
+			<!--end::Actions-->
+		</div>
+	</div>
+}

views/employee/employeecomponent_templ.go

@@ -0,0 +1,154 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package employee
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"github.com/emarifer/go-templ-project-structure/services"
+)
+
+func CardService(title string, description string, startdate string, enddate string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_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("<a href=\"\"><div class=\"items-content card shadow\"><div class=\"row d-flex align-items-center\"><div class=\"col-7\"><h3 class=\"text-black\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\employee\employeecomponent.templ`, Line: 12, Col: 35}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3></div><div class=\"col-md col-lg text-right\"><span class=\"text-black font-weight-bolde\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(description)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\employee\employeecomponent.templ`, Line: 15, Col: 61}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div><div class=\"col-md col-lg text-right\"><span class=\"text-black font-weight-bolde\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(startdate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\employee\employeecomponent.templ`, Line: 18, Col: 59}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" - ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(enddate)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\employee\employeecomponent.templ`, Line: 18, Col: 73}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div></div></a>")
+		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 ListCardService(cardData []services.EmployeeService) 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_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		for _, d := range cardData {
+			templ_7745c5c3_Err = CardService(d.EmployeeTitle, d.EmployeeDescription, d.EmployeeStartDate, d.EmployeeEndDate).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func HeadingEmployee(title string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"heading d-flex justify-content-between\"><div class=\"align-items-center flex-wrap\"><!--begin::Page Title--><h5 class=\"text-dark font-weight-bold my-1 mr-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\employee\employeecomponent.templ`, Line: 36, Col: 11}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h5><!--end::Page Title--><!--begin::Breadcrumb--><ul class=\"breadcrumb breadcrumb-transparent font-weight-bold p-0 my-2 font-size-sm\"><li class=\"breadcrumb-item\"><a href=\"\" class=\"text-muted\">Dashboard</a></li><li class=\"breadcrumb-item\"><a href=\"\" class=\"text-muted\">Employee Health Medical Analytic</a></li></ul><!--end::Breadcrumb--></div><div class=\"d-flex align-items-center\"><!--begin::Actions--><a href=\"#\" class=\"btn btn-primary font-weight-bolder btn-lg\"><i class=\"fas fa-filter\"></i> Filter\r</a><!--end::Actions--></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/landingpage/landingpage.templ

@@ -2,7 +2,6 @@ package landingpage
 
 import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
-	"github.com/emarifer/go-templ-project-structure/views/under_development"
 )
 
 templ MainLandingPage(medicalServiceComponent templ.Component, listAdvantageComponent templ.Component, listPromotion templ.Component, footer templ.Component) {
@@ -13,7 +12,7 @@ templ MainLandingPage(medicalServiceComponent templ.Component, listAdvantageComp
 		>
 			<a class="navbar-brand" href="#">
 				<img
-					src="../../asset-corporate-portal/media/landingpage/logo.png"
+					src="/asset-corporate-portal/media/landingpage/logo.png"
 					width="126"
 					height="40"
 					class="d-inline-block align-top"
@@ -24,67 +23,62 @@ templ MainLandingPage(medicalServiceComponent templ.Component, listAdvantageComp
 				<span class="title">Login</span>
 			</button>
 		</nav>
-		<div class="d-block d-lg-none d-xl-none">
-			@under_development.UnderDevelopment()
+		<!-- Navbar End -->
+		<!-- jumbotron START -->
+		<!-- <div class="jumbotron jumbotron-lp d-none d-lg-block"> -->
+		@HeaderCard()
+		<!-- jumbotron END -->
+		<!-- Our Medical Service START -->
+		<div class="row">
+			@HeaderSection("Our Medical Services", "Discover excellence in healthcare at Our Medical Services. From diagnosis to treatment, our dedicated team provides personalized care for your well-being.")
 		</div>
-		<div class="d-none d-lg-block">
-			<!-- Navbar End -->
-			<!-- jumbotron START -->
-			<!-- <div class="jumbotron jumbotron-lp d-none d-lg-block"> -->
-			@HeaderCard()
-			<!-- jumbotron END -->
-			<!-- Our Medical Service START -->
+		@medicalServiceComponent
+		<!-- Our Medical Service END -->
+		<!-- Why Westerindo START  belum fix di ukuran < 1400 -->
+		<div class="container p-0 mt-5 ">
 			<div class="row">
-				@HeaderSection("Our Medical Services", "Discover excellence in healthcare at Our Medical Services. From diagnosis to treatment, our dedicated team provides personalized care for your well-being.")
+				@HeaderSection("Why Westerindo", "With a dedicated team of professionals we’re committed to providing medical attention tailored to your needs, ensuring a journey to optimal health and vitality.")
 			</div>
-			@medicalServiceComponent
-			<!-- Our Medical Service END -->
-			<!-- Why Westerindo START  belum fix di ukuran < 1400 -->
-			<div class="container p-0 mt-5 ">
-				<div class="row">
-					@HeaderSection("Why Westerindo", "With a dedicated team of professionals we’re committed to providing medical attention tailored to your needs, ensuring a journey to optimal health and vitality.")
-				</div>
-				@listAdvantageComponent
-			</div>
-			<!-- Why Westerindo END -->
-			<!-- Promotion START -->
-			<div class="container mt-4">
-				<div class="row">
-					@HeaderSection("Promotions", "Seize This Opportunity to Enhance Your Health")
-				</div>
-				@listPromotion
-			</div>
-			<!-- Promotion END -->
-			<!-- footer START -->
-			@footer
-			<!-- footer END -->
+			@listAdvantageComponent
 		</div>
+		<!-- Why Westerindo END -->
+		<!-- Promotion START -->
+		<div class="container mt-4">
+			<div class="row">
+				@HeaderSection("Promotions", "Seize This Opportunity to Enhance Your Health")
+			</div>
+			@listPromotion
+		</div>
+		<!-- Promotion END -->
+		<!-- footer START -->
+		@footer
+		<!-- footer END -->
 	</div>
 }
 
 templ CssLandingPage() {
 	<link
 		rel="stylesheet"
-		href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+		href="assets/css/googlefont/poppins.css"
 	/>
 	<link
 		rel="stylesheet"
-		href="https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700"
+		href="assets/css/googlefont/publicsans.css"
 	/>
 	<link
 		rel="stylesheet"
-		href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
+		href="assets/css/googlefont/roboto.css"
 	/>
 	<!-- slick -->
 	<link
 		rel="stylesheet"
 		type="text/css"
-		href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
+		href="assets/css/slick/slick.css"
 	/>
 	<link
 		rel="stylesheet"
 		type="text/css"
-		href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"
+		href="assets/css/slick/slick-theme.css"
 	/>
 	<style>
     body {
@@ -112,6 +106,24 @@ templ CssLandingPage() {
       font-weight: 700;
     }
 
+    .title-jumbotron-sm {
+      /* color: #FFF; */
+      font-family: Poppins;
+      font-size: 32px;
+      /* font-size: 3vw; */
+      font-style: normal;
+      font-weight: 600;
+    }
+
+    .title-jumbotron-md {
+      /* color: #FFF; */
+      font-family: Poppins;
+      font-size: 42px;
+      /* font-size: 3vw; */
+      font-style: normal;
+      font-weight: 600;
+    }
+
     .title-jumbotron {
       /* color: #FFF; */
       font-family: Poppins;
@@ -292,7 +304,7 @@ templ CssLandingPage() {
 
 templ JsLandingPage() {
 	<!-- SCRIPT -->
-	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+	<script type="text/javascript" src="assets/js/slick/slick.min.js"></script>
 	<script type="text/javascript">
       $(document).ready(function () {
         // lg
@@ -316,8 +328,8 @@ templ JsLandingPage() {
           autoplaySpeed: 2000,
           infinite: true,
           lazyLoad: "ondemand",
-          slidesToShow: 3,
-          slidesToScroll: 3,
+          slidesToShow: 2,
+          slidesToScroll: 2,
         });
 
         // sm

views/landingpage/medicalservice.templ

@@ -34,7 +34,17 @@ templ MedicalService(title string, desciption string, icon string, link string)
 }
 
 templ ListMedicalService(medserData []services.ClientService) {
-	<div class="row responsive-lg">
+	<div class="row responsive-sm d-xs-block d-sm-block d-md-none">
+		for _, d := range medserData {
+			@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
+		}
+	</div>
+	<div class="row responsive-md d-none d-md-block d-lg-none">
+		for _, d := range medserData {
+			@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
+		}
+	</div>
+	<div class="row responsive-lg d-none d-lg-block">
 		for _, d := range medserData {
 			@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
 		}
@@ -73,7 +83,7 @@ templ ListAdvantage(adData []services.AdvantageClient) {
 	<div class="row mt-5">
 		<div class="col-md-6">
 			<img
-				src="../../asset-corporate-portal/media/landingpage/why_westerindo_right.png"
+				src="/asset-corporate-portal/media/landingpage/why_westerindo_right.png"
 				alt="Your Brand"
 				class="align-top w-100 h-100 pt-4 pb-4"
 			/>
@@ -87,7 +97,76 @@ templ ListAdvantage(adData []services.AdvantageClient) {
 }
 
 templ HeaderCard() {
-	<div class="jumbotron bg-primary">
+	// Hp
+	<div class="jumbotron bg-primary d-xs-block d-sm-block d-md-none">
+		<div class="container">
+			<div class="row">
+				<div class="col-sm-12 mb-3 d-flex justify-content-sm-end">
+					<div class="d-flex m-1 align-items-center">
+						<img
+							src="/asset-corporate-portal/media/landingpage/jumbotron_left.png"
+							class="img-fluid w-100 h-100 img-header"
+							alt="Your Brand"
+						/>
+					</div>
+				</div>
+				<div class="col-sm-12 d-flex flex-column">
+					<div class="mb-3">
+						<h1 class="title-jumbotron-sm text-white">
+							Invest in Your Well-being with Our Comprehensive Medical
+							Check-Up
+						</h1>
+						<p class="sub-title-jumbotron text-white">
+							Elevate your health journey with our thorough medical
+							assessments, empowering you to take proactive steps towards a
+							healthier, happier life.
+						</p>
+						<button type="button" class="btn btn-lg btn-pill bg-white">
+							<span class="title-get-started">Get Started</span>
+						</button>
+					</div>
+					<div class="mt-auto"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	// End Hp
+	// Tablet
+	<div class="jumbotron bg-primary d-none d-md-block d-lg-none">
+		<div class="container">
+			<div class="row">
+				<div class="col-md-12 mb-3 d-flex justify-content-md-end">
+					<div class="d-flex m-1 align-items-center">
+						<img
+							src="/asset-corporate-portal/media/landingpage/jumbotron_left.png"
+							class="img-fluid w-100 h-100 img-header"
+							alt="Your Brand"
+						/>
+					</div>
+				</div>
+				<div class="col-md-12 d-flex flex-column">
+					<div class="mb-3">
+						<h1 class="title-jumbotron-md text-white">
+							Invest in Your Well-being with Our Comprehensive Medical
+							Check-Up
+						</h1>
+						<p class="sub-title-jumbotron text-white">
+							Elevate your health journey with our thorough medical
+							assessments, empowering you to take proactive steps towards a
+							healthier, happier life.
+						</p>
+						<button type="button" class="btn btn-lg btn-pill bg-white">
+							<span class="title-get-started">Get Started</span>
+						</button>
+					</div>
+					<div class="mt-auto"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	// End Tablet
+	// Dekstop
+	<div class="jumbotron bg-primary d-none d-lg-block">
 		<div class="container">
 			<div class="row">
 				<div class="col-md-8 d-flex flex-column">
@@ -116,7 +195,7 @@ templ HeaderCard() {
                   " -->
 					<div class="d-flex m-1o align-items-center">
 						<img
-							src="../asset-corporate-portal/media/landingpage/jumbotron_left.png"
+							src="/asset-corporate-portal/media/landingpage/jumbotron_left.png"
 							class="img-fluid w-100 h-100 img-header"
 							alt="Your Brand"
 						/>
@@ -125,6 +204,7 @@ templ HeaderCard() {
 			</div>
 		</div>
 	</div>
+	// End Dekstop
 }
 
 templ Promotion(prm services.Promotion) {
@@ -138,6 +218,16 @@ templ Promotion(prm services.Promotion) {
 }
 
 templ ListPromotion(prm []services.Promotion) {
+	<div class="row responsive-sm d-xs-block d-sm-block d-md-none">
+		for _, d := range prm {
+			@Promotion(d)
+		}
+	</div>
+	<div class="row responsive-md d-none d-md-block d-lg-none">
+		for _, d := range prm {
+			@Promotion(d)
+		}
+	</div>
 	<div class="row responsive-lg d-none d-lg-block d-xl-block">
 		for _, d := range prm {
 			@Promotion(d)

views/landingpage/medicalservice_templ.go

@@ -99,7 +99,27 @@ func ListMedicalService(medserData []services.ClientService) templ.Component {
 			templ_7745c5c3_Var6 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-lg\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-sm d-xs-block d-sm-block d-md-none\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range medserData {
+			templ_7745c5c3_Err = MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink).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 responsive-md d-none d-md-block d-lg-none\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range medserData {
+			templ_7745c5c3_Err = MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink).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 responsive-lg d-none d-lg-block\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -140,7 +160,7 @@ func HeaderSection(title string, desc string) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 46, Col: 46}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 56, Col: 46}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -153,7 +173,7 @@ func HeaderSection(title string, desc string) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(desc)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 48, Col: 9}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 58, Col: 9}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -190,7 +210,7 @@ func Advantage(title string, desc string) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 63, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 73, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -203,7 +223,7 @@ func Advantage(title string, desc string) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(desc)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 65, Col: 11}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 75, Col: 11}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
@@ -233,7 +253,7 @@ func ListAdvantage(adData []services.AdvantageClient) templ.Component {
 			templ_7745c5c3_Var13 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row mt-5\"><div class=\"col-md-6\"><img src=\"../../asset-corporate-portal/media/landingpage/why_westerindo_right.png\" alt=\"Your Brand\" class=\"align-top w-100 h-100 pt-4 pb-4\"></div><div class=\"col-md-6 d-flex flex-column\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row mt-5\"><div class=\"col-md-6\"><img src=\"/asset-corporate-portal/media/landingpage/why_westerindo_right.png\" alt=\"Your Brand\" class=\"align-top w-100 h-100 pt-4 pb-4\"></div><div class=\"col-md-6 d-flex flex-column\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -267,7 +287,7 @@ func HeaderCard() templ.Component {
 			templ_7745c5c3_Var14 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"jumbotron bg-primary\"><div class=\"container\"><div class=\"row\"><div class=\"col-md-8 d-flex flex-column\"><div class=\"mb-3\"><h1 class=\"title-jumbotron text-white\">Invest in Your Well-being with Our Comprehensive Medical\r Check-Up\r</h1><p class=\"sub-title-jumbotron text-white\">Elevate your health journey with our thorough medical\r assessments, empowering you to take proactive steps towards a\r healthier, happier life.\r</p><button type=\"button\" class=\"btn btn-lg btn-pill bg-white\"><span class=\"title-get-started\">Get Started</span></button></div><div class=\"mt-auto\"></div></div><div class=\"col-md-4 d-flex justify-content-md-end\"><!-- style=\"\r\n                    flex: 2;\r\n                    margin: 10px;\r\n                    display: flex;\r\n                    align-items: center;\r\n                  \" --><div class=\"d-flex m-1o align-items-center\"><img src=\"../asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div></div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"jumbotron bg-primary d-xs-block d-sm-block d-md-none\"><div class=\"container\"><div class=\"row\"><div class=\"col-sm-12 mb-3 d-flex justify-content-sm-end\"><div class=\"d-flex m-1 align-items-center\"><img src=\"/asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div><div class=\"col-sm-12 d-flex flex-column\"><div class=\"mb-3\"><h1 class=\"title-jumbotron-sm text-white\">Invest in Your Well-being with Our Comprehensive Medical\r Check-Up\r</h1><p class=\"sub-title-jumbotron text-white\">Elevate your health journey with our thorough medical\r assessments, empowering you to take proactive steps towards a\r healthier, happier life.\r</p><button type=\"button\" class=\"btn btn-lg btn-pill bg-white\"><span class=\"title-get-started\">Get Started</span></button></div><div class=\"mt-auto\"></div></div></div></div></div><div class=\"jumbotron bg-primary d-none d-md-block d-lg-none\"><div class=\"container\"><div class=\"row\"><div class=\"col-md-12 mb-3 d-flex justify-content-md-end\"><div class=\"d-flex m-1 align-items-center\"><img src=\"/asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div><div class=\"col-md-12 d-flex flex-column\"><div class=\"mb-3\"><h1 class=\"title-jumbotron-md text-white\">Invest in Your Well-being with Our Comprehensive Medical\r Check-Up\r</h1><p class=\"sub-title-jumbotron text-white\">Elevate your health journey with our thorough medical\r assessments, empowering you to take proactive steps towards a\r healthier, happier life.\r</p><button type=\"button\" class=\"btn btn-lg btn-pill bg-white\"><span class=\"title-get-started\">Get Started</span></button></div><div class=\"mt-auto\"></div></div></div></div></div><div class=\"jumbotron bg-primary d-none d-lg-block\"><div class=\"container\"><div class=\"row\"><div class=\"col-md-8 d-flex flex-column\"><div class=\"mb-3\"><h1 class=\"title-jumbotron text-white\">Invest in Your Well-being with Our Comprehensive Medical\r Check-Up\r</h1><p class=\"sub-title-jumbotron text-white\">Elevate your health journey with our thorough medical\r assessments, empowering you to take proactive steps towards a\r healthier, happier life.\r</p><button type=\"button\" class=\"btn btn-lg btn-pill bg-white\"><span class=\"title-get-started\">Get Started</span></button></div><div class=\"mt-auto\"></div></div><div class=\"col-md-4 d-flex justify-content-md-end\"><!-- style=\"\r\n                    flex: 2;\r\n                    margin: 10px;\r\n                    display: flex;\r\n                    align-items: center;\r\n                  \" --><div class=\"d-flex m-1o align-items-center\"><img src=\"/asset-corporate-portal/media/landingpage/jumbotron_left.png\" class=\"img-fluid w-100 h-100 img-header\" alt=\"Your Brand\"></div></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -298,7 +318,7 @@ func Promotion(prm services.Promotion) templ.Component {
 		var templ_7745c5c3_Var16 string
 		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(prm.PromotionAsset)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 133, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\medicalservice.templ`, Line: 213, Col: 27}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 		if templ_7745c5c3_Err != nil {
@@ -328,7 +348,27 @@ func ListPromotion(prm []services.Promotion) templ.Component {
 			templ_7745c5c3_Var17 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-lg d-none d-lg-block d-xl-block\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row responsive-sm d-xs-block d-sm-block d-md-none\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range prm {
+			templ_7745c5c3_Err = Promotion(d).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 responsive-md d-none d-md-block d-lg-none\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range prm {
+			templ_7745c5c3_Err = Promotion(d).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 responsive-lg d-none d-lg-block d-xl-block\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/layout/base.layout.templ

@@ -12,8 +12,8 @@ templ Base(title string) {
 			/>
 			<meta name="google" content="notranslate"/>
 			<link rel="shortcut icon" href="/img/templ.png" type="image/png"/>
-			<script src="https://cdn.tailwindcss.com"></script>
-			<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.10/dist/full.min.css" rel="stylesheet" type="text/css"/>
+			// <script src="https://cdn.tailwindcss.com"></script>
+			// <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.10/dist/full.min.css" rel="stylesheet" type="text/css"/>
 			<link rel="stylesheet" href="/css/styles.css"/>
 			<title>Project Structure Demo { title }</title>
 			<script src="https://unpkg.com/htmx.org@1.9.9" integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX" crossorigin="anonymous"></script>

views/layout/base.layout_templ.go

@@ -23,7 +23,7 @@ func Base(title string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" data-theme=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Go/Echo+Templ: User List App as an example of a project structured in layers, use of &#39;Templ&#39; Template language and frontend with HTMx technology\"><meta name=\"google\" content=\"notranslate\"><link rel=\"shortcut icon\" href=\"/img/templ.png\" type=\"image/png\"><script src=\"https://cdn.tailwindcss.com\"></script><link href=\"https://cdn.jsdelivr.net/npm/daisyui@4.4.10/dist/full.min.css\" rel=\"stylesheet\" type=\"text/css\"><link rel=\"stylesheet\" href=\"/css/styles.css\"><title>Project Structure Demo ")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\" data-theme=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Go/Echo+Templ: User List App as an example of a project structured in layers, use of &#39;Templ&#39; Template language and frontend with HTMx technology\"><meta name=\"google\" content=\"notranslate\"><link rel=\"shortcut icon\" href=\"/img/templ.png\" type=\"image/png\"><link rel=\"stylesheet\" href=\"/css/styles.css\"><title>Project Structure Demo ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/layout/canvas_layout.templ

@@ -17,7 +17,7 @@ templ CanvasLayout(title string, css templ.Component, js templ.Component) {
 	<html lang="en">
 		<!--begin::Head-->
 		<head>
-			<base href="../"/>
+			<base href="/"/>
 			<meta charset="utf-8"/>
 			<title>Company Portal | { title }</title>
 			<meta name="description" content="Company Portal"/>
@@ -28,7 +28,7 @@ templ CanvasLayout(title string, css templ.Component, js templ.Component) {
 			<!--begin::Fonts-->
 			<link
 				rel="stylesheet"
-				href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+				href="assets/css/googlefont/poppins.css"
 			/>
 			<!--end::Fonts-->
 			<!--begin::Page Custom Styles(used by this page)-->
@@ -160,12 +160,7 @@ templ CanvasLayout(title string, css templ.Component, js templ.Component) {
       };
     </script>
 	<!-- iconify -->
-			<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"
-			integrity="sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA=="
-			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-			></script>
+			<script src="assets/js/iconify/iconify.min.js"></script>
 			<!--end::Global Config-->
 			<!--begin::Global Theme Bundle(used by all pages)-->
 			<script src="assets/plugins/global/plugins.bundle.js"></script>

views/layout/canvas_layout_templ.go

@@ -23,7 +23,7 @@ func CanvasLayout(title string, css templ.Component, js templ.Component) templ.C
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><!--\r\n\t\tTemplate Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme\r\n\t\tAuthor: KeenThemes\r\n\t\tWebsite: http://www.keenthemes.com/\r\n\t\tContact: support@keenthemes.com\r\n\t\tFollow: www.twitter.com/keenthemes\r\n\t\tDribbble: www.dribbble.com/keenthemes\r\n\t\tLike: www.facebook.com/keenthemes\r\n\t\tPurchase: https://1.envato.market/EA4JP\r\n\t\tRenew Support: https://1.envato.market/EA4JP\r\n\t\tLicense: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.\r\n\t\t--><html lang=\"en\"><!--begin::Head--><head><base href=\"../\"><meta charset=\"utf-8\"><title>Company Portal | ")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><!--\r\n\t\tTemplate Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme\r\n\t\tAuthor: KeenThemes\r\n\t\tWebsite: http://www.keenthemes.com/\r\n\t\tContact: support@keenthemes.com\r\n\t\tFollow: www.twitter.com/keenthemes\r\n\t\tDribbble: www.dribbble.com/keenthemes\r\n\t\tLike: www.facebook.com/keenthemes\r\n\t\tPurchase: https://1.envato.market/EA4JP\r\n\t\tRenew Support: https://1.envato.market/EA4JP\r\n\t\tLicense: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.\r\n\t\t--><html lang=\"en\"><!--begin::Head--><head><base href=\"/\"><meta charset=\"utf-8\"><title>Company Portal | ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -36,7 +36,7 @@ func CanvasLayout(title string, css templ.Component, js templ.Component) templ.C
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><meta name=\"description\" content=\"Company Portal\"><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=\"asset-corporate-portal/media/logo/logo-small.jpg\"><!--end::Layout Themes SAS--><link href=\"asset-corporate-portal/css/sas.bundle.css\" rel=\"stylesheet\" type=\"text/css\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><meta name=\"description\" content=\"Company Portal\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><!--begin::Fonts--><link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><!--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=\"asset-corporate-portal/media/logo/logo-small.jpg\"><!--end::Layout Themes SAS--><link href=\"asset-corporate-portal/css/sas.bundle.css\" rel=\"stylesheet\" type=\"text/css\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -52,7 +52,7 @@ func CanvasLayout(title string, css templ.Component, js templ.Component) templ.C
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </script><!-- iconify --><script src=\"https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js\" integrity=\"sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></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-->")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </script><!-- iconify --><script src=\"assets/js/iconify/iconify.min.js\"></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-->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/layout/playground_layout.templ

@@ -18,7 +18,7 @@ templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
 	<html lang="en">
 		<!--begin::Head-->
 		<head>
-			<base href="../"/>
+			<base href="/"/>
 			<meta charset="utf-8"/>
 			<title>Company Portal | { title }</title>
 			<meta name="description" content="Company Portal"/>
@@ -29,7 +29,7 @@ templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
 			<!--begin::Fonts-->
 			<link
 				rel="stylesheet"
-				href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+				href="assets/css/googlefont/poppins.css"
 			/>
 			<!--end::Fonts-->
 			<!--begin::Page Custom Styles(used by this page)-->
@@ -93,7 +93,7 @@ templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
 			class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
 		>
 			// htmx
-			<script src="https://unpkg.com/htmx.org@1.9.12"></script>
+			<script src="assets/js/htmx/htmx.min.js"></script>
 			<!--begin::Main-->
 			{ children... }
 			<!--end::Main-->
@@ -168,7 +168,7 @@ templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
 			<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
 			<script src="assets/js/scripts.bundle.js"></script>
 			<!--end::Global Theme Bundle-->
-			<script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js" integrity="sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+			<script src="assets/js/iconify/iconify.min.js"></script>
 			@js
 			<!--end::Page Scripts-->
 		</body>

views/layout/playground_layout_templ.go

@@ -24,7 +24,7 @@ func PlaygroundLayout(title string, css templ.Component, js templ.Component) tem
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><!--\r\n\t\tTemplate Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme\r\n\t\tAuthor: KeenThemes\r\n\t\tWebsite: http://www.keenthemes.com/\r\n\t\tContact: support@keenthemes.com\r\n\t\tFollow: www.twitter.com/keenthemes\r\n\t\tDribbble: www.dribbble.com/keenthemes\r\n\t\tLike: www.facebook.com/keenthemes\r\n\t\tPurchase: https://1.envato.market/EA4JP\r\n\t\tRenew Support: https://1.envato.market/EA4JP\r\n\t\tLicense: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.\r\n\t\t--><html lang=\"en\"><!--begin::Head--><head><base href=\"../\"><meta charset=\"utf-8\"><title>Company Portal | ")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><!--\r\n\t\tTemplate Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme\r\n\t\tAuthor: KeenThemes\r\n\t\tWebsite: http://www.keenthemes.com/\r\n\t\tContact: support@keenthemes.com\r\n\t\tFollow: www.twitter.com/keenthemes\r\n\t\tDribbble: www.dribbble.com/keenthemes\r\n\t\tLike: www.facebook.com/keenthemes\r\n\t\tPurchase: https://1.envato.market/EA4JP\r\n\t\tRenew Support: https://1.envato.market/EA4JP\r\n\t\tLicense: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.\r\n\t\t--><html lang=\"en\"><!--begin::Head--><head><base href=\"/\"><meta charset=\"utf-8\"><title>Company Portal | ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -37,7 +37,7 @@ func PlaygroundLayout(title string, css templ.Component, js templ.Component) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><meta name=\"description\" content=\"Company Portal\"><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=\"asset-corporate-portal/media/logo/logo-small.jpg\"><!--end::Layout Themes SAS--><link href=\"asset-corporate-portal/css/sas.bundle.css\" rel=\"stylesheet\" type=\"text/css\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><meta name=\"description\" content=\"Company Portal\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"><!--begin::Fonts--><link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><!--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=\"asset-corporate-portal/media/logo/logo-small.jpg\"><!--end::Layout Themes SAS--><link href=\"asset-corporate-portal/css/sas.bundle.css\" rel=\"stylesheet\" type=\"text/css\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -45,7 +45,7 @@ func PlaygroundLayout(title string, css templ.Component, js templ.Component) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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\"><script src=\"https://unpkg.com/htmx.org@1.9.12\"></script><!--begin::Main-->")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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\"><script src=\"assets/js/htmx/htmx.min.js\"></script><!--begin::Main-->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -53,7 +53,7 @@ func PlaygroundLayout(title string, css templ.Component, js templ.Component) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </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--><script src=\"https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js\" integrity=\"sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </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--><script src=\"assets/js/iconify/iconify.min.js\"></script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/login/login.templ

@@ -4,44 +4,14 @@ import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 )
 
-templ DivLogin() {
+templ MainLogin() {
 	<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-->
-			<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>
+			@AsideLeft()
 			<!--begin::Aside-->
 			<!--begin::Content-->
 			<div
@@ -52,254 +22,21 @@ templ DivLogin() {
 					<!--begin::Signin-->
 					<div class="login-form login-signin">
 						<!--begin::Form-->
-						<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>
+						@FormSignin()
 						<!--end::Form-->
 					</div>
 					<!--end::Signin-->
 					<!--begin::Signup -->
 					<div class="login-form login-signup">
 						<!--begin::Form -->
-						<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>
+						@FormSignup()
 						<!--end::Form -->
 					</div>
 					<!--end::Signup -->
 					<!--begin::Forgot-->
 					<div class="login-form login-forgot">
 						<!--begin::Form-->
-						<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>
+						@ForgotPassword()
 						<!--end::Form-->
 					</div>
 					<!--end::Forgot-->
@@ -315,73 +52,52 @@ templ DivLogin() {
 
 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;
+      .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>
 }
 
-.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.CanvasLayout(title, css, js) {
+	@layout.PlaygroundLayout(title, css, js) {
 		@cmp
 	}
 }

views/login/logincomponent.templ

@@ -0,0 +1,274 @@
+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>
+}

views/login/logincomponent_templ.go

@@ -0,0 +1,107 @@
+// 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
+	})
+}

views/mcu/kelainan_global/kelainan_global.templ

@@ -0,0 +1,131 @@
+package kelainanglobal
+
+import (
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
+)
+
+templ MainKelainanGlobal(divMcu string, dataMcu string, divFisik string, dataFisik string) {
+	<div id="div-chart">
+		@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 Persentase Kelainan Global</h3>
+			</div>
+			<div class="row justify-content-center">
+				<div class="col-12 text-center mb-10">
+					@chart.ShowChart(divMcu, dataMcu)
+				</div>
+				<div class="col-12 text-center">
+					@chart.ShowChart(divFisik, dataFisik)
+				</div>
+			</div>
+			<!-- end::Navbar -->
+		</div>
+	</div>
+}
+
+templ CssKelainanGlobal() {
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/poppins.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/publicsans.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/roboto.css"
+	/>
+	<style>
+    body {
+      background-color: white;
+      /* padding-right: 100px;
+            padding-left: 100px; */
+    }
+    #div-chart {
+        /* overflow-x: scroll; */
+        margin: 40px 10vw 40px 10vw;
+    }
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+    #title {
+        font-weight: 600;
+    }
+    
+</style>
+}
+
+templ JsKelainanGlobal() {
+	// echart
+	<script src="assets/js/echarts-js/echart.min.js"></script>
+}
+
+templ HeaderKelainanGlobal() {
+	<!-- breadcrumb & icon tanya START -->
+	<div class="row">
+		<div class="col-11">
+			<h1 class="title text-black" style="margin-bottom: 0">
+				PT. Sadhana Abiyasa Sampoerna
+			</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
+					</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>
+}
+
+templ ShowKelainanGlobal(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}

views/mcu/kelainan_global/kelainan_global_templ.go

@@ -0,0 +1,175 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package kelainanglobal
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
+	"github.com/emarifer/go-templ-project-structure/views/layout"
+)
+
+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 {
+			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 id=\"div-chart\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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 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(divMcu, dataMcu).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\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chart.ShowChart(divFisik, dataFisik).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><!-- end::Navbar --></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 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 {
+			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("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    #div-chart {\r\n        /* overflow-x: scroll; */\r\n        margin: 40px 10vw 40px 10vw;\r\n    }\r\n    .title {\r\n        font-size:20px;\r\n        font-weight: bold;\r\n    }\r\n    #title {\r\n        font-weight: 600;\r\n    }\r\n    \r\n</style>")
+		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 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 {
+			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("<script src=\"assets/js/echarts-js/echart.min.js\"></script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+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 {
+			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("<!-- 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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+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 {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var6 := 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)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var6), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/mcu/peserta/mcupeserta.templ

@@ -0,0 +1,132 @@
+package mcupeserta
+
+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) {
+	<div id="div-chart">
+		@HeaderMcuPeserta()
+		<div class="d-flex flex-column flex-root bg-white mt-25">
+			<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">
+					@chart.ShowChart(divPesertaMcu, dataPesertaMcu)
+				</div>
+				<div class="col-12 text-center mb-10">
+					@chart.ShowChart(divKepesertaanMcu, dataKepesertaanMcu)
+				</div>
+				<div class="col-12 text-center">
+					@chart.ShowChart(divPesertaMcuUmur, dataPesertaMcuUmur)
+				</div>
+			</div>
+		</div>
+	</div>
+}
+
+templ CssMcuPeserta() {
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/poppins.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/publicsans.css"
+	/>
+	<link
+		rel="stylesheet"
+		href="assets/css/googlefont/roboto.css"
+	/>
+	<style>
+    body {
+      background-color: white;
+      /* padding-right: 100px;
+            padding-left: 100px; */
+    }
+    #div-chart {
+        /* overflow-x: scroll; */
+        margin: 40px 10vw 40px 10vw;
+    }
+    .title {
+        font-size:20px;
+        font-weight: bold;
+    }
+    #title {
+        font-weight: 600;
+    }
+    
+</style>
+}
+
+templ JsMcuPeserta() {
+	// echart
+	<script src="assets/js/echarts-js/echart.min.js"></script>
+}
+
+templ HeaderMcuPeserta() {
+	<!-- breadcrumb & icon tanya START -->
+	<div class="row">
+		<div class="col-11">
+			<h1 class="title text-black" style="margin-bottom: 0">
+				PT. Sadhana Abiyasa Sampoerna
+			</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
+					</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 ShowMcuPeserta(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}

views/mcu/peserta/mcupeserta_templ.go

@@ -0,0 +1,183 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package mcupeserta
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
+	"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 {
+	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 id=\"div-chart\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = HeaderMcuPeserta().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\"><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\">")
+		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)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-12 text-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = chart.ShowChart(divPesertaMcuUmur, dataPesertaMcuUmur).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CssMcuPeserta() 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("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    #div-chart {\r\n        /* overflow-x: scroll; */\r\n        margin: 40px 10vw 40px 10vw;\r\n    }\r\n    .title {\r\n        font-size:20px;\r\n        font-weight: bold;\r\n    }\r\n    #title {\r\n        font-weight: 600;\r\n    }\r\n    \r\n</style>")
+		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 JsMcuPeserta() 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("<script src=\"assets/js/echarts-js/echart.min.js\"></script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func HeaderMcuPeserta() 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("<!-- 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>")
+		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 ShowMcuPeserta(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 {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var6 := 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)
+			}
+			templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !templ_7745c5c3_IsBuffer {
+				_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = layout.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var6), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}

views/piechart/piechart.templ

@@ -23,15 +23,15 @@ templ MainPieChart(idDiv string, udata string) {
 templ CssPieChart() {
 	<link
 		rel="stylesheet"
-		href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+		href="assets/css/googlefont/poppins.css"
 	/>
 	<link
 		rel="stylesheet"
-		href="https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700"
+		href="assets/css/googlefont/publicsans.css"
 	/>
 	<link
 		rel="stylesheet"
-		href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
+		href="assets/css/googlefont/roboto.css"
 	/>
 	<style>
     body {
@@ -49,7 +49,7 @@ templ CssPieChart() {
 
 templ JsPieChart() {
 	// echart
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="assets/js/echarts-js/echart.min.js"></script>
 }
 
 templ ShowPieChart(title string, cmp templ.Component, css templ.Component, js templ.Component) {

views/piechart/piechart_templ.go

@@ -60,7 +60,7 @@ func CssPieChart() templ.Component {
 			templ_7745c5c3_Var2 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n\r\n    .title {\r\n        font-size:20px;\r\n        font-weight: bold;\r\n    }\r\n  </style>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n\r\n    .title {\r\n        font-size:20px;\r\n        font-weight: bold;\r\n    }\r\n  </style>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -84,7 +84,7 @@ func JsPieChart() templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js\" integrity=\"sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"assets/js/echarts-js/echart.min.js\"></script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

views/under_development/under_development.templ

@@ -8,7 +8,7 @@ templ UnderDevelopment() {
 		</div>
 		<div>
 			<img
-				src="../asset-corporate-portal/media/under_development/under_development.png"
+				src="/asset-corporate-portal/media/under_development/under_development.png"
 				class="img-fluid"
 				alt="Your Brand"
 			/>

views/under_development/under_development_templ.go

@@ -23,7 +23,7 @@ func UnderDevelopment() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-center text-center flex-column mt-20\"><div class=\"text-primary underdev\">Site Under Development</div><div class=\"text-disabled underdevsub mb-10\">\"Stay Tuned, We're Building Excitement!\"\r</div><div><img src=\"../asset-corporate-portal/media/under_development/under_development.png\" class=\"img-fluid\" alt=\"Your Brand\"></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-center text-center flex-column mt-20\"><div class=\"text-primary underdev\">Site Under Development</div><div class=\"text-disabled underdevsub mb-10\">\"Stay Tuned, We're Building Excitement!\"\r</div><div><img src=\"/asset-corporate-portal/media/under_development/under_development.png\" class=\"img-fluid\" alt=\"Your Brand\"></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}