Merge branch 'andy/mdbahan' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/mdbahan

md bahan
custom dowpdown & revisi customtextfiels
2024-05-29 11:14:24 +07:00 · 2024-05-29 11:08:36 +07:00 · 2024-05-29 11:08:35 +07:00 · 2024-05-29 11:07:49 +07:00 · 2024-05-29 11:04:41 +07:00 · 2024-05-29 11:04:31 +07:00
214 changed files with 39306 additions and 1446 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,6 @@
 tmp
-bin
+bin
+config.yaml
+restapi.rest
+cpone.db
+coba.Http
--- a/assets/andy/coba.html
+++ b/assets/andy/coba.html
@@ -94,15 +94,57 @@ License: You must have a valid license purchased only from themeforest(the above
  >
    <!--begin::Main-->
    <div class="d-flex flex-column flex-root bg-white">
+      <div
+        id="notification-001"
+        class="toast toast-top-right toas fade show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        hx-swap-oob="true"
+        style="margin-top: 2vh; margin-right: 2vw;"
+      >
+        <div class="toast-header bg-success text-white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            aria-hidden="true"
+            role="img"
+            class="iconify iconify--ep mr-2 icon-xl"
+            width="1em"
+            height="1em"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 1024 1024"
+            data-icon="ep:success-filled"
+          >
+            <path
+              fill="currentColor"
+              d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
+            ></path>
+          </svg>
+          <strong class="mr-auto">Success</strong>
+          <small class="text-muted text-white">just now</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="toast-body bg-success-transparent">
+          This is a success toast.
+        </div>
+      </div>
      <!-- begin::Navbar -->
      <div
        class="d-flex flex-lg-row justify-content-between py-5"
-        style="height: 119px; align-items: center"
+        style="height: 119px; align-items: center;"
      >
        <img
          src="asset-corporate-portal/media/logo.png"
          alt=""
-          style="height: 39px"
+          style="height: 39px;"
        />
        <ul class="nav">
          <li class="nav-item dropdown">
@@ -132,7 +174,7 @@ License: You must have a valid license purchased only from themeforest(the above
        <img
          src="asset-corporate-portal/media/logo.png"
          alt=""
-          style="height: 39px"
+          style="height: 39px;"
        />
      </div>
      <div class="p-10">
--- a/assets/andy/cobaform.html
+++ b/assets/andy/cobaform.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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"
+    />
+
+    <link rel="stylesheet" href="assets/css/googlefont/poppins.css" />
+
+    <link
+      href="assets/css/pages/login/login-1.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+
+    <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" />
+
+    <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
+      rel="shortcut icon"
+      href="asset-corporate-portal/media/logo/logo-small.jpg"
+    />
+
+    <link
+      href="asset-corporate-portal/css/sas.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="assets/css/googlefont/publicsans.css" />
+    <link rel="stylesheet" href="assets/css/googlefont/roboto.css" />
+
+    <link rel="stylesheet" type="text/css" href="assets/css/slick/slick.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="assets/css/slick/slick-theme.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
+    />
+  </head>
+
+  <script src="assets/js/htmx/htmx.min.js"></script>
+  <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 bg-white"
+  >
+    <div class="p-6">
+      <form
+        hx-post="http://localhost:5000/dev/usergroup/add"
+        class="form"
+        hx-target="#change"
+        hx-swap="innerHTML"
+        hx-on::after-request="showtoast()"
+        hx-on::reponse-error="cobaerror()"
+        hx-on::send-error="cobaerror()"
+        id="kt_form_1"
+        hx-include="#cobaid, #test"
+      >
+        <div id="change">
+          <div class="form-group">
+            <label
+              class="text-black"
+              style="font-family: Poppins; font-weight: 600;"
+              >Code
+            </label>
+            <input
+              id="codeug"
+              name="usergroupcode"
+              type="text"
+              placeholder="coba"
+              value=""
+              class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+            />
+            <div class="invalid-feedback text-danger mt-3">
+              Shucks, check the formatting of that and try again.
+            </div>
+            <label
+              class="text-black"
+              style="font-family: Poppins; font-weight: 600;"
+              >Name
+            </label>
+            <input
+              id="nameug"
+              name="usergroupname"
+              type="text"
+              placeholder="coba"
+              value=""
+              class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+            />
+          </div>
+        </div>
+
+        <button id="btnsbmt" class="btn btn-primary m-9" type="submit">
+          submit
+        </button>
+      </form>
+      <input
+        id="cobaid"
+        name="cobaid"
+        type="hidden"
+        placeholder="coba"
+        value="1"
+        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+      />
+    </div>
+    <input
+      id="test"
+      name="paginat"
+      type="hidden"
+      placeholder="coba"
+      value="2"
+      class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+    />
+
+    <div id="testttt" class="p-6" hx-swap-oob="#testttt">
+      ;adkj;djf;
+    </div>
+    <button
+      type="button"
+      onclick="showtoast()"
+      class="btn btn-primary"
+      id="liveToastBtn"
+    >
+      Show live toast
+    </button>
+    <input
+      class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+      type="text"
+      name="search"
+      id="searchsas5b2f51246d4698262a5b7c241dd59884"
+      placeholder="Cari Kode/Nama"
+      hx-get="http://google.com"
+      hx-trigger="input changed delay:500ms, search"
+      hx-target="#cobakeyup"
+      hx-indicator=""
+      value=""
+      hx-include="#cobaid"
+      hx-swap="outerHTML"
+      autocomplete="off"
+    />
+
+    <div
+      class="position-fixed bottom-0 right-0 p-3"
+      style="z-index: 5; right: 0; bottom: 0;"
+    >
+      <div
+        id="liveToast"
+        class="toast hide"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        data-delay="2000"
+      >
+        <div class="toast-header">
+          <img src="..." class="rounded mr-2" alt="..." />
+          <strong class="mr-auto">Bootstrap</strong>
+          <small>11 mins ago</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body">
+          Hello, world! This is a toast message.
+        </div>
+      </div>
+    </div>
+    <div id="cobakeyup"></div>
+    <div class="card card-custom">
+      <div class="card-header">
+        <div class="card-title">
+          <h3 class="card-label">Card Blocking</h3>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="overlay-wrapper">
+          <div class="form-group">
+            <label>Address Line 1</label>
+            <input
+              type="text"
+              class="form-control form-control-solid form-control-lg"
+              name="address1"
+              placeholder="Address Line 1"
+            />
+            <span class="form-text text-muted">Please enter your Address.</span>
+          </div>
+          <div class="form-group">
+            <label>Address Line 2</label>
+            <input
+              type="text"
+              class="form-control form-control-solid form-control-lg"
+              name="address1"
+              placeholder="Address Line 1"
+            />
+            <span class="form-text text-muted"
+              >Please enter your Address 2.</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="overlay-layer bg-dark-o-10">
+        <div class="spinner spinner-primary"></div>
+      </div>
+    </div>
+
+    <!--begin::Global Config(global config for global JS scripts)-->
+    <script src="asset-corporate-portal/js/ktappsetting.js"></script>
+    <!--end::Global Config-->
+    <!--begin::Global Theme Bundle(used by all pages)-->
+    <script src="assets/plugins/global/plugins.bundle.js"></script>
+    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+    <script src="assets/js/scripts.bundle.js"></script>
+    <!--end::Global Theme Bundle-->
+    <script src="assets/js/iconify/iconify.min.js"></script>
+
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+    <script>
+      function showtoast() {
+        let code = document.querySelector("#usergroupname");
+        let name = document.querySelector("#usergroupcode");
+        if (
+          name.classList.contains("is-invalid") ||
+          code.classList.contains("is-invalid")
+        ) {
+          toastr.error("New order has been placed!");
+        } else {
+          toastr.success("New order has been placed!");
+        }
+      }
+      function cobaerror() {
+        toastr.error("error");
+      }
+    </script>
+
+    <!--end::Page Scripts-->
+  </body>
+</html>
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
@@ -59,6 +59,8 @@ SEARCH GROUP CSS KEYWORD "###"
  --dangerbg: #f7c9c9;
  --toscabg: #c9f7f5;
  --fieldbg: #f5f8fa;
+  --labelkartukontrolSudahbg: #e8fff3;
+  --labelkartukontrolBelumbg: #fff8dd;
  /* END BACKGROUND */
  /* TEXT COLOR */
  --text-black: #0e1e28;
@@ -67,6 +69,8 @@ SEARCH GROUP CSS KEYWORD "###"
  --text-header-table: #b5b5c3;
  --header-table-bg: #f3f6f9;
  --active-state: #637381;
+  --textcolorlabelkartukontrolSudah: #50cd89;
+  --textcolorlabelkartukontrolBelum: #f1bc00;
  /* END TEXT COLOR */
  --light: #f3f6f9;
  --dark: #181c32;
@@ -290,6 +294,56 @@ a.text-white:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(84, 168, 255, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(84, 168, 255, 0.5);
 }
+
+.btn-field {
+  color: var(--text-black);
+  background-color: var(--fieldbg) !important;
+  border-color: var(--fieldbg) !important;
+}
+.btn-field.btn-lg {
+  padding: 0.825rem 1.42rem !important;
+  font-size: 1.08rem !important;
+  line-height: 1.5 !important;
+  border-radius: 0.42rem !important;
+}
+.btn-field.btn-lg.rounded-lg {
+  padding: 0.825rem 1.42rem !important;
+  font-size: 1.08rem !important;
+  line-height: 1.5 !important;
+  border-radius: 0.85rem !important;
+}
+.btn-field:hover {
+  color: var(--text-black);
+  background-color: var(--fieldbg) !important;
+  border-color: var(--fieldbg) !important;
+}
+.btn-field:focus,
+.btn-field.focus {
+  color: var(--text-black);
+  background-color: var(--fieldbg) !important;
+  border-color: var(--fieldbg) !important;
+  -webkit-box-shadow: 0 0 0 0rem var(--fieldbg) !important;
+  box-shadow: 0 0 0 0rem var(--fieldbg) !important;
+}
+.btn-field.disabled,
+.btn-field:disabled {
+  color: var(--text-black);
+  background-color: var(--fieldbg) !important;
+  border-color: var(--fieldbg) !important;
+}
+.btn-field:not(:disabled):not(.disabled):active,
+.btn-field:not(:disabled):not(.disabled).active,
+.show > .btn-field.dropdown-toggle {
+  color: var(--text-black);
+  background-color: var(--fieldbg) !important;
+  border-color: var(--fieldbg) !important;
+}
+.btn-field:not(:disabled):not(.disabled):active:focus,
+.btn-field:not(:disabled):not(.disabled).active:focus,
+.show > .btn-field.dropdown-toggle:focus {
+  -webkit-box-shadow: 0 0 0 0rem var(--fieldbg) !important;
+  box-shadow: 0 0 0 0rem var(--fieldbg) !important;
+}
 /* COBA CUSTOM BTN */
 .btn-tosca {
  color: #ffffff;
@@ -616,7 +670,7 @@ a.text-white:focus {
 }
 .btn-outline-secondary.disabled,
 .btn-outline-secondary:disabled {
-  color: var(--secondary) !important;
+  color: var(--text-black) !important;
  background-color: transparent;
 }
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
@@ -5168,14 +5222,144 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
  transition: fill 0.3s ease;
 }

+/* ###SEARCH BAR */
+.search {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.42rem;
+}
+
+.search-white {
+  color: #858585;
+  background-color: white;
+  border-color: white;
+}
+.search-white hr {
+  border-top-color: #f2f2f2;
+}
+.search-white .search-link {
+  color: #6c6c6c;
+}
+
+/* ### TOAST  */
+
+.toast-top-right {
+  position: fixed;
+  top: 0vh;
+  right: 0vh;
+  z-index: 99999999999 !important;
+  width: 350px;
+  height: auto;
+  margin-top: 2vh;
+  margin-right: 2vw;
+}
+
+/* ### TOAST FONT SIZE */
+.toast {
+  font-size: 1.1rem;
+}
+
+/* ### KARTU KONTROL CSS */
+.kartukontrol-sudah-label {
+  background-color: var(--labelkartukontrolSudahbg); /*figma*/
+  color: var(--textcolorlabelkartukontrolSudah); /*figma*/
+  padding: 0.15rem 0.75rem;
+  border-radius: 0.42rem;
+}
+
+.kartukontrol-pending-label {
+  background-color: var(--labelkartukontrolBelumbg); /*figma*/
+  color: var(--textcolorlabelkartukontrolBelum); /*figma*/
+  padding: 0.15rem 0.75rem;
+  border-radius: 0.42rem;
+}
+
+/* ### CUSTOM CSS SELECTPICKER */
+.btn-custom-selectpicker{
+  height: 8vh;
+  text-align: center;
+}
+
+/* ### OVERLAY */
+.overlay-loading {
+  position: relative !important;
+}
+.overlay-loading .overlay-layer {
+  position: absolute !important ;
+  top: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-pack: center !important;
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  -webkit-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  opacity: 0 !important;
+}
+.overlay-loading.overlay-block .overlay-layer,
+.overlay-layer {
+  -webkit-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  opacity: 1 !important;
+}
+.overlay-loading.overlay-block {
+  cursor: wait !important;
+}
+
+/* ### PROGRESS BAR HOVER TEXT */
+/* ## PRIMARY */
+.progress-bar {
+  height: 4px !important;
+  background-color: var(--primary) !important;
+  width: 100% !important;
+  overflow: hidden !important;
+}
+
+.progress-bar-value {
+  width: 100% !important;
+  height: 100% !important;
+  background-color: var(--primarybg) !important;
+  animation: indeterminateAnimation 1s infinite linear !important;
+  transform-origin: 0% 50% !important;
+}
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+  40% {
+    transform: translateX(0) scaleX(0.4);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.5);
+  }
+}
+/* ## SECONDARY */
+
+/* ## SUCCESS */
+/* ## INFO */
+/* ## WARNING */
+/* ## DANGER */
+
+/* ### HTMX INDICATOR */
 .htmx-indicator {
-  display: none;
+  display: none !important;
 }
 .htmx-request .htmx-indicator {
-  display: inline;
+  display: inline-block !important;
 }
 .htmx-request.htmx-indicator {
-  display: inline;
+  display: inline-block !important;
 }
 /* ### BUTTON HOVER TEXT */
 /* ###  */
