coba pagination

Merge branch 'andy/table' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/table
coba pagination
2024-05-14 09:01:27 +07:00 · 2024-05-13 14:41:22 +07:00 · 2024-05-13 14:39:06 +07:00 · 2024-05-13 14:35:40 +07:00 · 2024-05-13 14:23:26 +07:00 · 2024-05-13 14:22:58 +07:00
265 changed files with 28001 additions and 2379 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 tmp
-bin
+bin
+config.yaml
--- a/assets/andy/underdev.html
+++ b/assets/andy/underdev.html
@@ -0,0 +1,838 @@
+<!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;
+      }
+
+      .jumbotron-lp {
+        border-radius: 32px;
+        /* background: #3B4F9F; */
+      }
+
+      .title {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 15px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 700;
+      }
+
+      .title-jumbotron {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 52px;
+        /* font-size: 3vw; */
+        font-style: normal;
+        font-weight: 600;
+      }
+
+      .sub-title-jumbotron {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 16px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 400;
+      }
+
+      .btn-login {
+        border-radius: 40px;
+        /* background-color: #3B4F9F; */
+        box-shadow: 0px 8px 16px 0px rgba(59, 79, 159, 0.24);
+      }
+
+      .title-get-started {
+        /* color: #0C518C; */
+        font-family: Poppins;
+        font-size: 20px;
+        /* font-size: 1vw; */
+        font-style: normal;
+        font-weight: 700;
+      }
+
+      .custom-button-get-started {
+        border-radius: 40px;
+        /* background-color: #FFF; */
+        box-shadow: 0px 8px 16px 0px rgba(12, 81, 140, 0.24);
+        padding: 20px;
+        margin-top: 44px;
+        justify-content: center;
+        align-items: center;
+        width: 242px;
+      }
+
+      .title-section {
+        /* color: #000; */
+        font-family: Poppins;
+        font-size: 40px;
+        /* font-size: 3vw; */
+        font-style: normal;
+        font-weight: 600;
+        line-height: 80px;
+        margin-bottom: 16px;
+      }
+
+      .sub-title-section {
+        /* color: #212B36; */
+        font-family: Poppins;
+        font-size: 20px;
+        /* font-size: 1.5vw; */
+        font-style: normal;
+        font-weight: 400;
+        line-height: 36px;
+      }
+
+      .custom-card-lp {
+        border-radius: 24px;
+        border: 1px solid #d9d9d9;
+        margin-top: 40px;
+      }
+
+      .title-fs-20 {
+        /* color: #0E1E28; */
+        font-family: Poppins;
+        font-size: 20px;
+        /* font-size: 1.5vw; */
+        font-style: normal;
+        /* font-weight: 500; */
+        line-height: 36px;
+      }
+
+      .sub-title-fs-12 {
+        /* color: #0E1E28; */
+        font-family: Poppins;
+        font-size: 12px;
+        /* font-size: 0.9vw; */
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        margin-bottom: 16px;
+      }
+
+      .icon-container {
+        display: inline-block;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        width: 40px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+      }
+
+      .link-learn-more {
+        /* color: #3B4F9F; */
+        font-family: Poppins;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        text-decoration: none;
+      }
+
+      .wrapper-custom {
+        /* background: #1B1D1F; */
+        padding-left: 10vw;
+        padding-right: 10vw;
+      }
+
+      .media-left-icon {
+        width: 40px;
+        height: 40px;
+      }
+
+      .footer-title {
+        /* color: #FFF; */
+        font-family: Poppins;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+      }
+
+      .footer-sub-title {
+        /* color: #C3C4C5; */
+        font-family: Poppins;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+      }
+
+      .logo-footer {
+        margin-bottom: 24px;
+        margin-top: -20px;
+      }
+
+      .garis {
+        /* background: #C3C4C5; */
+        height: 0.2px;
+      }
+      .img-header {
+        object-fit: contain;
+      }
+      .underdev {
+        font-family: "Public Sans";
+        font-size: 64px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+      }
+      .underdevsub {
+        font-family: "Public Sans";
+        font-size: 26px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    </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>
+        <button type="button" class="btn btn-lg btn-primary btn-pill">
+          <span class="title">Login</span>
+        </button>
+      </nav>
+      <!-- Navbar End -->
+      <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!"
+        </div>
+        <div>
+          <img
+            src="../assets/asset-corporate-portal/media/under_development/under_development.png"
+            class="d-inline-block align-top"
+            alt="Your Brand"
+          />
+        </div>
+      </div>
+      <div>
+        <!-- jumbotron START -->
+        <!-- <div class="jumbotron jumbotron-lp d-none d-lg-block"> -->
+        <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
+                    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 class="col-md-4 d-flex justify-content-md-end">
+                <div
+                  style="
+                    flex: 2;
+                    margin: 10px;
+                    display: flex;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    src="../assets/asset-corporate-portal/media/landingpage/jumbotron_left.png"
+                    class="img-fluid img-header"
+                    alt="Your Brand"
+                    style="width: 100%; height: 100%;"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- jumbotron END -->
+
+        <!-- Our Medical Service START -->
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 text-left">
+              <h2 class="title-section text-black">Our Medical Services</h2>
+              <p class="sub-title-section text-black">
+                Discover excellence in healthcare at Our Medical Services. From
+                diagnosis to treatment, our dedicated team provides personalized
+                care for your well-being.
+              </p>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <div class="card custom-card-lp">
+                <div class="card-body">
+                  <div class="icon-container bg-primary-transparent">
+                    <span
+                      class="iconify text-primary w-20 h-20"
+                      data-icon="uil:clinic-medical"
+                    ></span>
+                  </div>
+                  <h5 class="card-title title-fs-20">In House Clinic</h5>
+                  <p class="card-text sub-title-fs-12">
+                    Maintaining health in the workplace by carrying out
+                    promotional, preventive, curative and rehabilitative
+                    programs.
+                  </p>
+                  <a href="#" class="link-learn-more text-primary"
+                    >Learn More
+                    <span
+                      class="iconify text-primary w-20 h-20"
+                      data-icon="eva:arrow-forward-outline"
+                    ></span>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-md-4">
+              <div class="card custom-card-lp">
+                <div class="card-body">
+                  <div class="icon-container bg-primary-transparent">
+                    <span
+                      class="iconify text-primary w-20 h-20"
+                      data-icon="healthicons:clinical-a-outline"
+                    ></span>
+                  </div>
+                  <h5 class="card-title title-fs-20">Laboratorium Test</h5>
+                  <p class="card-text sub-title-fs-12">
+                    Maintaining health in the workplace by carrying out
+                    promotional, preventive, curative and rehabilitative
+                    programs.
+                  </p>
+                  <a href="#" class="link-learn-more text-primary"
+                    >Learn More
+                    <span
+                      class="iconify text-primary w-20 h-20"
+                      data-icon="eva:arrow-forward-outline"
+                    ></span>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-md-4">
+              <div class="card custom-card-lp">
+                <div class="card-body">
+                  <div class="icon-container bg-primary-transparent">
+                    <span
+                      class="iconify text-primary w-20 h-20"
+                      data-icon="jam:medical"
+                    ></span>
+                  </div>
+                  <h5 class="card-title title-fs-20">Medical Check Up</h5>
+                  <p class="card-text sub-title-fs-12">
+                    Maintaining health in the workplace by carrying out
+                    promotional, preventive, curative and rehabilitative
+                    programs.
+                  </p>
+                  <a href="#" class="link-learn-more text-primary"
+                    >Learn More
+                    <span
+                      class="iconify text-primary w-20 h-20"
+                      data-icon="eva:arrow-forward-outline"
+                    ></span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Our Medical Service END -->
+
+        <!-- Why Westerindo START  belum fix di ukuran < 1400 -->
+        <div class="container mt-5">
+          <div class="row">
+            <div class="col-md-12 col-lg-12 text-left">
+              <h2 class="title-section text-black">Why Westerindo</h2>
+              <p class="sub-title-section text-black">
+                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.
+              </p>
+            </div>
+          </div>
+          <div class="row mt-5">
+            <div class="col-md-6">
+              <img
+                src="../assets/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">
+              <!-- 1 -->
+              <div class="row flex-grow-1">
+                <div class="media">
+                  <div class="media-left">
+                    <span
+                      class="iconify text-primary media-left-icon"
+                      data-icon="mingcute:certificate-line"
+                    ></span>
+                  </div>
+                  <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">ISO Certificate</h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                      Westerindo Clinical Laboratory has obtained ISO 15189:2009
+                      (ISO 15189:2007) Accreditation from the National
+                      Accreditation Committee (KAN) and the Health Laboratory
+                      Accreditation Commission (KALK).
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 2 -->
+              <div class="row flex-grow-1">
+                <div class="media">
+                  <div class="media-left">
+                    <span
+                      class="iconify text-primary media-left-icon"
+                      data-icon="mingcute:certificate-line"
+                    ></span>
+                  </div>
+                  <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">
+                      Modern Technology
+                    </h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                      Laboratory Information System (LIS) is an information
+                      system in which laboratory equipment and diagnostic
+                      support have been integrated automatically so that
+                      examination results can be immediately filled in in
+                      employee data. This eliminates the possibility of human
+                      error.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 3 -->
+              <div class="row flex-grow-1">
+                <div class="media">
+                  <div class="media-left">
+                    <span
+                      class="iconify media-left-icon"
+                      data-icon="mingcute:certificate-line"
+                    ></span>
+                  </div>
+                  <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">
+                      Good Quality Facilities
+                    </h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                      The laboratory and medical support equipment used at the
+                      Westerindo Clinical Laboratory is international scale for
+                      precise, fast and accurate results. Lab and medical
+                      equipment certificates are periodically renewed according
+                      to standards.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 4 -->
+              <div class="row flex-grow-1">
+                <div class="media">
+                  <div class="media-left">
+                    <span
+                      class="iconify media-left-icon"
+                      data-icon="mingcute:certificate-line"
+                    ></span>
+                  </div>
+                  <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">
+                      Professional Service
+                    </h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                      Westerindo Clinical Laboratory is committed to providing
+                      professional and excellent service. Therefore, all staff
+                      and doctors at the Westerindo Clinical Laboratory have
+                      competency certification according to their field.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 5 -->
+              <div class="row">
+                <div class="media">
+                  <div class="media-left">
+                    <span
+                      class="iconify media-left-icon"
+                      data-icon="mingcute:certificate-line"
+                    ></span>
+                  </div>
+                  <div class="media-body">
+                    <h4 class="title-fs-20 text-black ml-4">Experienced</h4>
+                    <p class="sub-title-fs-12 text-black ml-4">
+                      Westerindo Clinical Laboratory is very experienced in
+                      carrying out Medical Check Ups both onsite and insite, in
+                      all corners of Indonesia. Serving various kinds of
+                      companies, from oil and gas companies, automotive,
+                      manufacturing, offices, and others.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Why Westerindo END -->
+
+        <!-- Promotion START -->
+        <div class="container mt-4">
+          <div class="row">
+            <div class="col-md-12 text-left">
+              <h2 class="title-section text-black">Promotions</h2>
+              <p class="sub-title-section text-black">
+                Seize This Opportunity to Enhance Your Health
+              </p>
+            </div>
+          </div>
+
+          <div class="row mt-4 mb-2">
+            <div class="col-md-4 mt-2">
+              <img
+                src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
+                class="img-fluid"
+                alt="Your Brand"
+              />
+            </div>
+            <div class="col-md-4 mt-2">
+              <img
+                src="../assets/asset-corporate-portal/media/landingpage/promotion_2.png"
+                class="img-fluid"
+                alt="Your Brand"
+              />
+            </div>
+            <div class="col-md-4 mt-2">
+              <img
+                src="../assets/asset-corporate-portal/media/landingpage/promotion_3.png"
+                class="img-fluid"
+                alt="Your Brand"
+              />
+            </div>
+          </div>
+        </div>
+        <!-- Promotion END -->
+      </div>
+
+      <!-- footer START -->
+      <footer class="wrapper-custom bg-black pb-25 pt-25">
+        <div class="row mb-5">
+          <div class="col-md-12 col-lg">
+            <img
+              src="asset-corporate-portal/media/landingpage/logo.png"
+              class="logo-footer"
+              width="126"
+              height="40"
+              alt="Your Brand"
+            />
+
+            <div class="text-white d-flex flex-row mb-3">
+              <!-- style="display: flex; flex-direction: row; color: white;align-items: start; margin-bottom: 24px;" -->
+              <div class="mr-3 mt-1">
+                <i
+                  class="fas fa-map-marker-alt marker footer-icon text-warning"
+                ></i>
+              </div>
+              <div class="flex-grow-1">
+                <p class="footer-sub-title text-grey">
+                  Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota
+                  Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170
+                </p>
+              </div>
+            </div>
+
+            <div class="d-flex flex-row">
+              <div class="mr-3 mt-1">
+                <i class="fas fa-phone footer-icon text-warning"></i>
+              </div>
+              <div class="flex-grow-1">
+                <p class="footer-sub-title text-grey">021-7392345</p>
+                <p class="footer-sub-title text-grey">021-2702525</p>
+                <p class="footer-sub-title text-grey">021-7255080</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md col-lg">
+            <h4 class="footer-title text-white mb-3">Dashboard</h4>
+            <p class="footer-sub-title text-grey">
+              Employee Medical Health Analytic Clinic Admission
+            </p>
+          </div>
+          <div class="col-md col-lg">
+            <h4 class="footer-title text-white">Benefit</h4>
+          </div>
+          <div class="col-md col-lg">
+            <h4 class="footer-title text-white">Finance & Claims</h4>
+          </div>
+          <div class="col-md col-lg">
+            <h4 class="footer-title text-white">Membership</h4>
+          </div>
+        </div>
+
+        <div class="garis bg-grey"></div>
+        <div class="row mt-4">
+          <div class="col-md-6">
+            <p class="footer-sub-title text-grey">
+              © Copyright 2024. Organized PT SADHANA ABIYASA SAMPOERNA (Privacy
+              Policy)
+            </p>
+          </div>
+          <div class="col-md-6 text-right">
+            <p class="footer-icons">
+              <a href="#" class="mr-3"><i class="fab fa-whatsapp"></i></a>
+              <a href="#" class="mr-3"><i class="fab fa-facebook"></i></a>
+              <a href="#"><i class="fab fa-instagram"></i></a>
+            </p>
+          </div>
+        </div>
+      </footer>
+      <!-- footer END -->
+    </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>
--- a/assets/andy/usergroup.html
+++ b/assets/andy/usergroup.html
@@ -0,0 +1,336 @@
+<!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>Company Portal | { title }</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"
+    />
+  </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="p-10 bg-white">
+      <table class="table table-hover table-borderless">
+        <thead>
+          <tr class="rounded-lg bg-header-table">
+            <th scope="col" width="20%">KODE</th>
+            <th scope="col" width="25%">USERGROUP</th>
+            <th scope="col" width="10%">AKSI</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>001</td>
+            <td>Admin</td>
+            <td>
+              <div class="row px-5 d-flex justify-content-around">
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                >
+                  Hapus
+                </button>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>002</td>
+            <td>Tes</td>
+            <td>
+              <div class="row px-5 d-flex justify-content-around">
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                  data-toggle="modal"
+                  data-target="#exampleModal"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                  data-toggle="modal"
+                  data-target="#exampleModal2"
+                >
+                  Hapus
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div></div>
+    <!-- Button trigger modal -->
+    <button
+      type="button"
+      class="btn btn-primary"
+      data-toggle="modal"
+      data-target="#exampleModal"
+    >
+      Launch demo modal
+    </button>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      aria-labelledby="exampleModalLabel"
+      data-backdrop="static"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-lg">
+          <div class="modal-header border-bottom-0">
+            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body border-bottom-0">
+            <p>Apakah anda yakin menghapus user group berikut ?</p>
+            <div class="card rounded-lg">
+              <div class="card-body d-flex flex-row">
+                <div class="d-flex flex-column flex-fill">
+                  <div class="mb-3 text-disabled font-weight-bold">asas</div>
+                  <div class="mb-3 text-disabled">b</div>
+                </div>
+                <div class="d-flex flex-column flex-fill">
+                  <div class="mb-3 font-weight-bold">
+                    d daf;k sa;d sa;ldk s;adj;sads[oai sadksa[ d[
+                  </div>
+                  <div class="mb-3">c</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer border-top-0">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="modal fade modal-list-print"
+      id="exampleModalSizeLg"
+      tabindex="-1"
+      role="dialog"
+      data-backdrop="static"
+      aria-labelledby="exampleModalSizeLg"
+      aria-hidden="true"
+    ></div>
+    <!-- Modal-->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      role="dialog"
+      data-backdrop="static"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog" role="document">
+        <div class="modal-content rounded-lg">
+          <div class="modal-header border-bottom-0">
+            <h6 class="modal-title text-black" id="exampleModalLabel">
+              Modal Title dsf
+            </h6>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <i aria-hidden="true" class="ki ki-close"></i>
+            </button>
+          </div>
+          <div class="modal-body border-bottom-0">
+            ...
+          </div>
+          <div class="modal-footer border-top-0">
+            <button
+              type="button"
+              class="btn btn-outline-secondary font-weight-bold rounded-lg"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button
+              type="button"
+              class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+            >
+              Save changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="modal fade"
+      id="exampleModal2"
+      tabindex="-1"
+      role="dialog"
+      data-backdrop="static"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog" role="document">
+        <div class="modal-content rounded-lg bg-danger">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <i aria-hidden="true" class="ki ki-close"></i>
+            </button>
+          </div>
+          <div class="modal-body">
+            ...
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-light-primary font-weight-bold"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button type="button" class="btn btn-primary font-weight-bold">
+              Save changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--end::Main-->
+    <script src="asset-corporate-portal/js/ktappsetting.js"></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>
+    <script>
+      function ShowLoading() {
+        document
+          .getElementById("demo")
+          .setAttribute("style", "display:block !important;");
+        document
+          .getElementById("a")
+          .setAttribute("style", "display:none !important;");
+      }
+      function ShowForm() {
+        document
+          .getElementById("demo")
+          .setAttribute("style", "display:none !important;");
+        document
+          .getElementById("a")
+          .setAttribute("style", "display:block !important;;");
+      }
+    </script>
+    <!--end::Global Theme Bundle-->
+
+    <!--end::Page Scripts-->
+  </body>
+  <!--end::Body-->
+</html>
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
--- a/assets/asset-corporate-portal/js/ktappsetting.js
+++ b/assets/asset-corporate-portal/js/ktappsetting.js
@@ -0,0 +1,58 @@
+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",
+};
--- a/assets/asset-corporate-portal/media/under_development/under_development.png
+++ b/assets/asset-corporate-portal/media/under_development/under_development.png
--- a/assets/assets/css/googlefont/poppins.css
+++ b/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;
+  }
--- a/assets/assets/css/googlefont/publicsans.css
+++ b/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;
+  }
--- a/assets/assets/css/googlefont/roboto.css
+++ b/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;
+  }
--- a/assets/assets/css/slick/slick-theme.css
+++ b/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 */
--- a/assets/assets/css/slick/slick.css
+++ b/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;
+}
--- a/assets/assets/js/htmx/htmx.min.js
+++ b/assets/assets/js/htmx/htmx.min.js
--- a/assets/assets/js/iconify/iconify.min.js
+++ b/assets/assets/js/iconify/iconify.min.js
--- a/assets/assets/js/slick/slick.min.js
+++ b/assets/assets/js/slick/slick.min.js
--- a/assets/hanan/employee-medical-analytic.html
+++ b/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>
--- a/assets/library/slick-1.8.1/.gitignore
+++ b/assets/library/slick-1.8.1/.gitignore
@@ -0,0 +1,2 @@
+.sass-cache
+node_modules
--- a/assets/library/slick-1.8.1/CONTRIBUTING.markdown
+++ b/assets/library/slick-1.8.1/CONTRIBUTING.markdown
@@ -0,0 +1,35 @@
+## Submitting issues
+
+### Test case required
+
+**All bug reports and problem issues require a jsFiddle**.   
+[Please fork this JSFiddle as a baseline](http://jsfiddle.net/simeydotme/fmo50w7n/).
+
+ A test case clearly demonstrates the bug or issue.
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
+ Assets are not minified (we cannot debug .min.js files).
+ A link to your production site is **not** a reduced test case.
+
+Providing a test case is the best way to get your issue addressed. Without a test case; your issue may be closed.  
+You must provide a clear and simple way to reproduce the issue with the provided fiddle.
+
+## Support
+
+Although Slick is designed to be super easy to use, there's always things that can go wrong, especially when interacting with other plugins and complicated websites. If you are **having problems getting Slick to work**, or can't figure something out, **this repository**'s issues section **is not the place to ask about it**.  
+
+I have set up a subreddit for Slick discussion at [reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/).  
+And a gitter chatroom here: [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick).  
+And finally you can ask the world for help, and find out if anyone else has your problem at [stackoverflow](http://stackoverflow.com/search?q=slick+carousel).
+
+Please use these forums as an area to discuss Slick and any issues you may have.
+
+## Feature Requests
+
+If you would like to request or propose a feature, please do so in the the Slick subreddit or gitter chat:  
+[reddit.com/r/slickcarousel](http://www.reddit.com/r/slickcarousel/) / [gitter.im/kenwheeler/slick](https://gitter.im/kenwheeler/slick).
+
+## Pull requests
+
+**Contributions are welcome**! That said, please *be prepared to edit* your pull request at request, and provide a jsFiddle of your fork working interoperably with every "mode" that Slick supports, and with varying numbers of slides, slidesToShow & slidesToScroll. Failure to do so will result in your pull request being closed.
+
+*Please note that while Slick is open source, this is still my baby, and by submitting a pull request you are authorizing me to edit or modify it in any way shape or form. You will be listed in Github as a contributor, but I have and will continue to steer the direction of this project.*
--- a/assets/library/slick-1.8.1/ISSUE_TEMPLATE.md
+++ b/assets/library/slick-1.8.1/ISSUE_TEMPLATE.md
@@ -0,0 +1,50 @@
+
+> short description of the bug / issue, provide more detail below.
+
+====================================================================
+
+
+###### `[  paste your jsfiddle link here  ]`  
+
+use this jsfiddle to reproduce your bug: 
+http://jsfiddle.net/simeydotme/fmo50w7n/ 
+we will likely close your issue without it.
+
+
+====================================================================
+
+
+#### Steps to reproduce the problem
+
+1. ...  
+2. ...  
+
+
+====================================================================
+
+
+#### What is the expected behaviour?
+
+...  
+
+
+====================================================================
+
+
+#### What is observed behaviour?
+
+...  
+
+
+====================================================================
+
+
+#### More Details
+
+- Which browsers/versions does it happen on?
+- Which jQuery/Slick version are you using?
+- Did this work before?
+
+
+
+
--- a/assets/library/slick-1.8.1/LICENSE
+++ b/assets/library/slick-1.8.1/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2016
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/assets/library/slick-1.8.1/Makefile
+++ b/assets/library/slick-1.8.1/Makefile
@@ -0,0 +1,8 @@
+
+build: components slick.js slick.css
+  @component build --dev
+
+components: component.json
+  @component install --dev
+
+.PHONY: clean
--- a/assets/library/slick-1.8.1/README.markdown
+++ b/assets/library/slick-1.8.1/README.markdown
@@ -0,0 +1,292 @@
+slick
+-------
+
+[1]: <https://github.com/kenwheeler/slick>
+
+_the last carousel you'll ever need_
+
+#### Demo
+
+[http://kenwheeler.github.io/slick](http://kenwheeler.github.io/slick/)
+
+#### CDN
+
+To start working with Slick right away, there's a couple of CDN choices availabile
+to serve the files as close, and fast as possible to your users:
+
+- https://cdnjs.com/libraries/slick-carousel
+- https://www.jsdelivr.com/projects/jquery.slick
+
+##### Example using jsDelivr
+
+Just add a link to the css file in your `<head>`:
+
+```html
+<!-- Add the slick-theme.css if you want default styling -->
+<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
+<!-- Add the slick-theme.css if you want default styling -->
+<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>
+```
+
+Then, before your closing ```<body>``` tag add:
+
+```html
+<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
+```
+
+#### Package Managers
+
+```sh
+# Bower
+bower install --save slick-carousel
+
+# NPM
+npm install slick-carousel
+```
+
+#### Contributing
+
+PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.
+
+### Data Attribute Settings
+
+In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
+
+Example:
+
+```html
+<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
+  <div><h3>1</h3></div>
+  <div><h3>2</h3></div>
+  <div><h3>3</h3></div>
+  <div><h3>4</h3></div>
+  <div><h3>5</h3></div>
+  <div><h3>6</h3></div>
+</div>
+```
+
+### Settings
+
+Option | Type | Default | Description
+------ | ---- | ------- | -----------
+accessibility | boolean | true | Enables tabbing and arrow key navigation.  Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change. For full a11y compliance enable focusOnChange in addition to this.
+adaptiveHeight | boolean | false | Adapts slider height to the current slide
+appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
+appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
+arrows | boolean | true | Enable Next/Prev arrows
+asNavFor | string | $(element) | Enables syncing of multiple sliders
+autoplay | boolean | false | Enables auto play of slides
+autoplaySpeed | int  | 3000 | Auto play change interval
+centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
+centerPadding | string | '50px' | Side padding when in center mode. (px or %)
+cssEase | string |  'ease' | CSS3 easing
+customPaging | function | n/a | Custom paging templates. See source for use example.
+dots | boolean | false | Current slide indicator dots
+dotsClass | string | 'slick-dots' | Class for slide indicator dots container
+draggable | boolean | true | Enables desktop dragging
+easing | string |  'linear' | animate() fallback easing
+edgeFriction | integer | 0.15 | Resistance when swiping edges of non-infinite carousels
+fade | boolean | false | Enables fade
+focusOnSelect | boolean | false | Enable focus on selected element (click)
+focusOnChange | boolean | false | Puts focus on slide after change
+infinite | boolean | true | Infinite looping
+initialSlide | integer | 0 | Slide to start on
+lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique. 'ondemand' will load the image as soon as you slide to it, 'progressive' loads one image after the other when the page loads.
+mobileFirst | boolean | false | Responsive settings use mobile first calculation
+nextArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-next">Next</button>` | Allows you to select a node or customize the HTML for the "Next" arrow.
+pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered
+pauseOnFocus | boolean | true | Pauses autoplay when slider is focussed
+pauseOnHover | boolean | true | Pauses autoplay on hover
+prevArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `<button type="button" class="slick-prev">Previous</button>` | Allows you to select a node or customize the HTML for the "Previous" arrow.
+respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two).
+responsive | array | null | Array of objects [containing breakpoints and settings objects (see example)](#responsive-option-example). Enables settings at given `breakpoint`. Set `settings` to "unslick" instead of an object to disable slick at a given breakpoint.
+rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
+rtl | boolean | false | Change the slider's direction to become right-to-left
+slide | string | '' | Slide element query
+slidesPerRow | int | 1 | With grid mode initialized via the rows option, this sets how many slides are in each grid row.
+slidesToScroll | int | 1 | # of slides to scroll at a time
+slidesToShow | int | 1 | # of slides to show at a time
+speed | int | 300 | Transition speed
+swipe | boolean | true | Enables touch swipe
+swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll
+touchMove | boolean | true | Enables slide moving with touch
+touchThreshold | int | 5 | To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
+useCSS | boolean | true | Enable/Disable CSS Transitions
+useTransform | boolean | true | Enable/Disable CSS Transforms
+variableWidth | boolean | false | Disables automatic slide width calculation
+vertical | boolean | false | Vertical slide direction
+verticalSwiping | boolean | false | Changes swipe direction to vertical
+waitForAnimate | boolean | true | Ignores requests to advance the slide while animating
+zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower
+
+##### Responsive Option Example
+The responsive option, and value, is quite unique and powerful.
+You can use it like so:
+
+```javascript
+$(".slider").slick({
+
+  // normal options...
+  infinite: false,
+
+  // the magic
+  responsive: [{
+
+      breakpoint: 1024,
+      settings: {
+        slidesToShow: 3,
+        infinite: true
+      }
+
+    }, {
+
+      breakpoint: 600,
+      settings: {
+        slidesToShow: 2,
+        dots: true
+      }
+
+    }, {
+
+      breakpoint: 300,
+      settings: "unslick" // destroys slick
+
+    }]
+});
+```
+
+
+
+
+### Events
+
+In slick 1.4, callback methods were deprecated and replaced with events. Use them before the initialization of slick as shown below:
+
+```javascript
+// On swipe event
+$('.your-element').on('swipe', function(event, slick, direction){
+  console.log(direction);
+  // left
+});
+
+// On edge hit
+$('.your-element').on('edge', function(event, slick, direction){
+  console.log('edge was hit')
+});
+
+// On before slide change
+$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
+  console.log(nextSlide);
+});
+```
+
+Event | Params | Description
+------ | -------- | -----------
+afterChange | event, slick, currentSlide | After slide change callback
+beforeChange | event, slick, currentSlide, nextSlide | Before slide change callback
+breakpoint | event, slick, breakpoint | Fires after a breakpoint is hit
+destroy | event, slick | When slider is destroyed, or unslicked.
+edge | event, slick, direction | Fires when an edge is overscrolled in non-infinite mode.
+init | event, slick | When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.
+reInit | event, slick | Every time Slick (re-)initializes callback
+setPosition | event, slick | Every time Slick recalculates position
+swipe | event, slick, direction | Fires after swipe/drag
+lazyLoaded | event, slick, image, imageSource | Fires after image loads lazily
+lazyLoadError | event, slick, image, imageSource | Fires after image fails to load
+
+
+#### Methods
+
+Methods are called on slick instances through the slick method itself in version 1.4, see below:
+
+```javascript
+// Add a slide
+$('.your-element').slick('slickAdd',"<div></div>");
+
+// Get the current slide
+var currentSlide = $('.your-element').slick('slickCurrentSlide');
+```
+
+This new syntax allows you to call any internal slick method as well:
+
+```javascript
+// Manually refresh positioning of slick
+$('.your-element').slick('setPosition');
+```
+
+
+Method | Argument | Description
+------ | -------- | -----------
+`slick` | options : object | Initializes Slick
+`unslick` |  | Destroys Slick
+`slickNext` |  |  Triggers next slide
+`slickPrev` | | Triggers previous slide
+`slickPause` | | Pause Autoplay
+`slickPlay` | | Start Autoplay (_will also set `autoplay` option to `true`_)
+`slickGoTo` | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true
+`slickCurrentSlide` |  |  Returns the current slide index
+`slickAdd` | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
+`slickRemove` | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
+`slickFilter` | filter : selector or function | Filters slides using jQuery .filter syntax
+`slickUnfilter` | | Removes applied filter
+`slickGetOption` | option : string(option name) | Gets an option value.
+`slickSetOption` | change an option, `refresh` is always `boolean` and will update UI changes...
+ | `option, value, refresh` | change a [single `option`](https://github.com/kenwheeler/slick#settings) to given `value`; `refresh` is optional.
+ | `"responsive", [{ breakpoint: n, settings: {} }, ... ], refresh` | change or add [whole sets of responsive options](#responsive-option-example)
+ | `{ option: value, option: value, ... }, refresh` | change  [multiple `option`s](https://github.com/kenwheeler/slick#settings) to corresponding `value`s.
+
+
+#### Example
+
+Initialize with:
+
+```javascript
+$(element).slick({
+  dots: true,
+  speed: 500
+});
+ ```
+
+Change the speed with:
+
+```javascript
+$(element).slick('slickSetOption', 'speed', 5000, true);
+```
+
+Destroy with:
+
+```javascript
+$(element).slick('unslick');
+```
+
+
+#### Sass Variables
+
+Variable | Type | Default | Description
+------ | ---- | ------- | -----------
+$slick-font-path | string | "./fonts/" | Directory path for the slick icon font
+$slick-font-family | string | "slick" | Font-family for slick icon font
+$slick-loader-path | string | "./" | Directory path for the loader image
+$slick-arrow-color | color | white | Color of the left/right arrow icons
+$slick-dot-color | color | black | Color of the navigation dots
+$slick-dot-color-active | color | $slick-dot-color | Color of the active navigation dot
+$slick-prev-character | string | '\2190' | Unicode character code for the previous arrow icon
+$slick-next-character | string | '\2192' | Unicode character code for the next arrow icon
+$slick-dot-character | string | '\2022' | Unicode character code for the navigation dot icon
+$slick-dot-size | pixels | 6px | Size of the navigation dots
+
+#### Browser support
+
+Slick works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
+
+#### Dependencies
+
+jQuery 1.7
+
+#### License
+
+Copyright (c) 2017 Ken Wheeler
+
+Licensed under the MIT license.
+
+Free as in Bacon.
--- a/assets/library/slick-1.8.1/bower.json
+++ b/assets/library/slick-1.8.1/bower.json
@@ -0,0 +1,32 @@
+{
+    "name": "slick-carousel",
+    "main": [
+        "slick/slick.js",
+        "slick/slick.css",
+        "slick/slick.less",
+        "slick/slick.scss"
+    ],
+    "homepage": "https://github.com/kenwheeler/slick",
+    "authors": [
+        "Ken Wheeler <ken_wheeler@me.com>"
+    ],
+    "description": "the last carousel you'll ever need",
+    "keywords": [
+        "responsive",
+        "carousel",
+        "jquery"
+    ],
+    "license": "MIT",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "bower_components",
+        "test",
+        "tests",
+        "package.json",
+        "index.html"
+    ],
+    "dependencies": {
+        "jquery": ">=1.7"
+    }
+}
--- a/assets/library/slick-1.8.1/component.json
+++ b/assets/library/slick-1.8.1/component.json
@@ -0,0 +1,18 @@
+{
+    "name": "slick",
+    "repo": "kenwheeler/slick",
+    "description": "the last carousel you'll ever need",
+    "version": "1.8.0",
+    "keywords": ["ui", "jquery", "carousel", "responsive", "slider"],
+    "dependencies": {
+        "component/jquery": "*"
+    },
+    "development": {},
+    "scripts": {
+        "slick/slick.js": "slick.js"
+    },
+    "styles": {
+        "slick/slick.css": "slick.css",
+        "slick/slick-theme.css": "slick-theme.css"
+    }
+}
--- a/assets/library/slick-1.8.1/index.html
+++ b/assets/library/slick-1.8.1/index.html
@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Slick Playground</title>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
+  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
+  <style type="text/css">
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+        width: 50%;
+        margin: 100px auto;
+    }
+
+    .slick-slide {
+      margin: 0px 20px;
+    }
+
+    .slick-slide img {
+      width: 100%;
+    }
+
+    .slick-prev:before,
+    .slick-next:before {
+      color: black;
+    }
+
+
+    .slick-slide {
+      transition: all ease-in-out .3s;
+      opacity: .2;
+    }
+    
+    .slick-active {
+      opacity: .5;
+    }
+
+    .slick-current {
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+
+  <section class="vertical-center-4 slider">
+    <div>
+      <img src="http://placehold.it/350x100?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=6">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=7">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=8">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=9">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=10">
+    </div>
+  </section>
+
+  <section class="vertical-center-3 slider">
+    <div>
+      <img src="http://placehold.it/350x100?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=6">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=7">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=8">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=9">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=10">
+    </div>
+  </section>
+
+  <section class="vertical-center-2 slider">
+    <div>
+      <img src="http://placehold.it/350x100?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=6">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=7">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=8">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=9">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=10">
+    </div>
+  </section>
+
+  <section class="vertical-center slider">
+    <div>
+      <img src="http://placehold.it/350x100?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=6">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=7">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=8">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=9">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=10">
+    </div>
+  </section>
+
+  <section class="vertical slider">
+    <div>
+      <img src="http://placehold.it/350x100?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=6">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=7">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=8">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=9">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x100?text=10">
+    </div>
+  </section>
+  <section class="regular slider">
+    <div>
+      <img src="http://placehold.it/350x300?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=6">
+    </div>
+  </section>
+
+  <section class="center slider">
+    <div>
+      <img src="http://placehold.it/350x300?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=6">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=7">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=8">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=9">
+    </div>
+  </section>
+
+  <section class="variable slider">
+    <div>
+      <img src="http://placehold.it/350x300?text=1">
+    </div>
+    <div>
+      <img src="http://placehold.it/200x300?text=2">
+    </div>
+    <div>
+      <img src="http://placehold.it/100x300?text=3">
+    </div>
+    <div>
+      <img src="http://placehold.it/200x300?text=4">
+    </div>
+    <div>
+      <img src="http://placehold.it/350x300?text=5">
+    </div>
+    <div>
+      <img src="http://placehold.it/300x300?text=6">
+    </div>
+  </section>
+
+  <section class="lazy slider" data-sizes="50vw">
+    <div>
+      <img data-lazy="http://placehold.it/350x300?text=1-350w" data-srcset="http://placehold.it/650x300?text=1-650w 650w, http://placehold.it/960x300?text=1-960w 960w" data-sizes="100vw">
+    </div>
+    <div>
+      <img data-lazy="http://placehold.it/350x300?text=2-350w" data-srcset="http://placehold.it/650x300?text=2-650w 650w, http://placehold.it/960x300?text=2-960w 960w" data-sizes="100vw">
+    </div>
+    <div>
+      <img data-lazy="http://placehold.it/350x300?text=3-350w"  data-srcset="http://placehold.it/650x300?text=3-650w 650w, http://placehold.it/960x300?text=3-960w 960w" data-sizes="100vw">
+    </div>
+    <div>
+      <img data-lazy="http://placehold.it/350x300?text=4-350w"  data-srcset="http://placehold.it/650x300?text=4-650w 650w, http://placehold.it/960x300?text=4-960w 960w" data-sizes="100vw">
+    </div>
+    <div>
+      <img data-lazy="http://placehold.it/350x300?text=5-350w"  data-srcset="http://placehold.it/650x300?text=5-650w 650w, http://placehold.it/960x300?text=5-960w 960w" data-sizes="100vw">
+    </div>
+    <div>
+      <!-- this slide should inherit the sizes attr from the parent slider -->
+      <img data-lazy="http://placehold.it/350x300?text=6-350w"  data-srcset="http://placehold.it/650x300?text=6-650w 650w, http://placehold.it/960x300?text=6-960w 960w">
+    </div>
+  </section>
+
+  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
+  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript">
+    $(document).on('ready', function() {
+      $(".vertical-center-4").slick({
+        dots: true,
+        vertical: true,
+        centerMode: true,
+        slidesToShow: 4,
+        slidesToScroll: 2
+      });
+      $(".vertical-center-3").slick({
+        dots: true,
+        vertical: true,
+        centerMode: true,
+        slidesToShow: 3,
+        slidesToScroll: 3
+      });
+      $(".vertical-center-2").slick({
+        dots: true,
+        vertical: true,
+        centerMode: true,
+        slidesToShow: 2,
+        slidesToScroll: 2
+      });
+      $(".vertical-center").slick({
+        dots: true,
+        vertical: true,
+        centerMode: true,
+      });
+      $(".vertical").slick({
+        dots: true,
+        vertical: true,
+        slidesToShow: 3,
+        slidesToScroll: 3
+      });
+      $(".regular").slick({
+        dots: true,
+        infinite: true,
+        slidesToShow: 3,
+        slidesToScroll: 3
+      });
+      $(".center").slick({
+        dots: true,
+        infinite: true,
+        centerMode: true,
+        slidesToShow: 5,
+        slidesToScroll: 3
+      });
+      $(".variable").slick({
+        dots: true,
+        infinite: true,
+        variableWidth: true
+      });
+      $(".lazy").slick({
+        lazyLoad: 'ondemand', // ondemand progressive anticipated
+        infinite: true
+      });
+    });
+</script>
+
+</body>
+</html>
--- a/assets/library/slick-1.8.1/package.json
+++ b/assets/library/slick-1.8.1/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "slick-carousel",
+  "version": "1.8.1",
+  "description": "the last carousel you'll ever need",
+  "main": "slick/slick.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kenwheeler/slick.git"
+  },
+  "keywords": [
+    "carousel",
+    "slick",
+    "responsive",
+    "js",
+    "slider"
+  ],
+  "author": "Ken Wheeler <ken_wheeler@me.com>",
+  "contributors": [
+    {
+      "name": "ken wheeler",
+      "email": "ken_wheeler@me.com",
+      "url": "http://kenwheeler.github.io/"
+    },
+    {
+      "name": "simon goellner",
+      "email": "simey.me@gmail.com",
+      "url": "http://simey.me"
+    },
+    {
+      "name": "ahmad el-alfy",
+      "email": "ahmadalfy@gmail.com",
+      "url": "http://www.alfy.me"
+    },
+    {
+      "name": "leggomuhgreggo",
+      "email": "gwestneat@gmail.com"
+    },
+    {
+      "name": "ashley mcknight",
+      "email": "ash@sharpteef.net"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kenwheeler/slick/issues"
+  },
+  "peerDependencies": {
+    "jquery": ">=1.8.0"
+  }
+}
--- a/assets/library/slick-1.8.1/slick.jquery.json
+++ b/assets/library/slick-1.8.1/slick.jquery.json
@@ -0,0 +1,34 @@
+{
+    "name": "slick",
+    "title": "slick",
+    "description": "A jQuery responsive touch carousel",
+    "keywords": [
+        "responsive",
+        "slider",
+        "carousel",
+        "touch",
+        "mobile"
+    ],
+    "version": "1.8.0",
+    "author": {
+        "name": "Ken Wheeler",
+        "url": "http://kenwheeler.github.io"
+    },
+    "maintainers": [{
+        "name": "Ken Wheeler",
+        "email": "dubmediagroup@gmail.com",
+        "url": "http://www.dubmediagroup.com"
+    }],
+    "licenses": [{
+        "type": "MIT",
+        "url": "https://github.com/kenwheeler/slick/blob/master/LICENSE"
+    }],
+    "demo": "http://kenwheeler.github.io/slick/",
+    "bugs": "https://github.com/kenwheeler/slick/issues",
+    "homepage": "https://github.com/kenwheeler/slick/",
+    "docs": "https://github.com/kenwheeler/slick/",
+    "download": "https://github.com/kenwheeler/slick/archive/master.zip",
+    "dependencies": {
+        "jquery": ">=1.7"
+    }
+}
--- a/assets/library/slick-1.8.1/slick/ajax-loader.gif
+++ b/assets/library/slick-1.8.1/slick/ajax-loader.gif
--- a/assets/library/slick-1.8.1/slick/config.rb
+++ b/assets/library/slick-1.8.1/slick/config.rb
@@ -0,0 +1,10 @@
+css_dir = "."
+sass_dir = "."
+images_dir = "."
+fonts_dir = "fonts"
+relative_assets = true
+
+output_style = :compact
+line_comments = false
+
+preferred_syntax = :scss
--- a/assets/library/slick-1.8.1/slick/fonts/slick.eot
+++ b/assets/library/slick-1.8.1/slick/fonts/slick.eot
--- a/assets/library/slick-1.8.1/slick/fonts/slick.svg
+++ b/assets/library/slick-1.8.1/slick/fonts/slick.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="slick" horiz-adv-x="512">
+<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
+</font></defs></svg>
--- a/assets/library/slick-1.8.1/slick/fonts/slick.ttf
+++ b/assets/library/slick-1.8.1/slick/fonts/slick.ttf
--- a/assets/library/slick-1.8.1/slick/fonts/slick.woff
+++ b/assets/library/slick-1.8.1/slick/fonts/slick.woff
--- a/assets/library/slick-1.8.1/slick/slick-theme.css
+++ b/assets/library/slick-1.8.1/slick/slick-theme.css
@@ -0,0 +1,204 @@
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('./ajax-loader.gif') center center no-repeat;
+}
+
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    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');
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    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: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -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: '←';
+}
+
+/* Dots */
+.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: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus: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: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}
--- a/assets/library/slick-1.8.1/slick/slick-theme.less
+++ b/assets/library/slick-1.8.1/slick/slick-theme.less
@@ -0,0 +1,168 @@
+@charset "UTF-8";
+
+// Default Variables
+
+@slick-font-path: "./fonts/";
+@slick-font-family: "slick";
+@slick-loader-path: "./";
+@slick-arrow-color: white;
+@slick-dot-color: black;
+@slick-dot-color-active: @slick-dot-color;
+@slick-prev-character: "←";
+@slick-next-character: "→";
+@slick-dot-character: "•";
+@slick-dot-size: 6px;
+@slick-opacity-default: 0.75;
+@slick-opacity-on-hover: 1;
+@slick-opacity-not-active: 0.25;
+
+/* Slider */
+.slick-loading .slick-list{
+    background: #fff url('@{slick-loader-path}ajax-loader.gif') center center no-repeat;
+}
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: @slick-opacity-on-hover;
+        }
+    }
+    &.slick-disabled:before {
+        opacity: @slick-opacity-not-active;
+    }
+}
+
+.slick-prev:before, .slick-next:before {
+    font-family: @slick-font-family;
+    font-size: 20px;
+    line-height: 1;
+    color: @slick-arrow-color;
+    opacity: @slick-opacity-default;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    
+    & when ( @slick-font-family = 'slick' ) {
+        /* Icons */
+        @font-face {
+            font-family: 'slick';
+            font-weight: normal;
+            font-style: normal;
+            src: url('@{slick-font-path}slick.eot');
+            src: url('@{slick-font-path}slick.eot?#iefix') format('embedded-opentype'), url('@{slick-font-path}slick.woff') format('woff'), url('@{slick-font-path}slick.ttf') format('truetype'), url('@{slick-font-path}slick.svg#slick') format('svg');
+        }
+    }
+}
+
+.slick-prev {
+    left: -25px;
+    [dir="rtl"] & {
+        left: auto;
+        right: -25px;
+    }
+    &:before {
+        content: @slick-prev-character;
+        [dir="rtl"] & {
+            content: @slick-next-character;
+        }
+    }
+}
+
+.slick-next {
+    right: -25px;
+    [dir="rtl"] & {
+        left: -25px;
+        right: auto;
+    }
+    &:before {
+        content: @slick-next-character;
+        [dir="rtl"] & {
+            content: @slick-prev-character;
+        }
+    }
+}
+
+/* Dots */
+
+.slick-dotted .slick-slider {
+    margin-bottom: 30px;
+}
+
+.slick-dots {
+    position: absolute;
+    bottom: -25px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    li {
+        position: relative;
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        margin: 0 5px;
+        padding: 0;
+        cursor: pointer;
+        button {
+            border: 0;
+            background: transparent;
+            display: block;
+            height: 20px;
+            width: 20px;
+            outline: none;
+            line-height: 0px;
+            font-size: 0px;
+            color: transparent;
+            padding: 5px;
+            cursor: pointer;
+            &:hover, &:focus {
+                outline: none;
+                &:before {
+                    opacity: @slick-opacity-on-hover;
+                }
+            }
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: @slick-dot-character;
+                width: 20px;
+                height: 20px;
+                font-family: @slick-font-family;
+                font-size: @slick-dot-size;
+                line-height: 20px;
+                text-align: center;
+                color: @slick-dot-color;
+                opacity: @slick-opacity-not-active;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+        }
+        &.slick-active button:before {
+            color: @slick-dot-color-active;
+            opacity: @slick-opacity-default;
+        }
+    }
+}
--- a/assets/library/slick-1.8.1/slick/slick-theme.scss
+++ b/assets/library/slick-1.8.1/slick/slick-theme.scss
@@ -0,0 +1,194 @@
+@charset "UTF-8";
+
+// Default Variables
+
+// Slick icon entity codes outputs the following
+// "\2190" outputs ascii character "←"
+// "\2192" outputs ascii character "→"
+// "\2022" outputs ascii character "•"
+
+$slick-font-path: "./fonts/" !default;
+$slick-font-family: "slick" !default;
+$slick-loader-path: "./" !default;
+$slick-arrow-color: white !default;
+$slick-dot-color: black !default;
+$slick-dot-color-active: $slick-dot-color !default;
+$slick-prev-character: "\2190" !default;
+$slick-next-character: "\2192" !default;
+$slick-dot-character: "\2022" !default;
+$slick-dot-size: 6px !default;
+$slick-opacity-default: 0.75 !default;
+$slick-opacity-on-hover: 1 !default;
+$slick-opacity-not-active: 0.25 !default;
+
+@function slick-image-url($url) {
+    @if function-exists(image-url) {
+        @return image-url($url);
+    }
+    @else {
+        @return url($slick-loader-path + $url);
+    }
+}
+
+@function slick-font-url($url) {
+    @if function-exists(font-url) {
+        @return font-url($url);
+    }
+    @else {
+        @return url($slick-font-path + $url);
+    }
+}
+
+/* Slider */
+
+.slick-list {
+    .slick-loading & {
+        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
+    }
+}
+
+/* Icons */
+@if $slick-font-family == "slick" {
+    @font-face {
+        font-family: "slick";
+        src: slick-font-url("slick.eot");
+        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
+        font-weight: normal;
+        font-style: normal;
+    }
+}
+
+/* Arrows */
+
+.slick-prev,
+.slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: $slick-opacity-on-hover;
+        }
+    }
+    &.slick-disabled:before {
+        opacity: $slick-opacity-not-active;
+    }
+    &:before {
+        font-family: $slick-font-family;
+        font-size: 20px;
+        line-height: 1;
+        color: $slick-arrow-color;
+        opacity: $slick-opacity-default;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+.slick-prev {
+    left: -25px;
+    [dir="rtl"] & {
+        left: auto;
+        right: -25px;
+    }
+    &:before {
+        content: $slick-prev-character;
+        [dir="rtl"] & {
+            content: $slick-next-character;
+        }
+    }
+}
+
+.slick-next {
+    right: -25px;
+    [dir="rtl"] & {
+        left: -25px;
+        right: auto;
+    }
+    &:before {
+        content: $slick-next-character;
+        [dir="rtl"] & {
+            content: $slick-prev-character;
+        }
+    }
+}
+
+/* Dots */
+
+.slick-dotted.slick-slider {
+    margin-bottom: 30px;
+}
+
+.slick-dots {
+    position: absolute;
+    bottom: -25px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    li {
+        position: relative;
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        margin: 0 5px;
+        padding: 0;
+        cursor: pointer;
+        button {
+            border: 0;
+            background: transparent;
+            display: block;
+            height: 20px;
+            width: 20px;
+            outline: none;
+            line-height: 0px;
+            font-size: 0px;
+            color: transparent;
+            padding: 5px;
+            cursor: pointer;
+            &:hover, &:focus {
+                outline: none;
+                &:before {
+                    opacity: $slick-opacity-on-hover;
+                }
+            }
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: $slick-dot-character;
+                width: 20px;
+                height: 20px;
+                font-family: $slick-font-family;
+                font-size: $slick-dot-size;
+                line-height: 20px;
+                text-align: center;
+                color: $slick-dot-color;
+                opacity: $slick-opacity-not-active;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+        }
+        &.slick-active button:before {
+            color: $slick-dot-color-active;
+            opacity: $slick-opacity-default;
+        }
+    }
+}
--- a/assets/library/slick-1.8.1/slick/slick.css
+++ b/assets/library/slick-1.8.1/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;
+}
--- a/assets/library/slick-1.8.1/slick/slick.js
+++ b/assets/library/slick-1.8.1/slick/slick.js
--- a/assets/library/slick-1.8.1/slick/slick.less
+++ b/assets/library/slick-1.8.1/slick/slick.less
@@ -0,0 +1,100 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.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;
+    left: 0;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}
--- a/assets/library/slick-1.8.1/slick/slick.min.js
+++ b/assets/library/slick-1.8.1/slick/slick.min.js
--- a/assets/library/slick-1.8.1/slick/slick.scss
+++ b/assets/library/slick-1.8.1/slick/slick.scss
@@ -0,0 +1,100 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.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;
+    left: 0;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}
--- a/assets/mcu/kelainan-global.html
+++ b/assets/mcu/kelainan-global.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<!--
+Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: https://1.envato.market/EA4JP
+Renew Support: https://1.envato.market/EA4JP
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en">
+  <!--begin::Head-->
+
+  <head>
+    <base href="../" />
+    <meta charset="utf-8" />
+    <title>KELAINAN GLOBAL | MCU004</title>
+    <meta name="description" content="Login page example" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!--begin::Fonts-->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
+    />
+    <!--end::Fonts-->
+
+    <!--begin::Page Custom Styles(used by this page)-->
+    <link
+      href="assets/css/pages/login/login-1.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Page Custom Styles-->
+
+    <!--begin::Global Theme Styles(used by all pages)-->
+    <link
+      href="assets/plugins/global/plugins.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/plugins/custom/prismjs/prismjs.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
+    <!--end::Global Theme Styles-->
+
+    <!--begin::Layout Themes(used by all pages)-->
+
+    <link
+      href="assets/css/themes/layout/header/base/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/header/menu/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/brand/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/aside/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Layout Themes-->
+
+    <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
+    <style>
+      #mcu-004 {
+        height: 50%;
+        width: auto;
+      }
+
+      #mcu-005 {
+        height: 40%;
+        width: "100%";
+      }
+    </style>
+  </head>
+  <!--end::Head-->
+
+  <!--begin::Body-->
+
+  <body
+    id="kt_body"
+    class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
+  >
+    <!--begin::Main-->
+    <div class="d-flex flex-column flex-root bg-white">
+      <!-- begin::Navbar -->
+      <div class="d-flex justify-content-center">
+        <h3 class="mb-3">Data Persentase Kelainan Global</h3>
+      </div>
+
+      <div id="mcu-004" class="mt-5"></div>
+      <div id="mcu-005"></div>
+      <!-- end::Navbar -->
+    </div>
+    <!--end::Main-->
+    <script>
+      var HOST_URL =
+        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
+    </script>
+    <!--begin::Global Config(global config for global JS scripts)-->
+    <script>
+      var KTAppSettings = {
+        breakpoints: {
+          sm: 576,
+          md: 768,
+          lg: 992,
+          xl: 1200,
+          xxl: 1400,
+        },
+        colors: {
+          theme: {
+            base: {
+              white: "#ffffff",
+              primary: "#3699FF",
+              secondary: "#E5EAEE",
+              success: "#1BC5BD",
+              info: "#8950FC",
+              warning: "#FFA800",
+              danger: "#F64E60",
+              light: "#E4E6EF",
+              dark: "#181C32",
+            },
+            light: {
+              white: "#ffffff",
+              primary: "#E1F0FF",
+              secondary: "#EBEDF3",
+              success: "#C9F7F5",
+              info: "#EEE5FF",
+              warning: "#FFF4DE",
+              danger: "#FFE2E5",
+              light: "#F3F6F9",
+              dark: "#D6D6E0",
+            },
+            inverse: {
+              white: "#ffffff",
+              primary: "#ffffff",
+              secondary: "#3F4254",
+              success: "#ffffff",
+              info: "#ffffff",
+              warning: "#ffffff",
+              danger: "#ffffff",
+              light: "#464E5F",
+              dark: "#ffffff",
+            },
+          },
+          gray: {
+            "gray-100": "#F3F6F9",
+            "gray-200": "#EBEDF3",
+            "gray-300": "#E4E6EF",
+            "gray-400": "#D1D3E0",
+            "gray-500": "#B5B5C3",
+            "gray-600": "#7E8299",
+            "gray-700": "#5E6278",
+            "gray-800": "#3F4254",
+            "gray-900": "#181C32",
+          },
+        },
+        "font-family": "Poppins",
+      };
+    </script>
+    <!--end::Global Config-->
+    <!--begin::Global Theme Bundle(used by all pages)-->
+    <script src="assets/plugins/global/plugins.bundle.js"></script>
+    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+    <script src="assets/js/scripts.bundle.js"></script>
+    <!--end::Global Theme Bundle-->
+
+    <!--begin::Page Vendors(used by this page)-->
+    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
+    <!--end::Page Vendors-->
+
+    <!--begin::Page Scripts(used by this page)-->
+    <script src="assets/js/pages/widgets.js"></script>
+    <!--end::Page Scripts-->
+    <!-- echartjs.min.js -->
+    <script src="assets/js/echarts-js/echart.min.js"></script>
+    <!-- SCRIPT -->
+    <script type="text/javascript">
+      // Initialize the echarts instance based on the prepared dom
+      var chartMCU004 = echarts.init(document.getElementById("mcu-004"));
+      var optMCU004 = {
+        title: {
+          text: "Kelainan MCU",
+          //   subtext: 'Living Expenses in Shenzhen'
+        },
+        dataset: {
+          source: [
+            ["score", "amount", "product", "percentage"],
+            [200, 447, "Body Mass Index"],
+            [150, 314, "Pemeriksaan Mata"],
+            [125, 314, "Fungsi Lemak"],
+            [100, 254, "Autospirometri"],
+            [90, 200, "Hematologi"],
+            [80, 180, "ECG"],
+            [75, 160, "Hiperuricemia"],
+            [70, 125, "Tekanan Darah"],
+            [60, 118, "Urine Lengkap"],
+            [50, 87, "Fungsi Hati"],
+          ],
+        },
+        grid: {
+          containLabel: true,
+        },
+        xAxis: {
+          name: "amount",
+        },
+        yAxis: {
+          type: "category",
+        },
+        visualMap: {
+          orient: "horizontal",
+          left: "center",
+          min: 10,
+          max: 100,
+          show: false,
+
+          // text: ['High Score', 'Low Score'],
+          // Map the score column to color
+          dimension: 0,
+          inRange: {
+            color: ["#42aaf5", "#00eaf2", "#035bff"],
+          },
+        },
+        series: [
+          {
+            label: {
+              position: "right",
+              show: true,
+              formatter: "{@[3]} %",
+            },
+            type: "bar",
+            encode: {
+              // Map the "amount" column to X axis.
+              x: "amount",
+              // Map the "product" column to Y axis
+              y: "product",
+            },
+          },
+        ],
+      };
+
+      window.addEventListener("resize", function () {
+        chartMCU004.resize();
+      });
+
+      // Display the chart using the configuration items and data just specified.
+      chartMCU004.setOption(optMCU004);
+
+      //MCU005
+      // Initialize the echarts instance based on the prepared dom
+      var chartMCU005 = echarts.init(document.getElementById("mcu-005"));
+      var optMCU005 = {
+        title: {
+          text: "Kelainan Fisik",
+          //   subtext: 'Living Expenses in Shenzhen'
+        },
+        dataset: {
+          source: [
+            ["score", "amount", "product", "percentage"],
+            [200, 400, "Obesitas Stage 1"],
+            [150, 300, "Pre Hipertensi"],
+            [133, 250, "Kelainan Refraksi"],
+            [125, 180, "Overweight"],
+            [100, 125, "Obesitas Stage 2"],
+            [80, 100, "Hipertensi grade 1"],
+            [70, 80, "Kel. Refrakti terkoreksi"],
+            [60, 70, "Kel. Refrakti tidak terkoreksi"],
+            [55, 55, "Hipertensi grade 2"],
+          ],
+        },
+        grid: {
+          containLabel: true,
+        },
+        xAxis: {
+          name: "amount",
+        },
+        yAxis: {
+          type: "category",
+        },
+        visualMap: {
+          orient: "horizontal",
+          left: "center",
+          min: 10,
+          max: 100,
+          show: false,
+          // text: ['High Score', 'Low Score'],
+          // Map the score column to color
+          dimension: 0,
+          inRange: {
+            color: ["#42aaf5", "#00eaf2", "#035bff"],
+          },
+        },
+        series: [
+          {
+            label: {
+              position: "right",
+              show: true,
+              formatter: "{@[3]} %",
+            },
+            type: "bar",
+            encode: {
+              // Map the "amount" column to X axis.
+              x: "amount",
+              // Map the "product" column to Y axis
+              y: "product",
+            },
+          },
+        ],
+      };
+
+      window.addEventListener("resize", function () {
+        chartMCU005.resize();
+      });
+
+      // Display the chart using the configuration items and data just specified.
+      chartMCU005.setOption(optMCU005);
+    </script>
+    <!-- SCRIPT -->
+  </body>
+  <!--end::Body-->
+</html>
--- a/assets/mcu/kelainan-global.php
+++ b/assets/mcu/kelainan-global.php
@@ -1,301 +0,0 @@
-<!DOCTYPE html>
-<!--
-Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
-Author: KeenThemes
-Website: http://www.keenthemes.com/
-Contact: support@keenthemes.com
-Follow: www.twitter.com/keenthemes
-Dribbble: www.dribbble.com/keenthemes
-Like: www.facebook.com/keenthemes
-Purchase: https://1.envato.market/EA4JP
-Renew Support: https://1.envato.market/EA4JP
-License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
-<html lang="en">
-<!--begin::Head-->
-
-<head>
-    <base href="../" />
-    <meta charset="utf-8" />
-    <title>KELAINAN GLOBAL | MCU004</title>
-    <meta name="description" content="Login page example" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-
-    <!--begin::Fonts-->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
-    <!--end::Fonts-->
-
-    <!--begin::Page Custom Styles(used by this page)-->
-    <link href="assets/css/pages/login/login-1.css" rel="stylesheet" type="text/css" />
-    <!--end::Page Custom Styles-->
-
-    <!--begin::Global Theme Styles(used by all pages)-->
-    <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
-    <link href="assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
-    <!--end::Global Theme Styles-->
-
-    <!--begin::Layout Themes(used by all pages)-->
-
-    <link href="assets/css/themes/layout/header/base/light.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/themes/layout/header/menu/light.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/themes/layout/brand/dark.css" rel="stylesheet" type="text/css" />
-    <link href="assets/css/themes/layout/aside/dark.css" rel="stylesheet" type="text/css" />
-    <!--end::Layout Themes-->
-
-    <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
-    <style>
-        #mcu-004 {
-            height: 100vh;
-            /* overflow-x: scroll; */
-            width: "100%";
-        }
-
-        #mcu-005 {
-            height: 100vh;
-            /* overflow-x: scroll; */
-            width: "100%";
-        }
-    </style>
-</head>
-<!--end::Head-->
-
-<!--begin::Body-->
-
-<body id="kt_body" class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading">
-    <!--begin::Main-->
-    <div class="d-flex flex-column flex-root bg-white">
-        <!-- begin::Navbar -->
-        <div class="d-flex justify-content-center ">
-            <h3 class="mb-3">Data Persentase Kelainan Global</h3>
-        </div>
-
-        <div id="mcu-004" class="mt-5">
-        </div>
-        <div id="mcu-005">
-        </div>
-        <!-- end::Navbar -->
-    </div>
-    <!--end::Main-->
-    <script>
-        var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
-    </script>
-    <!--begin::Global Config(global config for global JS scripts)-->
-    <script>
-        var KTAppSettings = {
-            "breakpoints": {
-                "sm": 576,
-                "md": 768,
-                "lg": 992,
-                "xl": 1200,
-                "xxl": 1400
-            },
-            "colors": {
-                "theme": {
-                    "base": {
-                        "white": "#ffffff",
-                        "primary": "#3699FF",
-                        "secondary": "#E5EAEE",
-                        "success": "#1BC5BD",
-                        "info": "#8950FC",
-                        "warning": "#FFA800",
-                        "danger": "#F64E60",
-                        "light": "#E4E6EF",
-                        "dark": "#181C32"
-                    },
-                    "light": {
-                        "white": "#ffffff",
-                        "primary": "#E1F0FF",
-                        "secondary": "#EBEDF3",
-                        "success": "#C9F7F5",
-                        "info": "#EEE5FF",
-                        "warning": "#FFF4DE",
-                        "danger": "#FFE2E5",
-                        "light": "#F3F6F9",
-                        "dark": "#D6D6E0"
-                    },
-                    "inverse": {
-                        "white": "#ffffff",
-                        "primary": "#ffffff",
-                        "secondary": "#3F4254",
-                        "success": "#ffffff",
-                        "info": "#ffffff",
-                        "warning": "#ffffff",
-                        "danger": "#ffffff",
-                        "light": "#464E5F",
-                        "dark": "#ffffff"
-                    }
-                },
-                "gray": {
-                    "gray-100": "#F3F6F9",
-                    "gray-200": "#EBEDF3",
-                    "gray-300": "#E4E6EF",
-                    "gray-400": "#D1D3E0",
-                    "gray-500": "#B5B5C3",
-                    "gray-600": "#7E8299",
-                    "gray-700": "#5E6278",
-                    "gray-800": "#3F4254",
-                    "gray-900": "#181C32"
-                }
-            },
-            "font-family": "Poppins"
-        };
-    </script>
-    <!--end::Global Config-->
-    <!--begin::Global Theme Bundle(used by all pages)-->
-    <script src="assets/plugins/global/plugins.bundle.js"></script>
-    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
-    <script src="assets/js/scripts.bundle.js"></script>
-    <!--end::Global Theme Bundle-->
-
-    <!--begin::Page Vendors(used by this page)-->
-    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
-    <!--end::Page Vendors-->
-
-    <!--begin::Page Scripts(used by this page)-->
-    <script src="assets/js/pages/widgets.js"></script>
-    <!--end::Page Scripts-->
-    <!-- echartjs.min.js -->
-    <script src="assets/js/echarts-js/echart.min.js"></script>
-    <!-- SCRIPT -->
-    <script type="text/javascript">
-        // Initialize the echarts instance based on the prepared dom
-        var chartMCU004 = echarts.init(document.getElementById('mcu-004'));
-        var optMCU004 = {
-            title: {
-                text: 'Kelainan MCU',
-                //   subtext: 'Living Expenses in Shenzhen'
-            },
-            dataset: {
-                source: [
-                    ['score', 'amount', 'product', 'percentage'],
-                    [200, 447, 'Body Mass Index'],
-                    [150, 314, 'Pemeriksaan Mata'],
-                    [125, 314, 'Fungsi Lemak'],
-                    [100, 254, 'Autospirometri'],
-                    [90, 200, 'Hematologi'],
-                    [80, 180, 'ECG'],
-                    [75, 160, 'Hiperuricemia'],
-                    [70, 125, 'Tekanan Darah'],
-                    [60, 118, 'Urine Lengkap'],
-                    [50, 87, 'Fungsi Hati']
-                ]
-            },
-            grid: {
-                containLabel: true
-            },
-            xAxis: {
-                name: 'amount'
-            },
-            yAxis: {
-                type: 'category'
-            },
-            visualMap: {
-                orient: 'horizontal',
-                left: 'center',
-                min: 10,
-                max: 100,
-                show: false,
-
-                // text: ['High Score', 'Low Score'],
-                // Map the score column to color
-                dimension: 0,
-                inRange: {
-                    color: ['#42aaf5', '#00eaf2', '#035bff']
-                }
-            },
-            series: [{
-                label: {
-                    position: 'right',
-                    show: true,
-                    formatter: "{@[3]} %"
-                },
-                type: 'bar',
-                encode: {
-                    // Map the "amount" column to X axis.
-                    x: 'amount',
-                    // Map the "product" column to Y axis
-                    y: 'product'
-                }
-            }]
-        };
-
-        window.addEventListener('resize', function() {
-            chartMCU004.resize();
-        });
-
-        // Display the chart using the configuration items and data just specified.
-        chartMCU004.setOption(optMCU004);
-
-        //MCU005
-        // Initialize the echarts instance based on the prepared dom
-        var chartMCU005 = echarts.init(document.getElementById('mcu-005'));
-        var optMCU005 = {
-            title: {
-                text: 'Kelainan Fisik',
-                //   subtext: 'Living Expenses in Shenzhen'
-            },
-            dataset: {
-                source: [
-                    ['score', 'amount', 'product', 'percentage'],
-                    [200, 400, 'Obesitas Stage 1'],
-                    [150, 300, 'Pre Hipertensi'],
-                    [133, 250, 'Kelainan Refraksi'],
-                    [125, 180, 'Overweight'],
-                    [100, 125, 'Obesitas Stage 2'],
-                    [80, 100, 'Hipertensi grade 1'],
-                    [70, 80, 'Kel. Refrakti terkoreksi'],
-                    [60, 70, 'Kel. Refrakti tidak terkoreksi'],
-                    [55, 55, 'Hipertensi grade 2']
-                ]
-            },
-            grid: {
-                containLabel: true
-            },
-            xAxis: {
-                name: 'amount'
-            },
-            yAxis: {
-                type: 'category'
-            },
-            visualMap: {
-                orient: 'horizontal',
-                left: 'center',
-                min: 10,
-                max: 100,
-                show: false,
-                // text: ['High Score', 'Low Score'],
-                // Map the score column to color
-                dimension: 0,
-                inRange: {
-                    color: ['#42aaf5', '#00eaf2', '#035bff']
-                }
-            },
-            series: [{
-                label: {
-                    position: 'right',
-                    show: true,
-                    formatter: "{@[3]} %"
-                },
-                type: 'bar',
-                encode: {
-                    // Map the "amount" column to X axis.
-                    x: 'amount',
-                    // Map the "product" column to Y axis
-                    y: 'product'
-                }
-            }]
-        };;
-
-        window.addEventListener('resize', function() {
-            chartMCU005.resize();
-        });
-
-        // Display the chart using the configuration items and data just specified.
-        chartMCU005.setOption(optMCU005);
-    </script>
-    <!-- SCRIPT -->
-</body>
-<!--end::Body-->
-
-</html>
--- a/assets/sindhu/catatan_inputan.txt
+++ b/assets/sindhu/catatan_inputan.txt
@@ -0,0 +1,5 @@
+// Example Custom Text Field
+@customtextfield.MainCustomTextField("Kode", "kode", "Kode", "text")
+
+// Example Active Search
+@customtextfieldsearch.MainCustomTextFieldSearch("pid", "PID / Nama","text","/search", "", "input changed delay:500ms, search", ".htmx-indicator")
--- a/assets/sindhu/landingpage.html
+++ b/assets/sindhu/landingpage.html
@@ -277,17 +277,8 @@ License: You must have a valid license purchased only from themeforest(the above
        /* background: #C3C4C5; */
        height: 0.2px;
      }