--- a/assets/asset-corporate-portal/media/person/person.png
+++ b/assets/asset-corporate-portal/media/person/person.png
--- a/assets/mcu/doctor.html
+++ b/assets/mcu/doctor.html
@@ -0,0 +1,511 @@
+<!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"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css"
+    />
+
+    <style>
+      .filter-option-inner-inner {
+        margin-top: 1.2vh;
+        color: var(--text-disabled);
+      }
+      .bootstrap-select > .dropdown-toggle.bs-placeholder.btn {
+        color: var(--text-disabled);
+      }
+
+      .bootstrap-select.btn-group .dropdown-menu {
+        min-width: 100%;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        position: sticky;
+      }
+
+      .dropdown-menu {
+        transform: translate3d(0px, 0px, 0px) !important;
+      }
+    </style>
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body
+    id="kt_body"
+    class="bg-white 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="wrapperx p-5 h-100">
+      <!-- person.png start -->
+      <div class="row">
+        <div class="col-4">
+          <img
+            src="asset-corporate-portal/media/person/person.png"
+            style="display: block; width: 13vw"
+          />
+        </div>
+      </div>
+
+      <div class="row mt-5">
+        <div class="col-4">
+          <button
+            class="btn bg-primary-transparent text-center text-primary"
+            style="width: 13vw; font-weight: 600"
+          >
+            Update Foto
+          </button>
+        </div>
+      </div>
+      <!-- person.png end -->
+
+      <div class="row mt-5">
+        <!-- col 1 start -->
+        <div class="col-4">
+          <div class="form-row">
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Sapaan</label
+              >
+              <select
+                class="selectpicker form-control"
+                id="select1"
+                data-live-search="true"
+                data-size="4"
+                data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+              >
+                <option value="default">Pilih Sapaan</option>
+                <option value="mr">Tuan</option>
+                <option value="mrs">Nyonya</option>
+                <option value="ms">Nona</option>
+              </select>
+            </div>
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Imbuhan Awal 1</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Imbuhan Awal 1"
+              />
+            </div>
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Imbuhan Awal 2</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Imbuhan Awal 2"
+              />
+            </div>
+          </div>
+
+          <!-- jenis kelamin -->
+          <div class="form-row mt-5">
+            <label for="input1" style="font-family: Poppins; font-weight: 600"
+              >Jenis Kelamin</label
+            >
+            <select
+              class="selectpicker form-control"
+              id="select1"
+              data-live-search="true"
+              data-size="4"
+              data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+            >
+              <option value="default">Pilih Jenis Kelamin</option>
+              <option value="mr">Tuan</option>
+              <option value="mrs">Nyonya</option>
+              <option value="ms">Nona</option>
+            </select>
+          </div>
+          <!-- jenis kelamin -->
+          <!-- gol darah -->
+          <div class="form-row mt-5">
+            <label for="input1" style="font-family: Poppins; font-weight: 600"
+              >Golongan Darah</label
+            >
+            <select
+              class="selectpicker form-control"
+              id="select1"
+              data-live-search="true"
+              data-size="4"
+              data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+            >
+              <option value="default">Pilih Golongan Darah</option>
+              <option value="mr">Tuan</option>
+              <option value="mrs">Nyonya</option>
+              <option value="ms">Nona</option>
+            </select>
+          </div>
+          <!-- gol darah -->
+          <!-- kewarganegaraan -->
+          <div class="form-row mt-5">
+            <label for="input1" style="font-family: Poppins; font-weight: 600"
+              >Kewarganegaraan</label
+            >
+            <div class="form-control border-0 h-auto p-0 mt-3">
+              <div class="form-group">
+                <div style="display: flex; gap: 20px">
+                  <label style="display: flex; align-items: center; gap: 5px">
+                    <input type="radio" name="nationality" value="wni" />
+                    <p style="margin: 0">WNI</p>
+                  </label>
+                  <label style="display: flex; align-items: center; gap: 5px">
+                    <input type="radio" name="nationality" value="wna" />
+                    <p style="margin: 0">WNA</p>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- kewarganegaraan -->
+
+          <!-- identitas -->
+          <div class="form-row mt-5">
+            <label for="input1" style="font-family: Poppins; font-weight: 600"
+              >Imbuhan Awal 1</label
+            >
+            <input
+              type="text"
+              class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+              placeholder="Imbuhan Awal 1"
+            />
+          </div>
+          <!-- identitas -->
+        </div>
+        <!-- col 1 end -->
+        <!-- col 2 start -->
+        <div class="col-4">
+          <!-- nama -->
+          <div class="form-row">
+            <label style="font-family: Poppins; font-weight: 600">Nama</label>
+            <input
+              type="text"
+              class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+              placeholder="Input 3"
+            />
+          </div>
+          <!-- nama -->
+          <!-- tanggal lahir -->
+          <div class="form-row mt-5">
+            <label style="font-family: Poppins; font-weight: 600"
+              >Tanggal Lahir</label
+            >
+            <div class="input-group date bg-field border-0 rounded-lg">
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                readonly
+                placeholder="Pilih Tanggal"
+                id="datepicker"
+              />
+              <div class="input-group-prepend">
+                <span
+                  class="input-group-text bg-field border-0 rounded-lg"
+                  id="calendar-icon"
+                >
+                  <span
+                    class="iconify text-grey"
+                    data-icon="heroicons-solid:calendar"
+                    style="font-size: 20px"
+                  ></span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <!-- tanggal lahir -->
+          <!-- rhesus -->
+          <div class="form-row mt-5">
+            <label style="font-family: Poppins; font-weight: 600">Rhesus</label>
+            <select
+              class="selectpicker form-control"
+              id="select1"
+              data-live-search="true"
+              data-size="5"
+              data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+            >
+              <option value="default">Pilih Rhesus</option>
+              <option value="mr">Tuan</option>
+              <option value="mrs">Nyonya</option>
+              <option value="ms">Nona</option>
+            </select>
+          </div>
+          <!-- rhesus -->
+          <!-- etnis -->
+          <div class="form-row mt-5">
+            <label style="font-family: Poppins; font-weight: 600">Etnis</label>
+            <select
+              class="selectpicker form-control"
+              id="select1"
+              data-live-search="true"
+              data-size="4"
+              data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+            >
+              <option value="default">Pilih Etnis</option>
+              <option value="mr">Tuan</option>
+              <option value="mrs">Nyonya</option>
+              <option value="ms">Nona</option>
+            </select>
+          </div>
+          <!-- etnis -->
+
+          <!-- no hp -->
+          <div class="form-row mt-6">
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Nomor HP</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Nomor HP"
+              />
+            </div>
+          </div>
+          <!-- no hp -->
+        </div>
+        <!-- col 2 end -->
+        <!-- col 3 start -->
+        <div class="col-4">
+          <div class="form-row">
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Imbuhan Akhir 1</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Imbuhan Akhir 1"
+              />
+            </div>
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Imbuhan Akhir 2</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Imbuhan Akhir 2"
+              />
+            </div>
+          </div>
+
+          <!-- umur -->
+          <div class="form-row mt-5">
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Umur</label
+              >
+              <input
+                type="number"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Tahun"
+              />
+            </div>
+            <div class="col mt-8">
+              <input
+                type="number"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Bulan"
+              />
+            </div>
+            <div class="col mt-8">
+              <input
+                type="number"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Hari"
+              />
+            </div>
+          </div>
+          <!-- umur -->
+
+          <!-- pendidikan terakhir -->
+          <div class="form-row mt-5">
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Pendidikan Terakhir</label
+              >
+              <select
+                class="selectpicker form-control"
+                id="select1"
+                data-live-search="true"
+                data-size="4"
+                data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+              >
+                <option value="default">Pilih Pendidikan</option>
+                <option value="mr">Tuan</option>
+                <option value="mrs">Nyonya</option>
+                <option value="ms">Nona</option>
+              </select>
+            </div>
+          </div>
+          <!-- pendidikan terakhir -->
+
+          <!-- identitas pilihan -->
+          <div class="form-row mt-5">
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Identitas</label
+              >
+              <select
+                class="selectpicker form-control"
+                id="select1"
+                data-live-search="true"
+                data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+                data-size="4"
+              >
+                <option value="default">Pilih Identitas</option>
+                <option value="mr">Tuan</option>
+                <option value="mrs">Nyonya</option>
+                <option value="ms">Nona</option>
+              </select>
+            </div>
+          </div>
+          <!-- identitas pilihan -->
+
+          <!-- email -->
+          <div class="form-row mt-6">
+            <div class="col">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Email</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Email"
+              />
+            </div>
+          </div>
+          <!-- email -->
+        </div>
+        <!-- col 3 end -->
+      </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 src="assets/js/pages/crud/forms/widgets/bootstrap-datepicker.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;;");
+      }
+
+      $(document).ready(function () {
+        // $(".selectpicker").selectpicker();
+        $(".selectpicker").selectpicker({
+          dropupAuto: false,
+        });
+        $("#datepicker").datepicker({
+          format: "dd/mm/yyyy",
+        });
+        $("#calendar-icon").click(function () {
+          $("#datepicker").datepicker("show");
+        });
+      });
+    </script>
+    <!--end::Global Theme Bundle-->
+
+    <!--end::Page Scripts-->
+  </body>
+  <!--end::Body-->
+</html>
--- a/assets/mcu/mike/t0007.html
+++ b/assets/mcu/mike/t0007.html
--- a/assets/mcu/mike/t0008.html
+++ b/assets/mcu/mike/t0008.html
@@ -0,0 +1,881 @@
+<!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>Metronic | Dashboard</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"
+    />
+    <!--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"
+    />
+    <!--end::Layout Themes-->
+
+    <link rel="shortcut icon" href="../../assets/media/logos/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="../asset-corporate-portal/css/sas.bundle.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::Menu Navigator-->
+    <div
+      class="aside aside-left aside-fixed d-flex flex-column flex-row-auto"
+      id="kt_aside"
+    >
+      <!--begin::Brand-->
+      <div class="brand flex-column-auto" id="kt_brand">
+        <!--begin::Logo-->
+        <a href="t0001.html" class="brand-logo">
+          <img
+            alt="Logo"
+            class="img-fluid"
+            src="../../asset-corporate-portal/media/logo/logo.png"
+          />
+        </a>
+        <!--end::Logo-->
+
+        <!--begin::Toggle-->
+        <button class="brand-toggle btn btn-sm px-0" id="kt_aside_toggle">
+          <span class="svg-icon svg-icon svg-icon-xl"
+            ><!--begin::Svg Icon | path:../assets/media/svg/icons/Navigation/Angle-double-left.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" />
+                <path
+                  d="M5.29288961,6.70710318 C4.90236532,6.31657888 4.90236532,5.68341391 5.29288961,5.29288961 C5.68341391,4.90236532 6.31657888,4.90236532 6.70710318,5.29288961 L12.7071032,11.2928896 C13.0856821,11.6714686 13.0989277,12.281055 12.7371505,12.675721 L7.23715054,18.675721 C6.86395813,19.08284 6.23139076,19.1103429 5.82427177,18.7371505 C5.41715278,18.3639581 5.38964985,17.7313908 5.76284226,17.3242718 L10.6158586,12.0300721 L5.29288961,6.70710318 Z"
+                  fill="#000000"
+                  fill-rule="nonzero"
+                  transform="translate(8.999997, 11.999999) scale(-1, 1) translate(-8.999997, -11.999999) "
+                />
+                <path
+                  d="M10.7071009,15.7071068 C10.3165766,16.0976311 9.68341162,16.0976311 9.29288733,15.7071068 C8.90236304,15.3165825 8.90236304,14.6834175 9.29288733,14.2928932 L15.2928873,8.29289322 C15.6714663,7.91431428 16.2810527,7.90106866 16.6757187,8.26284586 L22.6757187,13.7628459 C23.0828377,14.1360383 23.1103407,14.7686056 22.7371482,15.1757246 C22.3639558,15.5828436 21.7313885,15.6103465 21.3242695,15.2371541 L16.0300699,10.3841378 L10.7071009,15.7071068 Z"
+                  fill="#000000"
+                  fill-rule="nonzero"
+                  opacity="0.3"
+                  transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999) "
+                />
+              </g></svg
+            ><!--end::Svg Icon--></span
+          >
+        </button>
+        <!--end::Toolbar-->
+      </div>
+      <!--end::Brand-->
+
+      <!--begin::Aside Menu-->
+      <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">
+            <li class="menu-item menu-item-active" aria-haspopup="true">
+              <a href="index.html" 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" />
+                      <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
+                        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"
+                      />
+                    </g></svg
+                  ><!--end::Svg Icon--></span
+                ><span class="menu-text">Dashboard</span></a
+              >
+            </li>
+            <li class="menu-section">
+              <h4 class="menu-text">Menu</h4>
+              <i class="menu-icon ki ki-bold-more-hor icon-md"></i>
+            </li>
+            <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/Layout/Layout-4-blocks.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
+                        fill="#000000"
+                        x="4"
+                        y="4"
+                        width="7"
+                        height="7"
+                        rx="1.5"
+                      />
+                      <path
+                        d="M5.5,13 L9.5,13 C10.3284271,13 11,13.6715729 11,14.5 L11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L5.5,20 C4.67157288,20 4,19.3284271 4,18.5 L4,14.5 C4,13.6715729 4.67157288,13 5.5,13 Z M14.5,4 L18.5,4 C19.3284271,4 20,4.67157288 20,5.5 L20,9.5 C20,10.3284271 19.3284271,11 18.5,11 L14.5,11 C13.6715729,11 13,10.3284271 13,9.5 L13,5.5 C13,4.67157288 13.6715729,4 14.5,4 Z M14.5,13 L18.5,13 C19.3284271,13 20,13.6715729 20,14.5 L20,18.5 C20,19.3284271 19.3284271,20 18.5,20 L14.5,20 C13.6715729,20 13,19.3284271 13,18.5 L13,14.5 C13,13.6715729 13.6715729,13 14.5,13 Z"
+                        fill="#000000"
+                        opacity="0.3"
+                      />
+                    </g></svg
+                  ><!--end::Svg Icon--></span
+                ><span class="menu-text">Front Office</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">Front Office</span></span
+                    >
+                  </li>
+                  <li
+                    class="menu-item menu-item-submenu"
+                    aria-haspopup="true"
+                    data-menu-toggle="hover"
+                  >
+                    <a href="javascript:;" class="menu-link menu-toggle"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Registrasi</span
+                      ><span class="menu-label"></span
+                    ></a>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <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/Code/Compiling.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" />
+                      <path
+                        d="M2.56066017,10.6819805 L4.68198052,8.56066017 C5.26776695,7.97487373 6.21751442,7.97487373 6.80330086,8.56066017 L8.9246212,10.6819805 C9.51040764,11.267767 9.51040764,12.2175144 8.9246212,12.8033009 L6.80330086,14.9246212 C6.21751442,15.5104076 5.26776695,15.5104076 4.68198052,14.9246212 L2.56066017,12.8033009 C1.97487373,12.2175144 1.97487373,11.267767 2.56066017,10.6819805 Z M14.5606602,10.6819805 L16.6819805,8.56066017 C17.267767,7.97487373 18.2175144,7.97487373 18.8033009,8.56066017 L20.9246212,10.6819805 C21.5104076,11.267767 21.5104076,12.2175144 20.9246212,12.8033009 L18.8033009,14.9246212 C18.2175144,15.5104076 17.267767,15.5104076 16.6819805,14.9246212 L14.5606602,12.8033009 C13.9748737,12.2175144 13.9748737,11.267767 14.5606602,10.6819805 Z"
+                        fill="#000000"
+                        opacity="0.3"
+                      />
+                      <path
+                        d="M8.56066017,16.6819805 L10.6819805,14.5606602 C11.267767,13.9748737 12.2175144,13.9748737 12.8033009,14.5606602 L14.9246212,16.6819805 C15.5104076,17.267767 15.5104076,18.2175144 14.9246212,18.8033009 L12.8033009,20.9246212 C12.2175144,21.5104076 11.267767,21.5104076 10.6819805,20.9246212 L8.56066017,18.8033009 C7.97487373,18.2175144 7.97487373,17.267767 8.56066017,16.6819805 Z M8.56066017,4.68198052 L10.6819805,2.56066017 C11.267767,1.97487373 12.2175144,1.97487373 12.8033009,2.56066017 L14.9246212,4.68198052 C15.5104076,5.26776695 15.5104076,6.21751442 14.9246212,6.80330086 L12.8033009,8.9246212 C12.2175144,9.51040764 11.267767,9.51040764 10.6819805,8.9246212 L8.56066017,6.80330086 C7.97487373,6.21751442 7.97487373,5.26776695 8.56066017,4.68198052 Z"
+                        fill="#000000"
+                      />
+                    </g></svg
+                  ><!--end::Svg Icon--></span
+                ><span class="menu-text">Station</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">Station</span></span
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="layout/subheader/toolbar.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Sample Station</span></a
+                    >
+                  </li>
+                </ul>
+              </div>
+            </li>
+
+            <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/General/Attachment2.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" />
+                      <path
+                        d="M11.7573593,15.2426407 L8.75735931,15.2426407 C8.20507456,15.2426407 7.75735931,15.6903559 7.75735931,16.2426407 C7.75735931,16.7949254 8.20507456,17.2426407 8.75735931,17.2426407 L11.7573593,17.2426407 L11.7573593,18.2426407 C11.7573593,19.3472102 10.8619288,20.2426407 9.75735931,20.2426407 L5.75735931,20.2426407 C4.65278981,20.2426407 3.75735931,19.3472102 3.75735931,18.2426407 L3.75735931,14.2426407 C3.75735931,13.1380712 4.65278981,12.2426407 5.75735931,12.2426407 L9.75735931,12.2426407 C10.8619288,12.2426407 11.7573593,13.1380712 11.7573593,14.2426407 L11.7573593,15.2426407 Z"
+                        fill="#000000"
+                        opacity="0.3"
+                        transform="translate(7.757359, 16.242641) rotate(-45.000000) translate(-7.757359, -16.242641) "
+                      />
+                      <path
+                        d="M12.2426407,8.75735931 L15.2426407,8.75735931 C15.7949254,8.75735931 16.2426407,8.30964406 16.2426407,7.75735931 C16.2426407,7.20507456 15.7949254,6.75735931 15.2426407,6.75735931 L12.2426407,6.75735931 L12.2426407,5.75735931 C12.2426407,4.65278981 13.1380712,3.75735931 14.2426407,3.75735931 L18.2426407,3.75735931 C19.3472102,3.75735931 20.2426407,4.65278981 20.2426407,5.75735931 L20.2426407,9.75735931 C20.2426407,10.8619288 19.3472102,11.7573593 18.2426407,11.7573593 L14.2426407,11.7573593 C13.1380712,11.7573593 12.2426407,10.8619288 12.2426407,9.75735931 L12.2426407,8.75735931 Z"
+                        fill="#000000"
+                        transform="translate(16.242641, 7.757359) rotate(-45.000000) translate(-16.242641, -7.757359) "
+                      />
+                      <path
+                        d="M5.89339828,3.42893219 C6.44568303,3.42893219 6.89339828,3.87664744 6.89339828,4.42893219 L6.89339828,6.42893219 C6.89339828,6.98121694 6.44568303,7.42893219 5.89339828,7.42893219 C5.34111353,7.42893219 4.89339828,6.98121694 4.89339828,6.42893219 L4.89339828,4.42893219 C4.89339828,3.87664744 5.34111353,3.42893219 5.89339828,3.42893219 Z M11.4289322,5.13603897 C11.8194565,5.52656326 11.8194565,6.15972824 11.4289322,6.55025253 L10.0147186,7.96446609 C9.62419433,8.35499039 8.99102936,8.35499039 8.60050506,7.96446609 C8.20998077,7.5739418 8.20998077,6.94077682 8.60050506,6.55025253 L10.0147186,5.13603897 C10.4052429,4.74551468 11.0384079,4.74551468 11.4289322,5.13603897 Z M0.600505063,5.13603897 C0.991029355,4.74551468 1.62419433,4.74551468 2.01471863,5.13603897 L3.42893219,6.55025253 C3.81945648,6.94077682 3.81945648,7.5739418 3.42893219,7.96446609 C3.0384079,8.35499039 2.40524292,8.35499039 2.01471863,7.96446609 L0.600505063,6.55025253 C0.209980772,6.15972824 0.209980772,5.52656326 0.600505063,5.13603897 Z"
+                        fill="#000000"
+                        opacity="0.3"
+                        transform="translate(6.014719, 5.843146) rotate(-45.000000) translate(-6.014719, -5.843146) "
+                      />
+                      <path
+                        d="M17.9142136,15.4497475 C18.4664983,15.4497475 18.9142136,15.8974627 18.9142136,16.4497475 L18.9142136,18.4497475 C18.9142136,19.0020322 18.4664983,19.4497475 17.9142136,19.4497475 C17.3619288,19.4497475 16.9142136,19.0020322 16.9142136,18.4497475 L16.9142136,16.4497475 C16.9142136,15.8974627 17.3619288,15.4497475 17.9142136,15.4497475 Z M23.4497475,17.1568542 C23.8402718,17.5473785 23.8402718,18.1805435 23.4497475,18.5710678 L22.0355339,19.9852814 C21.6450096,20.3758057 21.0118446,20.3758057 20.6213203,19.9852814 C20.2307961,19.5947571 20.2307961,18.9615921 20.6213203,18.5710678 L22.0355339,17.1568542 C22.4260582,16.76633 23.0592232,16.76633 23.4497475,17.1568542 Z M12.6213203,17.1568542 C13.0118446,16.76633 13.6450096,16.76633 14.0355339,17.1568542 L15.4497475,18.5710678 C15.8402718,18.9615921 15.8402718,19.5947571 15.4497475,19.9852814 C15.0592232,20.3758057 14.4260582,20.3758057 14.0355339,19.9852814 L12.6213203,18.5710678 C12.2307961,18.1805435 12.2307961,17.5473785 12.6213203,17.1568542 Z"
+                        fill="#000000"
+                        opacity="0.3"
+                        transform="translate(18.035534, 17.863961) scale(1, -1) rotate(45.000000) translate(-18.035534, -17.863961) "
+                      />
+                    </g></svg
+                  ><!--end::Svg Icon--></span
+                ><span class="menu-text">Management MCU</span
+                ><i class="menu-arrow"></i
+              ></a>
+              <div class="menu-submenu">
+                <i class="menu-arrow"></i>
+                <ul class="menu-subnav">
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/icons/svg.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Setup MCU</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/icons/custom-icons.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Pre-Registrasi</span></a
+                    >
+                  </li>
+                </ul>
+              </div>
+            </li>
+
+            <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/Design/Select.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" />
+                      <path
+                        d="M18.5,8 C17.1192881,8 16,6.88071187 16,5.5 C16,4.11928813 17.1192881,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 C21,6.88071187 19.8807119,8 18.5,8 Z M18.5,21 C17.1192881,21 16,19.8807119 16,18.5 C16,17.1192881 17.1192881,16 18.5,16 C19.8807119,16 21,17.1192881 21,18.5 C21,19.8807119 19.8807119,21 18.5,21 Z M5.5,21 C4.11928813,21 3,19.8807119 3,18.5 C3,17.1192881 4.11928813,16 5.5,16 C6.88071187,16 8,17.1192881 8,18.5 C8,19.8807119 6.88071187,21 5.5,21 Z"
+                        fill="#000000"
+                        opacity="0.3"
+                      />
+                      <path
+                        d="M5.5,8 C4.11928813,8 3,6.88071187 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 C6.88071187,3 8,4.11928813 8,5.5 C8,6.88071187 6.88071187,8 5.5,8 Z M11,4 L13,4 C13.5522847,4 14,4.44771525 14,5 C14,5.55228475 13.5522847,6 13,6 L11,6 C10.4477153,6 10,5.55228475 10,5 C10,4.44771525 10.4477153,4 11,4 Z M11,18 L13,18 C13.5522847,18 14,18.4477153 14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 C10.4477153,20 10,19.5522847 10,19 C10,18.4477153 10.4477153,18 11,18 Z M5,10 C5.55228475,10 6,10.4477153 6,11 L6,13 C6,13.5522847 5.55228475,14 5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 C4,10.4477153 4.44771525,10 5,10 Z M19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 C20,13.5522847 19.5522847,14 19,14 C18.4477153,14 18,13.5522847 18,13 L18,11 C18,10.4477153 18.4477153,10 19,10 Z"
+                        fill="#000000"
+                      />
+                    </g></svg
+                  ><!--end::Svg Icon--></span
+                ><span class="menu-text">Master Data</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">Master Data</span></span
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">User</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">User Group</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Corporate</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Test</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Bahan</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Sample Type</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Sample Station</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Result Non Lab</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Template Fisik</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Pasien</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Dokter</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Paket</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Harga Single</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Harga Panel</span></a
+                    >
+                  </li>
+                  <li class="menu-item" aria-haspopup="true">
+                    <a href="features/calendar/basic.html" class="menu-link"
+                      ><i class="menu-bullet menu-bullet-line"><span></span></i
+                      ><span class="menu-text">Harga Profile</span></a
+                    >
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+          <!--end::Menu Nav-->
+        </div>
+        <!--end::Menu Container-->
+      </div>
+      <!--end::Aside Menu-->
+    </div>
+    <!--end::Menu Navigator-->
+
+    <!--begin::Wrapper-->
+    <div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
+      <!--begin::Header-->
+      <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"
+          >
+            <!--begin::Header Menu-->
+            <div
+              id="kt_header_menu"
+              class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap p-3 justify-content-around"
+            ></div>
+            <!--end::Header Menu-->
+          </div>
+          <!--end::Header Menu Wrapper-->
+
+          <!--begin::Topbar-->
+          <div class="topbar">
+            <!--begin::Search-->
+
+            <!--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"
+                  >Sean</span
+                >
+                <span
+                  class="symbol symbol-lg-35 symbol-25 symbol-light-success"
+                >
+                  <span class="symbol-label font-size-h5 font-weight-bold"
+                    >S</span
+                  >
+                </span>
+              </div>
+            </div>
+            <!--end::User-->
+          </div>
+          <!--end::Topbar-->
+        </div>
+        <!--end::Container-->
+      </div>
+      <!--end::Header-->
+
+      <!--begin::Content-->
+      <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
+        <!--begin::Breadcrumb-->
+        <div class="subheader py-2 py-lg-6 subheader-solid" id="kt_subheader">
+          <div
+            class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap"
+          >
+            <!--begin::Info-->
+            <div class="d-row align-items-center flex-wrap mr-1">
+              <!--begin::Page Heading-->
+              <div class="d-row align-items-baseline flex-wrap mr-5">
+                <!--begin::Page Title-->
+                <h2 class="text-dark font-weight-bold my-1 mr-5">
+                  Master Dokter
+                </h2>
+                <!--end::Page Title-->
+
+                <!--begin::Breadcrumb-->
+                <nav aria-label="breadcrumb">
+                  <ul
+                    class="breadcrumb-item breadcrumb-transparent breadcrumb-dot 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"> Master </a>
+                    </li>
+                    <li class="breadcrumb-item">
+                      <a href="" class="text-muted"> Dokter </a>
+                    </li>
+                  </ul>
+                </nav>
+                <!--end::Breadcrumb-->
+              </div>
+              <!--end::Page Heading-->
+            </div>
+            <!--end::Info-->
+            <!--begin::Button Add New-->
+            <div class="d-flex justify-content-end">
+              <button
+                type="button"
+                class="btn btn-primary"
+                data-toggle="modal"
+                data-target="#dialogNew"
+              >
+                Add New
+              </button>
+            </div>
+            <!--end::Button Add New-->
+          </div>
+        </div>
+        <!--end::Breadcrumb-->
+
+        <div class="d-flex flex-column-fluid">
+          <!--begin::Container-->
+          <div class="container">
+            <!--begin::Card-->
+            <div class="card card-custom">
+              <!--begin::Card Header-->
+              <div class="card-header row justify-content-between">
+                <h5 class="card-title">New Dokter</h5>
+                <div class="card-toolbar">
+                  <button
+                    type="button"
+                    class="card-toolbar close"
+                    data-dismiss="toast"
+                    aria-label="Close"
+                  >
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+              </div>
+              <!--end::Card Header-->
+            </div>
+            <div class="card card-custom">
+              <!--begin::CardBody-->
+              <div class="card-body row">
+                <!--begin::Update Foto-->
+                <div
+                  class="image-input image-input-outline"
+                  id="kt_contact_add_avatar"
+                  width="100px 200px"
+                >
+                  <div
+                    class="image-input-wrapper"
+                    style="
+                      background-image: url(../../assets/media/svg/avatars/001-boy.svg);
+                    "
+                  ></div>
+                  <a href="#" class="btn btn-light-primary mr-2">
+                    Update Foto</a
+                  >
+
+                  <!--end::Update Foto-->
+                  <!-- begin::Form -->
+                  <div class="card card-custom">
+                    <!--begin::Form-->
+                    <div class="flex">
+                      <form class="form flex-column-auto">
+                        <div class="card-body row justify-content-between">
+                          <div class="form-group">
+                            <label>Sapaan</label>
+                            <select class="form-control form-control-solid">
+                              <option>Sapaan</option>
+                              <option>Saudara</option>
+                              <option>Tuan</option>
+                              <option>Nyonya</option>
+                            </select>
+                          </div>
+                          <div class="form-group">
+                            <label>Imbuhan Awal 1</label>
+                            <input
+                              type="email"
+                              class="form-control form-control-solid"
+                              placeholder="Example input"
+                            />
+                          </div>
+                          <div class="form-group">
+                            <label>Imbuhan Awal 2</label>
+                            <input
+                              type="email"
+                              class="form-control form-control-solid"
+                              placeholder="Example input"
+                            />
+                          </div>
+                        </div>
+                      </form>
+                      <div class="form-group">
+                        <label>Jenis Kelamin</label>
+                        <select class="form-control form-control-solid">
+                          <option>Jenis Kelamin</option>
+                          <option>Laki-laki</option>
+                          <option>Perempuan</option>
+                        </select>
+                      </div>
+                      <div class="form-group">
+                        <label>Golongan Darah</label>
+                        <select class="form-control form-control-solid">
+                          <option>Golongan Darah</option>
+                          <option>O</option>
+                          <option>A</option>
+                          <option>B</option>
+                          <option>AB</option>
+                        </select>
+                      </div>
+                      <div class="form-group flex">
+                        <label class="col-3 col-form-label"
+                          >Kewarga Negaraan</label
+                        >
+                        <div class="col-9 col-form-label">
+                          <div class="radio-inline justify-content-between">
+                            <label class="radio">
+                              <input type="radio" name="radios5" />
+                              <span></span>
+                              WNI
+                            </label>
+                            <label class="radio">
+                              <input type="radio" name="radios5" />
+                              <span></span>
+                              WNA
+                            </label>
+                          </div>
+                        </div>
+                        <form>
+                          <div class="form-group">
+                            <label>Nomor Identitas</label>
+                            <input
+                              type="email"
+                              class="form-control form-control-solid"
+                              placeholder="Example input"
+                            />
+                          </div>
+                        </form>
+                        <div class="form-group">
+                          <label>Spesialis</label>
+                          <select class="form-control form-control-solid">
+                            <option>Pilih Spesialis</option>
+                            <option>Saraf</option>
+                            <option>Paru</option>
+                            <option>Anak</option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <!--end::Form-->
+                  </div>
+                  <!-- end::Form -->
+                </div>
+                <div class="flex">
+                  <div class="form-group">
+                    <label>Nama</label>
+                    <input
+                      type="email"
+                      class="form-control form-control-solid"
+                      placeholder="Example input"
+                    />
+                  </div>
+                </div>
+              </div>
+              <!--end::CardBody-->
+            </div>
+            <!--end::Card-->
+            <!--end::Container-->
+          </div>
+          <!--end::Table-->
+        </div>
+        <!--end::Content-->
+      </div>
+    </div>
+    <!--end::Wrapper-->
+
+    <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-->
+    <script src="assets/js/iconify/iconify.min.js"></script>
+  </body>
+  <!--end::Body-->
+</html>
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -3,23 +3,53 @@ package main
 import (
 	"cpone/db"
 	"cpone/handlers"
+	"time"
+
+	"cpone/package/config"
+	"cpone/package/database"

 	"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())
-	appStore, err := db.NewAppStore(dbName)
+	// app.Use(middleware.Logger())
+
+	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),
+
+					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)
 	}
@@ -31,7 +61,7 @@ func main() {
 	// SETUP ROUT CLIENT
 	handlers.SetupRoutesClient(app, appStore)
 	// SETUP ROUT DEV
-
+	handlers.SetupRoutesDev(app, appStore)
 	app.Logger.Fatal(app.Start(":5000"))
 }

--- a/component/breadcrumbadmin/breadcrumbadminv1.templ
+++ b/component/breadcrumbadmin/breadcrumbadminv1.templ
@@ -0,0 +1,26 @@
+package breadcrumadmin
+
+import "cpone/models"
+
+templ MainBreadcrumbAdminV1(data models.BreadCrumbV1) {
+	<div class="col-11">
+		<h1 class="title text-black" style="margin-bottom: 0">
+			{ data.Title }
+		</h1>
+		<nav aria-label="breadcrumb">
+			<ol class="breadcrumb" style="margin-bottom: 0">
+				for idx, d := range data.Item {
+					if (idx != len(data.Item) - 1) {
+						// tidak active
+						<li class="breadcrumb-item"><a href={ templ.SafeURL(d.Url) }>{ d.Item }</a></li>
+					} else {
+						// active
+						<li class="breadcrumb-item active" aria-current="page">
+							{ d.Item }
+						</li>
+					}
+				}
+			</ol>
+		</nav>
+	</div>
+}
--- a/component/breadcrumbadmin/breadcrumbadminv1_templ.go
+++ b/component/breadcrumbadmin/breadcrumbadminv1_templ.go
@@ -0,0 +1,102 @@
+// 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"
+
+import "cpone/models"
+
+func MainBreadcrumbAdminV1(data models.BreadCrumbV1) 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\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(data.Title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\breadcrumbadmin\breadcrumbadminv1.templ`, Line: 8, Col: 15}
+		}
+		_, 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("</h1><nav aria-label=\"breadcrumb\"><ol class=\"breadcrumb\" style=\"margin-bottom: 0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for idx, d := range data.Item {
+			if idx != len(data.Item)-1 {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <li class=\"breadcrumb-item\"><a href=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 templ.SafeURL = templ.SafeURL(d.Url)
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var3)))
+				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_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(d.Item)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\breadcrumbadmin\breadcrumbadminv1.templ`, Line: 15, Col: 75}
+				}
+				_, 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("</a></li>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <li class=\"breadcrumb-item active\" aria-current=\"page\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(d.Item)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\breadcrumbadmin\breadcrumbadminv1.templ`, Line: 19, Col: 15}
+				}
+				_, 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("</li>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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/customcheckbox/customcheckboxv1.templ
+++ b/component/customcheckbox/customcheckboxv1.templ
@@ -0,0 +1,25 @@
+package customcheckbox
+
+import "cpone/models"
+
+templ MainCustomCheckboxInput(inp models.CustomCheckboxv1Prm) {
+	<div class="form-control bg-field border-0 h-auto">
+		<div class="form-group">
+			<label>{ inp.Label }</label>
+			<div class="checkbox-list">
+				<label class="checkbox">
+					if (inp.Value == "on") {
+						<input type="checkbox" name={ inp.Name } id={ inp.ID } checked/>
+					} else {
+						<input type="checkbox" name={ inp.Name } id={ inp.ID }/>
+					}
+					<span></span>
+					{ inp.Text }
+				</label>
+			</div>
+		</div>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
--- a/component/customcheckbox/customcheckboxv1_templ.go
+++ b/component/customcheckbox/customcheckboxv1_templ.go
@@ -0,0 +1,143 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customcheckbox
+
+//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 MainCustomCheckboxInput(inp models.CustomCheckboxv1Prm) 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-control bg-field border-0 h-auto\"><div class=\"form-group\"><label>")
+		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\customcheckbox\customcheckboxv1.templ`, Line: 8, Col: 21}
+		}
+		_, 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><div class=\"checkbox-list\"><label class=\"checkbox\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if inp.Value == "on" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"checkbox\" name=\"")
+			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\customcheckbox\customcheckboxv1.templ`, Line: 12, Col: 44}
+			}
+			_, 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(inp.ID)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 12, Col: 58}
+			}
+			_, 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("\" checked> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input type=\"checkbox\" name=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 14, Col: 44}
+			}
+			_, 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("\" id=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 14, Col: 58}
+			}
+			_, 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("\"> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<span></span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 17, Col: 15}
+		}
+		_, 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("</label></div></div><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customcheckbox\customcheckboxv1.templ`, Line: 22, Col: 17}
+		}
+		_, 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("</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/customdropdown/customdropdown.templ
+++ b/component/customdropdown/customdropdown.templ
@@ -0,0 +1,119 @@
+package customdropdown;
+
+import "cpone/models"
+
+templ MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ inp.Name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ inp.ID }
+			hx-get={ inp.HxGet }
+			hx-target={ inp.HxTarget }
+			hx-indicator={ inp.HxIndicator }
+			hx-trigger={ inp.HxTrigger }
+			hx-include={ inp.HxInclude }
+		>
+			@listItem
+		</select>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
+
+templ MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ inp.Name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
+			data-size="5"
+			id={ inp.ID }
+		>
+			@listItem
+		</select>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
+
+templ MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem templ.Component) {
+	<div class="form-control bg-field border-0 h-auto">
+		<select
+			name={ name }
+			class="form-control bg-field selectpicker"
+			data-live-search="true"
+			data-size="5"
+			id={ id }
+			hx-get={ hxGet }
+			hx-target={ hxTarget }
+			hx-indicator={ hxIndicator }
+			hx-trigger={ hxTrigger }
+			hx-include={ hxInclude }
+		>
+			@listItem
+		</select>
+	</div>
+}
+
+templ CustomDropdownFilter(
+	idCmp string,
+	hxName string,
+	hxInclude string,
+	hxGet string,
+	hxSwap string,
+	hxTarget string,
+	hxTrigger string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+	listItem templ.Component) {
+	<select
+		class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
+		data-live-search="true"
+		data-size="5"
+		data-style="btn-field btn-lg rounded-lg"
+		data-live-search-placeholder="cari ..."
+		id={ idCmp }
+		name={ hxName }
+		hx-include={ hxInclude }
+		hx-get={ hxGet }
+		hx-swap={ hxSwap }
+		hx-target={ hxTarget }
+		hx-trigger={ hxTrigger }
+		hx-on::before-request={ hxBeforeRequest }
+		hx-on::after-request={ hxAfterRequest }
+	>
+		@listItem
+	</select>
+}
+
+templ CustomDropdownForm(
+	inp models.CustomDropdownV2Prm) {
+	<div class="form-group">
+		<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inp.Label } </label>
+		<select
+			if inp.ErrorMsg =="" {
+				class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
+			} else {
+				class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker is-invalid"
+			}
+			data-live-search="true"
+			data-size="5"
+			title={ inp.Placeholder }
+			data-style="btn-field btn-lg rounded-lg"
+			data-live-search-placeholder="cari ..."
+			name={ inp.Name }
+			id={ inp.ID }
+		>
+			@inp.ListItem
+		</select>
+		<div class="invalid-feedback text-danger mt-3 ml-2">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
--- a/component/customdropdown/customdropdown_templ.go
+++ b/component/customdropdown/customdropdown_templ.go
@@ -0,0 +1,611 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customdropdown
+
+//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 MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem 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=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 8, Col: 18}
+		}
+		_, 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=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 12, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 13, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 14, Col: 27}
+		}
+		_, 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-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 15, Col: 33}
+		}
+		_, 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(inp.HxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 16, Col: 29}
+		}
+		_, 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-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.HxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 17, Col: 29}
+		}
+		_, 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 22, Col: 17}
+		}
+		_, 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("</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 MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem 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_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("<div class=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 30, Col: 18}
+		}
+		_, 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("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-style=\"bg-field btn-lg rounded-lg btn-custom-selectpicker\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 35, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		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
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 40, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		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 MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem 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_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-control bg-field border-0 h-auto\"><select name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 48, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"form-control bg-field selectpicker\" data-live-search=\"true\" data-size=\"5\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(id)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 52, Col: 10}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 53, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		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_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 54, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		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_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 55, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		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_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 56, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 57, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		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
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></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 CustomDropdownFilter(
+	idCmp string,
+	hxName string,
+	hxInclude string,
+	hxGet string,
+	hxSwap string,
+	hxTarget string,
+	hxTrigger string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+	listItem 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_Var22 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var22 == nil {
+			templ_7745c5c3_Var22 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<select class=\"form-control form-control-lg bg-field btn-lg rounded-lg selectpicker\" data-live-search=\"true\" data-size=\"5\" data-style=\"btn-field btn-lg rounded-lg\" data-live-search-placeholder=\"cari ...\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(idCmp)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 80, Col: 12}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		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_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(hxName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 81, Col: 15}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 82, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var26 string
+		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 83, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var27 string
+		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 84, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+		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_Var28 string
+		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 85, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+		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_Var29 string
+		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 86, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var30 templ.ComponentScript = hxBeforeRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var30.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_Var31 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var31.Call)
+		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
+		}
+		templ_7745c5c3_Err = listItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select>")
+		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 CustomDropdownForm(
+	inp models.CustomDropdownV2Prm) 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_Var32 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var32 == nil {
+			templ_7745c5c3_Var32 = 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_Var33 string
+		templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Label)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 97, Col: 87}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</label> <select")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if inp.ErrorMsg == "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control form-control-lg bg-field btn-lg rounded-lg selectpicker\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control form-control-lg bg-field btn-lg rounded-lg selectpicker is-invalid\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" data-live-search=\"true\" data-size=\"5\" title=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var34 string
+		templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Placeholder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 106, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" data-style=\"btn-field btn-lg rounded-lg\" data-live-search-placeholder=\"cari ...\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var35 string
+		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 109, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
+		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_Var36 string
+		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 110, Col: 14}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
+		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
+		}
+		templ_7745c5c3_Err = inp.ListItem.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select><div class=\"invalid-feedback text-danger mt-3 ml-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var37 string
+		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 115, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
--- a/component/customradiobutton/customradiobuttoninline.templ
+++ b/component/customradiobutton/customradiobuttoninline.templ
@@ -0,0 +1,22 @@
+package customradiobuttoninline
+
+import "cpone/models"
+
+templ MainCustomRadioButtonInput(inp models.CustomRadioButtonv1Prm) {
+	<div class="mt-5">
+		<label for="input1" style="font-family: Poppins; font-weight: 600">{ inp.Label }</label>
+		<div class="form-control">
+			<div class="form-group">
+				<div style="display: flex; gap: 20px">
+					<label style="display: flex; align-items: center; gap: 5px">
+						<input type="radio" name="nationality" value={ inp.Value }/>
+						<p style="margin: 0">{ inp.Text }</p>
+					</label>
+				</div>
+			</div>
+		</div>
+		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
+			{ inp.ErrorMsg }
+		</div>
+	</div>
+}
--- a/component/customradiobutton/customradiobuttoninline_templ.go
+++ b/component/customradiobutton/customradiobuttoninline_templ.go
@@ -0,0 +1,89 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customradiobuttoninline
+
+//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 MainCustomRadioButtonInput(inp models.CustomRadioButtonv1Prm) 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=\"mt-5\"><label for=\"input1\" 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\customradiobutton\customradiobuttoninline.templ`, Line: 7, Col: 80}
+		}
+		_, 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><div class=\"form-control\"><div class=\"form-group\"><div style=\"display: flex; gap: 20px\"><label style=\"display: flex; align-items: center; gap: 5px\"><input type=\"radio\" name=\"nationality\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customradiobutton\customradiobuttoninline.templ`, Line: 12, Col: 62}
+		}
+		_, 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("\"><p style=\"margin: 0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customradiobutton\customradiobuttoninline.templ`, Line: 13, Col: 37}
+		}
+		_, 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></label></div></div></div><div class=\"invalid-feedback text-danger mt-3 ml-2 mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customradiobutton\customradiobuttoninline.templ`, Line: 19, 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("</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/customtextfield/customtextfieldv2.templ
+++ b/component/customtextfield/customtextfieldv2.templ
@@ -4,14 +4,28 @@ 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>
+		<label
+			if inp.Type == "hidden" {
+				class="text-black d-none"
+			} else {
+				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"
+			if inp.ErrorMsg =="" {
+				class="form-control bg-field border-0 form-control-lg bg-field rounded-lg"
+			} else {
+				class="form-control bg-field border-1 form-control-lg bg-field rounded-lg is-invalid"
+			}
 		/>
+		<div class="invalid-feedback text-danger mt-3 ml-2">
+			{ inp.ErrorMsg }
+		</div>
 	</div>
 }
--- a/component/customtextfield/customtextfieldv2_templ.go
+++ b/component/customtextfield/customtextfieldv2_templ.go
@@ -25,14 +25,29 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 			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;\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"form-group\"><label")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if inp.Type == "hidden" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"text-black d-none\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"text-black\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" 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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 14, Col: 14}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -45,7 +60,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 16, Col: 16}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -58,7 +73,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 17, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -71,7 +86,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 18, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -84,7 +99,7 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 19, Col: 32}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -97,13 +112,41 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 20, 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>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if inp.ErrorMsg == "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control bg-field border-0 form-control-lg bg-field rounded-lg\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control bg-field border-1 form-control-lg bg-field rounded-lg is-invalid\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div class=\"invalid-feedback text-danger mt-3 ml-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 28, Col: 17}
+		}
+		_, 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("</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/component/customtextfieldautocomplete/customtextfieldautocomplete.templ
+++ b/component/customtextfieldautocomplete/customtextfieldautocomplete.templ
@@ -2,7 +2,7 @@ package customtextfieldautocomplete;

 import (
 	"cpone/layout"
-	services "cpone/services/dev"
+	"cpone/models"
 )

 templ MainCustomAutoComplete(value string) {
@@ -32,7 +32,7 @@ templ ListCustomAutoCompleteHide() {
 	<div id="hasilAutoComplete"></div>
 }

-templ ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []services.AutoComplete) {
+templ ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []models.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>
--- a/component/customtextfieldautocomplete/customtextfieldautocomplete_templ.go
+++ b/component/customtextfieldautocomplete/customtextfieldautocomplete_templ.go
@@ -12,7 +12,7 @@ import "bytes"

 import (
 	"cpone/layout"
-	services "cpone/services/dev"
+	"cpone/models"
 )

 func MainCustomAutoComplete(value string) templ.Component {
@@ -76,7 +76,7 @@ func ListCustomAutoCompleteHide() templ.Component {
 	})
 }

-func ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []services.AutoComplete) templ.Component {
+func ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []models.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 {
--- a/component/customtextfieldsearch/customtextfieldsearch.templ
+++ b/component/customtextfieldsearch/customtextfieldsearch.templ
@@ -4,19 +4,121 @@ 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 } 
-    />
-}
+	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 }
+		autocomplete="off"
+	/>
+}
+
+templ MainCustomTextFieldSearchV1(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxExt string) {
+	<input
+		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+		type={ inpType }
+		name={ inpName }
+		id={ inpId }
+		placeholder={ inpPlaceHolder }
+		hx-get={ hxGet }
+		hx-trigger={ hxTrigger }
+		hx-target={ hxTarget }
+		hx-indicator={ hxIndicator }
+		value={ value }
+		hx-ext={ hxExt }
+		autocomplete="off"
+	/>
+}
+
+templ MainCustomTextFieldSearchV2(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string) {
+	<input
+		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+		type={ inpType }
+		name={ inpName }
+		id={ inpId }
+		placeholder={ inpPlaceHolder }
+		hx-get={ hxGet }
+		hx-trigger={ hxTrigger }
+		hx-target={ hxTarget }
+		hx-indicator={ hxIndicator }
+		value={ value }
+		hx-include={ hxInclude }
+		hx-swap={ hxSwap }
+		autocomplete="off"
+	/>
+	<script>
+    document.body.addEventListener('htmx:targetError', function(event) {
+        console.error('Error updating target element:', event.detail);
+        alert('There was an error updating the target element.');
+    });
+</script>
+}
+
+templ MainCustomTextFieldSearchV3(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript) {
+	<input
+		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+		type={ inpType }
+		name={ inpName }
+		id={ inpId }
+		placeholder={ inpPlaceHolder }
+		hx-get={ hxGet }
+		hx-trigger={ hxTrigger }
+		hx-target={ hxTarget }
+		hx-indicator={ hxIndicator }
+		value={ value }
+		hx-include={ hxInclude }
+		hx-swap={ hxSwap }
+		hx-on::before-request={ hxBeforeRequest }
+		hx-on::after-request={ hxAfterRequest }
+		autocomplete="off"
+	/>
+	<script>
+    document.body.addEventListener('htmx:targetError', function(event) {
+        console.error('Error updating target element:', event.detail);
+        alert('There was an error updating the target element.');
+    });
+</script>
+}
--- a/component/customtextfieldsearch/customtextfieldsearch_templ.go
+++ b/component/customtextfieldsearch/customtextfieldsearch_templ.go
@@ -37,7 +37,7 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 13, Col: 16}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -50,7 +50,7 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 14, Col: 16}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -63,7 +63,7 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 15, Col: 14}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -76,7 +76,7 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 16, Col: 30}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -89,7 +89,7 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 17, Col: 18}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -102,7 +102,7 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 18, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -115,7 +115,7 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 19, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -128,13 +128,557 @@ func MainCustomTextFieldSearch(
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 20, Col: 28}
 		}
 		_, 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("\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\">")
+		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 MainCustomTextFieldSearchV1(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxExt 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_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("<input class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 38, Col: 16}
+		}
+		_, 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("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 39, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		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_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(inpId)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 40, Col: 12}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		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_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 41, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 42, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		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_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 43, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		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_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 44, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		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_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 45, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		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_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 46, Col: 15}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-ext=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxExt)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 47, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\">")
+		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 MainCustomTextFieldSearchV2(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude 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_Var21 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var21 == nil {
+			templ_7745c5c3_Var21 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 66, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		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_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 67, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		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_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(inpId)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 68, Col: 12}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+		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_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 69, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var26 string
+		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 70, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+		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_Var27 string
+		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 71, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+		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_Var28 string
+		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 72, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+		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_Var29 string
+		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 73, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
+		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_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 74, Col: 15}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var31 string
+		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 75, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 string
+		templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 76, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\"><script>\r\n    document.body.addEventListener('htmx:targetError', function(event) {\r\n        console.error('Error updating target element:', event.detail);\r\n        alert('There was an error updating the target element.');\r\n    });\r\n</script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func MainCustomTextFieldSearchV3(
+	inpId,
+	inpName,
+	inpPlaceHolder,
+	inpType,
+	hxGet,
+	hxTrigger,
+	hxTarget,
+	hxIndicator,
+	value,
+	hxSwap string,
+	hxInclude string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript) 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_Var33 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var33 == nil {
+			templ_7745c5c3_Var33 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input class=\"form-control bg-field border-0 h-auto py-6 px-6 rounded-lg\" type=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var34 string
+		templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(inpType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 103, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+		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_Var35 string
+		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(inpName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 104, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
+		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_Var36 string
+		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(inpId)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 105, Col: 12}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
+		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_Var37 string
+		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(inpPlaceHolder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 106, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var38 string
+		templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 107, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
+		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_Var39 string
+		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 108, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
+		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_Var40 string
+		templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 109, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
+		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_Var41 string
+		templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 110, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
+		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_Var42 string
+		templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 111, Col: 15}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var43 string
+		templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 112, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var43))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var44 string
+		templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfieldsearch\customtextfieldsearch.templ`, Line: 113, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var45 templ.ComponentScript = hxBeforeRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var45.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_Var46 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var46.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\"><script>\r\n    document.body.addEventListener('htmx:targetError', function(event) {\r\n        console.error('Error updating target element:', event.detail);\r\n        alert('There was an error updating the target element.');\r\n    });\r\n</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/component/modal/modal_confirmation.templ
+++ b/component/modal/modal_confirmation.templ
@@ -28,14 +28,14 @@ templ ModalConfirmation(
 					<p>{ message }</p>
 					<div class="card rounded-lg">
 						<div class="card-body d-flex flex-row">
-							<div class="d-flex flex-column ">
+							<div class="d-flex flex-column">
 								for _, v := range datHeader {
-									<div class="mb-3 text-disabled font-weight-bold mr-5">{ v }</div>
+									<div class="mb-1 mt-1 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">
+									<div class="mb-1 mt-1 font-weight-bold">
 										{ v }
 									</div>
 								}
--- a/component/modal/modal_confirmation_templ.go
+++ b/component/modal/modal_confirmation_templ.go
@@ -77,19 +77,19 @@ func ModalConfirmation(
 		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 \">")
+		_, 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\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 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}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\modal\modal_confirmation.templ`, Line: 33, Col: 71}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -105,7 +105,7 @@ func ModalConfirmation(
 			return templ_7745c5c3_Err
 		}
 		for _, v := range dataText {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-3 font-weight-bold\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-1 mt-1 font-weight-bold\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
--- a/component/navbar/navbar.templ
+++ b/component/navbar/navbar.templ
@@ -2,7 +2,7 @@ package navbar

 import (
 	"cpone/component/sidebarmaster"
-	services "cpone/services/dev"
+
 	"cpone/models"
 )

@@ -40,7 +40,7 @@ templ Navbar(dataUser models.User) {
 	</div>
 }

-templ NavbarMenu(datamenu []services.MasterMenu) {
+templ NavbarMenu(datamenu []models.Menu) {
 	<div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
 		<!--begin::Menu Container-->
 		<div
--- a/component/navbar/navbar_templ.go
+++ b/component/navbar/navbar_templ.go
@@ -12,8 +12,8 @@ import "bytes"

 import (
 	"cpone/component/sidebarmaster"
+
 	"cpone/models"
-	services "cpone/services/dev"
 )

 func Navbar(dataUser models.User) templ.Component {
@@ -53,7 +53,7 @@ func Navbar(dataUser models.User) templ.Component {
 	})
 }

-func NavbarMenu(datamenu []services.MasterMenu) templ.Component {
+func NavbarMenu(datamenu []models.Menu) 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 {
--- a/component/pagination/pagination.templ
+++ b/component/pagination/pagination.templ
@@ -2,16 +2,58 @@ package pagination

 import "strconv"

-templ Pagination(length int, currentPage int) {
+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 href="#" class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1">{ strconv.Itoa(i+1) }</a>
+					<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 href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">{ strconv.Itoa(i+1) }</a>
+					<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
@@ -12,7 +12,7 @@ import "bytes"

 import "strconv"

-func Pagination(length int, currentPage int) templ.Component {
+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 {
@@ -31,34 +31,130 @@ func Pagination(length int, currentPage int) templ.Component {
 		}
 		for i := 0; i < length; i++ {
 			if (i + 1) == currentPage {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\">")
+				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(strconv.Itoa(i + 1))
+				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: 10, Col: 118}
+					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_7745c5c3_Buffer.WriteString("<a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">")
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HideContent(contentID), ShowContent(contentID))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var3 string
-				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\pagination.templ`, Line: 12, Col: 93}
+					return templ_7745c5c3_Err
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+				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
 				}
@@ -78,3 +174,43 @@ func Pagination(length int, currentPage int) templ.Component {
 		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/pagination/paginationv1.templ
+++ b/component/pagination/paginationv1.templ
@@ -0,0 +1,55 @@
+package pagination 
+
+import "strconv"
+
+templ PaginationV1(length int, currentPage int, link string, contentID string, searchQueryParam 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 + searchQueryParam }
+						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-target={ "#" + contentID }
+					>{ strconv.Itoa(i+1) }</a>
+				} else {
+					<a
+						hx-get={ link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam }
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1"
+						hx-swap="outerHTML"
+						hx-indicator="#indicator"
+						hx-trigger="click"
+						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/paginationv1_templ.go
+++ b/component/pagination/paginationv1_templ.go
@@ -0,0 +1,154 @@
+// 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 PaginationV1(length int, currentPage int, link string, contentID string, searchQueryParam 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_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 + searchQueryParam)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv1.templ`, Line: 13, Col: 143}
+				}
+				_, 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-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs("#" + contentID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv1.templ`, Line: 18, Col: 33}
+				}
+				_, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv1.templ`, Line: 19, Col: 25}
+				}
+				_, 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("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "currentPage=" + strconv.Itoa(i+1) + "&page=" + strconv.Itoa(length) + "&contentID=" + contentID + searchQueryParam)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv1.templ`, Line: 22, Col: 143}
+				}
+				_, 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("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\" hx-swap=\"outerHTML\" hx-indicator=\"#indicator\" hx-trigger=\"click\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("#" + contentID)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv1.templ`, Line: 27, Col: 33}
+				}
+				_, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv1.templ`, Line: 28, Col: 25}
+				}
+				_, 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("</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
+	})
+}
+
+// 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/paginationv2.templ
+++ b/component/pagination/paginationv2.templ
@@ -0,0 +1,50 @@
+package pagination 
+
+import "strconv"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+templ PaginationV2(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob 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" id={ paginationID } hx-swap-oob={ hxSwapOob }>
+		<div class="d-flex flex-wrap py-2 mr-3">
+			for i:=0; i<length; i++ {
+				if (i+1) == currentPage {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
+						hx-swap={ hxSwap }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				} else {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
+						hx-swap={ hxSwap }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				}
+			}
+		</div>
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)})
+	</div>
+}
--- a/component/pagination/paginationv2_templ.go
+++ b/component/pagination/paginationv2_templ.go
@@ -0,0 +1,258 @@
+// 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"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+func PaginationV2(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob 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\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(paginationID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 18, Col: 91}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapOob)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 18, Col: 117}
+		}
+		_, 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("\"><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_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 23, Col: 55}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 25, Col: 22}
+				}
+				_, 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-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 26, 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("\" hx-trigger=\"click\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 28, Col: 26}
+				}
+				_, 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-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var8 string
+				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 29, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var9 string
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 30, Col: 25}
+				}
+				_, 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("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-get=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 33, Col: 55}
+				}
+				_, 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("\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var11 string
+				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 35, Col: 22}
+				}
+				_, 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("\" hx-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var12 string
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 36, Col: 32}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"click\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var13 string
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 38, Col: 26}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var14 string
+				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 39, Col: 28}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+				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_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv2.templ`, Line: 40, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				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>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)}).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/pagination/paginationv3.templ
+++ b/component/pagination/paginationv3.templ
@@ -0,0 +1,60 @@
+package pagination 
+
+import "strconv"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+templ PaginationV3(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+) {
+	// 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"
+		hx-on::load={ hxAfterRequest }
+		id={ paginationID }
+		hx-swap-oob={ hxSwapOob }
+	>
+		<div class="d-flex flex-wrap py-2 mr-3">
+			for i:=0; i<length; i++ {
+				if (i+1) == currentPage {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1"
+						hx-swap={ hxSwap }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-on::before-request={ hxBeforeRequest }
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				} else {
+					<a
+						hx-get={ link + "?" + "page=" + strconv.Itoa(i+1) }
+						class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1 btneditug"
+						hx-swap={ hxSwap }
+						hx-on::before-request={ hxBeforeRequest }
+						hx-indicator={ hxIndicator }
+						hx-trigger="click"
+						hx-target={ hxTarget }
+						hx-include={ hxInclude }
+					>{ strconv.Itoa(i+1) }</a>
+				}
+			}
+		</div>
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)})
+	</div>
+}
--- a/component/pagination/paginationv3_templ.go
+++ b/component/pagination/paginationv3_templ.go
@@ -0,0 +1,300 @@
+// 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"
+import "cpone/component/customtextfield"
+import "cpone/models"
+
+func PaginationV3(length int,
+	currentPage int,
+	link string,
+	paginationID string,
+	hxInclude string,
+	hxTarget string,
+	hxSwap string,
+	hxIndicator string,
+	hxSwapOob string,
+	hxBeforeRequest templ.ComponentScript,
+	hxAfterRequest templ.ComponentScript,
+) 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.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxAfterRequest)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-between align-items-center flex-wrap\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.ComponentScript = hxAfterRequest
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2.Call)
+		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_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(paginationID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 24, Col: 19}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap-oob=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapOob)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 25, Col: 25}
+		}
+		_, 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 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, hxBeforeRequest)
+				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_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 31, Col: 55}
+				}
+				_, 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("\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var6 string
+				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 33, Col: 22}
+				}
+				_, 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-indicator=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 34, Col: 32}
+				}
+				_, 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-trigger=\"click\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var8 templ.ComponentScript = hxBeforeRequest
+				_, 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-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var9 string
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 37, Col: 26}
+				}
+				_, 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("\" hx-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 38, Col: 28}
+				}
+				_, 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\paginationv3.templ`, Line: 39, 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
+				}
+			} else {
+				templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxBeforeRequest)
+				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_Var12 string
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(link + "?" + "page=" + strconv.Itoa(i+1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 42, Col: 55}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				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 btneditug\" hx-swap=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var13 string
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 44, Col: 22}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var14 templ.ComponentScript = hxBeforeRequest
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14.Call)
+				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_Var15 string
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(hxIndicator)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 46, Col: 32}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"click\" hx-target=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var16 string
+				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 48, Col: 26}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-include=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var17 string
+				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 49, Col: 28}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+				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_Var18 string
+				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\pagination\paginationv3.templ`, Line: 50, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+				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>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+			ID:    "currpage" + paginationID,
+			Name:  "currpage" + paginationID,
+			Type:  "hidden",
+			Value: strconv.Itoa(currentPage)}).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/sidebarmaster/sidebarmaster.templ
+++ b/component/sidebarmaster/sidebarmaster.templ
@@ -1,7 +1,7 @@
 package sidebarmaster

 import (
-	services "cpone/services/dev"
+	"cpone/models"
 )

 templ MenuDashboard(ParentMenuName string, ParentMenuUrl string) {
@@ -50,7 +50,7 @@ templ ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName string) {
 	</li>
 }

-templ ListMenuNavbar(ParentMenuName string, datamenuchildren []services.ChildrenMenu) {
+templ ListMenuNavbar(ParentMenuName string, datamenuchildren []models.ChildrenMenu) {
 	<li class="menu-item  menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover">
 		<a
 			href="javascript:;"
--- a/component/sidebarmaster/sidebarmaster_templ.go
+++ b/component/sidebarmaster/sidebarmaster_templ.go
@@ -11,7 +11,7 @@ import "io"
 import "bytes"

 import (
-	services "cpone/services/dev"
+	"cpone/models"
 )

 func MenuDashboard(ParentMenuName string, ParentMenuUrl string) templ.Component {
@@ -106,7 +106,7 @@ func ListMenuChildren(ChildrenMenuURL string, ChildrenMenuName string) templ.Com
 	})
 }