-
-      .w-logo {
-        width: 126px;
-        height: 40px;
-      }
-
-      .jumbotron-left {
-        flex: 2;
-        margin: 10px;
-        display: flex;
-        align-items: center;
+      .img-header {
+        object-fit: contain;
      }
    </style>
  </head>
@@ -307,7 +298,9 @@ License: You must have a valid license purchased only from themeforest(the above
        <a class="navbar-brand" href="#">
          <img
            src="../assets/asset-corporate-portal/media/landingpage/logo.png"
-            class="d-inline-block align-top w-logo"
+            width="126"
+            height="40"
+            class="d-inline-block align-top"
            alt="Your Brand"
          />
        </a>
@@ -340,12 +333,19 @@ License: You must have a valid license purchased only from themeforest(the above
              <div class="mt-auto"></div>
            </div>
            <div class="col-md-4 d-flex justify-content-md-end">
-              <div class="jumbotron-left">
+              <div
+                style="
+                  flex: 2;
+                  margin: 10px;
+                  display: flex;
+                  align-items: center;
+                "
+              >
                <img
                  src="../assets/asset-corporate-portal/media/landingpage/jumbotron_left.png"
-                  class="img-fluid"
+                  class="img-fluid img-header"
                  alt="Your Brand"
-                  style="width: 100%; height: 100%"
+                  style="width: 100%; height: 100%;"
                />
              </div>
            </div>
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -1,59 +1,67 @@
 package main

 import (
-	"net/http"
+	"cpone/db"
+	"cpone/handlers"
+	"time"
+
+	"cpone/package/config"
+	"cpone/package/database"

-	"github.com/emarifer/go-templ-project-structure/db"
-	"github.com/emarifer/go-templ-project-structure/handlers"
-	"github.com/emarifer/go-templ-project-structure/services"
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/echo/v4/middleware"
+	"go.uber.org/zap"
 )

 // In production, the name of the database
 // would be obtained from an .env file
-const dbName = "user_data.db"

 func main() {
+	config.Load()
 	app := echo.New()
+	database.InitDB()

 	app.HTTPErrorHandler = handlers.CustomHTTPErrorHandler

 	app.Static("/", "assets")
-	app.Use(middleware.Logger())
+	// app.Use(middleware.Logger())

-	// We redirect the root route to the "/user" route
-	app.GET("/", func(c echo.Context) error {
-		return c.Redirect(http.StatusMovedPermanently, "/user")
-	})
+	logger, _ := zap.NewProduction()
+	app.Use(middleware.RequestLoggerWithConfig(
+		middleware.RequestLoggerConfig{
+			LogURI:    true,
+			LogStatus: true,
+			LogValuesFunc: func(c echo.Context, v middleware.RequestLoggerValues) error {
+				logger.Info("request",
+					zap.String("URI", v.URI),
+					zap.Int("status", v.Status),
+					zap.Duration("Duration", v.Latency),

-	uStore, err := db.NewUserStore(dbName)
+					zap.Any("date", time.Now().String()),
+				)
+				return nil
+			},
+		},
+	))
+	app.Use(middleware.CORSWithConfig(
+		middleware.CORSConfig{
+			AllowOrigins: []string{"*"},
+			AllowMethods: []string{"*"},
+		},
+	))
+	appStore, err := db.NewAppStore(database.Handle)
 	if err != nil {
 		app.Logger.Fatalf("failed to create store: %s", err)
 	}

-	us := services.NewServicesUser(services.User{}, uStore)
-
-	h := handlers.New(us)
-
-	handlers.SetupRoutes(app, h)
-
-	xStore, err := db.NewXsampleStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	xs := services.NewServicesXsample(services.Xsample{}, xStore)
-	xh := handlers.NewXsampleHandler(xs)
-	handlers.SetupRoutesXsample(app, xh)
-
-	lStore, err := db.NewLandingPageStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	ls := services.NewServicesLandingPage(services.LandingPage{}, lStore)
-	lh := handlers.NewLandingPageHandler(ls)
-	handlers.SetupRoutesLandingPage(app, lh)
-
+	// SETUP ROUT PUBLIC
+	handlers.SetupRoutesPublic(app, appStore)
+	// SETUP ROUT CORPORATE
+	handlers.SetupRoutesCorporate(app, appStore)
+	// SETUP ROUT CLIENT
+	handlers.SetupRoutesClient(app, appStore)
+	// SETUP ROUT DEV
+	handlers.SetupRoutesDev(app, appStore)
 	app.Logger.Fatal(app.Start(":5000"))
 }

--- a/component/breadcrumbadmin/breadcrumbadmin.templ
+++ b/component/breadcrumbadmin/breadcrumbadmin.templ
@@ -0,0 +1,23 @@
+package breadcrumadmin
+
+templ MainBreadcrumbAdmin() {
+	<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>
+}
--- a/component/breadcrumbadmin/breadcrumbadmin_templ.go
+++ b/component/breadcrumbadmin/breadcrumbadmin_templ.go
@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package breadcrumadmin
+
+//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 MainBreadcrumbAdmin() 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=\"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>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/chart/chart.templ
+++ b/component/chart/chart.templ
@@ -0,0 +1,30 @@
+package chart
+
+templ ShowChart(idDiv string, udata string) {
+    <div id={ idDiv } class="mx-auto"></div>
+	@GenerateChart(idDiv, udata)
+}
+
+script GenerateChart(idDiv string, udata string) {
+    htmx.onLoad(function(elt) {
+        console.log("elt ",elt)
+        var element = document.getElementById(idDiv);
+        console.log("element ",element)
+        if (element) {
+            element.style.height = "400px";
+            element.style.width = "100%";
+        }
+
+        var myChart = {}; 
+        var option = {};
+
+        // var myChart_001 = echarts.init(document.getElementById(idDiv));
+        myChart[idDiv] = echarts.init(element);
+
+        // var option_001 = JSON.parse(udata);
+        option[idDiv] = JSON.parse(udata);
+        console.log("option ", option)
+        // myChart_001.setOption(option_001);
+        myChart[idDiv].setOption(option[idDiv]);
+    });
+}
--- a/component/chart/chart_templ.go
+++ b/component/chart/chart_templ.go
@@ -0,0 +1,82 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package chart
+
+//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 ShowChart(idDiv string, udata 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=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(idDiv)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\chart\chart.templ`, Line: 4, Col: 19}
+		}
+		_, 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("\" class=\"mx-auto\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = GenerateChart(idDiv, udata).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 GenerateChart(idDiv string, udata string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_GenerateChart_4c73`,
+		Function: `function __templ_GenerateChart_4c73(idDiv, udata){htmx.onLoad(function(elt) {
+        console.log("elt ",elt)
+        var element = document.getElementById(idDiv);
+        console.log("element ",element)
+        if (element) {
+            element.style.height = "400px";
+            element.style.width = "100%";
+        }
+
+        var myChart = {}; 
+        var option = {};
+
+        // var myChart_001 = echarts.init(document.getElementById(idDiv));
+        myChart[idDiv] = echarts.init(element);
+
+        // var option_001 = JSON.parse(udata);
+        option[idDiv] = JSON.parse(udata);
+        console.log("option ", option)
+        // myChart_001.setOption(option_001);
+        myChart[idDiv].setOption(option[idDiv]);
+    });
+}`,
+		Call:       templ.SafeScript(`__templ_GenerateChart_4c73`, idDiv, udata),
+		CallInline: templ.SafeScriptInline(`__templ_GenerateChart_4c73`, idDiv, udata),
+	}
+}
--- a/component/customtextfield/customtextfield.templ
+++ b/component/customtextfield/customtextfield.templ
@@ -0,0 +1,17 @@
+package customtextfield
+
+templ MainCustomTextField(inpLabelText,
+	inpName,
+	inpPlaceHolder,
+	inpType string) {
+	<div class="form-group">
+		<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inpLabelText } </label>
+		<input
+			id={ inpName }
+			name={ inpName }
+			type={ inpType }
+			placeholder={ inpPlaceHolder }
+			class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+		/>
+	</div>
+}
--- a/component/customtextfield/customtextfield_templ.go
+++ b/component/customtextfield/customtextfield_templ.go
@@ -0,0 +1,103 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtextfield
+
+//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 MainCustomTextField(inpLabelText,
+	inpName,
+	inpPlaceHolder,
+	inpType 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 class=\"form-group\"><label class=\"text-black\" style=\"font-family: Poppins; font-weight: 600;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inpLabelText)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfield.templ`, Line: 8, Col: 90}
+		}
+		_, 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("</label> <input id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfield.templ`, Line: 10, Col: 15}
+		}
+		_, 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("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfield.templ`, Line: 11, Col: 17}
+		}
+		_, 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("\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfield.templ`, Line: 12, Col: 17}
+		}
+		_, 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("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfield.templ`, Line: 13, Col: 31}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/customtextfield/customtextfieldv2.templ
+++ b/component/customtextfield/customtextfieldv2.templ
@@ -0,0 +1,17 @@
+package customtextfield
+
+import "cpone/models"
+
+templ CustomTextFieldv2(inp models.CustomTextFieldv2Prm) {
+	<div class="form-group">
+		<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inp.Label } </label>
+		<input
+			id={ inp.Name }
+			name={ inp.Name }
+			type={ inp.Type }
+			placeholder={ inp.Placeholder }
+			value={ inp.Value }
+			class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+		/>
+	</div>
+}
--- a/component/customtextfield/customtextfieldv2_templ.go
+++ b/component/customtextfield/customtextfieldv2_templ.go
@@ -0,0 +1,115 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtextfield
+
+//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 "cpone/models"
+
+func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) 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=\"form-group\"><label class=\"text-black\" style=\"font-family: Poppins; font-weight: 600;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Label)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 7, Col: 87}
+		}
+		_, 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("</label> <input id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 9, Col: 16}
+		}
+		_, 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("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 10, Col: 18}
+		}
+		_, 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("\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Type)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 11, Col: 18}
+		}
+		_, 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("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Placeholder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 12, Col: 32}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 13, Col: 20}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/customtextfieldautocomplete/customtextfieldautocomplete.templ
+++ b/component/customtextfieldautocomplete/customtextfieldautocomplete.templ
@@ -0,0 +1,126 @@
+package customtextfieldautocomplete;
+
+import (
+	"cpone/layout"
+	services "cpone/services/dev"
+)
+
+templ MainCustomAutoComplete(value string) {
+	<div id="initial" class="form-group">
+		<input
+			class="form-control bg-field"
+			type="text"
+			autocomplete="off"
+			placeholder="Search Data..."
+			id="searchAutocomplete"
+			name="searchAutocomplete"
+			hx-get="/client/autocomplete"
+			hx-trigger="input changed delay:500ms, search"
+			hx-target="#hasilAutoComplete"
+			hx-indicator="#indicator"
+			value={ value }
+		/>
+		<div id="hasilAutoComplete">
+			<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
+				<span class="sr-only">Loading...</span>
+			</div>
+		</div>
+	</div>
+}
+
+templ ListCustomAutoCompleteHide() {
+	<div id="hasilAutoComplete"></div>
+}
+
+templ ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []services.AutoComplete) {
+	<div id="contentList" class="bootstrap-autocomplete dropdown-menu-custom bg-white show">
+		if len(data) == 0 {
+			<a class="dropdown-item" href="#" style="overflow: hidden; text-overflow: ellipsis;">Data Tidak Ditemukan</a>
+		} else {
+			for _, d := range data {
+				<a
+					hx-trigger="click"
+					hx-get={ "/client/autoCompleteSetValue/" + d.Name }
+					hx-swap="outerHTML"
+					hx-target="#initial"
+					class="dropdown-item"
+					style="overflow: hidden; text-overflow: ellipsis;"
+				>{ d.Name }</a>
+			}
+		}
+		<div class="container px-4">
+			<div class="row mb-4">
+				<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+			<div class="row align-items-center">
+				<div class="col-md-6">
+					<p style="font-style: italic; margin: 0; text-align: left;">{ textFound }</p>
+				</div>
+				<div class="col-md-6 d-flex justify-content-end">
+					if foundCount == totalDataInt {
+						<a href="#" class="btn btn-link-primary text-primary mr-2 disabled">Show More</a>
+					} else {
+						<a
+							href="#"
+							hx-get={ "/client/autoCompleteLoadMore/" + pageOf + "/" + param + "/" + limit }
+							hx-trigger="click"
+							hx-target="#contentList"
+							hx-swap="outerHTML"
+							hx-select="#contentList"
+							hx-indicator="#indicator"
+							class="text-dark-75 text-hover-primary mr-2"
+						>Show More</a>
+					}
+				</div>
+			</div>
+		</div>
+	</div>
+}
+
+templ JsCustomAutoComplete() {
+}
+
+templ CssCustomAutoComplete() {
+	<style>
+	.htmx-indicator{
+		display:none;
+	}
+	.htmx-request .htmx-indicator{
+		display:inline;
+		opacity:1;
+	}
+	.htmx-request.htmx-indicator{
+		display:inline;
+		opacity:1;
+	}
+
+    .dropdown-menu-custom {
+        /* position: absolute; */
+        /* top: 100%; */
+        /* left: 0; */
+        /* z-index: 1000; */
+        /* display: none; */
+        width: 100%;
+        float: left;
+        min-width: 10rem;
+        padding: 0.5rem 0;
+        margin: 0.125rem 0 0;
+        font-size: 1rem;
+        /* color: #212529; */
+        text-align: left;
+        list-style: none;
+        /* background-color: #fff; */
+        background-clip: padding-box;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 0.25rem;
+      }
+    </style>
+}
+
+templ ShowCustomAutoComplete(title string, cmp templ.Component, css templ.Component, js templ.Component) {
+	@layout.PlaygroundLayout(title, css, js) {
+		@cmp
+	}
+}
--- a/component/customtextfieldautocomplete/customtextfieldautocomplete_templ.go
+++ b/component/customtextfieldautocomplete/customtextfieldautocomplete_templ.go
@@ -0,0 +1,268 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtextfieldautocomplete
+
+//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 (
+	"cpone/layout"
+	services "cpone/services/dev"
+)
+
+func MainCustomAutoComplete(value 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=\"initial\" class=\"form-group\"><input class=\"form-control bg-field\" type=\"text\" autocomplete=\"off\" placeholder=\"Search Data...\" id=\"searchAutocomplete\" name=\"searchAutocomplete\" hx-get=\"/client/autocomplete\" hx-trigger=\"input changed delay:500ms, search\" hx-target=\"#hasilAutoComplete\" hx-indicator=\"#indicator\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 21, Col: 16}
+		}
+		_, 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("\"><div id=\"hasilAutoComplete\"><div id=\"indicator\" class=\"position-absolute d-flex justify-content-center spinner-border htmx-indicator\" style=\"z-index: 99;\" role=\"status\"><span class=\"sr-only\">Loading...</span></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 ListCustomAutoCompleteHide() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"hasilAutoComplete\"></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 ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []services.AutoComplete) 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("<div id=\"contentList\" class=\"bootstrap-autocomplete dropdown-menu-custom bg-white show\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(data) == 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"dropdown-item\" href=\"#\" style=\"overflow: hidden; text-overflow: ellipsis;\">Data Tidak Ditemukan</a>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			for _, d := range data {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-trigger=\"click\" hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("/client/autoCompleteSetValue/" + d.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 43, Col: 54}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\" hx-target=\"#initial\" class=\"dropdown-item\" style=\"overflow: hidden; text-overflow: ellipsis;\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(d.Name)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 48, Col: 13}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container px-4\"><div class=\"row mb-4\"><div id=\"indicator\" class=\"position-absolute d-flex justify-content-center spinner-border htmx-indicator\" style=\"z-index: 99;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div><div class=\"row align-items-center\"><div class=\"col-md-6\"><p style=\"font-style: italic; margin: 0; text-align: left;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(textFound)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 59, Col: 76}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"col-md-6 d-flex justify-content-end\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if foundCount == totalDataInt {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"#\" class=\"btn btn-link-primary text-primary mr-2 disabled\">Show More</a>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"#\" hx-get=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var8 string
+			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("/client/autoCompleteLoadMore/" + pageOf + "/" + param + "/" + limit)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 67, Col: 84}
+			}
+			_, 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("\" hx-trigger=\"click\" hx-target=\"#contentList\" hx-swap=\"outerHTML\" hx-select=\"#contentList\" hx-indicator=\"#indicator\" class=\"text-dark-75 text-hover-primary mr-2\">Show More</a>")
+			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 JsCustomAutoComplete() 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_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = 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 CssCustomAutoComplete() 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_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<style>\r\n\t.htmx-indicator{\r\n\t\tdisplay:none;\r\n\t}\r\n\t.htmx-request .htmx-indicator{\r\n\t\tdisplay:inline;\r\n\t\topacity:1;\r\n\t}\r\n\t.htmx-request.htmx-indicator{\r\n\t\tdisplay:inline;\r\n\t\topacity:1;\r\n\t}\r\n\r\n    .dropdown-menu-custom {\r\n        /* position: absolute; */\r\n        /* top: 100%; */\r\n        /* left: 0; */\r\n        /* z-index: 1000; */\r\n        /* display: none; */\r\n        width: 100%;\r\n        float: left;\r\n        min-width: 10rem;\r\n        padding: 0.5rem 0;\r\n        margin: 0.125rem 0 0;\r\n        font-size: 1rem;\r\n        /* color: #212529; */\r\n        text-align: left;\r\n        list-style: none;\r\n        /* background-color: #fff; */\r\n        background-clip: padding-box;\r\n        border: 1px solid rgba(0, 0, 0, 0.15);\r\n        border-radius: 0.25rem;\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 ShowCustomAutoComplete(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_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var12 := 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_Var12), 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
+	})
+}
--- a/component/customtextfieldsearch/customtextfieldsearch.templ
+++ b/component/customtextfieldsearch/customtextfieldsearch.templ
@@ -0,0 +1,22 @@
+package customtextfieldsearch
+
+templ MainCustomTextFieldSearch(
+	inpName,
+	inpPlaceHolder,
+	inpType,
+    hxPost,
+    hxTrigger,
+    hxTarget,
+    hxIndicator string) {
+    <input 
+        class="form-control bg-field border-0"
+        type={ inpType }
+        name={ inpName }
+        id={ inpName } 
+        placeholder={ inpPlaceHolder } 
+        hx-post={ hxPost } 
+        hx-trigger={ hxTrigger } 
+        hx-target={ hxTarget }  
+        hx-indicator={ hxIndicator } 
+    />
+}
--- a/component/customtextfieldsearch/customtextfieldsearch_templ.go
+++ b/component/customtextfieldsearch/customtextfieldsearch_templ.go
@@ -0,0 +1,146 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtextfieldsearch
+
+//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 MainCustomTextFieldSearch(
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxPost,
+	hxTrigger,
+	hxTarget,
+	hxIndicator 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("<input class=\"form-control bg-field border-0\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 13, Col: 22}
+		}
+		_, 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("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 14, Col: 22}
+		}
+		_, 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("\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 15, Col: 20}
+		}
+		_, 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("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 16, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxPost)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 17, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 18, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 19, Col: 28}
+		}
+		_, 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("\" hx-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 20, Col: 34}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/modal/modal.templ
+++ b/component/modal/modal.templ
@@ -0,0 +1,30 @@
+package modalcomponent
+
+templ Modal(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose templ.Component) {
+	<div
+		class="modal fade"
+		style="display: none"
+		id={ modalID }
+		tabindex="-1"
+		role="dialog"
+		data-backdrop="static"
+		aria-hidden="true"
+	>
+		<div class="modal-dialog modal-dialog-centered" role="document">
+			<div class="modal-content rounded-lg">
+				<div class="modal-header border-bottom-0">
+					<h6 class="modal-title text-black font-weight-bolder">
+						{ modalTitle }
+					</h6>
+					@btnClose
+				</div>
+				<div class="modal-body border-bottom-0">
+					@modalBody
+				</div>
+				<div class="modal-footer border-top-0">
+					@modalAction
+				</div>
+			</div>
+		</div>
+	</div>
+}
--- a/component/modal/modal_confirmation.templ
+++ b/component/modal/modal_confirmation.templ
@@ -0,0 +1,52 @@
+package modalcomponent
+
+templ ModalConfirmation(
+	id string,
+	modalTitle string,
+	message string,
+	btnClose templ.Component,
+	datHeader []string,
+	dataText []string,
+	modalAction templ.Component) {
+	<div
+		class="modal fade"
+		id={ id }
+		tabindex="-1"
+		aria-labelledby="exampleModalLabel"
+		data-backdrop="static"
+		aria-hidden="true"
+	>
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content rounded-lg">
+				<div class="modal-header border-bottom-0">
+					<h6 class="modal-title text-black font-weight-bolder">
+						{ modalTitle }
+					</h6>
+					@btnClose
+				</div>
+				<div class="modal-body border-bottom-0">
+					<p>{ message }</p>
+					<div class="card rounded-lg">
+						<div class="card-body d-flex flex-row">
+							<div class="d-flex flex-column ">
+								for _, v := range datHeader {
+									<div class="mb-3 text-disabled font-weight-bold mr-5">{ v }</div>
+								}
+							</div>
+							<div class="d-flex flex-column ">
+								for _, v := range dataText {
+									<div class="mb-3 font-weight-bold">
+										{ v }
+									</div>
+								}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="modal-footer border-top-0">
+					@modalAction
+				</div>
+			</div>
+		</div>
+	</div>
+}
--- a/component/modal/modal_confirmation_templ.go
+++ b/component/modal/modal_confirmation_templ.go
@@ -0,0 +1,143 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package modalcomponent
+
+//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 ModalConfirmation(
+	id string,
+	modalTitle string,
+	message string,
+	btnClose templ.Component,
+	datHeader []string,
+	dataText []string,
+	modalAction 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=\"modal fade\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(id)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 13, Col: 9}
+		}
+		_, 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("\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" data-backdrop=\"static\" aria-hidden=\"true\"><div class=\"modal-dialog modal-dialog-centered\"><div class=\"modal-content rounded-lg\"><div class=\"modal-header border-bottom-0\"><h6 class=\"modal-title text-black font-weight-bolder\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(modalTitle)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 23, Col: 18}
+		}
+		_, 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("</h6>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = btnClose.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"modal-body border-bottom-0\"><p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 28, Col: 17}
+		}
+		_, 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("</p><div class=\"card rounded-lg\"><div class=\"card-body d-flex flex-row\"><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range datHeader {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-3 text-disabled font-weight-bold mr-5\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 33, Col: 66}
+			}
+			_, 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("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range dataText {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-3 font-weight-bold\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 39, Col: 13}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div><div class=\"modal-footer border-top-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalAction.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
+	})
+}
--- a/component/modal/modal_templ.go
+++ b/component/modal/modal_templ.go
@@ -0,0 +1,85 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package modalcomponent
+
+//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 Modal(modalID string, modalTitle string, modalBody templ.Component, modalAction templ.Component, btnClose 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=\"modal fade\" style=\"display: none\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(modalID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal.templ`, Line: 7, Col: 14}
+		}
+		_, 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("\" tabindex=\"-1\" role=\"dialog\" data-backdrop=\"static\" aria-hidden=\"true\"><div class=\"modal-dialog modal-dialog-centered\" role=\"document\"><div class=\"modal-content rounded-lg\"><div class=\"modal-header border-bottom-0\"><h6 class=\"modal-title text-black font-weight-bolder\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(modalTitle)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal.templ`, Line: 17, Col: 18}
+		}
+		_, 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("</h6>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = btnClose.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"modal-body border-bottom-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalBody.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"modal-footer border-top-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalAction.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
+	})
+}
--- a/component/navbar/navbar.templ
+++ b/component/navbar/navbar.templ
@@ -0,0 +1,74 @@
+package navbar
+
+import (
+	"cpone/component/sidebarmaster"
+	services "cpone/services/dev"
+	"cpone/models"
+)
+
+templ Navbar(dataUser models.User) {
+	<div id="kt_header" class="header header-fixed ">
+		<!--begin::Container-->
+		<div class="container-fluid  d-flex align-items-stretch justify-content-between">
+			<!--begin::Header Menu Wrapper-->
+			<div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper"></div>
+			<!--end::Header Menu Wrapper-->
+			<!--begin::Topbar-->
+			<div class="topbar">
+				<!--begin::User-->
+				<div class="topbar-item">
+					<div
+						class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2"
+						id="kt_quick_user_toggle"
+					>
+						<span
+							class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1"
+						>Hi,</span>
+						<span
+							class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3"
+						>{ dataUser.Username }</span>
+						<span class="bg-primary-transparent p-3" style="border-radius: 50%; width: 40px; height: 40px;">
+							<span class="iconify text-primary" data-icon="gravity-ui:person"></span>
+						</span>
+					</div>
+				</div>
+				<!--end::User-->
+			</div>
+			<!--end::Topbar-->
+		</div>
+		<!--end::Container-->
+	</div>
+}
+
+templ NavbarMenu(datamenu []services.MasterMenu) {
+	<div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
+		<!--begin::Menu Container-->
+		<div
+			id="kt_aside_menu"
+			class="aside-menu my-4 "
+			data-menu-vertical="1"
+			data-menu-scroll="1"
+			data-menu-dropdown-timeout="500"
+		>
+			<!--begin::Menu Nav-->
+			<ul class="menu-nav ">
+				for index, d := range datamenu {
+					if index == 0 {
+						// @MenuDashboard(d.ParentMenuName, d.ParentUrl)
+						@sidebarmaster.MenuDashboard(d.ParentMenuName, d.ParentUrl)
+						<li class="menu-section ">
+							<h4 class="menu-text">Menu</h4>
+							<i class="menu-icon ki ki-bold-more-hor icon-md"></i>
+						</li>
+					}
+					if index+1 < len(datamenu) {
+						// @ListMenuNavbar(datamenu[index+1].ParentMenuName, d.Children)
+						@sidebarmaster.ListMenuNavbar(datamenu[index+1].ParentMenuName, datamenu[index+1].Children)
+					}
+				}
+			</ul>
+			<!--end::Menu Nav-->
+		</div>
+		<!--end::Menu Container-->
+	</div>
+}
--- a/component/navbar/navbar_templ.go
+++ b/component/navbar/navbar_templ.go
@@ -0,0 +1,112 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package navbar
+
+//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 (
+	"cpone/component/sidebarmaster"
+	"cpone/models"
+	services "cpone/services/dev"
+)
+
+func Navbar(dataUser models.User) 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=\"kt_header\" class=\"header header-fixed \"><!--begin::Container--><div class=\"container-fluid  d-flex align-items-stretch justify-content-between\"><!--begin::Header Menu Wrapper--><div class=\"header-menu-wrapper header-menu-wrapper-left\" id=\"kt_header_menu_wrapper\"></div><!--end::Header Menu Wrapper--><!--begin::Topbar--><div class=\"topbar\"><!--begin::User--><div class=\"topbar-item\"><div class=\"btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2\" id=\"kt_quick_user_toggle\"><span class=\"text-muted font-weight-bold font-size-base d-none d-md-inline mr-1\">Hi,</span> <span class=\"text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(dataUser.Username)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\navbar\navbar.templ`, Line: 29, Col: 26}
+		}
+		_, 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("</span> <span class=\"bg-primary-transparent p-3\" style=\"border-radius: 50%; width: 40px; height: 40px;\"><span class=\"iconify text-primary\" data-icon=\"gravity-ui:person\"></span></span></div></div><!--end::User--></div><!--end::Topbar--></div><!--end::Container--></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 NavbarMenu(datamenu []services.MasterMenu) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"aside-menu-wrapper flex-column-fluid\" id=\"kt_aside_menu_wrapper\"><!--begin::Menu Container--><div id=\"kt_aside_menu\" class=\"aside-menu my-4 \" data-menu-vertical=\"1\" data-menu-scroll=\"1\" data-menu-dropdown-timeout=\"500\"><!--begin::Menu Nav--><ul class=\"menu-nav \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for index, d := range datamenu {
+			if index == 0 {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = sidebarmaster.MenuDashboard(d.ParentMenuName, d.ParentUrl).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <li class=\"menu-section \"><h4 class=\"menu-text\">Menu</h4><i class=\"menu-icon ki ki-bold-more-hor icon-md\"></i></li>")
+				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
+			}
+			if index+1 < len(datamenu) {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = sidebarmaster.ListMenuNavbar(datamenu[index+1].ParentMenuName, datamenu[index+1].Children).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul><!--end::Menu Nav--></div><!--end::Menu Container--></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/pagination/pagination.templ
+++ b/component/pagination/pagination.templ
@@ -0,0 +1,59 @@
+package pagination 
+
+import "strconv"
+
+templ Pagination(length int, currentPage int, link string, contentID string) {
+	// hx-on::before-request={ HideContent(contentID) }
+	// hx-on::after-request="alert('Done making a request!')"
+	<div class="d-flex justify-content-between align-items-center flex-wrap">
+		<div class="d-flex flex-wrap py-2 mr-3">
+			for i:=0; i<length; i++ {
+				if (i+1) == currentPage {
+					<a
+						hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID }
+						class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
+						hx-swap="outerHTML"
+						hx-indicator="#indicator"
+						hx-trigger="click"
+						hx-on::before-request={ HideContent(contentID) }
+						hx-on::after-request={ ShowContent(contentID) }
+						hx-target={ "#" + contentID }
+					>{ strconv.Itoa(i+1) }</a>
+				} else {
+					<a
+						hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID }
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
+						hx-swap="outerHTML"
+						hx-indicator="#indicator"
+						hx-trigger="click"
+						hx-on::before-request={ HideContent(contentID) }
+						hx-on::after-request={ ShowContent(contentID) }
+						hx-target={ "#" + contentID }
+					>{ strconv.Itoa(i+1) }</a>
+				}
+			}
+		</div>
+	</div>
+}
+
+script ShowContent(contentID string) {
+	console.log("Show Content");
+	console.log(contentID);
+	document.getElementById(contentID).setAttribute("visible","");
+    // document.querySelector('#'+contentID).style.display = 'block';
+    // document.querySelector('#'+contentID).setAttribute("visible","");
+
+}
+
+script HideContent(contentID string) {
+	console.log("Hide Content");
+	console.log(contentID);
+	document.getElementById(contentID).setAttribute("hidden","");
+    // document.querySelector('#'+contentID).style.display = 'none';
+    // document.querySelector('#'+contentID).setAttribute("hidden","");
+}
+
+script CobaContent(contentID string) {
+	console.log(contentID);
+
+}
--- a/component/pagination/pagination_templ.go
+++ b/component/pagination/pagination_templ.go
@@ -0,0 +1,216 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package pagination
+
+//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 "strconv"
+
+func Pagination(length int, currentPage int, link string, contentID 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 class=\"d-flex justify-content-between align-items-center flex-wrap\"><div class=\"d-flex flex-wrap py-2 mr-3\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i := 0; i < length; i++ {
+			if (i + 1) == currentPage {
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HideContent(contentID), ShowContent(contentID))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\pagination.templ`, Line: 13, Col: 124}
+				}
+				_, 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("\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\" hx-swap=\"outerHTML\" hx-indicator=\"#indicator\" hx-trigger=\"click\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 templ.ComponentScript = HideContent(contentID)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 templ.ComponentScript = ShowContent(contentID)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("#" + contentID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\pagination.templ`, Line: 20, Col: 33}
+				}
+				_, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\pagination.templ`, Line: 21, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HideContent(contentID), ShowContent(contentID))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\pagination.templ`, Line: 24, Col: 124}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\" hx-swap=\"outerHTML\" hx-indicator=\"#indicator\" hx-trigger=\"click\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var8 templ.ComponentScript = HideContent(contentID)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var9 templ.ComponentScript = ShowContent(contentID)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var9.Call)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("#" + contentID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\pagination.templ`, Line: 31, Col: 33}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				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_Var11 string
+				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\pagination.templ`, Line: 32, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ShowContent(contentID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_ShowContent_cf70`,
+		Function: `function __templ_ShowContent_cf70(contentID){console.log("Show Content");
+	console.log(contentID);
+	document.getElementById(contentID).setAttribute("visible","");
+    // document.querySelector('#'+contentID).style.display = 'block';
+    // document.querySelector('#'+contentID).setAttribute("visible","");
+
+}`,
+		Call:       templ.SafeScript(`__templ_ShowContent_cf70`, contentID),
+		CallInline: templ.SafeScriptInline(`__templ_ShowContent_cf70`, contentID),
+	}
+}
+
+func HideContent(contentID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HideContent_0799`,
+		Function: `function __templ_HideContent_0799(contentID){console.log("Hide Content");
+	console.log(contentID);
+	document.getElementById(contentID).setAttribute("hidden","");
+    // document.querySelector('#'+contentID).style.display = 'none';
+    // document.querySelector('#'+contentID).setAttribute("hidden","");
+}`,
+		Call:       templ.SafeScript(`__templ_HideContent_0799`, contentID),
+		CallInline: templ.SafeScriptInline(`__templ_HideContent_0799`, contentID),
+	}
+}
+
+func CobaContent(contentID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_CobaContent_ef1c`,
+		Function: `function __templ_CobaContent_ef1c(contentID){console.log(contentID);
+
+}`,
+		Call:       templ.SafeScript(`__templ_CobaContent_ef1c`, contentID),
+		CallInline: templ.SafeScriptInline(`__templ_CobaContent_ef1c`, contentID),
+	}
+}
--- a/component/sidebar_user_profile/sidebar_user_profile.templ
+++ b/component/sidebar_user_profile/sidebar_user_profile.templ
@@ -0,0 +1,82 @@
+package sidebaruserprofile
+
+import "cpone/models"
+
+templ Navbaruserprofile(dataUser models.User) {
+	<div id="kt_quick_user" class="offcanvas offcanvas-right p-10">
+		<!--begin::Header-->
+		<div class="offcanvas-header d-flex align-items-center justify-content-between pb-5">
+			<h3 class="font-weight-bold m-0 text-black">
+				User Profile
+				// <small class="text-muted font-size-sm ml-2">12 messages</small>
+			</h3>
+			<a href="#" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_quick_user_close">
+				<i class="ki ki-close icon-xs text-muted"></i>
+			</a>
+		</div>
+		<!--end::Header-->
+		<!--begin::Content-->
+		<div class="offcanvas-content pr-5 mr-n5">
+			<!--begin::Header-->
+			@ProfileHeader(dataUser)
+			<!--end::Header-->
+			<!--begin::Separator-->
+			<div class="separator separator-dashed my-7"></div>
+			<!--end::Separator-->
+			<!--begin::Notifications-->
+			<div>
+				<!--begin:Heading-->
+				<h5 class="mb-5">
+					Recent Notifications
+				</h5>
+				<!--end:Heading-->
+				<!--begin::Item-->
+				@NotificationCard()
+				<!--end::Item-->
+			</div>
+			<!--end::Notifications-->
+		</div>
+		<!--end::Content-->
+	</div>
+}
+
+templ ProfileHeader(dataUser models.User) {
+	<div class="d-flex align-items-center mt-5">
+		<div class="symbol symbol-100 mr-5 p-2 bg-primary-transparent">
+			// <div class="symbol-label" style="background-image:url('/assets/media/users/300_21.jpg')"></div>
+			// <i class="symbol-badge bg-success"></i>
+			<span class="iconify symbol-label bg-primary-transparent text-primary" data-icon="gravity-ui:person"></span>
+		</div>
+		<div class="d-flex flex-column">
+			<a href="#" class="font-weight-bold font-size-h5 text-dark-75 text-hover-primary">
+				{ dataUser.UserFullName }
+			</a>
+			<div class="text-muted mt-1">
+				{ dataUser.UserPosition }
+			</div>
+			<div class="navi mt-2">
+				<a href="#" class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5">Sign Out</a>
+			</div>
+		</div>
+	</div>
+}
+
+templ NotificationCard() {
+	<div class="d-flex align-items-center bg-light-warning rounded p-5 gutter-b">
+		<span class="svg-icon svg-icon-warning mr-5">
+			<span
+				class="svg-icon svg-icon-lg"
+			>
+				<!--begin::Svg Icon | path:/assets/media/svg/icons/Home/Library.svg-->
+				<span class="iconify" data-icon="material-symbols:notifications-active-outline-rounded"></span>
+			</span>
+		</span>
+		<div class="d-flex flex-column flex-grow-1 mr-2">
+			<a href="#" class="font-weight-normal text-dark-75 text-hover-primary font-size-lg mb-1">
+				Another
+				purpose persuade
+			</a>
+			<span class="text-muted font-size-sm">Due in 2 Days</span>
+		</div>
+	</div>
+}
--- a/component/sidebar_user_profile/sidebar_user_profile_templ.go
+++ b/component/sidebar_user_profile/sidebar_user_profile_templ.go
@@ -0,0 +1,127 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package sidebaruserprofile
+
+//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 "cpone/models"
+
+func Navbaruserprofile(dataUser models.User) 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=\"kt_quick_user\" class=\"offcanvas offcanvas-right p-10\"><!--begin::Header--><div class=\"offcanvas-header d-flex align-items-center justify-content-between pb-5\"><h3 class=\"font-weight-bold m-0 text-black\">User Profile\r</h3><a href=\"#\" class=\"btn btn-xs btn-icon btn-light btn-hover-primary\" id=\"kt_quick_user_close\"><i class=\"ki ki-close icon-xs text-muted\"></i></a></div><!--end::Header--><!--begin::Content--><div class=\"offcanvas-content pr-5 mr-n5\"><!--begin::Header-->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ProfileHeader(dataUser).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Header--><!--begin::Separator--><div class=\"separator separator-dashed my-7\"></div><!--end::Separator--><!--begin::Notifications--><div><!--begin:Heading--><h5 class=\"mb-5\">Recent Notifications\r</h5><!--end:Heading--><!--begin::Item-->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = NotificationCard().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Item--></div><!--end::Notifications--></div><!--end::Content--></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 ProfileHeader(dataUser models.User) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex align-items-center mt-5\"><div class=\"symbol symbol-100 mr-5 p-2 bg-primary-transparent\"><span class=\"iconify symbol-label bg-primary-transparent text-primary\" data-icon=\"gravity-ui:person\"></span></div><div class=\"d-flex flex-column\"><a href=\"#\" class=\"font-weight-bold font-size-h5 text-dark-75 text-hover-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(dataUser.UserFullName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebar_user_profile\sidebar_user_profile.templ`, Line: 52, Col: 27}
+		}
+		_, 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("</a><div class=\"text-muted mt-1\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(dataUser.UserPosition)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebar_user_profile\sidebar_user_profile.templ`, Line: 55, Col: 27}
+		}
+		_, 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("</div><div class=\"navi mt-2\"><a href=\"#\" class=\"btn btn-sm btn-light-primary font-weight-bolder py-2 px-5\">Sign Out</a></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 NotificationCard() 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_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex align-items-center bg-light-warning rounded p-5 gutter-b\"><span class=\"svg-icon svg-icon-warning mr-5\"><span class=\"svg-icon svg-icon-lg\"><!--begin::Svg Icon | path:/assets/media/svg/icons/Home/Library.svg--><span class=\"iconify\" data-icon=\"material-symbols:notifications-active-outline-rounded\"></span></span></span><div class=\"d-flex flex-column flex-grow-1 mr-2\"><a href=\"#\" class=\"font-weight-normal text-dark-75 text-hover-primary font-size-lg mb-1\">Another\r purpose persuade\r</a> <span class=\"text-muted font-size-sm\">Due in 2 Days</span></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/sidebarmaster/sidebarmaster.templ
+++ b/component/sidebarmaster/sidebarmaster.templ
@@ -0,0 +1,102 @@
+package sidebarmaster
+
+import (
+	services "cpone/services/dev"
+)
+
+templ MenuDashboard(ParentMenuName string, ParentMenuUrl string) {
+	<li class="menu-item menu-item-active" aria-haspopup="true">
+		<a
+			href={ templ.SafeURL(ParentMenuUrl) }
+			class="menu-link "
+		>
+			<span
+				class="svg-icon menu-icon"
+			>
+				<!--begin::Svg Icon | path:/assets/media/svg/icons/Design/Layers.svg-->
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+					width="24px"
+					height="24px"
+					viewBox="0 0 24 24"
+					version="1.1"
+				>
+					<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+						<polygon points="0 0 24 0 24 24 0 24"></polygon>
+						<path
+							d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z"
+							fill="#000000"
+							fill-rule="nonzero"
+						></path>
+						<path
+							d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z"
+							fill="#000000"
+							opacity="0.3"
+						></path>
+					</g>
+				</svg><!--end::Svg Icon-->
+			</span><span class="menu-text">{ ParentMenuName }</span>
+		</a>
+	</li>
+}
+
+templ ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName string) {
+	<li class="menu-item" aria-haspopup="true">
+		<a href={ templ.SafeURL(ChildrenMenuURL) } class="menu-link">
+			<i class="menu-bullet menu-bullet-line"><span></span></i>
+			<span class="menu-text">{ ChildrenMenuName }</span>
+		</a>
+	</li>
+}
+
+templ ListMenuNavbar(ParentMenuName string, datamenuchildren []services.ChildrenMenu) {
+	<li class="menu-item  menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
+		<a
+			href="javascript:;"
+			class="menu-link menu-toggle"
+		>
+			<span
+				class="svg-icon menu-icon"
+			>
+				<!--begin::Svg Icon | path:/assets/media/svg/icons/Shopping/Barcode-read.svg-->
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+					width="24px"
+					height="24px"
+					viewBox="0 0 24 24"
+					version="1.1"
+				>
+					<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+						<rect x="0" y="0" width="24" height="24"></rect>
+						<path
+							d="M7,3 L17,3 C19.209139,3 21,4.790861 21,7 C21,9.209139 19.209139,11 17,11 L7,11 C4.790861,11 3,9.209139 3,7 C3,4.790861 4.790861,3 7,3 Z M7,9 C8.1045695,9 9,8.1045695 9,7 C9,5.8954305 8.1045695,5 7,5 C5.8954305,5 5,5.8954305 5,7 C5,8.1045695 5.8954305,9 7,9 Z"
+							fill="#000000"
+						></path>
+						<path
+							d="M7,13 L17,13 C19.209139,13 21,14.790861 21,17 C21,19.209139 19.209139,21 17,21 L7,21 C4.790861,21 3,19.209139 3,17 C3,14.790861 4.790861,13 7,13 Z M17,19 C18.1045695,19 19,18.1045695 19,17 C19,15.8954305 18.1045695,15 17,15 C15.8954305,15 15,15.8954305 15,17 C15,18.1045695 15.8954305,19 17,19 Z"
+							fill="#000000"
+							opacity="0.3"
+						></path>
+					</g>
+				</svg><!--end::Svg Icon-->
+			</span><span class="menu-text">{ ParentMenuName }</span><i
+	class="menu-arrow"
+></i>
+		</a>
+		<div class="menu-submenu ">
+			<i class="menu-arrow"></i>
+			<ul class="menu-subnav">
+				<li class="menu-item  menu-item-parent" aria-haspopup="true">
+					<span
+						class="menu-link"
+					><span class="menu-text">{ ParentMenuName }</span></span>
+				</li>
+				for _, dx := range datamenuchildren {
+					@ListMenuChildren(dx.ChildrenMenuURL, dx.ChildrenMenuName)
+				}
+			</ul>
+		</div>
+	</li>
+}
--- a/component/sidebarmaster/sidebarmaster_templ.go
+++ b/component/sidebarmaster/sidebarmaster_templ.go
@@ -0,0 +1,167 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package sidebarmaster
+
+//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 (
+	services "cpone/services/dev"
+)
+
+func MenuDashboard(ParentMenuName string, ParentMenuUrl 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("<li class=\"menu-item menu-item-active\" aria-haspopup=\"true\"><a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.SafeURL = templ.SafeURL(ParentMenuUrl)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"menu-link \"><span class=\"svg-icon menu-icon\"><!--begin::Svg Icon | path:/assets/media/svg/icons/Design/Layers.svg--><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" version=\"1.1\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><polygon points=\"0 0 24 0 24 24 0 24\"></polygon> <path d=\"M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z\" fill=\"#000000\" fill-rule=\"nonzero\"></path> <path d=\"M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z\" fill=\"#000000\" opacity=\"0.3\"></path></g></svg><!--end::Svg Icon--></span><span class=\"menu-text\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(ParentMenuName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebarmaster\sidebarmaster.templ`, Line: 39, Col: 50}
+		}
+		_, 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></a></li>")
+		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 ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName 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_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("<li class=\"menu-item\" aria-haspopup=\"true\"><a href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 templ.SafeURL = templ.SafeURL(ChildrenMenuURL)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var5)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"menu-link\"><i class=\"menu-bullet menu-bullet-line\"><span></span></i> <span class=\"menu-text\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(ChildrenMenuName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebarmaster\sidebarmaster.templ`, Line: 48, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></a></li>")
+		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 ListMenuNavbar(ParentMenuName string, datamenuchildren []services.ChildrenMenu) 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("<li class=\"menu-item  menu-item-submenu\" aria-haspopup=\"true\" data-menu-toggle=\"hover\"><a href=\"javascript:;\" class=\"menu-link menu-toggle\"><span class=\"svg-icon menu-icon\"><!--begin::Svg Icon | path:/assets/media/svg/icons/Shopping/Barcode-read.svg--><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" version=\"1.1\"><g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><rect x=\"0\" y=\"0\" width=\"24\" height=\"24\"></rect> <path d=\"M7,3 L17,3 C19.209139,3 21,4.790861 21,7 C21,9.209139 19.209139,11 17,11 L7,11 C4.790861,11 3,9.209139 3,7 C3,4.790861 4.790861,3 7,3 Z M7,9 C8.1045695,9 9,8.1045695 9,7 C9,5.8954305 8.1045695,5 7,5 C5.8954305,5 5,5.8954305 5,7 C5,8.1045695 5.8954305,9 7,9 Z\" fill=\"#000000\"></path> <path d=\"M7,13 L17,13 C19.209139,13 21,14.790861 21,17 C21,19.209139 19.209139,21 17,21 L7,21 C4.790861,21 3,19.209139 3,17 C3,14.790861 4.790861,13 7,13 Z M17,19 C18.1045695,19 19,18.1045695 19,17 C19,15.8954305 18.1045695,15 17,15 C15.8954305,15 15,15.8954305 15,17 C15,18.1045695 15.8954305,19 17,19 Z\" fill=\"#000000\" opacity=\"0.3\"></path></g></svg><!--end::Svg Icon--></span><span class=\"menu-text\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(ParentMenuName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebarmaster\sidebarmaster.templ`, Line: 84, Col: 50}
+		}
+		_, 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("</span><i class=\"menu-arrow\"></i></a><div class=\"menu-submenu \"><i class=\"menu-arrow\"></i><ul class=\"menu-subnav\"><li class=\"menu-item  menu-item-parent\" aria-haspopup=\"true\"><span class=\"menu-link\"><span class=\"menu-text\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(ParentMenuName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebarmaster\sidebarmaster.templ`, Line: 94, Col: 46}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></span></li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, dx := range datamenuchildren {
+			templ_7745c5c3_Err = ListMenuChildren(dx.ChildrenMenuURL, dx.ChildrenMenuName).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</ul></div></li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/table/table.templ
+++ b/component/table/table.templ
@@ -0,0 +1,25 @@
+package tablecomponent
+
+templ Table(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component) {
+	if len(thName) != len(thWidth) {
+		<div>length array thname berbeda dengan array thwidth</div>
+	} else {
+		<div>
+			<table class="table table-hover table-borderless">
+				<thead>
+					<tr class="rounded-lg bg-header-table">
+						for i, item := range thName {
+							<th scope="col" width={ thWidth[i] }>{ item }</th>
+						}
+					</tr>
+				</thead>
+				<tbody>
+					@trComponent
+				</tbody>
+			</table>
+		</div>
+		<div>
+			@pagination
+		</div>
+	}
+}
--- a/component/table/table_templ.go
+++ b/component/table/table_templ.go
@@ -0,0 +1,94 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package tablecomponent
+
+//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 Table(thName []string, thWidth []string, trComponent templ.Component, pagination 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)
+		if len(thName) != len(thWidth) {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>length array thname berbeda dengan array thwidth</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><table class=\"table table-hover table-borderless\"><thead><tr class=\"rounded-lg bg-header-table\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for i, item := range thName {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<th scope=\"col\" width=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(thWidth[i])
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\table.templ`, Line: 12, Col: 41}
+				}
+				_, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(item)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\table.templ`, Line: 12, Col: 50}
+				}
+				_, 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("</th>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tr></thead> <tbody>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = trComponent.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody></table></div><div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = pagination.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/under_development/under_development.templ
+++ b/component/under_development/under_development.templ
@@ -0,0 +1,17 @@
+package under_development
+
+templ UnderDevelopment() {
+	<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!"
+		</div>
+		<div>
+			<img
+				src="/asset-corporate-portal/media/under_development/under_development.png"
+				class="img-fluid"
+				alt="Your Brand"
+			/>
+		</div>
+	</div>
+}
--- a/component/under_development/under_development_templ.go
+++ b/component/under_development/under_development_templ.go
@@ -0,0 +1,35 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package under_development
+
+//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 UnderDevelopment() 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=\"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
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/config.template.yaml
+++ b/config.template.yaml
@@ -0,0 +1,24 @@
+
+secretkey: 7A25432A462D4A614E645267556B5870
+privatekey: /home/his/backend/internal/auth/keys/private.pem
+hashCost: 9
+dbuser: root
+dbpass:
+dbhost: localhost
+dbport: 3306
+dbname: his
+tokenExpiration: 120
+dbsequser: root
+dbseqpass: 
+dbseqhost: localhost
+dbseqport: 3306
+dbseqname: his_seq
+photo: /home/ubuntu/photo-folder-location/
+# temporary param
+invoice_prefix: RSPAD
+vclaimProviderCode: 0901R003
+vclaimConsID: 6057
+vclaimSecretKey: rspad211016
+vclaimUserKey: 32e99aefa0866a5880067b27d151c3e4
+vclaimBaseURL: https://apijkn-dev.bpjs-kesehatan.go.id/vclaim-rest-dev
+vclaimAntreanBaseURL: https://apijkn-dev.bpjs-kesehatan.go.id/antreanrs_dev
--- a/db/db.go
+++ b/db/db.go
@@ -2,65 +2,17 @@ package db

 import (
 	"database/sql"
-	"fmt"
-	"log"

 	_ "github.com/glebarez/go-sqlite"
 )

-type UserStore struct {
+type AppStore struct {
 	Db *sql.DB
 }

-func NewUserStore(dbName string) (UserStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return UserStore{}, err
-	}
+func NewAppStore(db *sql.DB) (AppStore, error) {

-	if err := createMigrations(dbName, Db); err != nil {
-		return UserStore{}, err
-	}
-
-	return UserStore{
-		Db,
+	return AppStore{
+		db,
 	}, nil
 }
-
-func getConnection(dbName string) (*sql.DB, error) {
-	var (
-		err error
-		db  *sql.DB
-	)
-
-	if db != nil {
-		return db, nil
-	}
-
-	// Init SQLite3 database
-	db, err = sql.Open("sqlite", dbName)
-	if err != nil {
-		// log.Fatalf("🔥 failed to connect to the database: %s", err.Error())
-		return nil, fmt.Errorf("🔥 failed to connect to the database: %s", err)
-	}
-
-	log.Println("🚀 Connected Successfully to the Database")
-
-	return db, nil
-}
-
-func createMigrations(dbName string, db *sql.DB) error {
-	stmt := `CREATE TABLE IF NOT EXISTS users (
-		id INTEGER PRIMARY KEY AUTOINCREMENT,
-		username VARCHAR(64) NOT NULL,
-		email VARCHAR(255) NOT NULL UNIQUE,
-		created_at DATETIME default CURRENT_TIMESTAMP
-	);`
-
-	_, err := db.Exec(stmt)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
--- a/db/landingpage.store.go
+++ b/db/landingpage.store.go
@@ -1,26 +0,0 @@
-package db
-
-import (
-	"database/sql"
-
-	_ "github.com/glebarez/go-sqlite"
-)
-
-type LandingPageStore struct {
-	Db *sql.DB
-}
-
-func NewLandingPageStore(dbName string) (LandingPageStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return LandingPageStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return LandingPageStore{}, err
-	}
-
-	return LandingPageStore{
-		Db,
-	}, nil
-}
--- a/db/xsample.store.go
+++ b/db/xsample.store.go
@@ -1,26 +0,0 @@
-package db
-
-import (
-	"database/sql"
-
-	_ "github.com/glebarez/go-sqlite"
-)
-
-type XsampleStore struct {
-	Db *sql.DB
-}
-
-func NewXsampleStore(dbName string) (XsampleStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return XsampleStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return XsampleStore{}, err
-	}
-
-	return XsampleStore{
-		Db,
-	}, nil
-}
--- a/go.mod
+++ b/go.mod
@@ -1,29 +1,51 @@
-module github.com/emarifer/go-templ-project-structure
+module cpone

 go 1.21.0

 require (
 	github.com/a-h/templ v0.2.663
-	github.com/labstack/echo/v4 v4.11.3
-	github.com/mattn/go-sqlite3 v1.14.19
+	github.com/glebarez/go-sqlite v1.22.0
+	github.com/labstack/echo/v4 v4.12.0
 	golang.org/x/text v0.14.0
 )

+require (
+	filippo.io/edwards25519 v1.1.0 // indirect
+	github.com/fsnotify/fsnotify v1.7.0 // indirect
+	github.com/go-sql-driver/mysql v1.8.1 // indirect
+	github.com/hashicorp/hcl v1.0.0 // indirect
+	github.com/magiconair/properties v1.8.7 // indirect
+	github.com/mitchellh/mapstructure v1.5.0 // indirect
+	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
+	github.com/sagikazarmark/locafero v0.4.0 // indirect
+	github.com/sagikazarmark/slog-shim v0.1.0 // indirect
+	github.com/sourcegraph/conc v0.3.0 // indirect
+	github.com/spf13/afero v1.11.0 // indirect
+	github.com/spf13/cast v1.6.0 // indirect
+	github.com/spf13/pflag v1.0.5 // indirect
+	github.com/spf13/viper v1.18.2 // indirect
+	github.com/subosito/gotenv v1.6.0 // indirect
+	go.uber.org/multierr v1.10.0 // indirect
+	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
+	gopkg.in/ini.v1 v1.67.0 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+)
+
 require (
 	github.com/dustin/go-humanize v1.0.1 // indirect
-	github.com/glebarez/go-sqlite v1.22.0 // indirect
 	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
 	github.com/google/uuid v1.5.0 // indirect
-	github.com/labstack/gommon v0.4.0 // indirect
+	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.16.0 // indirect
-	golang.org/x/net v0.19.0 // indirect
-	golang.org/x/sys v0.15.0 // indirect
-	golang.org/x/time v0.3.0 // indirect
+	go.uber.org/zap v1.27.0
+	golang.org/x/crypto v0.22.0 // indirect
+	golang.org/x/net v0.24.0 // indirect
+	golang.org/x/sys v0.19.0 // indirect
+	golang.org/x/time v0.5.0 // indirect
 	modernc.org/libc v1.37.6 // indirect
 	modernc.org/mathutil v1.6.0 // indirect
 	modernc.org/memory v1.7.2 // indirect
--- a/go.sum
+++ b/go.sum
@@ -1,5 +1,5 @@
-github.com/a-h/templ v0.2.476 h1:+H4hP4CwK4kfJwXsE6kHeFWMGtcVOVoOm/I64uzARBk=
-github.com/a-h/templ v0.2.476/go.mod h1:zQ95mSyadNTGHv6k5Fm+wQU8zkBMMbHCHg7eAvUZKNM=
+filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
+filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
 github.com/a-h/templ v0.2.663 h1:aa0WMm27InkYHGjimcM7us6hJ6BLhg98ZbfaiDPyjHE=
 github.com/a-h/templ v0.2.663/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
@@ -7,66 +7,108 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
+github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/glebarez/go-sqlite v1.22.0 h1:uAcMJhaA6r3LHMTFgP0SifzgXg46yJkgxqyuyec+ruQ=
 github.com/glebarez/go-sqlite v1.22.0/go.mod h1:PlBIdHe0+aUEFn+r2/uthrWq4FxbzugL0L8Li6yQJbc=
+github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
+github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
 github.com/golang-jwt/jwt v3.2.2+incompatible h1:IfV12K8xAKAnZqdXVzCZ+TOjboZ2keLg81eXfW3O+oY=
 github.com/golang-jwt/jwt v3.2.2+incompatible/go.mod h1:8pz2t5EyA70fFQQSrl6XZXzqecmYZeUEB8OUGHkxJ+I=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
+github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26/go.mod h1:dDKJzRmX4S37WGHujM7tX//fmj1uioxKzKxz3lo4HJo=
 github.com/google/uuid v1.5.0 h1:1p67kYwdtXjb0gL0BPiP1Av9wiZPo5A8z2cWkTZ+eyU=
 github.com/google/uuid v1.5.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/hashicorp/hcl v1.0.0 h1:0Anlzjpi4vEasTeNFn2mLJgTSwt0+6sfsiTG8qcWGx4=
+github.com/hashicorp/hcl v1.0.0/go.mod h1:E5yfLk+7swimpb2L/Alb/PJmXilQ/rhwaUYs4T20WEQ=
 github.com/labstack/echo/v4 v4.11.3 h1:Upyu3olaqSHkCjs1EJJwQ3WId8b8b1hxbogyommKktM=
 github.com/labstack/echo/v4 v4.11.3/go.mod h1:UcGuQ8V6ZNRmSweBIJkPvGfwCMIlFmiqrPqiEBfPYws=
+github.com/labstack/echo/v4 v4.12.0 h1:IKpw49IMryVB2p1a4dzwlhP1O2Tf2E0Ir/450lH+kI0=
+github.com/labstack/echo/v4 v4.12.0/go.mod h1:UP9Cr2DJXbOK3Kr9ONYzNowSh7HP0aG0ShAyycHSJvM=
 github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
 github.com/labstack/gommon v0.4.0/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
+github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
+github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
+github.com/magiconair/properties v1.8.7 h1:IeQXZAiQcpL9mgcAe1Nu6cX9LLw6ExEHKjN0VQdvPDY=
+github.com/magiconair/properties v1.8.7/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
 github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
 github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
-github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.19 h1:fhGleo2h1p8tVChob4I9HpmVFIAkKGpiukdrgQbWfGI=
-github.com/mattn/go-sqlite3 v1.14.19/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
+github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
+github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
+github.com/pelletier/go-toml/v2 v2.1.0 h1:FnwAJ4oYMvbT/34k9zzHuZNrhlz48GB3/s6at6/MHO4=
+github.com/pelletier/go-toml/v2 v2.1.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/sagikazarmark/locafero v0.4.0 h1:HApY1R9zGo4DBgr7dqsTH/JJxLTTsOt7u6keLGt6kNQ=
+github.com/sagikazarmark/locafero v0.4.0/go.mod h1:Pe1W6UlPYUk/+wc/6KFhbORCfqzgYEpgQ3O5fPuL3H4=
+github.com/sagikazarmark/slog-shim v0.1.0 h1:diDBnUNK9N/354PgrxMywXnAwEr1QZcOr6gto+ugjYE=
+github.com/sagikazarmark/slog-shim v0.1.0/go.mod h1:SrcSrq8aKtyuqEI1uvTDTK1arOWRIczQRv+GVI1AkeQ=
+github.com/sourcegraph/conc v0.3.0 h1:OQTbbt6P72L20UqAkXXuLOj79LfEanQ+YQFNpLA9ySo=
+github.com/sourcegraph/conc v0.3.0/go.mod h1:Sdozi7LEKbFPqYX2/J+iBAM6HpqSLTASQIKqDmF7Mt0=
+github.com/spf13/afero v1.11.0 h1:WJQKhtpdm3v2IzqG8VMqrr6Rf3UYpEF239Jy9wNepM8=
+github.com/spf13/afero v1.11.0/go.mod h1:GH9Y3pIexgf1MTIWtNGyogA5MwRIDXGUr+hbWNoBjkY=
+github.com/spf13/cast v1.6.0 h1:GEiTHELF+vaR5dhz3VqZfFSzZjYbgeKDpBxQVS4GYJ0=
+github.com/spf13/cast v1.6.0/go.mod h1:ancEpBxwJDODSW/UG4rDrAqiKolqNNh2DX3mk86cAdo=
+github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
+github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/spf13/viper v1.18.2 h1:LUXCnvUvSM6FXAsj6nnfc8Q2tp1dIgUfY9Kc8GsSOiQ=
+github.com/spf13/viper v1.18.2/go.mod h1:EKmWIqdnk5lOcmR72yw6hS+8OPYcwD0jteitLMVB+yk=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
+github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-golang.org/x/crypto v0.14.0 h1:wBqGXzWJW6m1XrIKlAH0Hs1JJ7+9KBwnIO8v66Q9cHc=
-golang.org/x/crypto v0.14.0/go.mod h1:MVFd36DqK4CsrnJYDkBA3VC4m2GkXAM0PvzMCn4JQf4=
+go.uber.org/multierr v1.10.0 h1:S0h4aNzvfcFsC3dRF1jLoaov7oRaKqRGC/pUEJ2yvPQ=
+go.uber.org/multierr v1.10.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
+go.uber.org/zap v1.27.0 h1:aJMhYGrd5QSmlpLMr2MftRKl7t8J8PTZPA732ud/XR8=
+go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
 golang.org/x/crypto v0.16.0 h1:mMMrFzRSCF0GvB7Ne27XVtVAaXLrPmgPC7/v0tkwHaY=
 golang.org/x/crypto v0.16.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
-golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
-golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
+golang.org/x/crypto v0.22.0 h1:g1v0xeRhjcugydODzvb3mEM9SQ0HGp9s/nh3COQ/C30=
+golang.org/x/crypto v0.22.0/go.mod h1:vr6Su+7cTlO45qkww3VDJlzDn0ctJvRgYbC2NvXHt+M=
+golang.org/x/exp v0.0.0-20230905200255-921286631fa9 h1:GoHiUyI/Tp2nVkLI2mCxVkOjsbSXD66ic0XW0js0R9g=
+golang.org/x/exp v0.0.0-20230905200255-921286631fa9/go.mod h1:S2oDrQGGwySpoQPVqRShND87VCbxmc6bL1Yd2oYrm6k=
 golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
 golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
+golang.org/x/net v0.24.0 h1:1PcaxkF854Fu3+lvBIx5SYn9wRlBzzcnHZSiaFFAb0w=
+golang.org/x/net v0.24.0/go.mod h1:2Q7sJY5mzlzWjKtYUEXSlBWCdyaioyXzRB2RtU8KVE8=
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
-golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
 golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k=
-golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
+golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
+golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
 golang.org/x/time v0.3.0 h1:rg5rLMjNzMS1RkNLzCG38eapWhnYLFYXDXj2gOlr8j4=
 golang.org/x/time v0.3.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
+golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
+golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/ini.v1 v1.67.0 h1:Dgnx+6+nfE+IfzjUEISNeydPJh9AXNNsWbGP9KzCsOA=
+gopkg.in/ini.v1 v1.67.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
--- a/handlers/client/clientdashboard.handlers.go
+++ b/handlers/client/clientdashboard.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_dashboard "cpone/views/client/dashboard"
+
+	"github.com/labstack/echo/v4"
+)
+
+type ClientDashboardService interface {
+}
+
+func NewClientDashboardHandler(us ClientDashboardService) *ClientDashboardHandler {
+	return &ClientDashboardHandler{
+		ClientDashboardService: us,
+	}
+}
+
+type ClientDashboardHandler struct {
+	ClientDashboardService ClientDashboardService
+}
+
+func (uh *ClientDashboardHandler) ShowClientDashboard(c echo.Context) error {
+	helo := client_dashboard.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mcupreregister.handlers.go
+++ b/handlers/client/mcupreregister.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mcupreregister "cpone/views/client/mcupreregister"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MCUPreregisterService interface {
+}
+
+func NewMCUPreregisterHandler(us MCUPreregisterService) *MCUPreregisterHandler {
+	return &MCUPreregisterHandler{
+		MCUPreregisterService: us,
+	}
+}
+
+type MCUPreregisterHandler struct {
+	MCUPreregisterService MCUPreregisterService
+}
+
+func (uh *MCUPreregisterHandler) ShowMCUPreregister(c echo.Context) error {
+	helo := client_mcupreregister.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mcusetup.handlers.go
+++ b/handlers/client/mcusetup.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mcusetup "cpone/views/client/mcusetup"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MCUSetupService interface {
+}
+
+func NewMCUSetupHandler(us MCUSetupService) *MCUSetupHandler {
+	return &MCUSetupHandler{
+		MCUSetupService: us,
+	}
+}
+
+type MCUSetupHandler struct {
+	MCUSetupService MCUSetupService
+}
+
+func (uh *MCUSetupHandler) ShowMCUSetup(c echo.Context) error {
+	helo := client_mcusetup.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdbahan.handlers.go
+++ b/handlers/client/mdbahan.handlers.go
@@ -0,0 +1,27 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+
+	client_mdbahan "cpone/views/client/mdbahan"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdBahanService interface {
+}
+
+func NewMdBahanHandler(us MdBahanService) *MdBahanHandler {
+	return &MdBahanHandler{
+		MdBahanService: us,
+	}
+}
+
+type MdBahanHandler struct {
+	MdBahanService MdBahanService
+}
+
+func (uh *MdBahanHandler) ShowMdBahan(c echo.Context) error {
+	helo := client_mdbahan.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdcorp.handlers.go
+++ b/handlers/client/mdcorp.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdcorp "cpone/views/client/mdcorp"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdCorpService interface {
+}
+
+func NewMdCorpHandler(us MdCorpService) *MdCorpHandler {
+	return &MdCorpHandler{
+		MdCorpService: us,
+	}
+}
+
+type MdCorpHandler struct {
+	MdCorpService MdCorpService
+}
+
+func (uh *MdCorpHandler) ShowMdCorp(c echo.Context) error {
+	helo := client_mdcorp.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mddokter.handlers.go
+++ b/handlers/client/mddokter.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mddokter "cpone/views/client/mddokter"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdDokterService interface {
+}
+
+func NewMdDokterHandler(us MdDokterService) *MdDokterHandler {
+	return &MdDokterHandler{
+		MdDokterService: us,
+	}
+}
+
+type MdDokterHandler struct {
+	MdDokterService MdDokterService
+}
+
+func (uh *MdDokterHandler) ShowMdDokter(c echo.Context) error {
+	helo := client_mddokter.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdhargapanel.handlers.go
+++ b/handlers/client/mdhargapanel.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdhargapanel "cpone/views/client/mdhargapanel"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdHargaPanelService interface {
+}
+
+func NewMdHargaPanelHandler(us MdHargaPanelService) *MdHargaPanelHandler {
+	return &MdHargaPanelHandler{
+		MdHargaPanelService: us,
+	}
+}
+
+type MdHargaPanelHandler struct {
+	MdHargaPanelService MdHargaPanelService
+}
+
+func (uh *MdHargaPanelHandler) ShowMdHargaPanel(c echo.Context) error {
+	helo := client_mdhargapanel.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdhargaprofile.handlers.go
+++ b/handlers/client/mdhargaprofile.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdhargaprofile "cpone/views/client/mdhargaprofile"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdHargaProfileService interface {
+}
+
+func NewMdHargaProfileHandler(us MdHargaProfileService) *MdHargaProfileHandler {
+	return &MdHargaProfileHandler{
+		MdHargaProfileService: us,
+	}
+}
+
+type MdHargaProfileHandler struct {
+	MdHargaProfileService MdHargaProfileService
+}
+
+func (uh *MdHargaProfileHandler) ShowMdHargaProfile(c echo.Context) error {
+	helo := client_mdhargaprofile.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdhargasingle.handlers.go
+++ b/handlers/client/mdhargasingle.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdhargasingle "cpone/views/client/mdhargasingle"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdHargaSingleService interface {
+}
+
+func NewMdHargaSingleHandler(us MdHargaSingleService) *MdHargaSingleHandler {
+	return &MdHargaSingleHandler{
+		MdHargaSingleService: us,
+	}
+}
+
+type MdHargaSingleHandler struct {
+	MdHargaSingleService MdHargaSingleService
+}
+
+func (uh *MdHargaSingleHandler) ShowMdHargaSingle(c echo.Context) error {
+	helo := client_mdhargasingle.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdpaket.handlers.go
+++ b/handlers/client/mdpaket.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdpaket "cpone/views/client/mdpaket"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdPaketService interface {
+}
+
+func NewMdPaketHandler(us MdPaketService) *MdPaketHandler {
+	return &MdPaketHandler{
+		MdPaketService: us,
+	}
+}
+
+type MdPaketHandler struct {
+	MdPaketService MdPaketService
+}
+
+func (uh *MdPaketHandler) ShowMdPaket(c echo.Context) error {
+	helo := client_mdpaket.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdpanel.handlers.go
+++ b/handlers/client/mdpanel.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdpanel "cpone/views/client/mdpanel"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdPanelService interface {
+}
+
+func NewMdPanelHandler(us MdPanelService) *MdPanelHandler {
+	return &MdPanelHandler{
+		MdPanelService: us,
+	}
+}
+
+type MdPanelHandler struct {
+	MdPanelService MdPanelService
+}
+
+func (uh *MdPanelHandler) ShowMdPanel(c echo.Context) error {
+	helo := client_mdpanel.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdpasien.handlers.go
+++ b/handlers/client/mdpasien.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdpasien "cpone/views/client/mdpasien"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdPasienService interface {
+}
+
+func NewMdPasienHandler(us MdPasienService) *MdPasienHandler {
+	return &MdPasienHandler{
+		MdPasienService: us,
+	}
+}
+
+type MdPasienHandler struct {
+	MdPasienService MdPasienService
+}
+
+func (uh *MdPasienHandler) ShowMdPasien(c echo.Context) error {
+	helo := client_mdpasien.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdprofile.handlers.go
+++ b/handlers/client/mdprofile.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdprofile "cpone/views/client/mdprofile"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdProfileService interface {
+}
+
+func NewMdProfileHandler(us MdProfileService) *MdProfileHandler {
+	return &MdProfileHandler{
+		MdProfileService: us,
+	}
+}
+
+type MdProfileHandler struct {
+	MdProfileService MdProfileService
+}
+
+func (uh *MdProfileHandler) ShowMdProfile(c echo.Context) error {
+	helo := client_mdprofile.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdresultnonlab.handlers.go
+++ b/handlers/client/mdresultnonlab.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdresultnonlab "cpone/views/client/mdresultnonlab"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdResultNonLabService interface {
+}
+
+func NewMdResultNonLabHandler(us MdResultNonLabService) *MdResultNonLabHandler {
+	return &MdResultNonLabHandler{
+		MdResultNonLabService: us,
+	}
+}
+
+type MdResultNonLabHandler struct {
+	MdResultNonLabService MdResultNonLabService
+}
+
+func (uh *MdResultNonLabHandler) ShowMdResultNonLab(c echo.Context) error {
+	helo := client_mdresultnonlab.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdsamplestation.handlers.go
+++ b/handlers/client/mdsamplestation.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdsamplestation "cpone/views/client/mdsamplestation"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdSampleStationService interface {
+}
+
+func NewMdSampleStationHandler(us MdSampleStationService) *MdSampleStationHandler {
+	return &MdSampleStationHandler{
+		MdSampleStationService: us,
+	}
+}
+
+type MdSampleStationHandler struct {
+	MdSampleStationService MdSampleStationService
+}
+
+func (uh *MdSampleStationHandler) ShowMdSampleStation(c echo.Context) error {
+	helo := client_mdsamplestation.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdsampletype.handlers.go
+++ b/handlers/client/mdsampletype.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdsampletype "cpone/views/client/mdsampletype"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdSampleTypeService interface {
+}
+
+func NewMdSampleTypeHandler(us MdSampleTypeService) *MdSampleTypeHandler {
+	return &MdSampleTypeHandler{
+		MdSampleTypeService: us,
+	}
+}
+
+type MdSampleTypeHandler struct {
+	MdSampleTypeService MdSampleTypeService
+}
+
+func (uh *MdSampleTypeHandler) ShowMdSampleType(c echo.Context) error {
+	helo := client_mdsampletype.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdtemplatefisik.handlers.go
+++ b/handlers/client/mdtemplatefisik.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdtemplatefisik "cpone/views/client/mdtemplatefisik"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdTemplateFisikService interface {
+}
+
+func NewMdTemplateFisikHandler(us MdTemplateFisikService) *MdTemplateFisikHandler {
+	return &MdTemplateFisikHandler{
+		MdTemplateFisikService: us,
+	}
+}
+
+type MdTemplateFisikHandler struct {
+	MdTemplateFisikService MdTemplateFisikService
+}
+
+func (uh *MdTemplateFisikHandler) ShowMdTemplateFisik(c echo.Context) error {
+	helo := client_mdtemplatefisik.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdtest.handlers.go
+++ b/handlers/client/mdtest.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdtest "cpone/views/client/mdtest"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdTestService interface {
+}
+
+func NewMdTestHandler(us MdTestService) *MdTestHandler {
+	return &MdTestHandler{
+		MdTestService: us,
+	}
+}
+
+type MdTestHandler struct {
+	MdTestService MdTestService
+}
+
+func (uh *MdTestHandler) ShowMdTest(c echo.Context) error {
+	helo := client_mdtest.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mduser.handlers.go
+++ b/handlers/client/mduser.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mduser "cpone/views/client/mduser"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdUserService interface {
+}
+
+func NewMdUserHandler(us MdUserService) *MdUserHandler {
+	return &MdUserHandler{
+		MdUserService: us,
+	}
+}
+
+type MdUserHandler struct {
+	MdUserService MdUserService
+}
+
+func (uh *MdUserHandler) ShowMdUser(c echo.Context) error {
+	helo := client_mduser.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdusergroup.handlers.go
+++ b/handlers/client/mdusergroup.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdusergroup "cpone/views/client/mdusergroup"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdUserGroupService interface {
+}
+
+func NewMdUserGroupHandler(us MdUserGroupService) *MdUserGroupHandler {
+	return &MdUserGroupHandler{
+		MdUserGroupService: us,
+	}
+}
+
+type MdUserGroupHandler struct {
+	MdUserGroupService MdUserGroupService
+}
+
+func (uh *MdUserGroupHandler) ShowMdUserGroup(c echo.Context) error {
+	helo := client_mdusergroup.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/transaksisamplestation.handler.go
+++ b/handlers/client/transaksisamplestation.handler.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_transaksisamplestation "cpone/views/client/transaksisamplestation"
+
+	"github.com/labstack/echo/v4"
+)
+
+type TransaksiSampleStationService interface {
+}
+
+func NewTransaksiSampleStationHandler(us TransaksiSampleStationService) *TransaksiSampleStationHandler {
+	return &TransaksiSampleStationHandler{
+		TransaksiSampleStationService: us,
+	}
+}
+
+type TransaksiSampleStationHandler struct {
+	TransaksiSampleStationService TransaksiSampleStationService
+}
+
+func (uh *TransaksiSampleStationHandler) ShowTransaksiSampleStation(c echo.Context) error {
+	helo := client_transaksisamplestation.Show()
+	return utils.View(c, helo)
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sas Andy	0af34a2e33	coba pagination	2024-05-14 09:01:27 +07:00
Sas Andy	49c80c912b	Merge branch 'andy/table' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/table	2024-05-13 14:41:22 +07:00
Sas Andy	65d54eb7a1	coba pagination	2024-05-13 14:39:06 +07:00
Sas Andy	93186320d7	clear store	2024-05-13 14:35:40 +07:00
Sas Andy	1a4f1ee2d6	revisi db & logger	2024-05-13 14:23:26 +07:00
Sas Andy	f757652e96	config & db	2024-05-13 14:22:58 +07:00
Sas Andy	b24623668e	coba pagination	2024-05-13 09:00:21 +07:00
Sas Andy	74856a96e1	revisi & dev routes	2024-05-10 15:18:18 +07:00
Sas Andy	b3355c5772	Merge remote-tracking branch 'origin/andy/routingall'	2024-05-10 14:48:40 +07:00
Sas Andy	9a4a9b34dc	routing	2024-05-10 14:35:00 +07:00
Sas Andy	d3d59ebedb	client md test	2024-05-10 14:07:37 +07:00
Sas Andy	f2a84daea0	client md user group	2024-05-10 10:06:05 +07:00
Sas Andy	0bc1cb2a49	client md corp	2024-05-10 09:51:59 +07:00
Sas Andy	6a8f7ef656	client md user	2024-05-10 09:41:07 +07:00
Sas Andy	ff0f95a67f	client dashboard	2024-05-10 09:32:36 +07:00
Sas Andy	f6d177f2f1	patient underdev	2024-05-10 09:23:40 +07:00
Sas Andy	f673933c4c	login	2024-05-10 08:53:32 +07:00
sindhu	c6e7f76e85	client md sample station. sample type, paket, hrg profile	2024-05-09 14:39:58 +07:00
sindhu	15d66cb80a	client harga panel	2024-05-09 13:57:18 +07:00
sindhu	2b6a524e48	client template fisik	2024-05-09 13:49:52 +07:00
sindhu	4b2470ea84	client md result non lab	2024-05-09 13:36:36 +07:00
sindhu	698e81eda7	client md harga single	2024-05-09 13:25:05 +07:00
sindhu	504bec64a2	client md dokter	2024-05-09 13:06:49 +07:00
sindhu	20387e14ab	client md pasien	2024-05-09 13:02:21 +07:00
sindhu	0ba409ab73	client md panel	2024-05-08 16:27:30 +07:00
sindhu	88d9985ca1	client md bahan	2024-05-08 16:14:07 +07:00
Sas Andy	1965359fd5	company under development	2024-05-08 15:56:44 +07:00
Sas Andy	9ae7e495c6	refactor structure	2024-05-08 15:26:14 +07:00
Sas Andy	ac97487b9b	contains utils	2024-05-08 13:58:49 +07:00
Sas Andy	233197a0fb	Merge branch 'andy/table'	2024-05-08 13:58:12 +07:00
sindhu	fb91440c81	autocomplete	2024-05-08 13:36:37 +07:00
Sas Andy	ad26d88feb	try pagination templ	2024-05-08 13:28:03 +07:00
Sas Andy	8f2104270d	modal edit user group	2024-05-08 09:23:43 +07:00
Sas Andy	963885d8a3	Merge branch 'andy/table' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/table	2024-05-06 15:34:10 +07:00
Sas Andy	1f2973360c	table component	2024-05-06 15:25:51 +07:00
Sas Andy	329db2e2ac	layout corporate, navbar & side bar templ	2024-05-06 15:25:51 +07:00
Sas Andy	f527eaa17e	text hover css	2024-05-06 15:25:51 +07:00
Sas Andy	559f0b41a2	user group table	2024-05-06 15:25:51 +07:00
Sas Andy	89bac6fabe	custom buton tosca	2024-05-06 15:25:51 +07:00
Sas Andy	e157e2fe43	table component	2024-05-06 15:23:34 +07:00
Sas Andy	728c4ccf7a	layout corporate, navbar & side bar templ	2024-05-06 13:27:28 +07:00
Sas Andy	6972963f41	text hover css	2024-05-06 13:27:01 +07:00
sindhu	48b4de265f	add active search dan text field biasa	2024-05-06 09:14:45 +07:00
Sas Andy	662382b50b	user group table	2024-05-03 16:54:04 +07:00
Sas Andy	b278020911	custom buton tosca	2024-05-03 16:45:58 +07:00
sindhu	80ff72e3b3	from stash menu sidebar	2024-05-03 09:21:49 +07:00
adibwp	f5e512aa6e	fix bug	2024-05-02 17:16:34 +07:00
adibwp	a4f262af4c	add margin	2024-05-02 17:11:56 +07:00
adibwp	3baa3a2cac	footer + responsive layout	2024-05-02 16:59:33 +07:00
adibwp	df96880e76	create component footer	2024-05-02 16:59:33 +07:00
adibwp	f4c7507e6d	footer + responsive layout	2024-05-02 16:58:26 +07:00
sindhu	cca5fe06d1	Merge branch 'fixcdnall' googlefont and other cdn	2024-05-02 16:38:25 +07:00
sindhu	90d632a515	fix cdn all dan google font	2024-05-02 16:37:32 +07:00
sindhu	a90d4843cc	Merge branch 'fixrelative' base href	2024-05-02 15:50:00 +07:00
sindhu	202f4d22f4	fix relative base href	2024-05-02 15:49:09 +07:00
adibwp	8a474a3082	create component footer	2024-05-02 14:04:03 +07:00
Hanan Askarim	defc0d41c2	fix sub title jumbotron	2024-05-02 14:01:28 +07:00
Hanan Askarim	01d0c0ec07	Merge branch 'hanan/responsive-tablet-and-hp'	2024-05-02 13:36:56 +07:00
Hanan Askarim	7cc0ce51ba	add responsive tablet dan hp	2024-05-02 13:35:38 +07:00
Hanan Askarim	62d7735ee1	add under development card employee page	2024-05-02 09:36:37 +07:00
Hanan Askarim	e193769da1	Merge branch 'hanan/employee-medical-analityc'	2024-05-02 09:29:28 +07:00
Hanan Askarim	f6eb31c242	add templ medical analityc	2024-05-02 08:46:05 +07:00
Sas Andy	b25c1c3669	Merge branch 'andy/bar-chart'	2024-05-01 16:55:49 +07:00
sindhu	638e9724c8	Merge branch 'sindhu_dev_peserta' pie chart mcu peserta	2024-05-01 11:00:27 +07:00
sindhu	6260d3bc25	step 1 : komponen mcu peserta	2024-05-01 10:28:57 +07:00
Sas Andy	d601cc0801	kelainan global chart	2024-04-30 17:16:21 +07:00
Hanan Askarim	0219959594	Merge branch 'hanan/login'	2024-04-30 17:15:35 +07:00
Hanan Askarim	c267c26260	employee medical analityc	2024-04-30 17:07:59 +07:00
sindhu	3c9c63dd2a	Merge branch 'sindhu_pie_chart'	2024-04-30 14:01:48 +07:00
sindhu	012f1db6e4	bar chart type	2024-04-30 14:00:59 +07:00
sindhu	ae59d63940	generate pie chart templ	2024-04-30 13:51:19 +07:00
Hanan Askarim	3281472f67	create templ login	2024-04-30 13:10:53 +07:00
Sas Andy	976753fc8e	under development component	2024-04-29 15:56:07 +07:00
Sas Andy	22e7cadb2d	Merge branch 'andy/coba-landingpage'	2024-04-29 15:29:12 +07:00
Sas Andy	dc2c1491fd	revisi landing page scroll card	2024-04-29 15:26:58 +07:00
Sas Andy	b3883c9a8d	revisi templ landing page	2024-04-29 14:38:20 +07:00
Sas Andy	d8e8f91fbd	landing page templ & slick library	2024-04-29 10:10:24 +07:00