-func ListMenuNavbar(ParentMenuName string, datamenuchildren []services.ChildrenMenu) templ.Component {
+func ListMenuNavbar(ParentMenuName string, datamenuchildren []models.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 {
--- a/component/table/tablev1.templ
+++ b/component/table/tablev1.templ
@@ -0,0 +1,25 @@
+package tablecomponent
+
+templ TableV1(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique string) {
+	if len(thName) != len(thWidth) {
+		<div>length array thname berbeda dengan array thwidth</div>
+	} else {
+		<div id={ idunique }>
+			<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>
+				@pagination
+			</div>
+		</div>
+	}
+}
--- a/component/table/tablev1_templ.go
+++ b/component/table/tablev1_templ.go
@@ -0,0 +1,107 @@
+// 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 TableV1(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique 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)
+		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 id=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var2 string
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(idunique)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev1.templ`, Line: 7, Col: 20}
+			}
+			_, 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("\"><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_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(thWidth[i])
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev1.templ`, Line: 12, Col: 41}
+				}
+				_, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(item)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev1.templ`, Line: 12, Col: 50}
+				}
+				_, 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("</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>")
+			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></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/table/tablev2.templ
+++ b/component/table/tablev2.templ
@@ -0,0 +1,31 @@
+package tablecomponent
+
+templ TableV2(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique string, inputanSearch templ.Component) {
+	if len(thName) != len(thWidth) {
+		<div>length array thname berbeda dengan array thwidth</div>
+	} else {
+		@inputanSearch
+		<div id={ idunique }>
+			<div class="mt-7"></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>
+				@pagination
+			</div>
+		</div>
+	}
+}
+
+templ DivEmpty() {
+	<div></div>
+}
--- a/component/table/tablev2_templ.go
+++ b/component/table/tablev2_templ.go
@@ -0,0 +1,135 @@
+// 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 TableV2(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component, idunique string, inputanSearch 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 = inputanSearch.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, 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(idunique)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev2.templ`, Line: 8, Col: 20}
+			}
+			_, 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 class=\"mt-7\"></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_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(thWidth[i])
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev2.templ`, Line: 14, Col: 41}
+				}
+				_, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(item)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\table\tablev2.templ`, Line: 14, Col: 50}
+				}
+				_, 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("</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>")
+			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></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 DivEmpty() 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></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/table/tablev3.templ
+++ b/component/table/tablev3.templ
@@ -0,0 +1,27 @@
+package tablecomponent
+
+templ TableV3(thName []string, thWidth []string, trComponent templ.Component) {
+	<div>
+		if len(thName) != len(thWidth) {
+			<div>length array thname berbeda dengan array thwidth</div>
+		} else {
+			<div class="mt-7"></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>
+}
+
+templ DivEmptyV3() {
+	<div></div>
+}
--- a/component/table/tablev3_templ.go
+++ b/component/table/tablev3_templ.go
@@ -0,0 +1,118 @@
+// 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 TableV3(thName []string, thWidth []string, trComponent 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>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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 class=\"mt-7\"></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\tablev3.templ`, Line: 13, 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\tablev3.templ`, Line: 13, 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>")
+			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
+	})
+}
+
+func DivEmptyV3() 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></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/toastbootstrap/customtoastv1.templ
+++ b/component/toastbootstrap/customtoastv1.templ
@@ -0,0 +1,15 @@
+package customtoastv1
+
+templ CustomToastV1(message string, idUniqueCustomToast string) {
+    <div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
+        <div id="myToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+                <strong class="me-auto">Pemberitahuan</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body" id="pesanTxt">
+                { message }
+            </div>
+        </div>
+    </div>
+}
--- a/component/toastbootstrap/customtoastv1_templ.go
+++ b/component/toastbootstrap/customtoastv1_templ.go
@@ -0,0 +1,48 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtoastv1
+
+//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 CustomToastV1(message string, idUniqueCustomToast 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=\"position-fixed top-0 end-0 p-3\" style=\"z-index: 11\"><div id=\"myToast\" class=\"toast hide\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"toast-header\"><strong class=\"me-auto\">Pemberitahuan</strong> <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button></div><div class=\"toast-body\" id=\"pesanTxt\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\toastbootstrap\customtoastv1.templ`, Line: 11, Col: 25}
+		}
+		_, 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></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/toastbootstrap/customtoastv2.templ
+++ b/component/toastbootstrap/customtoastv2.templ
@@ -0,0 +1,87 @@
+package customtoastv1
+
+// kalau eror => bg nya danger
+// kalau sukses => bgnya success
+// kalau warning => bgnya warning
+
+func toastBackground(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBody(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIcon(typeToast string) string {
+	var stringx string
+	if typeToast == "success" {
+		stringx = "solar:check-circle-broken"
+	} else {
+		if typeToast == "danger" {
+			stringx = "solar:close-circle-broken"
+		} else {
+			if typeToast == "warning" {
+				stringx = "solar:shield-warning-bold"
+			} else {
+				if typeToast == "information" {
+					stringx = "solar:info-square-broken"
+				}
+			}
+		}
+	}
+
+	return stringx
+}
+
+templ CustomToastV2Show(title string, message string, typeToast string) {
+	<div
+		class="toast toast-top-right fade show"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+		id="notification-001"
+		hx-swap-oob="true"
+		hx-get="/dev/hidetoast"
+		hx-trigger="load delay:3s"
+		hx-target="this"
+		style="border-radius: 8px 8px 8px 8px;"
+	>
+		<div class={ "toast-header",  toastBackground(typeToast) , "text-white" }>
+			<span
+				class="iconify mr-2"
+				data-icon={ toastIcon(typeToast) }
+			></span>
+			<strong class="mr-auto">{ title }</strong>
+			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+				<span aria-hidden="true">×</span>
+			</button>
+		</div>
+		<div class={ "toast-body",toastBody(typeToast) }>
+			{ message }
+		</div>
+	</div>
+}
+
+templ CustomToastV2Hide() {
+	<div
+		id="notification-001"
+		class="toast fade hide"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+		style="opacity: 0"
+		hx-swap-oob="true"
+	>
+		<div class="toast-header bg-success text-white">
+			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
+			<strong class="mr-auto">Success</strong>
+			<small class="text-muted text-white">just now</small>
+			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+				<span aria-hidden="true">×</span>
+			</button>
+		</div>
+		<div class="toast-body bg-success-transparent">
+			This is a success toast.
+		</div>
+	</div>
+}
--- a/component/toastbootstrap/customtoastv2_templ.go
+++ b/component/toastbootstrap/customtoastv2_templ.go
@@ -0,0 +1,175 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customtoastv1
+
+//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"
+
+// kalau eror => bg nya danger
+// kalau sukses => bgnya success
+// kalau warning => bgnya warning
+
+func toastBackground(typeToast string) string {
+	return "bg-" + typeToast
+}
+
+func toastBody(typeToastBody string) string {
+	return "bg-" + typeToastBody + "-transparent"
+}
+
+func toastIcon(typeToast string) string {
+	var stringx string
+	if typeToast == "success" {
+		stringx = "solar:check-circle-broken"
+	} else {
+		if typeToast == "danger" {
+			stringx = "solar:close-circle-broken"
+		} else {
+			if typeToast == "warning" {
+				stringx = "solar:shield-warning-bold"
+			} else {
+				if typeToast == "information" {
+					stringx = "solar:info-square-broken"
+				}
+			}
+		}
+	}
+
+	return stringx
+}
+
+func CustomToastV2Show(title string, message string, typeToast 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=\"toast toast-top-right fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 = []any{"toast-header", toastBackground(typeToast), "text-white"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\toastbootstrap\customtoastv2.templ`, Line: 1, Col: 0}
+		}
+		_, 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 class=\"iconify mr-2\" data-icon=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(toastIcon(typeToast))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\toastbootstrap\customtoastv2.templ`, Line: 52, Col: 36}
+		}
+		_, 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("\"></span> <strong class=\"mr-auto\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\toastbootstrap\customtoastv2.templ`, Line: 54, Col: 34}
+		}
+		_, 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("</strong> <button type=\"button\" class=\"ml-2 mb-1 close\" data-dismiss=\"toast\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 = []any{"toast-body", toastBody(typeToast)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\toastbootstrap\customtoastv2.templ`, Line: 1, Col: 0}
+		}
+		_, 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\toastbootstrap\customtoastv2.templ`, Line: 60, Col: 12}
+		}
+		_, 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("</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 CustomToastV2Hide() 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)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"notification-001\" class=\"toast fade hide\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" style=\"opacity: 0\" hx-swap-oob=\"true\"><div class=\"toast-header bg-success text-white\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ep mr-2 icon-xl\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 1024 1024\" data-icon=\"ep:success-filled\"><path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z\"></path></svg> <strong class=\"mr-auto\">Success</strong> <small class=\"text-muted text-white\">just now</small> <button type=\"button\" class=\"ml-2 mb-1 close\" data-dismiss=\"toast\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div><div class=\"toast-body bg-success-transparent\">This is a success toast.\r</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/chart.store.go
+++ b/db/chart.store.go
@@ -1,43 +0,0 @@
-package db
-
-import (
-	"database/sql"
-
-	_ "github.com/glebarez/go-sqlite"
-)
-
-type PieChartStore struct {
-	Db *sql.DB
-}
-type BarChartStore struct {
-	Db *sql.DB
-}
-
-func NewPieChartStore(dbName string) (PieChartStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return PieChartStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return PieChartStore{}, err
-	}
-
-	return PieChartStore{
-		Db,
-	}, nil
-}
-func NewBarChartStore(dbName string) (BarChartStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return BarChartStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return BarChartStore{}, err
-	}
-
-	return BarChartStore{
-		Db,
-	}, nil
-}
--- a/db/db.go
+++ b/db/db.go
@@ -2,8 +2,6 @@ package db

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

 	_ "github.com/glebarez/go-sqlite"
 )
@@ -12,51 +10,9 @@ type AppStore struct {
 	Db *sql.DB
 }

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

 	return AppStore{
-		Db,
+		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/employee.store.go
+++ b/db/employee.store.go
@@ -1,26 +0,0 @@
-package db
-
-import (
-	"database/sql"
-
-	_ "github.com/glebarez/go-sqlite"
-)
-
-type EmployeeStore struct {
-	Db *sql.DB
-}
-
-func NewEmployeeStore(dbName string) (EmployeeStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return EmployeeStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return EmployeeStore{}, err
-	}
-
-	return EmployeeStore{
-		Db,
-	}, nil
-}
--- 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/login.store.go
+++ b/db/login.store.go
@@ -1,26 +0,0 @@
-package db
-
-import (
-	"database/sql"
-
-	_ "github.com/glebarez/go-sqlite"
-)
-
-type LoginStore struct {
-	Db *sql.DB
-}
-
-func NewLoginStore(dbName string) (LoginStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return LoginStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return LoginStore{}, err
-	}
-
-	return LoginStore{
-		Db,
-	}, nil
-}
--- a/db/mastermenuusergroup.go
+++ b/db/mastermenuusergroup.go
@@ -1,26 +0,0 @@
-package db
-
-import (
-	"database/sql"
-
-	_ "github.com/glebarez/go-sqlite"
-)
-
-type MasterMenuUserGroupStore struct {
-	Db *sql.DB
-}
-
-func NewMasterMenuUserGroupStore(dbName string) (MasterMenuUserGroupStore, error) {
-	Db, err := getConnection(dbName)
-	if err != nil {
-		return MasterMenuUserGroupStore{}, err
-	}
-
-	if err := createMigrations(dbName, Db); err != nil {
-		return MasterMenuUserGroupStore{}, err
-	}
-
-	return MasterMenuUserGroupStore{
-		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
@@ -5,24 +5,48 @@ go 1.21.0
 require (
 	github.com/a-h/templ v0.2.663
 	github.com/glebarez/go-sqlite v1.22.0
-	github.com/labstack/echo/v4 v4.11.3
+	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/jmoiron/sqlx v1.4.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/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,3 +1,5 @@
+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=
@@ -5,8 +7,12 @@ 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=
@@ -15,10 +21,21 @@ github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbu
 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/jmoiron/sqlx v1.4.0 h1:1PLqN7S1UYp5t4SrVVnt4nUVNemrDAtxlulVe+Qgm3o=
+github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT4JLY=
 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/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
+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=
@@ -26,23 +43,58 @@ github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27k
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 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.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+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=
+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/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=
@@ -50,11 +102,17 @@ golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.6.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/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/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/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/transaksisamplestation.handler.go
+++ b/handlers/client/transaksisamplestation.handler.go
@@ -2,7 +2,7 @@ package client_handlers

 import (
 	"cpone/utils"
-	client_transaksisamplestation "cpone/views/client/TransaksiSampleStation"
+	client_transaksisamplestation "cpone/views/client/transaksisamplestation"

 	"github.com/labstack/echo/v4"
 )
--- a/handlers/corporate/patient.handlers.go
+++ b/handlers/corporate/patient.handlers.go
@@ -2,7 +2,7 @@ package corporate_handlers

 import (
 	"cpone/utils"
-	corporate_patient "cpone/views/corporate/Patient"
+	corporate_patient "cpone/views/corporate/patient"

 	"github.com/labstack/echo/v4"
 )
--- a/handlers/dev/autocomplete.handlers.go
+++ b/handlers/dev/autocomplete.handlers.go
@@ -0,0 +1,195 @@
+package dev_handlers
+
+import (
+	"cpone/component/customtextfieldautocomplete"
+	"cpone/models"
+	"cpone/utils"
+	"fmt"
+	"net/url"
+	"strconv"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+)
+
+type AutoCompleteService interface {
+	GetAutoComplete(param string, pageOf string, limit string) (string, string, string, []models.AutoComplete, error)
+}
+
+func NewAutoCompleteHandler(us AutoCompleteService) *AutoCompleteHandler {
+	return &AutoCompleteHandler{
+		AutoCompleteService: us,
+	}
+}
+
+type AutoCompleteHandler struct {
+	AutoCompleteService AutoCompleteService
+}
+
+// initial
+func (lh *AutoCompleteHandler) HandlerListAutoComplete(c echo.Context) error {
+	// param := c.Param("p")
+	param := c.QueryParam("searchAutocomplete")
+	pageOf := "1"
+	limit := "3"
+
+	pageOfBefore, _ := strconv.Atoi(c.Param("pageOf"))
+	limitBefore, _ := strconv.Atoi(c.Param("limit"))
+
+	if pageOfBefore > 1 {
+		pageCurrent := pageOfBefore + 1
+		pageOf = strconv.Itoa(pageCurrent)
+
+		limitCurrent := limitBefore
+		limit = strconv.Itoa(limitCurrent)
+	}
+
+	// urlCustomAutoComplete := "/client/autoCompleteLoadMore/"+ strconv.Itoa(pageOf)
+	var si templ.Component
+	if param != "" {
+		totalData, foundCount, textFound, dataAutoComplete, err := lh.AutoCompleteService.GetAutoComplete(param, pageOf, limit)
+		fmt.Println(param)
+		// fmt.Println(err)
+		if err != nil {
+			fmt.Println(dataAutoComplete)
+			return err
+		}
+
+		foundCountInt, err := strconv.Atoi(foundCount)
+		if err != nil {
+			return err
+		}
+
+		totalDataInt, err := strconv.Atoi(totalData)
+		if err != nil {
+			return err
+		}
+
+		// si := customtextfieldautocomplete.ListCustomAutoComplete(dataAutoComplete)
+
+		si = customtextfieldautocomplete.ListCustomAutoComplete(limit, param, totalDataInt, foundCountInt, pageOf, textFound, dataAutoComplete)
+	} else {
+		si = customtextfieldautocomplete.ListCustomAutoCompleteHide()
+	}
+
+	return utils.View(c, si)
+}
+
+// after selected
+func (lh *AutoCompleteHandler) HandlerListAutoCompleteAfterSelected(c echo.Context) error {
+	// param := c.QueryParam("searchAutocomplete")
+
+	setvalue := c.Param("setvalue")
+	setvalue, err := url.PathUnescape(setvalue)
+	if err != nil {
+		return err
+	}
+
+	si := customtextfieldautocomplete.MainCustomAutoComplete(setvalue)
+
+	return utils.View(c, si)
+}
+
+// load more autocomplete
+func (lh *AutoCompleteHandler) HandlerListAutoCompleteLoadMore(c echo.Context) error {
+	// param := c.QueryParam("searchAutocomplete")
+
+	var totalPerPage int = 3
+	paramSearch := c.Param("searchParam")
+	searchParam, err := url.PathUnescape(paramSearch)
+	if err != nil {
+		return err
+	}
+
+	pageOfStr := c.Param("pageOf")
+	pageOfInt, err := strconv.Atoi(pageOfStr)
+	if err != nil {
+		return err
+	}
+
+	pageOfInt++
+	pageOf := strconv.Itoa(pageOfInt)
+
+	limitOfStr := c.Param("limit")
+	limitOfInt, err := strconv.Atoi(limitOfStr)
+	if err != nil {
+		return err
+	}
+
+	limitOfX := limitOfInt + totalPerPage
+	limitOf := strconv.Itoa(limitOfX)
+
+	var si templ.Component
+
+	totalData, foundCount, textFound, dataAutoComplete, err := lh.AutoCompleteService.GetAutoComplete(searchParam, pageOf, limitOf)
+
+	// fmt.Println(param)
+	// fmt.Println(err)
+
+	if err != nil {
+		fmt.Println(dataAutoComplete)
+		return err
+	}
+
+	foundCountInt, err := strconv.Atoi(foundCount)
+	if err != nil {
+		return err
+	}
+
+	totalDataInt, err := strconv.Atoi(totalData)
+	if err != nil {
+		return err
+	}
+
+	// si := customtextfieldautocomplete.ListCustomAutoComplete(dataAutoComplete)
+	si = customtextfieldautocomplete.ListCustomAutoComplete(limitOf, searchParam, totalDataInt, foundCountInt, pageOf, textFound, dataAutoComplete)
+
+	// if param != "" {
+	// 	textFound, dataAutoComplete, err := lh.AutoCompleteService.GetAutoComplete(param, pageOf)
+	// 	fmt.Println(param)
+	// 	// fmt.Println(err)
+	// 	if err != nil {
+	// 		fmt.Println(dataAutoComplete)
+	// 		return err
+	// 	}
+
+	// 	// si := customtextfieldautocomplete.ListCustomAutoComplete(dataAutoComplete)
+	// 	si = customtextfieldautocomplete.ListCustomAutoComplete(pageOf, textFound, dataAutoComplete)
+
+	// } else {
+	// 	si = customtextfieldautocomplete.ListCustomAutoCompleteHide()
+	// }
+
+	return utils.View(c, si)
+}
+
+func (lh *AutoCompleteHandler) HandlerAutoCompleteExample(c echo.Context) error {
+	// dataAutoComplete, err := lh.AutoCompleteService.GetAutoCompleteExample()
+	// fmt.Println(dataAutoComplete)
+	// fmt.Println(err)
+	// if err != nil {
+	// 	fmt.Println(dataAutoComplete)
+	// 	return err
+	// }
+	// fmt.Printf("%+v\n", dataMenu)
+	// si := mastermenu.ShowMasterMenu("Master Menu",
+	// 	mastermenu.MainMasterMenu(dataMenu),
+	// 	mastermenu.CssMasterMenu(),
+	// 	mastermenu.JsMasterMenu(),
+	// )
+
+	// si := mastermenuusergroup.ShowAutoComplete(
+	// 	"Master Menu",
+	// 	mastermenuusergroup.MainAutoComplete(dataMenu),
+	// 	mastermenuusergroup.CssAutoComplete(),
+	// 	mastermenuusergroup.JsAutoComplete(),
+	// )
+
+	si := customtextfieldautocomplete.ShowCustomAutoComplete("",
+		customtextfieldautocomplete.MainCustomAutoComplete(""),
+		customtextfieldautocomplete.CssCustomAutoComplete(),
+		customtextfieldautocomplete.JsCustomAutoComplete(),
+	)
+
+	return utils.View(c, si)
+}
--- a/handlers/dev/groupresult.handlers.go
+++ b/handlers/dev/groupresult.handlers.go
--- a/handlers/dev/mastermenuusergroup.handlers.go
+++ b/handlers/dev/mastermenuusergroup.handlers.go
--- a/handlers/dev/md.bahan.handlers.go
+++ b/handlers/dev/md.bahan.handlers.go
@@ -0,0 +1,954 @@
+package dev_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	navbarmenu "cpone/component/navbar"
+	"cpone/component/pagination"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	customtoastv2 "cpone/component/toastbootstrap"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	dev_mdbahanview "cpone/views/dev/mdbahan"
+	"strconv"
+	"strings"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type MdBahanServices interface {
+	GetListMdBahan(
+		search string,
+		stationID string,
+		currentPage int,
+		rowPerPage int) ([]models.Bahan, int, error)
+	GetMdBahanBreadCrumb(title string) (models.BreadCrumbV1, error)
+	GetListSampleStation(isFilter bool) ([]models.TmpSampleStation, error)
+	AddMdBahan(code string, name string, stationid string) (bool, error)
+	EditMdBahan(id string, code string, name string, stationid string) (bool, error)
+	GetMdBahanByID(id string) (models.Bahan, error)
+	DeleteMdBahan(id string) (bool, error)
+}
+
+func NewMdBahanHandler(us MdBahanServices) *MdBahanHandler {
+	return &MdBahanHandler{
+		MdBahanServices: us,
+	}
+}
+
+type MdBahanHandler struct {
+	MdBahanServices MdBahanServices
+}
+
+func (lh *MdBahanHandler) HandleShowMdBahanScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	dataMenu, err := services.GetMenu()
+	paginationID := utils.GenerateRandomID("paginationID")
+	modalAddID := utils.GenerateRandomID("modalAdd")
+	modalAddBodyID := utils.GenerateRandomID("modalAddbody")
+	modalEditID := utils.GenerateRandomID("modalEdit")
+	modalEditBodyID := utils.GenerateRandomID("modalEditbody")
+	modalDeleteID := utils.GenerateRandomID("modalDelete")
+	modalDeleteBodyID := utils.GenerateRandomID("modalDeletebody")
+	tableBahanID := utils.GenerateRandomID("BahanID")
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV",
+			zap.Any("error", err),
+		)
+		return err
+	}
+
+	//get user login
+	dataUser, err := services.GetUserLogin()
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV",
+			zap.Any("error", err),
+		)
+		return err
+	}
+	dataBreadCrumb, err := lh.MdBahanServices.GetMdBahanBreadCrumb("Bahan")
+
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV",
+			zap.Any("error", err),
+		)
+		return err
+	}
+
+	//Breadcrumb component
+	breadcrumbComponent := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadCrumb)
+	// navbar menu
+	navbarmenuComponent := navbarmenu.NavbarMenu(dataMenu)
+
+	// navbar user
+	navbaruserComponent := navbarmenu.Navbar(dataUser)
+
+	// sidebar
+	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)
+	bahanList, totalPage, err := lh.MdBahanServices.GetListMdBahan("", "0", 1, 5)
+	defer logger.Sync()
+	logger.Info("GET DATA BAHAN",
+		zap.Any("data", bahanList),
+		zap.Any("err", err),
+		zap.Any("totalPage", totalPage),
+	)
+	stationListFilter, err := lh.MdBahanServices.GetListSampleStation(true)
+	defer logger.Sync()
+	logger.Info("GET STATION LIST Filter",
+		zap.Any("err", err),
+	)
+	stationList, err := lh.MdBahanServices.GetListSampleStation(false)
+	defer logger.Sync()
+	logger.Info("GET STATION LIST ",
+		zap.Any("err", err),
+	)
+
+	//Bahan Table
+	// #dialogDeleteBodyID, #dialogDeleteID
+	mdBahanTable := dev_mdbahanview.TableBahan(
+		bahanList,
+		tableBahanID,
+		"/dev/md/bahan/openedit",
+		"#"+modalEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/bahan/opendelete",
+		"#"+modalDeleteBodyID,
+		"outerHTML",
+		"#dialogDeleteBodyID, #dialogDeleteID, #dialogEditBodyID, #dialogEditID")
+
+	//FIlter table
+	mdBahanFilter := dev_mdbahanview.MdBahanFilter(
+		"/dev/md/bahan/filter",
+		"input changed delay:500ms",
+		"#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage"+paginationID,
+		"outerHTML",
+		"#"+paginationID,
+		stationListFilter,
+		stationListFilter[0].T_SampleStationID,
+		dev_mdbahanview.BeforeRequestContent(),
+		dev_mdbahanview.AfterRequestContent(),
+	)
+
+	//Pagination
+
+	mdbahanPagination := pagination.PaginationV3(
+		totalPage, 1,
+		"/dev/md/bahan/pagination",
+		paginationID,
+		"#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID,  #dialogDeleteBodyID, #dialogDeleteID, #currpage"+paginationID,
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"",
+		dev_mdbahanview.BeforeRequestContent(),
+		dev_mdbahanview.AfterRequestContent(),
+	)
+	//Form Add
+	modalAddBody := dev_mdbahanview.BodyFormBahan(
+		"",
+		models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+			Name:        "kodebahan",
+			Placeholder: "Kode Bahan",
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+			Name:        "namabahan",
+			Placeholder: "Nama Bahan",
+			Type:        "text"},
+		models.CustomDropdownV2Prm{
+			Name:     "stationid",
+			Label:    "Sample Station",
+			ListItem: dev_mdbahanview.ListItemStation(stationList, 0),
+		},
+		modalAddBodyID,
+		dev_mdbahanview.JsShowModal(""),
+	)
+	modalAddAction := dev_mdbahanview.ActionFormBahan("/dev/md/bahan/closeaddform", "#"+modalAddBodyID, "outerHTML", "#"+modalAddID)
+	modalAddBtnCls := dev_mdbahanview.BtnCloseFormBahan("/dev/md/bahan/closeaddform", "#"+modalAddBodyID, "outerHTML", "#"+modalAddID)
+	modalAddBahan := dev_mdbahanview.BahanForm(models.BahanFormComponent{
+		IDComponent:  "",
+		Link:         "/dev/md/bahan/add",
+		HxTarget:     "#" + modalAddBodyID,
+		HxSwap:       "outerHTML",
+		HxInclude:    "#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage" + paginationID,
+		ModalID:      modalAddID,
+		ModalTitle:   "New-Bahan",
+		DialogBody:   modalAddBody,
+		DialogAction: modalAddAction,
+		ButtonCLose:  modalAddBtnCls,
+	})
+
+	//Form Edit
+	modalEditBody := dev_mdbahanview.BodyFormBahan(
+		"",
+		models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+			Name:        "kodebahan",
+			Placeholder: "Kode Bahan",
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+			Name:        "namabahan",
+			Placeholder: "Nama Bahan",
+			Type:        "text"},
+		models.CustomDropdownV2Prm{
+			Name:     "stationid",
+			Label:    "Sample Station",
+			ListItem: dev_mdbahanview.ListItemStation(stationList, 0),
+		},
+		modalEditBodyID,
+		dev_mdbahanview.JsShowModal(""),
+	)
+	modalEditAction := dev_mdbahanview.ActionFormBahan("/dev/md/bahan/closeeditform", "#"+modalEditBodyID, "outerHTML", "#"+modalEditID)
+	modalEditBtnCls := dev_mdbahanview.BtnCloseFormBahan("/dev/md/bahan/closeeditform", "#"+modalEditBodyID, "outerHTML", "#"+modalEditID)
+	modalEditBahan := dev_mdbahanview.BahanForm(models.BahanFormComponent{
+		IDComponent:  "",
+		Link:         "/dev/md/bahan/edit",
+		HxTarget:     "#" + modalEditBodyID,
+		HxSwap:       "outerHTML",
+		HxInclude:    "#filter-name, #filter-station, #tableID, #paginationID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage" + paginationID,
+		ModalID:      modalEditID,
+		ModalTitle:   "Edit-Bahan",
+		DialogBody:   modalEditBody,
+		DialogAction: modalEditAction,
+		ButtonCLose:  modalEditBtnCls,
+	})
+
+	//Form Delete
+	modalDeleteBody := dev_mdbahanview.DeleteConfirmationBody(
+		"",
+		modalDeleteBodyID,
+		"Apakah anda yakin menghapus bahan berikut ?",
+		[]string{"Kode", "Nama Bahan", "Sample Station"},
+		[]string{"", "", ""}, dev_mdbahanview.JsShowModal(""))
+	modalDeleteAction := dev_mdbahanview.ActionFormBahanDelete("/dev/md/bahan/closedeleteform", "#"+modalDeleteBodyID, "outerHTML", "#"+modalDeleteID)
+	modalDeleteBtnCls := dev_mdbahanview.BtnCloseFormBahan("/dev/md/bahan/closedeleteform", "#"+modalDeleteBodyID, "outerHTML", "#"+modalDeleteID)
+	modalDeleteBahan := dev_mdbahanview.BahanForm(models.BahanFormComponent{
+		IDComponent:  "",
+		Link:         "/dev/md/bahan/delete",
+		HxTarget:     "#" + modalDeleteBodyID,
+		HxSwap:       "outerHTML",
+		HxInclude:    "#filter-name, #filter-station, #tableID, #paginationID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage" + paginationID,
+		ModalID:      modalDeleteID,
+		ModalTitle:   "Delete-Bahan",
+		DialogBody:   modalDeleteBody,
+		DialogAction: modalDeleteAction,
+		ButtonCLose:  modalDeleteBtnCls,
+	})
+
+	mdBahanScreen := dev_mdbahanview.MdBahanScreen(
+		tableBahanID,
+		paginationID,
+		modalAddID,
+		modalAddBodyID,
+		modalEditID,
+		modalEditBodyID,
+		modalDeleteID,
+		modalDeleteBodyID,
+		breadcrumbComponent,
+		mdBahanTable,
+		mdBahanFilter,
+		mdbahanPagination,
+		modalAddBahan,
+		modalEditBahan,
+		modalDeleteBahan)
+	cssMdBahan := dev_mdbahanview.CssMdUserGroup()
+	jsMdBahan := dev_mdbahanview.JsMdBahan()
+
+	view := dev_mdbahanview.ShowMdBahanScreen(
+		"Md Bahan",
+		mdBahanScreen,
+		cssMdBahan,
+		jsMdBahan,
+		navbarmenuComponent,
+		navbaruserComponent,
+		sidebaruserprofileComponent)
+	return utils.View(c, view)
+}
+
+func (lh *MdBahanHandler) HandleFilterMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	var retval []templ.Component
+	filtername := c.QueryParam("filtername")
+	filterstation := c.QueryParam("filterstation")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+	tableID := c.QueryParam("tableID")
+	paginationID := c.QueryParam("paginationID")
+	bahanList, totalPage, err := lh.MdBahanServices.GetListMdBahan(filtername, filterstation, 1, 5)
+	defer logger.Sync()
+	logger.Info("GET DATA BAHAN",
+		zap.Any("data", bahanList),
+		zap.Any("err", err),
+		zap.Any("totalPage", totalPage),
+	)
+	//Bahan Table
+
+	mdBahanTable := dev_mdbahanview.TableBahan(
+		bahanList,
+		tableID,
+		"/dev/md/bahan/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/bahan/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+	//Pagination
+
+	mdbahanPagination := pagination.PaginationV3(
+		totalPage, 1,
+		"/dev/md/bahan/pagination",
+		paginationID,
+		"#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage"+paginationID,
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"",
+		dev_mdbahanview.BeforeRequestContent(),
+		dev_mdbahanview.AfterRequestContent(),
+	)
+	retval = append(retval, mdBahanTable)
+	retval = append(retval, mdbahanPagination)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdBahanHandler) HandlePaginationMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	var retval []templ.Component
+	pageparam := c.QueryParam("page")
+
+	filtername := c.QueryParam("filtername")
+	filterstation := c.QueryParam("filterstation")
+	tableID := c.QueryParam("tableID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+	paginationID := c.QueryParam("paginationID")
+	page, err := strconv.Atoi(pageparam)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM",
+			zap.Any("page", page),
+			zap.Any("error ", err),
+		)
+		return err
+	}
+	bahanList, totalPage, err := lh.MdBahanServices.GetListMdBahan(filtername, filterstation, page, 5)
+	defer logger.Sync()
+	logger.Info("GET DATA BAHAN",
+		zap.Any("data", bahanList),
+		zap.Any("err", err),
+		zap.Any("totalPage", totalPage),
+	)
+	//Bahan Table
+
+	mdBahanTable := dev_mdbahanview.TableBahan(
+		bahanList,
+		tableID,
+		"/dev/md/bahan/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/bahan/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+	//Pagination
+
+	mdbahanPagination := pagination.PaginationV3(
+		totalPage, page,
+		"/dev/md/bahan/pagination",
+		paginationID,
+		"#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage"+paginationID,
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"",
+		dev_mdbahanview.BeforeRequestContent(),
+		dev_mdbahanview.AfterRequestContent(),
+	)
+	retval = append(retval, mdBahanTable)
+	retval = append(retval, mdbahanPagination)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdBahanHandler) HandleCloseFormAddMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	stationList, err := lh.MdBahanServices.GetListSampleStation(false)
+	defer logger.Sync()
+	logger.Info("GET DATA STATIOn",
+		zap.Any("err", err),
+	)
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogAddID := c.FormValue("dialogAddID")
+
+	modalAddBody := dev_mdbahanview.BodyFormBahan(
+		"",
+		models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+			Name:        "kodebahan",
+			Placeholder: "Kode Bahan",
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+			Name:        "namabahan",
+			Placeholder: "Nama Bahan",
+			Type:        "text"},
+		models.CustomDropdownV2Prm{
+			Name:     "stationid",
+			Label:    "Sample Station",
+			ListItem: dev_mdbahanview.ListItemStation(stationList, 0),
+		},
+		dialogAddBodyID,
+		dev_mdbahanview.JsHideModal("#"+dialogAddID),
+	)
+	return utils.View(c, modalAddBody)
+}
+func (lh *MdBahanHandler) HandleAddMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	code := c.FormValue("kodebahan")
+	name := c.FormValue("namabahan")
+	stationIDPrm := c.FormValue("stationid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	filtername := c.FormValue("filtername")
+	filterstation := c.FormValue("filterstation")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	// searchID := c.FormValue("searchID")
+	dialogAddID := c.FormValue("dialogAddID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	stationID, err := strconv.Atoi(stationIDPrm)
+	if err != nil {
+		return err
+	}
+	formValidation := ""
+	codeValidation := ""
+	nameValidation := ""
+	stationValidation := ""
+
+	if strings.TrimSpace(code) == "" {
+		formValidation = "Code bahan tidak boleh kosong"
+		codeValidation = "Code bahan tidak boleh kosong"
+		nameValidation = ""
+		stationValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama bahan tidak boleh kosong"
+		codeValidation = ""
+		stationValidation = ""
+		nameValidation = "Nama bahan tidak boleh kosong"
+	}
+	if stationID == 0 {
+		formValidation = "Pilih salah satu station"
+		codeValidation = ""
+		nameValidation = ""
+		stationValidation = "Pilih salah satu station"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code,nama, dan station bahan tidak boleh kosong"
+		codeValidation = "Code bahan tidak boleh kosong"
+		stationValidation = "Pilih salah satu station"
+		nameValidation = "Nama bahan tidak boleh kosong"
+
+	}
+	stationList, err := lh.MdBahanServices.GetListSampleStation(false)
+	defer logger.Sync()
+	logger.Info("GET DATA STATIOn",
+		zap.Any("err", err),
+	)
+	if formValidation != "" || codeValidation != "" || nameValidation != "" || stationValidation != "" {
+		newForm := dev_mdbahanview.BodyFormBahan(
+			"",
+			models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+				Name:        "kodebahan",
+				Placeholder: "Kode Bahan",
+				Value:       code,
+				ErrorMsg:    codeValidation,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+				Name:        "namabahan",
+				Placeholder: "Nama Bahan",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomDropdownV2Prm{
+				Name:     "stationid",
+				Label:    "Sample Station",
+				ErrorMsg: stationValidation,
+				ListItem: dev_mdbahanview.ListItemStation(stationList, stationID),
+			},
+			dialogAddBodyID,
+			dev_mdbahanview.JsShowModal(""),
+		)
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	_, err = lh.MdBahanServices.AddMdBahan(code, name, stationIDPrm)
+	if err != nil {
+		newForm := dev_mdbahanview.BodyFormBahan(
+			"",
+			models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+				Name:        "kodebahan",
+				Placeholder: "Kode Bahan",
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+				Name:        "namabahan",
+				Placeholder: "Nama Bahan",
+				Value:       name,
+				Type:        "text"},
+			models.CustomDropdownV2Prm{
+				Name:     "stationid",
+				Label:    "Sample Station",
+				ListItem: dev_mdbahanview.ListItemStation(stationList, int(stationID)),
+			},
+			dialogAddBodyID,
+			dev_mdbahanview.JsShowModal(""),
+		)
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Gagal", err.Error(), "danger"), newForm})
+	}
+
+	bahanList, totalPage, err := lh.MdBahanServices.GetListMdBahan(filtername, filterstation, currPage, 5)
+	defer logger.Sync()
+	logger.Info("GET DATA BAHAN",
+		zap.Any("data", bahanList),
+		zap.Any("err", err),
+		zap.Any("totalPage", totalPage),
+	)
+	//Bahan Table
+	mdBahanTable := dev_mdbahanview.TableBahan(
+		bahanList,
+		tableID,
+		"/dev/md/bahan/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/bahan/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//Pagination
+
+	mdbahanPagination := pagination.PaginationV3(
+		totalPage, currPage,
+		"/dev/md/bahan/pagination",
+		paginationID,
+		"#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID,  #dialogDeleteBodyID, #dialogDeleteID, #currpage"+paginationID,
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"true",
+		dev_mdbahanview.BeforeRequestContent(),
+		dev_mdbahanview.AfterRequestContent(),
+	)
+	//Form Add
+	modalAddBody := dev_mdbahanview.BodyFormBahan(
+		"",
+		models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+			Name:        "kodebahan",
+			Placeholder: "Kode Bahan",
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+			Name:        "namabahan",
+			Placeholder: "Nama Bahan",
+			Type:        "text"},
+		models.CustomDropdownV2Prm{
+			Name:     "stationid",
+			Label:    "Sample Station",
+			ListItem: dev_mdbahanview.ListItemStation(stationList, 0),
+		},
+		dialogAddBodyID,
+		dev_mdbahanview.JsHideModal("#"+dialogAddID),
+	)
+
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Success add bahan ", "success")
+	retval := []templ.Component{toastSuccess, mdBahanTable, mdbahanPagination, modalAddBody}
+	// time.Sleep(20 * time.Second)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdBahanHandler) HandleOpenEditMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	id := c.QueryParam("id")
+	dialogEditID := c.QueryParam("dialogEditID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	stationList, err := lh.MdBahanServices.GetListSampleStation(false)
+	defer logger.Sync()
+	logger.Info("GET DATA STATION",
+		zap.Any("err", err),
+	)
+	dataBahan, err := lh.MdBahanServices.GetMdBahanByID(id)
+	if err != nil {
+		newForm := dev_mdbahanview.BodyFormBahan(
+			id,
+			models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+				Name:        "kodebahan",
+				Placeholder: "Kode Bahan",
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+				Name:        "namabahan",
+				Placeholder: "Nama Bahan",
+				Type:        "text"},
+			models.CustomDropdownV2Prm{
+				Name:     "stationid",
+				Label:    "Sample Station",
+				ListItem: dev_mdbahanview.ListItemStation(stationList, dataBahan.T_BahanT_SampleStationID),
+			},
+			dialogEditBodyID,
+			dev_mdbahanview.JsHideModal(""),
+		)
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get data bahan error", "danger"), newForm})
+	}
+	newForm := dev_mdbahanview.BodyFormBahan(
+		id,
+		models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+			Name:        "kodebahan",
+			Placeholder: "Kode Bahan",
+			Value:       dataBahan.T_BahanCode,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+			Name:        "namabahan",
+			Placeholder: "Nama Bahan",
+			Value:       dataBahan.T_BahanName,
+			Type:        "text"},
+		models.CustomDropdownV2Prm{
+			Name:     "stationid",
+			Label:    "Sample Station",
+			ListItem: dev_mdbahanview.ListItemStation(stationList, dataBahan.T_BahanT_SampleStationID),
+		},
+		dialogEditBodyID,
+		dev_mdbahanview.JsShowModal("#"+dialogEditID),
+	)
+	return utils.View(c, newForm)
+}
+func (lh *MdBahanHandler) HandleCloseFormEditMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	stationList, err := lh.MdBahanServices.GetListSampleStation(false)
+	dialogEditID := c.FormValue("dialogEditID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	defer logger.Sync()
+	logger.Info("GET DATA STATION",
+		zap.Any("err", err),
+		zap.Any("dialogeditbodyid", dialogEditBodyID),
+	)
+
+	modalAddBody := dev_mdbahanview.BodyFormBahan(
+		"",
+		models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+			Name:        "kodebahan",
+			Placeholder: "Kode Bahan",
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+			Name:        "namabahan",
+			Placeholder: "Nama Bahan",
+			Type:        "text"},
+		models.CustomDropdownV2Prm{
+			Name:     "stationid",
+			Label:    "Sample Station",
+			ListItem: dev_mdbahanview.ListItemStation(stationList, 0),
+		},
+		dialogEditBodyID,
+		dev_mdbahanview.JsHideModal("#"+dialogEditID),
+	)
+	return utils.View(c, modalAddBody)
+}
+func (lh *MdBahanHandler) HandleEditMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	code := c.FormValue("kodebahan")
+	name := c.FormValue("namabahan")
+	id := c.FormValue("bahanid")
+	stationIDPrm := c.FormValue("stationid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	filtername := c.FormValue("filtername")
+	filterstation := c.FormValue("filterstation")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	// searchID := c.FormValue("searchID")
+	dialogEditID := c.FormValue("dialogEditID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	stationID, err := strconv.Atoi(stationIDPrm)
+	if err != nil {
+		return err
+	}
+	formValidation := ""
+	codeValidation := ""
+	nameValidation := ""
+	stationValidation := ""
+
+	if strings.TrimSpace(code) == "" {
+		formValidation = "Code bahan tidak boleh kosong"
+		codeValidation = "Code bahan tidak boleh kosong"
+		nameValidation = ""
+		stationValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama bahan tidak boleh kosong"
+		codeValidation = ""
+		stationValidation = ""
+		nameValidation = "Nama bahan tidak boleh kosong"
+	}
+	if stationID == 0 {
+		formValidation = "Pilih salah satu station"
+		codeValidation = ""
+		nameValidation = ""
+		stationValidation = "Pilih salah satu station"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code,nama, dan station bahan tidak boleh kosong"
+		codeValidation = "Code bahan tidak boleh kosong"
+		stationValidation = "Pilih salah satu station"
+		nameValidation = "Nama bahan tidak boleh kosong"
+
+	}
+	stationList, err := lh.MdBahanServices.GetListSampleStation(false)
+	defer logger.Sync()
+	logger.Info("GET DATA STATIOn",
+		zap.Any("err", err),
+	)
+	if formValidation != "" || codeValidation != "" || nameValidation != "" || stationValidation != "" {
+		newForm := dev_mdbahanview.BodyFormBahan(
+			id,
+			models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+				Name:        "kodebahan",
+				Placeholder: "Kode Bahan",
+				Value:       code,
+				ErrorMsg:    codeValidation,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+				Name:        "namabahan",
+				Placeholder: "Nama Bahan",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomDropdownV2Prm{
+				Name:     "stationid",
+				Label:    "Sample Station",
+				ErrorMsg: stationValidation,
+				ListItem: dev_mdbahanview.ListItemStation(stationList, stationID),
+			},
+			dialogEditBodyID,
+			dev_mdbahanview.JsShowModal(""),
+		)
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	_, err = lh.MdBahanServices.EditMdBahan(id, code, name, stationIDPrm)
+	if err != nil {
+		newForm := dev_mdbahanview.BodyFormBahan(
+			id,
+			models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+				Name:        "kodebahan",
+				Placeholder: "Kode Bahan",
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+				Name:        "namabahan",
+				Placeholder: "Nama Bahan",
+				Value:       name,
+				Type:        "text"},
+			models.CustomDropdownV2Prm{
+				Name:     "stationid",
+				Label:    "Sample Station",
+				ListItem: dev_mdbahanview.ListItemStation(stationList, int(stationID)),
+			},
+			dialogEditBodyID,
+			dev_mdbahanview.JsShowModal(""),
+		)
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Gagal", err.Error(), "danger"), newForm})
+	}
+
+	bahanList, totalPage, err := lh.MdBahanServices.GetListMdBahan(filtername, filterstation, currPage, 5)
+	defer logger.Sync()
+	logger.Info("GET DATA BAHAN",
+		zap.Any("data", bahanList),
+		zap.Any("err", err),
+		zap.Any("totalPage", totalPage),
+	)
+	//Bahan Table
+	mdBahanTable := dev_mdbahanview.TableBahan(
+		bahanList,
+		tableID,
+		"/dev/md/bahan/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/bahan/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//Pagination
+
+	mdbahanPagination := pagination.PaginationV3(
+		totalPage, currPage,
+		"/dev/md/bahan/pagination",
+		paginationID,
+		"#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage"+paginationID,
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"true",
+		dev_mdbahanview.BeforeRequestContent(),
+		dev_mdbahanview.AfterRequestContent(),
+	)
+	//Form Add
+	modalAddBody := dev_mdbahanview.BodyFormBahan(
+		"",
+		models.CustomTextFieldv2Prm{Label: "Kode Bahan",
+			Name:        "kodebahan",
+			Placeholder: "Kode Bahan",
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{Label: "Nama Bahan",
+			Name:        "namabahan",
+			Placeholder: "Nama Bahan",
+			Type:        "text"},
+		models.CustomDropdownV2Prm{
+			Name:     "stationid",
+			Label:    "Sample Station",
+			ListItem: dev_mdbahanview.ListItemStation(stationList, 0),
+		},
+		dialogEditBodyID,
+		dev_mdbahanview.JsHideModal("#"+dialogEditID),
+	)
+
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Success edit bahan ", "success")
+	retval := []templ.Component{toastSuccess, mdBahanTable, mdbahanPagination, modalAddBody}
+	// time.Sleep(20 * time.Second)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdBahanHandler) HandleOpenDeleteMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	id := c.QueryParam("id")
+	dialogDeleteID := c.QueryParam("dialogDeleteID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+
+	dataBahan, err := lh.MdBahanServices.GetMdBahanByID(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("GET DATA BAHAN",
+			zap.Any("err", err),
+		)
+		newForm := dev_mdbahanview.DeleteConfirmationBody(
+			"",
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus bahan berikut ?",
+			[]string{"Kode", "Nama Bahan", "Sample Station"},
+			[]string{"", "", ""}, dev_mdbahanview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get data bahan error", "danger"), newForm})
+	}
+	newForm := dev_mdbahanview.DeleteConfirmationBody(
+		strconv.Itoa(dataBahan.T_BahanID),
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus bahan berikut ?",
+		[]string{"Kode", "Nama Bahan", "Sample Station"},
+		[]string{dataBahan.T_BahanCode, dataBahan.T_BahanName, dataBahan.T_SampleStationName}, dev_mdbahanview.JsShowModal("#"+dialogDeleteID))
+	return utils.View(c, newForm)
+}
+func (lh *MdBahanHandler) HandleCloseDeleteMdBahan(c echo.Context) error {
+
+	dialogDeleteID := c.FormValue("dialogDeleteID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+	newForm := dev_mdbahanview.DeleteConfirmationBody(
+		"",
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus bahan berikut ?",
+		[]string{"Kode", "Nama Bahan", "Sample Station"},
+		[]string{"", "", ""}, dev_mdbahanview.JsHideModal("#"+dialogDeleteID))
+	return utils.View(c, newForm)
+}
+
+func (lh *MdBahanHandler) HandleDeleteMdBahan(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+
+	id := c.FormValue("bahanid")
+
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	filtername := c.FormValue("filtername")
+	filterstation := c.FormValue("filterstation")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	// searchID := c.FormValue("searchID")
+	dialogDeleteID := c.FormValue("dialogDeleteID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+
+	_, err = lh.MdBahanServices.DeleteMdBahan(id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERR DELETE MD BAHAN",
+			zap.Any("err", err),
+		)
+		newForm := dev_mdbahanview.DeleteConfirmationBody(
+			"",
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus bahan berikut ?",
+			[]string{"Kode", "Nama Bahan", "Sample Station"},
+			[]string{"", "", ""}, dev_mdbahanview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get data bahan error", "danger"), newForm})
+	}
+	bahanList, totalPage, err := lh.MdBahanServices.GetListMdBahan(filtername, filterstation, currPage, 5)
+	defer logger.Sync()
+	logger.Info("GET DATA BAHAN",
+		zap.Any("data", bahanList),
+		zap.Any("err", err),
+		zap.Any("totalPage", totalPage),
+	)
+	//Bahan Table
+	mdBahanTable := dev_mdbahanview.TableBahan(
+		bahanList,
+		tableID,
+		"/dev/md/bahan/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/bahan/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//Pagination
+
+	mdbahanPagination := pagination.PaginationV3(
+		totalPage, currPage,
+		"/dev/md/bahan/pagination",
+		paginationID,
+		"#filter-name, #filter-station, #tableID, #paginationID, #dialogAddID, #dialogAddBodyID, #dialogEditID, #dialogEditBodyID, #dialogDeleteBodyID, #dialogDeleteID, #currpage"+paginationID,
+		"#"+paginationID,
+		"outerHTML",
+		"",
+		"true",
+		dev_mdbahanview.BeforeRequestContent(),
+		dev_mdbahanview.AfterRequestContent(),
+	)
+
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil hapus bahan", "success")
+	newForm := dev_mdbahanview.DeleteConfirmationBody(
+		"",
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus bahan berikut ?",
+		[]string{"Kode", "Nama Bahan", "Sample Station"},
+		[]string{"", "", ""}, dev_mdbahanview.JsHideModal("#"+dialogDeleteID))
+	return utils.ViewMulti(c, []templ.Component{toastSuccess, mdBahanTable, mdbahanPagination, newForm})
+}
--- a/handlers/dev/md.groupresult.handlers.go
+++ b/handlers/dev/md.groupresult.handlers.go
--- a/handlers/dev/md.natunit.handlers.go
+++ b/handlers/dev/md.natunit.handlers.go
--- a/handlers/dev/md.usergroup.handlers.go
+++ b/handlers/dev/md.usergroup.handlers.go
@@ -0,0 +1,994 @@
+package dev_handlers
+
+import (
+	breadcrumadmin "cpone/component/breadcrumbadmin"
+	customtextfieldsearch "cpone/component/customtextfieldsearch"
+	navbarmenu "cpone/component/navbar"
+	"cpone/component/pagination"
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	customtoastv2 "cpone/component/toastbootstrap"
+	"cpone/models"
+	"cpone/services"
+	"cpone/utils"
+	dev_mdusergroupview "cpone/views/dev/mdusergroup"
+	"strconv"
+	"strings"
+
+	"fmt"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type MdUserGroupServices interface {
+	GetListMdUserGroup(search string, currentPage int, rowPerPage int) ([]models.UserGroupV1, int, error)
+	GetMdUserGroupByID(id string) (models.UserGroupV1, error)
+	AddMdUserGroup(code string, name string) (models.UserGroupV1, error)
+	EditMdUsergroup(id string, code string, name string) (models.UserGroupV1, error)
+	DeleteMdUserGroup(id string) (models.UserGroupV1, error)
+	GetMdUserGroupBreadCrumb(title string) (models.BreadCrumbV1, error)
+}
+
+func NewMdUserGroupHandler(us MdUserGroupServices) *MdUserGroupHandler {
+	return &MdUserGroupHandler{
+		MdUserGroupServices: us,
+	}
+}
+
+type MdUserGroupHandler struct {
+	MdUserGroupServices MdUserGroupServices
+}
+
+func (lh *MdUserGroupHandler) HandleShowMdUserGroupScreen(c echo.Context) error {
+	logger, _ := zap.NewProduction()
+	//get sidebarmenu
+	tableID := utils.GenerateRandomID("tablebody")
+	paginationID := utils.GenerateRandomID("paginationid")
+	searchID := utils.GenerateRandomID("searchid")
+	dialogAddID := utils.GenerateRandomID("dialogaddID")
+	dialogAddBodyID := utils.GenerateRandomID("dialogaddbodyID")
+	dialogEditID := utils.GenerateRandomID("dialogEditID")
+	dialogEditBodyID := utils.GenerateRandomID("dialogEditbodyID")
+	dialogDeleteID := utils.GenerateRandomID("dialogDeleteID")
+	dialogDeleteBodyID := utils.GenerateRandomID("dialogDeletebodyID")
+	dataMenu, err := services.GetMenu()
+	fmt.Println(dataMenu)
+	fmt.Println(err)
+	if err != nil {
+		fmt.Println(dataMenu)
+		return err
+	}
+
+	//get user login
+	dataUser, err := services.GetUserLogin()
+	fmt.Println(dataUser)
+	fmt.Println(err)
+	if err != nil {
+		fmt.Println(dataUser)
+		return err
+	}
+	defer logger.Sync()
+	logger.Info("LOAD USER DEV",
+		zap.Any("data", dataUser),
+	)
+
+	title := "Master User Group"
+
+	dataBreadCrumb, err := lh.MdUserGroupServices.GetMdUserGroupBreadCrumb(title)
+	fmt.Println(dataBreadCrumb)
+	fmt.Println(err)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR BREADCRUMB DEV",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataBreadCrumb)
+		return err
+	}
+
+	defer logger.Sync()
+	logger.Info("LOAD BREADCRUMB DEV",
+		zap.Any("data", dataBreadCrumb),
+	)
+	//Breadcrumb component
+	breadcrumbComponent := breadcrumadmin.MainBreadcrumbAdminV1(dataBreadCrumb)
+	// navbar menu
+	navbarmenuComponent := navbarmenu.NavbarMenu(dataMenu)
+
+	// navbar user
+	navbaruserComponent := navbarmenu.Navbar(dataUser)
+
+	// sidebar
+	sidebaruserprofileComponent := sidebaruserprofile.Navbaruserprofile(dataUser)
+
+	//Table component
+	dataUserGroup, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup("", 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+
+	//filter user group component
+	usergroupFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
+		"search",
+		"Cari Kode/Nama",
+		"text",
+		"/dev/md/usergroupv2/filter",
+		"input changed delay:500ms, search",
+		"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableID, #paginationID, #searchID,#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent())
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		1,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+
+	//modal add form
+	dialogAddBodyCmp := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioAddCmp := dev_mdusergroupview.ActionFormUserGroup(
+		"/dev/md/usergroupv2/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID)
+	btnCloaseModalAdd := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closeaddform",
+		"#"+dialogAddBodyID,
+		"outerHTML",
+		"#"+dialogAddID)
+	modalAddFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/add",
+			HxTarget:     "#" + dialogAddBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogAddBodyID, #dialogAddID, #dialogDeleteBodyID, #dialogEditBodyID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogAddID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogAddBodyCmp,
+			DialogAction: modalActioAddCmp,
+			ButtonCLose:  btnCloaseModalAdd,
+		},
+	)
+
+	//modal edit form
+	dialogEditBodyCmp := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioEditCmp := dev_mdusergroupview.ActionFormUserGroup(
+		"/dev/md/usergroupv2/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID)
+	btnCloaseModalEdit := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closeeditform",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#"+dialogEditID)
+	modalEditFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/edit",
+			HxTarget:     "#" + dialogEditBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogEditBodyID, #dialogEditID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogEditID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogEditBodyCmp,
+			DialogAction: modalActioEditCmp,
+			ButtonCLose:  btnCloaseModalEdit,
+		},
+	)
+	//modal delete form
+	dialogDeleteBodyCmp := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogDeleteBodyID, dev_mdusergroupview.JsHideModal(""))
+	modalActioDeleteCmp := dev_mdusergroupview.ActionFormUserGroupDelete(
+		"/dev/md/usergroupv2/closedeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#"+dialogDeleteID)
+	btnCloaseModalDelete := dev_mdusergroupview.BtnCloseFormUserGroup(
+		"/dev/md/usergroupv2/closedeleteform",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#"+dialogDeleteID)
+	modalDeleteFormComponent := dev_mdusergroupview.UserGroupForm(
+		models.UserGroupFormComponent{
+			IDComponent:  "formusergroup",
+			Link:         "/dev/md/usergroupv2/delete",
+			HxTarget:     "#" + dialogDeleteBodyID,
+			HxSwap:       "outerHTML",
+			HxInclude:    "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogDeleteID, #dialogEditBodyID, #" + searchID + ", #currpage" + paginationID,
+			ModalID:      dialogDeleteID,
+			ModalTitle:   "New-User Group",
+			DialogBody:   dialogDeleteBodyCmp,
+			DialogAction: modalActioDeleteCmp,
+			ButtonCLose:  btnCloaseModalDelete,
+		},
+	)
+
+	//content js & css
+	content := dev_mdusergroupview.MdUserGroupScreen(
+		tableID,
+		paginationID,
+		searchID,
+		dialogAddID,
+		dialogAddBodyID,
+		dialogEditID,
+		dialogEditBodyID,
+		dialogDeleteID,
+		dialogDeleteBodyID,
+		breadcrumbComponent,
+		tableComponent,
+		usergroupFilterComponent,
+		userGroupPaginationComponent,
+		modalAddFormComponent,
+		modalEditFormComponent,
+		modalDeleteFormComponent)
+	css := dev_mdusergroupview.CssMdUserGroup()
+	js := dev_mdusergroupview.JsMdUserGroup()
+
+	view := dev_mdusergroupview.ShowMdUserGroupScreen(title,
+		content,
+		css,
+		js,
+		navbarmenuComponent,
+		navbaruserComponent,
+		sidebaruserprofileComponent)
+	return utils.View(c, view)
+}
+func (lh *MdUserGroupHandler) HandleFilterMdUserGroup(c echo.Context) error {
+	search := c.QueryParam("search")
+	searchID := c.QueryParam("searchID")
+	tableID := c.QueryParam("tableID")
+	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+	var retval []templ.Component
+	logger, _ := zap.NewProduction()
+
+	dataUserGroup, totalpage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, 1, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalpage,
+		1,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID,  #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+	retval = append(retval, tableComponent)
+	retval = append(retval, userGroupPaginationComponent)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdUserGroupHandler) HandleChangePageMdUserGroup(c echo.Context) error {
+	search := c.QueryParam("search")
+	pageparam := c.QueryParam("page")
+	tableID := c.QueryParam("tableID")
+	searchID := c.QueryParam("searchID")
+	paginationID := c.QueryParam("paginationID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+	var retval []templ.Component
+	logger, _ := zap.NewProduction()
+	page, err := strconv.Atoi(pageparam)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR CONVERT PAGE PARAM",
+			zap.Any("page", page),
+			zap.Any("error ", err),
+		)
+		return err
+	}
+	dataUserGroup, totalpage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, page, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroup,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+	)
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalpage,
+		page,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+	retval = append(retval, tableComponent)
+	retval = append(retval, userGroupPaginationComponent)
+	return utils.ViewMulti(c, retval)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormAdd(c echo.Context) error {
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleAddUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+	code := c.FormValue("usergroupcode")
+	name := c.FormValue("usergroupname")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogAddID := c.FormValue("dialogAddID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD USER GROUP PARAM",
+		zap.Any("code", code),
+		zap.Any("nama", name),
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+	formValidation := ""
+	codeValidation := ""
+	nameValidation := ""
+	if strings.TrimSpace(code) == "" {
+		formValidation = "Code user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama user group tidak boleh kosong"
+		codeValidation = ""
+		nameValidation = "Nama user group tidak boleh kosong"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code dan nama user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = "Nama user group tidak boleh kosong"
+
+	}
+
+	if formValidation != "" || codeValidation != "" || nameValidation != "" {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	//Add user group service
+	dataUserGroup, err := lh.MdUserGroupServices.AddMdUserGroup(code, name)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("code", code),
+			zap.Any("name", name),
+		)
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogAddBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+
+	}
+	logger.Info("ADD USER GROUP",
+		zap.Any("return", dataUserGroup),
+		zap.Any("code", code),
+		zap.Any("name", name),
+	)
+	//get list user group for table
+	dataUserGroupList, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	//table component
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//pagination component
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			ErrorMsg:    codeValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			ErrorMsg:    nameValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogAddBodyID, dev_mdusergroupview.JsHideModal("#"+dialogAddID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil insert User group "+name, "success")
+
+	return utils.ViewMulti(c, []templ.Component{
+		toastSuccess,
+		tableComponent,
+		userGroupPaginationComponent,
+		newForm})
+}
+func (lh *MdUserGroupHandler) HandleOpenEditForm(c echo.Context) error {
+	id := c.QueryParam("id")
+	dialogEditID := c.QueryParam("dialogEditID")
+	dialogEditBodyID := c.QueryParam("dialogEditBodyID")
+
+	dataUserGroup, err := lh.MdUserGroupServices.GetMdUserGroupByID(id)
+	if err != nil {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				Type:        "text", ID: "usergroupinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				Type:        "text", ID: "usergroupinputname"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get user group error", "danger"), newForm})
+	}
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Value:       dataUserGroup.M_UserGroupCode,
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Value:       dataUserGroup.M_UserGroupName,
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Value:       strconv.Itoa(dataUserGroup.M_UserGroupID),
+			Type:        "hidden", ID: "usergroupinputid"},
+
+		dialogEditBodyID, dev_mdusergroupview.JsShowModal("#"+dialogEditID))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormEdit(c echo.Context) error {
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			Type:        "text", ID: "usergroupinputname"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleEditUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+	code := c.FormValue("usergroupcode")
+	name := c.FormValue("usergroupname")
+	id := c.FormValue("usergroupid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogEditID := c.FormValue("dialogEditID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD USER GROUP PARAM",
+		zap.Any("code", code),
+		zap.Any("nama", name),
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+	formValidation := ""
+	codeValidation := ""
+	nameValidation := ""
+	if strings.TrimSpace(code) == "" {
+		formValidation = "Code user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = ""
+	}
+	if strings.TrimSpace(name) == "" {
+		formValidation = "Nama user group tidak boleh kosong"
+		codeValidation = ""
+		nameValidation = "Nama user group tidak boleh kosong"
+	}
+	if strings.TrimSpace(code) == "" && strings.TrimSpace(name) == "" {
+		formValidation = "Code dan nama user group tidak boleh kosong"
+		codeValidation = "Code user group tidak boleh kosong"
+		nameValidation = "Nama user group tidak boleh kosong"
+
+	}
+
+	if formValidation != "" || codeValidation != "" || nameValidation != "" {
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Warning", formValidation, "warning"), newForm})
+	}
+	//edit user group service
+	dataUserGroup, err := lh.MdUserGroupServices.EditMdUsergroup(id, code, name)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("code", code),
+			zap.Any("name", name),
+		)
+		newForm := dev_mdusergroupview.BodyFormUserGroup(
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupcode",
+				Placeholder: "Kode user group",
+				ErrorMsg:    codeValidation,
+				Value:       code,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Nama User Group",
+				Name:        "usergroupname",
+				Placeholder: "Nama user group",
+				ErrorMsg:    nameValidation,
+				Value:       name,
+				Type:        "text"},
+			models.CustomTextFieldv2Prm{
+				Label:       "Kode User Group",
+				Name:        "usergroupid",
+				Placeholder: "Kode user group",
+				Type:        "hidden", ID: "usergroupinputid"},
+			dialogEditBodyID, dev_mdusergroupview.JsHideModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+
+	}
+	logger.Info("ADD USER GROUP",
+		zap.Any("return", dataUserGroup),
+		zap.Any("code", code),
+		zap.Any("name", name),
+	)
+	//get list user group for table
+	dataUserGroupList, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	//table component
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//pagination component
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+	var retVal []templ.Component
+	newForm := dev_mdusergroupview.BodyFormUserGroup(
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupcode",
+			Placeholder: "Kode user group",
+			ErrorMsg:    codeValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Nama User Group",
+			Name:        "usergroupname",
+			Placeholder: "Nama user group",
+			ErrorMsg:    nameValidation,
+			Type:        "text"},
+		models.CustomTextFieldv2Prm{
+			Label:       "Kode User Group",
+			Name:        "usergroupid",
+			Placeholder: "Kode user group",
+			Type:        "hidden", ID: "usergroupinputid"},
+		dialogEditBodyID, dev_mdusergroupview.JsHideModal("#"+dialogEditID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil edit User group "+name, "success")
+	retVal = append(retVal, toastSuccess)
+	retVal = append(retVal, tableComponent)
+	retVal = append(retVal, userGroupPaginationComponent)
+	retVal = append(retVal, newForm)
+	return utils.ViewMulti(c, retVal)
+}
+func (lh *MdUserGroupHandler) HandleOpenDeleteForm(c echo.Context) error {
+	id := c.QueryParam("id")
+	dialogDeleteID := c.QueryParam("dialogDeleteID")
+	dialogDeleteBodyID := c.QueryParam("dialogDeleteBodyID")
+
+	dataUserGroup, err := lh.MdUserGroupServices.GetMdUserGroupByID(id)
+	if err != nil {
+		newForm := dev_mdusergroupview.DeleteConfirmationBody(
+			models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: strconv.Itoa(dataUserGroup.M_UserGroupID)},
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus user group berikut ?",
+			[]string{"Kode", "User Group"},
+			[]string{"", ""},
+			dev_mdusergroupview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{customtoastv2.CustomToastV2Show("Error", "Get user group error", "danger"), newForm})
+	}
+	newForm := dev_mdusergroupview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: strconv.Itoa(dataUserGroup.M_UserGroupID)},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus user group berikut ?",
+		[]string{"Kode", "User Group"},
+		[]string{dataUserGroup.M_UserGroupCode, dataUserGroup.M_UserGroupName},
+		dev_mdusergroupview.JsShowModal("#"+dialogDeleteID))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleCloseFormDelete(c echo.Context) error {
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+	newForm := dev_mdusergroupview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: ""},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus user group berikut ?",
+		[]string{"Kode", "User Group"},
+		[]string{"", ""},
+		dev_mdusergroupview.JsShowModal(""))
+	return utils.View(c, newForm)
+}
+func (lh *MdUserGroupHandler) HandleDeleteUserGroup(c echo.Context) error {
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	//prm form addusergroup
+
+	id := c.FormValue("usergroupid")
+	tableID := c.FormValue("tableID")
+	paginationID := c.FormValue("paginationID")
+	searchID := c.FormValue("searchID")
+	search := c.FormValue("search")
+	currPagePrm := c.FormValue("currpage" + paginationID)
+	// dialogAddBodyID := c.FormValue("dialogAddBodyID")
+	dialogDeleteID := c.FormValue("dialogDeleteID")
+	dialogEditBodyID := c.FormValue("dialogEditBodyID")
+	dialogDeleteBodyID := c.FormValue("dialogDeleteBodyID")
+
+	currPage, err := strconv.Atoi(currPagePrm)
+	if err != nil {
+		return err
+	}
+	logger.Info("ADD USER GROUP PARAM",
+
+		zap.Any("tableid", tableID),
+		zap.Any("search", search),
+		zap.Any("currpage", currPage),
+	)
+
+	//edit user group service
+	dataUserGroup, err := lh.MdUserGroupServices.DeleteMdUserGroup(id)
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+		)
+		newForm := dev_mdusergroupview.DeleteConfirmationBody(
+			models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: ""},
+			dialogDeleteBodyID,
+			"Apakah anda yakin menghapus user group berikut ?",
+			[]string{"Kode", "User Group"},
+			[]string{"", ""},
+			dev_mdusergroupview.JsShowModal(""))
+		return utils.ViewMulti(c, []templ.Component{
+			customtoastv2.CustomToastV2Show("Error", err.Error(), "danger"),
+			newForm})
+
+	}
+	logger.Info("ADD USER GROUP",
+		zap.Any("return", dataUserGroup),
+	)
+	//get list user group for table
+	dataUserGroupList, totalPage, err := lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERROR GET USER GROUP",
+			zap.Any("error", err),
+		)
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	if len(dataUserGroupList) == 0 && totalPage > 1 {
+		currPage = currPage - 1
+		dataUserGroupList, _, err = lh.MdUserGroupServices.GetListMdUserGroup(search, currPage, 5)
+		if err != nil {
+			defer logger.Sync()
+			logger.Info("ERROR GET USER GROUP",
+				zap.Any("error", err),
+			)
+			return err
+		}
+	}
+	//table component
+	tableComponent := dev_mdusergroupview.TableUserGroup(dataUserGroupList,
+		tableID,
+		"/dev/md/usergroupv2/openedit",
+		"#"+dialogEditBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"/dev/md/usergroupv2/opendelete",
+		"#"+dialogDeleteBodyID,
+		"outerHTML",
+		"#dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID")
+
+	//pagination component
+	//Pagination
+	userGroupPaginationComponent := pagination.PaginationV3(
+		totalPage,
+		currPage,
+		"/dev/md/usergroupv2/changepage",
+		paginationID,
+		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogEditBodyID, #dialogEditID, #dialogDeleteBodyID, #dialogDeleteID",
+		"#"+paginationID,
+		"outerHTML", "", "true",
+		dev_mdusergroupview.BeforeRequestContent(),
+		dev_mdusergroupview.AfterRequestContent(),
+	)
+	var retVal []templ.Component
+	newForm := dev_mdusergroupview.DeleteConfirmationBody(
+		models.CustomTextFieldv2Prm{Name: "usergroupid", Type: "hidden", Value: ""},
+		dialogDeleteBodyID,
+		"Apakah anda yakin menghapus user group berikut ?",
+		[]string{"Kode", "User Group"},
+		[]string{"", ""},
+		dev_mdusergroupview.JsHideModal("#"+dialogDeleteID))
+	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Berhasil delete User group ", "success")
+	retVal = append(retVal, toastSuccess)
+	retVal = append(retVal, tableComponent)
+	retVal = append(retVal, userGroupPaginationComponent)
+	retVal = append(retVal, newForm)
+	return utils.ViewMulti(c, retVal)
+}
--- a/handlers/dev/xsample.handlers.go
+++ b/handlers/dev/xsample.handlers.go
@@ -48,7 +48,8 @@ func (uh *XsampleHandler) ShowCoba(c echo.Context) error {
 		fmt.Println(dataUser)
 		return err
 	}
-	helo := xsample.ShowCoba("Hello World", xsample.Coba("Hello World"), xsample.CssCoba(), xsample.JsCoba(), dataMenu, dataUser)
+	// helo := xsample.ShowCoba("Hello World", xsample.Coba("Hello World"), xsample.CssCoba(), xsample.JsCoba(), dataMenu, dataUser)
+	helo := xsample.Coba("Hello World")
 	return uh.View(c, helo)
 }
 func (uh *XsampleHandler) ShowCounter(c echo.Context) error {
--- a/handlers/dev/xtemplmulti.handlers.go
+++ b/handlers/dev/xtemplmulti.handlers.go
@@ -0,0 +1,69 @@
+package dev_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	"html/template"
+	"strings"
+
+	xtemplmulti "cpone/views/dev/xtemplmulti"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+)
+
+type XTemplMultiService interface {
+}
+
+func NewXTemplMultiHandler(us XTemplMultiService) *XTemplMultiHandler {
+	return &XTemplMultiHandler{
+		XTemplMultiService: us,
+	}
+}
+
+type XTemplMultiHandler struct {
+	XTemplMultiService XTemplMultiService
+}
+
+func (lh *MasterMenuUserGroupHandler) HandlerXTemplMulti(c echo.Context) error {
+	var arrTempl []models.XtemplModel
+	// toastComponent := customtoastv2.CustomToastV2Show("sukses", "halo", "warning")
+
+	newItem := models.XtemplModel{
+		NameTempl:  "Komponen 1",
+		HtmlString: "<div style='background-color:red;'>Komponen 1<div>"}
+
+	newItem2 := models.XtemplModel{
+		NameTempl:  "Komponen 2",
+		HtmlString: "<div style='background-color:purple;'>Komponen 2<div>"}
+
+	arrTempl = append(arrTempl, newItem, newItem2)
+
+	var stringx string
+
+	for _, item := range arrTempl {
+		stringx += item.HtmlString
+	}
+
+	tpl := template.Must(template.New("index").Parse(stringx))
+
+	var stringBuilder strings.Builder
+	if err := tpl.Execute(&stringBuilder, arrTempl); err != nil {
+		panic(err)
+	}
+
+	newItemFix := models.XtemplModel{
+		NameTempl:  "Template Gabungan",
+		HtmlString: stringBuilder.String(),
+	}
+
+	arrTemplFix := []models.XtemplModel{newItemFix}
+
+	var templx []templ.Component
+	si := xtemplmulti.MainXTemplMulti(arrTemplFix)
+	templx = append(templx, si)
+	templx = append(templx, si)
+
+	// return utils.View(c, si)
+	return utils.ViewMulti(c, templx)
+}
--- a/handlers/public/kartukontrol.handlers.go
+++ b/handlers/public/kartukontrol.handlers.go
@@ -0,0 +1,118 @@
+package public_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	kartukontrol "cpone/views/public/kartukontrol"
+	public_toast "cpone/views/public/toast"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type KartuKontrolService interface {
+	GetkartuKontrolById(nomorRegistrasi string) ([]models.KartuKontrolModel, error)
+}
+
+func NewKartuKontrolHandler(us KartuKontrolService) *KartuKontrolHandler {
+	return &KartuKontrolHandler{
+		KartuKontrolService: us,
+	}
+}
+
+type KartuKontrolHandler struct {
+	KartuKontrolService KartuKontrolService
+}
+
+func (lh *KartuKontrolHandler) HandlerHideToast(c echo.Context) error {
+	toastComponent := public_toast.PublicToastV1KartuKontrolHide()
+
+	si := toastComponent
+
+	return utils.View(c, si)
+}
+
+func (lh *KartuKontrolHandler) HandlerShowKartuKontrol(c echo.Context) error {
+
+	var flagxError bool = true
+	var msgx string = ""
+
+	nomorRegistrasi := c.Param("nomorRegistrasi")
+
+	urlSurveyMcu := "redirectsurveymcu"
+
+	// urlSurveyMcu := "redirectsurveymcu"
+
+	// nomorRegistrasi := "1"
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	dataKartuKontrol, err := lh.KartuKontrolService.GetkartuKontrolById(nomorRegistrasi)
+
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("prm", nomorRegistrasi),
+		)
+		// return err
+		if flagxError {
+			msgx = "Error Get Kartu Kontrol"
+			si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+			return utils.View(c, si)
+		}
+	}
+	logger.Info("SHOW DATA KARTU KONTROL handler",
+		zap.Any("return", dataKartuKontrol),
+		zap.Any("prm", nomorRegistrasi),
+	)
+
+	flagxError = false
+	var si templ.Component
+	var isShowSurveyMcu bool = true
+
+	if isShowSurveyMcu {
+		si = kartukontrol.ShowKartuKontrol("Kartu Kontrol", kartukontrol.MainContentKartuKontrolLayout(dataKartuKontrol, "/modalsurveykartukontrol", "load delay:3s", "modalWordingSurveyMcu", urlSurveyMcu, nomorRegistrasi), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+	} else {
+		si = kartukontrol.ShowKartuKontrol("Kartu Kontrol",
+			kartukontrol.MainContentKartuKontrolLayout(dataKartuKontrol, "", "", "modalWordingSurveyMcu", urlSurveyMcu, nomorRegistrasi), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+	}
+
+	return utils.View(c, si)
+}
+
+func (lh *KartuKontrolHandler) HandlerShowWordingModalSurveyMcu(c echo.Context) error {
+
+	stringUrlToSurveyMcu := c.QueryParam("urlSurveyMcu")
+
+	// var dataKartuKontrol []models.KartuKontrolModel
+	si := kartukontrol.ShowKartuKontrol(
+		"Kartu Kontrol",
+		kartukontrol.ModalMcuWordingShow("modalWordingSurveyMcu", "Silahkan isi questioner untuk membantu peningkatan layanan kami. Terima kasih.", stringUrlToSurveyMcu), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+
+	return utils.View(c, si)
+}
+
+func (lh *KartuKontrolHandler) HandlerRedirectToSurveyMcu(c echo.Context) error {
+
+	nomorRegistrasi := c.QueryParam("nomorRegistrasi")
+	stringUrlToSurveyMcu := "/surveymcu/" + nomorRegistrasi
+
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	if len(stringUrlToSurveyMcu) > 0 {
+		// redirect ke kartu kontrol
+		logger.Info("redirect SURVEY MCU",
+			zap.Any("redirect SURVEY MCU", stringUrlToSurveyMcu),
+		)
+		c.Response().Header().Set("HX-Redirect", stringUrlToSurveyMcu)
+		// return c.NoContent(http.StatusOK)
+	}
+
+	si := kartukontrol.ShowKartuKontrol(
+		"Kartu Kontrol",
+		kartukontrol.ModalMcuWordingShow("modalWordingSurveyMcu", "Silahkan isi questioner untuk membantu peningkatan layanan kami. Terima kasih.", ""), kartukontrol.CssKartuKontrol(), kartukontrol.JsKartuKontrol())
+
+	return utils.View(c, si)
+}
--- a/handlers/public/landingpage.handlers.go
+++ b/handlers/public/landingpage.handlers.go
@@ -3,9 +3,9 @@ package public_handlers
 import (
 	public_services "cpone/services/public"
 	public_landingpage "cpone/views/public/landingpage"
-	"fmt"

 	"github.com/a-h/templ"
+	"go.uber.org/zap"

 	"github.com/labstack/echo/v4"
 )
@@ -47,7 +47,15 @@ func (uh *LandingPageHandler) ShowLandingPage(c echo.Context) error {
 	if err != nil {
 		return err
 	}
-	fmt.Printf("%+v\n", udata)
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+	logger.Info("User registration successful",
+		zap.String("username", "john_doe"),
+		zap.Int("id", 12345),
+		zap.Any("data", udata),
+	)
+	// fmt.Printf("%+v\n", udata)
+
 	helo := public_landingpage.ShowLandingPage("Hello World",
 		public_landingpage.MainLandingPage(public_landingpage.ListMedicalService(udata),
 			public_landingpage.ListAdvantage(adData), public_landingpage.ListPromotion(lpData),
--- a/handlers/public/surveymcu.handlers.go
+++ b/handlers/public/surveymcu.handlers.go
@@ -0,0 +1,194 @@
+package public_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	surveymcu "cpone/views/public/surveymcu"
+	public_toast "cpone/views/public/toast"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+	"go.uber.org/zap"
+)
+
+type SurveyMcuService interface {
+	GetSurveyMcuByNoreg(nomorRegistrasi string) ([]models.SurveyMcu, error)
+}
+
+func NewSurveyMcuHandler(us SurveyMcuService) *SurveyMcuHandler {
+	return &SurveyMcuHandler{
+		SurveyMcuService: us,
+	}
+}
+
+type SurveyMcuHandler struct {
+	SurveyMcuService SurveyMcuService
+}
+
+func (lh *SurveyMcuHandler) HandlerShowSurveyMcu(c echo.Context) error {
+
+	var flagxError bool = true
+	var msgx string = ""
+
+	nomorRegistrasi := c.Param("nomorRegistrasi")
+	// nomorRegistrasi := "1"
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	dataSurveyMcu, err := lh.SurveyMcuService.GetSurveyMcuByNoreg(nomorRegistrasi)
+
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("prm", nomorRegistrasi),
+		)
+		// return err
+		if flagxError {
+			msgx = "Error Get Survey MCU By No Reg"
+			si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+			return utils.View(c, si)
+		}
+	}
+
+	flagxError = false
+	logger.Info("SHOW DATA SURVEY MCU handler",
+		zap.Any("return", dataSurveyMcu),
+		zap.Any("prm", nomorRegistrasi),
+	)
+
+	stringUrl := "surveymcuproses/" + nomorRegistrasi
+	var hxInclude string = ""
+	var idClearMsg []models.IdClearErrorMessage
+
+	if len(dataSurveyMcu) > 0 {
+		hxInclude = utils.ConcatHxIncludeSurveyMcu(dataSurveyMcu)
+	}
+
+	si := surveymcu.ShowSurveyMcu("Survey Mcu",
+		surveymcu.MainContentSurveyMcuLayout(dataSurveyMcu, stringUrl, surveymcu.ErrorMessageSurveyMcu("", "", idClearMsg, "alertSaranMcu", public_toast.PublicToastV1KartuKontrolHide()), hxInclude), surveymcu.CssSurveyMcu(), surveymcu.JsSurveyMcu())
+
+	return utils.View(c, si)
+}
+
+func (lh *SurveyMcuHandler) HandlerProcessSurveyMcu(c echo.Context) error {
+
+	var flagxError bool = true
+	var msgx string = ""
+
+	nomorRegistrasi := c.Param("nomorRegistrasi")
+	stringUrlBackToKartuKontrol := "/kartukontrol/" + nomorRegistrasi
+	// nomorRegistrasi := "1"
+	logger, _ := zap.NewProduction()
+	defer logger.Sync()
+
+	dataSurveyMcu, err := lh.SurveyMcuService.GetSurveyMcuByNoreg(nomorRegistrasi)
+
+	if err != nil {
+		logger.Info("Error",
+			zap.Any("Error", err),
+			zap.Any("prm", nomorRegistrasi),
+		)
+		// return err
+		if flagxError {
+			msgx = "Error Get Survey MCU By No Reg"
+			si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+			return utils.View(c, si)
+		}
+	}
+
+	logger.Info("SHOW DATA SURVEY MCU handler",
+		zap.Any("return", dataSurveyMcu),
+		zap.Any("prm", nomorRegistrasi),
+	)
+
+	// form := c.Request().PostForm
+
+	// stringUrl := "surveymcuproses/" + nomorRegistrasi
+
+	logger.Info("CEK POST handler",
+		zap.Any("c.FormValue Saran", c.FormValue("saranmcu-11")),
+	)
+
+	// proses validasi
+
+	var si templ.Component
+	var idFormKosong string = ""
+	var stringMessage string = ""
+	var isFormEmpty bool = false
+	var idClearMsg []models.IdClearErrorMessage
+	var idSaranMcuAlert string = ""
+	// var idSaranMcuClear string = ""
+
+	hasError := false
+
+	if len(dataSurveyMcu) > 0 {
+		for _, v := range dataSurveyMcu {
+			// radio button
+			if len(v.DataListItemSurveyMcu) > 0 {
+				for _, x := range v.DataListItemSurveyMcu {
+
+					if len(c.FormValue("radio-"+x.IDItemSurvey)) > 0 {
+						idClearMsg = append(idClearMsg, models.IdClearErrorMessage{IdItem: x.IDItemSurvey})
+					}
+
+					if "default-"+x.NameRadioButton == c.FormValue("default-"+x.NameRadioButton) && len(c.FormValue("radio-"+x.IDItemSurvey)) == 0 {
+						stringMessage = "Pertanyaan ke-" + x.IDItemSurvey + " wajib diisi"
+						idFormKosong = utils.GetIdSurveyMcu(x.IDItemSurvey)
+						isFormEmpty = true
+						hasError = true
+						flagxError = true
+						break
+					}
+				}
+			}
+
+			if hasError {
+				break
+			}
+		}
+	}
+
+	// saran mcu
+	if !hasError && len(dataSurveyMcu) > 0 {
+		for _, v := range dataSurveyMcu {
+			if len(v.DataListItemSurveyMcuSaran) > 0 {
+				for _, x := range v.DataListItemSurveyMcuSaran {
+					if len(c.FormValue("saranmcu-"+x.IDItemSurveyMcuSaran)) > 0 {
+						idClearMsg = append(idClearMsg, models.IdClearErrorMessage{IdItem: x.IDItemSurveyMcuSaran})
+					}
+
+					if "default-"+x.NameSurveyMcuSaran == c.FormValue("default-"+x.NameSurveyMcuSaran) && len(c.FormValue("saranmcu-"+x.IDItemSurveyMcuSaran)) == 0 {
+						stringMessage = "Saran Wajib Diisi"
+						idFormKosong = utils.GetIdSurveyMcu(x.IDItemSurveyMcuSaran)
+						isFormEmpty = true
+						hasError = true
+						break
+					}
+				}
+			}
+			if hasError {
+				break
+			}
+		}
+	}
+
+	if isFormEmpty {
+		// if flagxError {
+		// 	msgx = "Error Get Survey MCU By No Reg"
+		// 	si := public_toast.PublicToastV1KartuKontrolShow("Error", msgx, "danger")
+		// 	return utils.View(c, si)
+		// }
+		si = surveymcu.ErrorMessageSurveyMcu(stringMessage, idFormKosong, idClearMsg, idSaranMcuAlert, public_toast.PublicToastV1KartuKontrolShow("Warning", stringMessage, "warning"))
+	} else {
+		flagxError = false
+		si = surveymcu.ErrorMessageSurveyMcu("", "", idClearMsg, "", public_toast.PublicToastV1KartuKontrolHide())
+		logger.Info("redirect",
+			zap.Any("redirect", stringUrlBackToKartuKontrol),
+		)
+
+		// redirect ke kartu kontrol
+		c.Response().Header().Set("HX-Redirect", stringUrlBackToKartuKontrol)
+	}
+
+	return utils.View(c, si)
+}
--- a/handlers/public/tools.handler.go
+++ b/handlers/public/tools.handler.go
@@ -0,0 +1,73 @@
+package public_handlers
+
+import (
+	"cpone/models"
+	"cpone/utils"
+	"cpone/views/dev/mastermenuusergroup"
+
+	tablecomponent "cpone/component/table"
+
+	public_toast "cpone/views/public/toast"
+
+	"github.com/labstack/echo/v4"
+)
+
+type ToolsService interface {
+}
+
+func NewToolsHandler(us ToolsService) *ToolsHandler {
+	return &ToolsHandler{
+		ToolsService: us,
+	}
+}
+
+type ToolsHandler struct {
+	ToolsService ToolsService
+}
+
+func (lh *ToolsHandler) HandlerHideToast(c echo.Context) error {
+	toastComponent := public_toast.PublicToastV1Hide()
+
+	si := toastComponent
+
+	return utils.View(c, si)
+}
+
+func (lh *ToolsHandler) HandlerShowToast(c echo.Context) error {
+
+	inputansearchComponent := tablecomponent.DivEmpty()
+	// toastComponent := public_toast.PublicToastV1Show("Success", "Success Loaded", "success")
+	pagination := tablecomponent.DivEmpty()
+
+	dummyData := []models.UserGroupV1{
+		{
+			Nomor:                  "1",
+			M_UserGroupID:          1,
+			M_UserGroupCode:        "group1",
+			M_UserGroupName:        "Group 1",
+			M_UserGroupCreated:     "2024-05-16",
+			M_UserGroupLastUpdated: "2024-05-16",
+			M_UserGroupIsActive:    "Active",
+		},
+	}
+
+	tabelusergroupComponent := tablecomponent.TableV2(
+		[]string{"KODE", "USERGROUP", "AKSI"},
+		[]string{"40%", "40%", "20%"},
+		mastermenuusergroup.TableRowV1(dummyData, "", "", "", "", "", "", "", ""),
+		pagination,
+		"",
+		inputansearchComponent,
+	)
+
+	si := public_toast.ShowToast("",
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+		tabelusergroupComponent,
+	)
+
+	return utils.View(c, si)
+}
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -7,6 +7,7 @@ import (
 	public_handlers "cpone/handlers/public"
 	client_services "cpone/services/client"
 	corporate_services "cpone/services/corporate"
+	dev_services "cpone/services/dev"
 	public_services "cpone/services/public"

 	"cpone/db"
@@ -41,12 +42,10 @@ func SetupRoutesLandingPage(app *echo.Echo, h *dev_handlers.LandingPageHandler,
 	// mdgroup := clientgroup.Group("/md")
 	// clientusergroup.GET("/md", mastermenuusergroupHandler.HandlerShowMasterMenuUserGroup)
 	clientgroup.GET("/usergroup", mastermenuusergroupHandler.HandlerShowMasterMenuUserGroup)
-	autocomplete := app.Group("/client")
-	autocomplete.GET("/autocomplete", mastermenuusergroupHandler.HandlerListAutoComplete)
-	autocomplete.GET("/autoCompleteLoadMore/:pageOf/:searchParam/:limit", mastermenuusergroupHandler.HandlerListAutoCompleteLoadMore)
-	autocomplete.GET("/autoCompleteSetValue/:setvalue", mastermenuusergroupHandler.HandlerListAutoCompleteAfterSelected)
-	clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
-	clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
+	// autocomplete := app.Group("/client")
+	// autocomplete.GET("/autocomplete", mastermenuusergroupHandler.HandlerListAutoComplete)
+	// autocomplete.GET("/autoCompleteLoadMore/:pageOf/:searchParam/:limit", mastermenuusergroupHandler.HandlerListAutoCompleteLoadMore)
+	// autocomplete.GET("/autoCompleteSetValue/:setvalue", mastermenuusergroupHandler.HandlerListAutoCompleteAfterSelected)

 }
 func SetupRoutesPieChart(app *echo.Echo, h *dev_handlers.PiechartHandler) {
@@ -69,6 +68,26 @@ func SetupRoutesPublic(app *echo.Echo, appStore db.AppStore) {
 	public.GET("landingpage", lh.ShowLandingPage)
 	loginHdr := public_handlers.NewLoginHandler(l)
 	public.GET("login", loginHdr.HandlerShowLogin)
+
+	// kartu kontrol
+	publicKartuKontrolServices := public_services.NewServicesKartuKontrol(appStore)
+	publicKartuKontrolhandlers := public_handlers.NewKartuKontrolHandler(publicKartuKontrolServices)
+	public.GET("kartukontrol/:nomorRegistrasi", publicKartuKontrolhandlers.HandlerShowKartuKontrol)
+	public.GET("modalsurveykartukontrol", publicKartuKontrolhandlers.HandlerShowWordingModalSurveyMcu)
+
+	// survey mcu page (pertanyaan dan jawaban)
+	publicSurveyMcuServices := public_services.NewServicesSurveyMcu(appStore)
+	publicSurveyMcuhandlers := public_handlers.NewSurveyMcuHandler(publicSurveyMcuServices)
+	public.GET("surveymcu/:nomorRegistrasi", publicSurveyMcuhandlers.HandlerShowSurveyMcu)
+
+	// hide toast
+	public.GET("hidetoastkartukontrol", publicKartuKontrolhandlers.HandlerHideToast)
+
+	// surveymcuproses
+	public.POST("surveymcuproses/:nomorRegistrasi", publicSurveyMcuhandlers.HandlerProcessSurveyMcu)
+
+	// redirect to survey mcu page
+	public.GET("redirectsurveymcu", publicKartuKontrolhandlers.HandlerRedirectToSurveyMcu)
 }
 func SetupRoutesCorporate(app *echo.Echo, appStore db.AppStore) {
 	public := app.Group("/corp")
@@ -81,6 +100,50 @@ func SetupRoutesCorporate(app *echo.Echo, appStore db.AppStore) {

 func SetupRoutesClient(app *echo.Echo, appStore db.AppStore) {
 	public := app.Group("/client")
+
+	lpanel := client_services.NewServicesMdPanel(appStore)
+	lhpanel := client_handlers.NewMdPanelHandler(lpanel)
+	public.GET("/md/panel", lhpanel.ShowMdPanel)
+
+	lpasien := client_services.NewServicesMdPasien(appStore)
+	lhpasien := client_handlers.NewMdPasienHandler(lpasien)
+	public.GET("/md/pasien", lhpasien.ShowMdPasien)
+
+	ldokter := client_services.NewServicesMdDokter(appStore)
+	lhdokter := client_handlers.NewMdDokterHandler(ldokter)
+	public.GET("/md/dokter", lhdokter.ShowMdDokter)
+
+	lhargasingle := client_services.NewServicesMdHargaSingle(appStore)
+	lhhargasingle := client_handlers.NewMdHargaSingleHandler(lhargasingle)
+	public.GET("/md/hargasingle", lhhargasingle.ShowMdHargaSingle)
+
+	lresultnonlab := client_services.NewServicesMdResultNonLab(appStore)
+	lhresultnonlab := client_handlers.NewMdResultNonLabHandler(lresultnonlab)
+	public.GET("/md/resultnonlab", lhresultnonlab.ShowMdResultNonLab)
+
+	ltemplatefisik := client_services.NewServicesMdTemplateFisik(appStore)
+	lhtemplatefisik := client_handlers.NewMdTemplateFisikHandler(ltemplatefisik)
+	public.GET("/md/templatefisik", lhtemplatefisik.ShowMdTemplateFisik)
+
+	lhargapanel := client_services.NewServicesMdHargaPanel(appStore)
+	lhhargapanel := client_handlers.NewMdHargaPanelHandler(lhargapanel)
+	public.GET("/md/hargapanel", lhhargapanel.ShowMdHargaPanel)
+
+	lhargaprofile := client_services.NewServicesMdHargaProfile(appStore)
+	lhhargaprofile := client_handlers.NewMdHargaProfileHandler(lhargaprofile)
+	public.GET("/md/hargaprofile", lhhargaprofile.ShowMdHargaProfile)
+
+	lpaket := client_services.NewServicesMdPaket(appStore)
+	lhpaket := client_handlers.NewMdPaketHandler(lpaket)
+	public.GET("/md/paket", lhpaket.ShowMdPaket)
+
+	lsamplestation := client_services.NewServicesMdSampleStation(appStore)
+	lhsamplestation := client_handlers.NewMdSampleStationHandler(lsamplestation)
+	public.GET("/md/samplestation", lhsamplestation.ShowMdSampleStation)
+
+	lsampletype := client_services.NewServicesMdSampleType(appStore)
+	lhsampletype := client_handlers.NewMdSampleTypeHandler(lsampletype)
+	public.GET("/md/sampletype", lhsampletype.ShowMdSampleType)
 	//MD BAHAN
 	mdBahanService := client_services.NewServicesMdBahan(appStore)
 	mdbahanHandler := client_handlers.NewMdBahanHandler(mdBahanService)
@@ -131,3 +194,115 @@ func SetupRoutesClient(app *echo.Echo, appStore db.AppStore) {
 	txSampleStationHandler := client_handlers.NewTransaksiSampleStationHandler(txSampleStationService)
 	public.GET("/transaksi/samplestation", txSampleStationHandler.ShowTransaksiSampleStation)
 }
+
+func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
+	dev := app.Group("/dev")
+
+	dvlpserv := dev_services.NewServicesLandingPage(appStore)
+	devlphan := dev_handlers.NewLandingPageHandler(dvlpserv)
+	dev.GET("/landingpage", devlphan.ShowLandingPage)
+
+	//DEV USERGROUP
+	devUGServices := dev_services.NewServicesMasterMenuUserGroup(appStore)
+	devUGhandlers := dev_handlers.NewMasterMenuUserGroupHandler(devUGServices)
+	// dev.GET("/usergroup", devUGhandlers.HandlerShowMasterMenuUserGroup)
+	// dev.GET("/usergroup/pagination", devUGhandlers.HandleChangePage)
+	dev.POST("/usergroup/add", devUGhandlers.AddUserGroup)
+	dev.POST("/usergroup/edit", devUGhandlers.EditUserGroup)
+	dev.POST("/usergroup/delete", devUGhandlers.DeleteUserGroup)
+
+	// try
+	dev.GET("/usergroupv1", devUGhandlers.HandlerShowMasterMenuUserGroupV1)
+	dev.GET("/breadcrumbv1", devUGhandlers.HandlerShowBreadCrumbV1)
+	dev.GET("/searchusergroupv1", devUGhandlers.HandlerShowMasterMenuUserGroupSearchV1)
+	dev.GET("/usergroupv1pagination", devUGhandlers.HandlerShowMasterMenuUserGroupPaginationV1)
+	dev.POST("/usergrouphandlecloseform", devUGhandlers.HandleCloseForm)
+	dev.POST("/usergrouphandlecloseformedit", devUGhandlers.HandleCloseFormEdit)
+	dev.POST("/usergrouphandlecloseformdelete", devUGhandlers.HandleCloseFormDelete)
+	dev.GET("/usergroupshoweditform", devUGhandlers.HandleEditForm)
+	dev.GET("/usergroupshowdeleteform", devUGhandlers.HandleDeleteForm)
+
+	//ugcobanady
+	dev.GET("/usergrouptryandy", devUGhandlers.HandlerShowMasterMenuUserGroupTryAndy)
+
+	dev.GET("/hidetoast", devUGhandlers.HandlerHideToast)
+
+	dev.GET("/xtemplmulti", devUGhandlers.HandlerXTemplMulti)
+
+	// clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
+	// clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
+
+	//New User Group
+	devMdUserGroupServices := dev_services.NewMdUserGroupServices(appStore)
+	devMdUserGroupHandlers := dev_handlers.NewMdUserGroupHandler(devMdUserGroupServices)
+	dev.GET("/md/usergroupv2", devMdUserGroupHandlers.HandleShowMdUserGroupScreen)
+	dev.GET("/md/usergroupv2/filter", devMdUserGroupHandlers.HandleFilterMdUserGroup)
+	dev.GET("/md/usergroupv2/changepage", devMdUserGroupHandlers.HandleChangePageMdUserGroup)
+	dev.POST("/md/usergroupv2/closeaddform", devMdUserGroupHandlers.HandleCloseFormAdd)
+	dev.POST("/md/usergroupv2/add", devMdUserGroupHandlers.HandleAddUserGroup)
+	dev.GET("/md/usergroupv2/openedit", devMdUserGroupHandlers.HandleOpenEditForm)
+	dev.POST("/md/usergroupv2/closeeditform", devMdUserGroupHandlers.HandleCloseFormEdit)
+	dev.POST("/md/usergroupv2/edit", devMdUserGroupHandlers.HandleEditUserGroup)
+	dev.GET("/md/usergroupv2/opendelete", devMdUserGroupHandlers.HandleOpenDeleteForm)
+	dev.POST("/md/usergroupv2/closedeleteform", devMdUserGroupHandlers.HandleCloseFormDelete)
+	dev.POST("/md/usergroupv2/delete", devMdUserGroupHandlers.HandleDeleteUserGroup)
+
+	// group result
+	devGRServices := dev_services.NewServicesGroupResult(appStore)
+	devGRhandlers := dev_handlers.NewGroupResultHandler(devGRServices)
+	dev.GET("/groupresult", devGRhandlers.HandlerShowGroupResultV1)
+	dev.GET("/searchgroupresultv1", devGRhandlers.HandlerShowGroupResultSearchV1)
+	dev.GET("/groupresultv1pagination", devGRhandlers.HandlerShowGroupResultPaginationV1)
+	dev.POST("/groupresulthandlecloseform", devGRhandlers.HandleCloseForm)
+	dev.POST("/groupresulthandlecloseformedit", devGRhandlers.HandleCloseFormEdit)
+	dev.GET("/groupresultshoweditform", devGRhandlers.HandleEditForm)
+	dev.GET("/groupresultshowdeleteform", devGRhandlers.HandleDeleteForm)
+	// dev.GET("/groupresultshowdeleteform", devGRhandlers.HandleDeleteForm)
+	// form add
+	dev.POST("/groupresult/add", devGRhandlers.AddGroupResult)
+	dev.POST("/groupresult/edit", devGRhandlers.EditGroupResult)
+	dev.POST("/groupresult/delete", devGRhandlers.DeleteGroupResult)
+	// masterdata nat unit
+	devMdNatUnitServices := dev_services.NewMdNatUnitServices(appStore)
+	devMdNatUnitHandlers := dev_handlers.NeWMdNatUnitHandler(devMdNatUnitServices)
+	dev.GET("/md/natunit", devMdNatUnitHandlers.HandleShowMdNatUnitScreen)
+	dev.GET("/md/natunit/filter", devMdNatUnitHandlers.HandleFilterMdNatUnit)
+	dev.GET("/md/natunit/changepage", devMdNatUnitHandlers.HandlerChangePageMdNatUnit)
+	dev.POST("/md/natunit/closeaddform", devMdNatUnitHandlers.HandlerCloseFormAdd)
+	dev.POST("/md/natunit/add", devMdNatUnitHandlers.HandlerAddNatUnit)
+	dev.GET("/md/natunit/openedit", devMdNatUnitHandlers.HandlerOpenEditForm)
+	dev.POST("/md/natunit/closeeditform", devMdNatUnitHandlers.HandlerCloseFormEdit)
+	dev.POST("/md/natunit/edit", devMdNatUnitHandlers.HandlerEditNatUnit)
+	dev.GET("/md/natunit/opendelete", devMdNatUnitHandlers.HandlerOpenDeleteForm)
+	dev.POST("/md/natunit/closedeleteform", devMdNatUnitHandlers.HandlerCloseFormDelete)
+	dev.POST("/md/natunit/delete", devMdNatUnitHandlers.HandlerDeleteNatUnit)
+
+	// group result v2
+	devMdGRServices := dev_services.NewServicesMdGroupResult(appStore)
+	devMdGRhandlers := dev_handlers.NewMdGroupResultHandler(devMdGRServices)
+	dev.GET("/md/groupresultv2", devMdGRhandlers.HandleShowMdGroupResultScreen)
+	dev.GET("/md/groupresultv2/filter", devMdGRhandlers.HandleFilterMdGroupResult)
+	dev.GET("/md/groupresultv2/changepage", devMdGRhandlers.HandleChangePageMdGroupResult)
+	dev.POST("/md/groupresultv2/closeaddform", devMdGRhandlers.HandleCloseFormAdd)
+	dev.POST("/md/groupresultv2/add", devMdGRhandlers.HandleAddGroupResult)
+	dev.GET("/md/groupresultv2/openedit", devMdGRhandlers.HandleOpenEditForm)
+	dev.POST("/md/groupresultv2/closeeditform", devMdGRhandlers.HandleCloseFormEdit)
+	dev.POST("/md/groupresultv2/edit", devMdGRhandlers.HandleEditGroupResult)
+	dev.GET("/md/groupresultv2/opendelete", devMdGRhandlers.HandleOpenDeleteForm)
+	dev.POST("/md/groupresultv2/closedeleteform", devMdGRhandlers.HandleCloseFormDelete)
+	dev.POST("/md/groupresultv2/delete", devMdGRhandlers.HandleDeleteUserGroup)
+	//MD BAHAN
+	devMdBahanServices := dev_services.NewMdBahanServices(appStore)
+	devMdBahanHandlers := dev_handlers.NewMdBahanHandler(devMdBahanServices)
+	dev.GET("/md/bahan", devMdBahanHandlers.HandleShowMdBahanScreen)
+	dev.GET("/md/bahan/filter", devMdBahanHandlers.HandleFilterMdBahan)
+	dev.GET("/md/bahan/pagination", devMdBahanHandlers.HandlePaginationMdBahan)
+	dev.POST("/md/bahan/add", devMdBahanHandlers.HandleAddMdBahan)
+	dev.POST("/md/bahan/closeaddform", devMdBahanHandlers.HandleCloseFormAddMdBahan)
+	dev.GET("/md/bahan/openedit", devMdBahanHandlers.HandleOpenEditMdBahan)
+	dev.POST("/md/bahan/closeeditform", devMdBahanHandlers.HandleCloseFormEditMdBahan)
+	dev.POST("/md/bahan/edit", devMdBahanHandlers.HandleEditMdBahan)
+	dev.GET("/md/bahan/opendelete", devMdBahanHandlers.HandleOpenDeleteMdBahan)
+	dev.POST("/md/bahan/closedeleteform", devMdBahanHandlers.HandleCloseDeleteMdBahan)
+	dev.POST("/md/bahan/delete", devMdBahanHandlers.HandleDeleteMdBahan)
+}
--- a/layout/layout_corporate.templ
+++ b/layout/layout_corporate.templ
@@ -1,14 +1,8 @@
 package layout

-import (
-	"cpone/component/navbar"
-	"cpone/component/sidebar_user_profile"
-	"cpone/models"
-	services "cpone/services/dev"
-)
-
 // LAYOUT PLAYGROUND
-templ CorporateLayout(title string, css templ.Component, js templ.Component, datamenu []services.MasterMenu, dataUser models.User) {
+templ CorporateLayout(title string, css templ.Component, js templ.Component, navbarmenu templ.Component,
+	navbaruser templ.Component, sidebaruserprofile templ.Component) {
 	<!DOCTYPE html>
 	<!--
 		Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
@@ -218,17 +212,41 @@ templ CorporateLayout(title string, css templ.Component, js templ.Component, dat
 						</div>
 						<!--end::Brand-->
 						<!--begin::Aside Menu-->
-						@navbar.NavbarMenu(datamenu)
+						@navbarmenu
 						<!--end::Aside Menu-->
 					</div>
 					<!--end::Aside-->
 					<!--begin::Wrapper-->
 					<div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
 						<!--begin::Header-->
-						@navbar.Navbar(dataUser)
+						@navbaruser
 						<!--end::Header-->
 						<!--begin::Content-->
 						<div class="container-fluid">
+							// toast
+							<div class="toast-top-right" id="container-system-notification" style="position: absolute; top: 1vh; right: 0vw; z-index: 999;">
+								<!-- toast success -->
+								<div
+									id="notification-001"
+									class="toast fade hide"
+									role="alert"
+									aria-live="assertive"
+									aria-atomic="true"
+								>
+									<div class="toast-header bg-success text-white">
+										<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
+										<strong class="mr-auto">Success</strong>
+										<small class="text-muted text-white">just now</small>
+										<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+											<span aria-hidden="true">×</span>
+										</button>
+									</div>
+									<div class="toast-body bg-success-transparent">
+										This is a success toast.
+									</div>
+								</div>
+							</div>
+							// end toast
 							{ children... }
 						</div>
 						<!--end::Content-->
@@ -238,7 +256,7 @@ templ CorporateLayout(title string, css templ.Component, js templ.Component, dat
 				<!--end::Page-->
 			</div>
 			<!--end::Navbar Laptop With Sidebar-->
-			@sidebaruserprofile.Navbaruserprofile(dataUser)
+			@sidebaruserprofile
 			<!--begin::Global Config(global config for global JS scripts)-->
 			<script src="asset-corporate-portal/js/ktappsetting.js"></script>
 			<!--end::Global Config-->
@@ -248,6 +266,8 @@ templ CorporateLayout(title string, css templ.Component, js templ.Component, dat
 			<script src="assets/js/scripts.bundle.js"></script>
 			<!--end::Global Theme Bundle-->
 			<script src="assets/js/iconify/iconify.min.js"></script>
+			// bootstrap datepicker
+			<script src="assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script>
 			@js
 			<!--end::Page Scripts-->
 		</body>
--- a/layout/layout_corporate_templ.go
+++ b/layout/layout_corporate_templ.go
@@ -10,15 +10,9 @@ import "context"
 import "io"
 import "bytes"

-import (
-	"cpone/component/navbar"
-	"cpone/component/sidebar_user_profile"
-	"cpone/models"
-	services "cpone/services/dev"
-)
-
 // LAYOUT PLAYGROUND
-func CorporateLayout(title string, css templ.Component, js templ.Component, datamenu []services.MasterMenu, dataUser models.User) templ.Component {
+func CorporateLayout(title string, css templ.Component, js templ.Component, navbarmenu templ.Component,
+	navbaruser templ.Component, sidebaruserprofile 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 {
@@ -38,7 +32,7 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, data
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `layout\layout_corporate.templ`, Line: 30, Col: 34}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `layout\layout_corporate.templ`, Line: 24, Col: 34}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -56,7 +50,7 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, data
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = navbar.NavbarMenu(datamenu).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = navbarmenu.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -64,11 +58,11 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, data
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = navbar.Navbar(dataUser).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = navbaruser.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Header--><!--begin::Content--><div class=\"container-fluid\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Header--><!--begin::Content--><div class=\"container-fluid\"><div class=\"toast-top-right\" id=\"container-system-notification\" style=\"position: absolute; top: 1vh; right: 0vw; z-index: 999;\"><!-- toast success --><div id=\"notification-001\" class=\"toast fade hide\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"toast-header bg-success text-white\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--ep mr-2 icon-xl\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 1024 1024\" data-icon=\"ep:success-filled\"><path fill=\"currentColor\" d=\"M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z\"></path></svg> <strong class=\"mr-auto\">Success</strong> <small class=\"text-muted text-white\">just now</small> <button type=\"button\" class=\"ml-2 mb-1 close\" data-dismiss=\"toast\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button></div><div class=\"toast-body bg-success-transparent\">This is a success toast.\r</div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -80,11 +74,11 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, data
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = sidebaruserprofile.Navbaruserprofile(dataUser).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = sidebaruserprofile.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--begin::Global Config(global config for global JS scripts)--><script src=\"asset-corporate-portal/js/ktappsetting.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--begin::Global Config(global config for global JS scripts)--><script src=\"asset-corporate-portal/js/ktappsetting.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script><script src=\"assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js\"></script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/models/CustomTextField.models.go
+++ b/models/CustomTextField.models.go
@@ -11,4 +11,6 @@ type CustomTextFieldv2Prm struct {
 	Placeholder string `default:"Placeholder"`
 	Type        string `default:"text"`
 	Value       string `default:""`
+	ErrorMsg    string `default:""`
+	ID          string
 }
--- a/models/autocomplete.models.go
+++ b/models/autocomplete.models.go
@@ -0,0 +1,5 @@
+package models
+
+type AutoComplete struct {
+	Name string `json:"name"`
+}
--- a/models/bahan.models.go
+++ b/models/bahan.models.go
@@ -0,0 +1,38 @@
+package models
+
+import "github.com/a-h/templ"
+
+type Bahan struct {
+	T_BahanID                int    `db:"T_BahanID"`
+	T_BahanT_SampleStationID int    `db:"T_BahanT_SampleStationID"`
+	T_SampleStationID        int    `db:"T_SampleStationID"`
+	T_SampleStationName      string `db:"T_SampleStationName"`
+	T_BahanCode              string `db:"T_BahanCode"`
+	T_BahanName              string `db:"T_BahanName"`
+	T_BahanLangName          string `db:"T_BahanLangName"`
+	T_BahanIsActive          string `db:"T_BahanIsActive"`
+	T_BahanCreated           string `db:"T_BahanCreated"`
+	T_BahanCreatedUserID     string `db:"T_BahanCreatedUserID"`
+	T_BahanLastUpdated       string `db:"T_BahanLastUpdated"`
+	T_BahanLastUpdatedUserID string `db:"T_BahanLastUpdatedUserID"`
+	T_BahanDeleted           string `db:"T_BahanDeleted"`
+	T_BahanDeletedUserID     string `db:"T_BahanDeletedUserID"`
+}
+
+type TmpSampleStation struct {
+	T_SampleStationID   int    `db:"T_SampleStationID"`
+	T_SampleStationName string `db:"T_SampleStationName"`
+}
+
+type BahanFormComponent struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}
--- a/models/breadcrumbmaster.models.go
+++ b/models/breadcrumbmaster.models.go
@@ -0,0 +1,11 @@
+package models
+
+type ItemBreadCrumbV1 struct {
+	Item string `db:"Item"`
+	Url  string `db:"Url"`
+}
+
+type BreadCrumbV1 struct {
+	Title string             `db:"Title"`
+	Item  []ItemBreadCrumbV1 `db:"ListBreadCrumbV1"`
+}
--- a/models/customcheckbox.models.go
+++ b/models/customcheckbox.models.go
@@ -0,0 +1,18 @@
+package models
+
+// name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string,
+
+type CustomCheckboxv1Prm struct {
+	HxTarget    string `default:"hxTarget"`
+	HxGet       string `default:"hxGet"`
+	HxIndicator string `default:"hxIndicator"`
+	HxInclude   string `default:"hxInclude"`
+	HxTrigger   string `default:"hxTrigger"`
+	Label       string `default:"Label"`
+	Name        string `default:"name"`
+	Text        string `default:"text"`
+	// Type        string `default:"text"`
+	Value    string `default:""`
+	ErrorMsg string `default:""`
+	ID       string
+}
--- a/models/customdropdown.models.go
+++ b/models/customdropdown.models.go
@@ -0,0 +1,36 @@
+package models
+
+import "github.com/a-h/templ"
+
+// name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string,
+
+type CustomDropdownv1Prm struct {
+	HxTarget    string `default:"hxTarget"`
+	HxGet       string `default:"hxGet"`
+	HxIndicator string `default:"hxIndicator"`
+	HxInclude   string `default:"hxInclude"`
+	HxTrigger   string `default:"hxTrigger"`
+	Label       string `default:"Label"`
+	Name        string `default:"name"`
+	// Placeholder string `default:"Placeholder"`
+	// Type        string `default:"text"`
+	// Value       string `default:""`
+	ErrorMsg string `default:""`
+	ID       string
+}
+type CustomDropdownV2Prm struct {
+	HxTarget    string `default:"hxTarget"`
+	HxGet       string `default:"hxGet"`
+	HxIndicator string `default:"hxIndicator"`
+	HxInclude   string `default:"hxInclude"`
+	HxTrigger   string `default:"hxTrigger"`
+	HxSwap      string `default:"HxSwap"`
+	Label       string `default:"Label"`
+	Name        string `default:"name"`
+	Placeholder string `default:"Placeholder"`
+	// Type        string `default:"text"`
+	// Value       string `default:""`
+	ErrorMsg string `default:""`
+	ID       string
+	ListItem templ.Component
+}
--- a/models/groupresult.models.go
+++ b/models/groupresult.models.go
@@ -0,0 +1,38 @@
+package models
+
+import "github.com/a-h/templ"
+
+type GroupResultResumeMcu struct {
+	Text string `default:"text"`
+	ID   int    `default:"id"`
+}
+
+type GroupResult struct {
+	Nomor                   string `db:"nomor"`
+	Group_ResultID          int    `db:"Group_ResultID"`
+	Group_ResultName        string `db:"Group_ResultName"`
+	Group_ResultFlagPerTest string `db:"Group_ResultFlagPerTest"`
+	Group_ResultFlagNonLab  string `db:"Group_ResultFlagNonLab"`
+	Group_ResultResumeMcu   string `db:"Group_ResultResumeMcu"`
+	Group_ResultIsActive    string `db:"Group_ResultIsActive"`
+}
+
+// form component
+type GroupResultFormComponent struct {
+	IDComponent                    string
+	Link                           string
+	HxTarget                       string
+	HxSwap                         string
+	HxInclude                      string
+	ModalID                        string
+	ModalTitle                     string
+	InputGroupResultName           CustomTextFieldv2Prm
+	InputGroupResult               CustomTextFieldv2Prm
+	CheckboxGroupResultFlagPerTest CustomCheckboxv1Prm
+	CheckboxGroupResultFlagNonLab  CustomCheckboxv1Prm
+	InputID                        CustomTextFieldv2Prm
+	DropdownGroupResultResumeMcu   CustomDropdownv1Prm
+	DialogBody                     templ.Component
+	DialogAction                   templ.Component
+	ButtonCLose                    templ.Component
+}
--- a/models/kartukontrol.models.go
+++ b/models/kartukontrol.models.go
@@ -0,0 +1,33 @@
+package models
+
+type KartuKontrolModel struct {
+	KartuKontrolDataPasienList                   []DataPasien                       `json:"kartuKontrolDataPasien"`
+	KartuKontrolDataPemeriksaanList              []DataPemeriksaanList              `json:"kartuKontrolDataPemeriksaanList"`
+	KartuKontrolDataPemeriksaanPengambilanSample []DataPemeriksaanPengambilanSample `json:"kartuKontrolDataPemeriksaanPengambilanSample"`
+}
+
+type DataPasien struct {
+	NomorRegistrasi string `json:"nomorRegistrasi"`
+	NomorLab        string `json:"nomorLab"`
+	NamaPasien      string `json:"namaPasien"`
+	TanggalLahir    string `json:"tanggalLahir"`
+	Umur            string `json:"umur"`
+	JenisKelamin    string `json:"jenisKelamin"`
+	NamaDivisi      string `json:"namaDivisi"`
+	NamaCompany     string `json:"namaCompany"`
+}
+
+type DataPemeriksaanList struct {
+	NamaPemeriksaanList string `json:"namaPemeriksaanList"`
+}
+
+type SampleTypeList struct {
+	SampleTypeName     string `json:"sampleTypeName"`
+	SampleTypeDateTime string `json:"sampleTypeDateTime"`
+	SampleTypeStatus   string `json:"sampleTypeStatus"`
+}
+
+type DataPemeriksaanPengambilanSample struct {
+	NamaPemeriksaanPengambilanSample string           `json:"namaPemeriksaanPengambilanSample"`
+	SampleTypeListData               []SampleTypeList `json:"sampleTypeListData"`
+}
--- a/models/menu.models.go
+++ b/models/menu.models.go
@@ -0,0 +1,17 @@
+package models
+
+type Menu struct {
+	ID             string         `json:"id"`
+	ParentMenuID   string         `json:"parent_menu_id"`
+	ParentMenuName string         `json:"parent_menu_name"`
+	ParentUrl      string         `json:"parent_url"`
+	ParentIcon     string         `json:"parent_icon"`
+	Children       []ChildrenMenu `json:"children"`
+}
+type ChildrenMenu struct {
+	ChildrenParentID string `json:"children_parent_id"`
+	ChildrenMenuID   string `json:"children_menu_id"`
+	ChildrenMenuName string `json:"children_menu_name"`
+	ChildrenMenuURL  string `json:"children_menu_url"`
+	// Breadcrumb       []Breadcrumb `json:"breadcrumb"`
+}
--- a/models/natunit.models.go
+++ b/models/natunit.models.go
@@ -0,0 +1,29 @@
+package models
+
+import "github.com/a-h/templ"
+
+type NatUnit struct {
+	Nomor               string `db:"nomor"`
+	Nat_UnitID          int    `db:"Nat_UnitID"`
+	Nat_UnitCode        string `db:"Nat_UnitCode"`
+	Nat_UnitName        string `db:"Nat_UnitName"`
+	Nat_UnitCreated     string `db:"Nat_UnitCreated"`
+	Nat_UnitLastUpdated string `db:"Nat_UnitLastUpdated"`
+	Nat_UnitIsActive    string `db:"Nat_UnitIsActive"`
+}
+
+type NatUnitFormComponent struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	InputName    CustomTextFieldv2Prm
+	InputCode    CustomTextFieldv2Prm
+	InputID      CustomTextFieldv2Prm
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}
--- a/models/surveymcu.models.go
+++ b/models/surveymcu.models.go
@@ -0,0 +1,24 @@
+package models
+
+type SurveyMcu struct {
+	DataListItemSurveyMcu      []ItemSurveyMcu      `json:"dataListItemSurveyMcu"`
+	DataListItemSurveyMcuSaran []ItemSurveyMcuSaran `json:"datalistitemsurveymcusaran"`
+}
+
+type ItemSurveyMcu struct {
+	IDItemSurvey    string `json:"iditemsurvey"`
+	Nomor           string `json:"nomor"`
+	Pertanyaan      string `json:"pertanyaan"`
+	NameRadioButton string `json:"nameradiobutton"`
+	ErrorMessage    string `json:"errorMessage"`
+}
+
+type ItemSurveyMcuSaran struct {
+	IDItemSurveyMcuSaran       string `json:"iditemsurveymcusaran"`
+	NameSurveyMcuSaran         string `json:"namesurveymcusaran"`
+	ErrorMessageSurveyMcuSaran string `json:"errormessagesurveymcusaran"`
+}
+
+type IdClearErrorMessage struct {
+	IdItem string `json:"iditem"`
+}
--- a/models/usergroup.models.go
+++ b/models/usergroup.models.go
@@ -1,7 +1,51 @@
 package models

+import "github.com/a-h/templ"
+
 type UserGroup struct {
 	UserGroupID   int    `json:"user_group_id"`
 	UserGroupKode string `json:"user_group_kode"`
 	UserGroupName string `json:"user_group_name"`
 }
+
+type UserGroupV1 struct {
+	Nomor                        string `db:"nomor"`
+	M_UserGroupID                int    `db:"M_UserGroupID"`
+	M_UserGroupCode              string `db:"M_UserGroupCode"`
+	M_UserGroupName              string `db:"M_UserGroupName"`
+	M_UserGroupCreated           string `db:"M_UserGroupCreated"`
+	M_UserGroupLastUpdated       string `db:"M_UserGroupLastUpdated"`
+	M_UserGroupIsActive          string `db:"M_UserGroupIsActive"`
+	M_UserGroupCreatedUserID     string `db:"M_UserGroupCreatedUserID"`
+	M_UserGroupLastUpdatedUserID string `db:"M_UserGroupLastUpdatedUserID"`
+	M_UserGroupDeleted           string `db:"M_UserGroupDeleted"`
+	M_UserGroupDeletedUserID     string `db:"M_UserGroupDeletedUserID"`
+}
+
+type UserGroupFormComponent struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	InputName    CustomTextFieldv2Prm
+	InputCode    CustomTextFieldv2Prm
+	InputID      CustomTextFieldv2Prm
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}
+type UserGroupFormConfirmation struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}
--- a/models/xtempl.models.go
+++ b/models/xtempl.models.go
@@ -0,0 +1,6 @@
+package models
+
+type XtemplModel struct {
+	NameTempl  string `json:"nametempl"`
+	HtmlString string `json:"htmlString"`
+}
--- a/package/config/config.go
+++ b/package/config/config.go
@@ -0,0 +1,53 @@
+package config
+
+import (
+	"log"
+
+	"github.com/fsnotify/fsnotify"
+	"github.com/spf13/viper"
+	"go.uber.org/zap"
+)
+
+type Reader interface {
+	Get(key string) string
+}
+
+type viperConfigReader struct {
+	viper *viper.Viper
+}
+
+var Data *viperConfigReader
+
+func (v viperConfigReader) Get(key string) string {
+	return v.viper.GetString(key)
+}
+
+func (v viperConfigReader) GetInt(key string) int {
+	return v.viper.GetInt(key)
+}
+
+func Load() {
+	v := viper.New()
+	v.AddConfigPath(".")
+	v.SetConfigName("config")
+	v.SetConfigType("yaml")
+	v.AutomaticEnv()
+
+	err := v.ReadInConfig()
+	if err != nil {
+		return
+	}
+	Data = &viperConfigReader{
+		viper: v,
+	}
+	v.WatchConfig()
+	v.OnConfigChange(func(e fsnotify.Event) {
+		log.Println("config file changed", e.Name)
+		logger, _ := zap.NewProduction()
+		defer logger.Sync()
+		logger.Info("Config file change",
+			zap.String("name", e.Name),
+		)
+	})
+	return
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sas Andy	4739ae33c7	Merge branch 'andy/mdbahan' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/mdbahan	2024-05-29 11:14:24 +07:00
Sas Andy	23f8fd513d	md bahan	2024-05-29 11:08:36 +07:00
Sas Andy	e227d59a39	custom dowpdown & revisi customtextfiels	2024-05-29 11:08:35 +07:00
Sas Andy	2e5fc8fd87	md bahan listing search pagination	2024-05-29 11:07:49 +07:00
Sas Andy	1a3251163a	md bahan	2024-05-29 11:04:41 +07:00
Sas Andy	ba6ac081e1	custom dowpdown & revisi customtextfiels	2024-05-29 11:04:31 +07:00
sindhu	1b97c6c788	add slicing doctor.html	2024-05-29 08:17:17 +07:00
sindhu	348c0c1252	add picture person for form doctor	2024-05-28 14:54:40 +07:00
sindhu	8bf75e9ef1	add bootstrap date picker in layout corporate	2024-05-28 14:48:58 +07:00
sindhu	4791aceaa5	fix color bootstrap selectpicker in mdgroupresult	2024-05-28 14:30:58 +07:00
sindhu	b04e3e8e44	custom radio button inline and getTerminology in appservice	2024-05-28 10:14:41 +07:00
sindhu	b14c89dc34	add function GetTerminology	2024-05-28 09:14:01 +07:00
sindhu	219600fc7f	add groupresult into dev folder	2024-05-27 18:07:59 +07:00
Hanan Askarim	3b2086b253	Merge branch 'hanan/masterdata-natunit'	2024-05-27 17:02:11 +07:00
Hanan Askarim	b68a2ed2ec	add feature delete	2024-05-27 16:44:06 +07:00
Hanan Askarim	a3005c3b6a	add feature edit	2024-05-27 14:58:10 +07:00
Hanan Askarim	04460bac00	add feature tambah data	2024-05-27 11:27:07 +07:00
Sas Andy	0053be36f7	Merge branch 'andy/mdbahan' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/mdbahan	2024-05-27 11:21:11 +07:00
Sas Andy	af29e820d9	md bahan listing search pagination	2024-05-27 11:13:02 +07:00
Sas Andy	03d34b80e7	md bahan listing search pagination	2024-05-27 11:11:39 +07:00
sindhu	4c3361fe74	Merge branch 'groupresultv1'	2024-05-27 11:07:55 +07:00
Hanan Askarim	5b2c63a4d4	add loading search dan pagination	2024-05-27 09:58:55 +07:00
Hanan Askarim	f6ac4944e8	master unit listing	2024-05-27 09:36:42 +07:00
Sas Andy	4ea514c3f0	Merge branch 'andy/usergroupfix'	2024-05-27 09:10:19 +07:00
Sas Andy	398ee17727	revisi bug	2024-05-27 09:06:00 +07:00
sindhu	6c7986c676	step 7 : add error msg in add and edit	2024-05-27 08:04:39 +07:00
Sas Andy	94fea169d1	loading	2024-05-25 20:10:25 +07:00
Sas Andy	af1c16f8f9	up versi	2024-05-25 20:10:12 +07:00
sindhu	67b9f36d29	step 6 : fix bug after sukses edit then open delete dialog	2024-05-25 19:36:49 +07:00
sindhu	0490d17d2a	step 5 : fix bug after sukses delete then open form edit	2024-05-25 19:08:10 +07:00
sindhu	cd0d3aee08	step 4 : delete group result	2024-05-25 18:32:07 +07:00
sindhu	eaabf29fda	step 3 : edit data group result	2024-05-25 17:49:24 +07:00
sindhu	d13384ab64	step 2 : add data group result with form validation	2024-05-25 13:29:52 +07:00
sindhu	9cc14fd92c	step 1 : listing, search and pagination group result	2024-05-24 22:48:03 +07:00
Sas Andy	10c1d3c5dd	revisi toast top right based screen view	2024-05-24 13:51:36 +07:00
Sas Andy	b3ef572180	route	2024-05-24 10:31:48 +07:00
Sas Andy	9f2ac20180	handler delete user group	2024-05-24 10:31:37 +07:00
Sas Andy	922f8492c3	view delete user group	2024-05-24 10:31:15 +07:00
sindhu	d8278b6886	add kartu kontrol and survey mcu into public	2024-05-22 16:39:41 +07:00
Sas Andy	caa6dba306	revisi open dialog edit & edit user group	2024-05-22 15:37:37 +07:00
Sas Andy	4c12c45aa8	open and close edit form	2024-05-22 14:00:17 +07:00
Sas Andy	fd3609f82f	add user group	2024-05-22 11:02:58 +07:00
Sas Andy	e6afeb74b8	searching & pagination	2024-05-22 08:40:54 +07:00
Sas Andy	b1dc143e83	table listing	2024-05-21 16:51:57 +07:00
Sas Andy	e1f76430fc	init handler & empty view	2024-05-21 16:20:41 +07:00
Sas Andy	edef960ae5	user group services	2024-05-21 15:37:05 +07:00
Sas Andy	4f1a9adb53	Add, edit, & delete user group	2024-05-21 15:21:15 +07:00
Sas Andy	1e336517f5	rev pagination component	2024-05-21 11:17:47 +07:00
sindhu	37f07715ff	view multi templ component	2024-05-17 13:30:02 +07:00
sindhu	ee42ee0a82	toast v1 dev dan public	2024-05-17 11:25:12 +07:00
Sas Andy	c66e8f5720	refractor user group	2024-05-17 10:50:58 +07:00
Sas Andy	9ab0c7b6f4	revisi html toast	2024-05-16 09:03:55 +07:00
kaeltorus	7e2c6b5b2e	Merge branch 'mike'	2024-05-16 08:26:04 +07:00
kaeltorus	d69e830667	WIP: `74856a9` revisi & dev routes	2024-05-16 08:23:25 +07:00
sindhu	ab45e62fb1	table search swap	2024-05-15 15:27:46 +07:00
Sas Andy	4aaf602b21	coba form	2024-05-15 13:54:26 +07:00
sindhu	d9ba1f3ce3	user grup listing, search, pagination	2024-05-15 13:18:23 +07:00
Sas Andy	64ac3a5b7b	be add edit delete user group	2024-05-14 15:34:40 +07:00
sindhu	5dce26caeb	tabel user grup dan inputan search	2024-05-14 15:28:40 +07:00
sindhu	f6d04cdd62	refactor layout corporate, master user group	2024-05-14 14:51:59 +07:00
sindhu	52d628a830	remove comment	2024-05-14 09:50:02 +07:00
Sas Andy	af7a3066c1	revisi handlers user group	2024-05-14 09:46:06 +07:00
Sas Andy	d009c1dd38	Merge branch 'andy/table'	2024-05-14 09:45:46 +07:00
sindhu	2be7708075	model usergrup v1	2024-05-14 09:41:39 +07:00
sindhu	c4e61cb49f	Merge branch 'main' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo	2024-05-14 09:34:41 +07:00
sindhu	9d60d9872c	sqlx jmoiron	2024-05-14 09:34:34 +07:00
Sas Andy	0af34a2e33	coba pagination	2024-05-14 09:01:27 +07:00
sindhu	a99342edc7	autocomplete refactor	2024-05-14 08:57:03 +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
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