add delete & pilih detail + bug target item row di modal

add insert data nonlab template
bug target id missing
2024-06-07 08:23:31 +07:00 · 2024-06-05 15:14:59 +07:00 · 2024-06-04 17:44:43 +07:00 · 2024-06-04 15:16:57 +07:00 · 2024-06-04 14:25:19 +07:00 · 2024-06-04 13:43:49 +07:00
371 changed files with 60946 additions and 880 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/andy/usergroup.html
+++ b/assets/andy/usergroup.html
@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<!--
+		Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
+		Author: KeenThemes
+		Website: http://www.keenthemes.com/
+		Contact: support@keenthemes.com
+		Follow: www.twitter.com/keenthemes
+		Dribbble: www.dribbble.com/keenthemes
+		Like: www.facebook.com/keenthemes
+		Purchase: https://1.envato.market/EA4JP
+		Renew Support: https://1.envato.market/EA4JP
+		License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+		-->
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <base href="../" />
+    <meta charset="utf-8" />
+    <title>Company Portal | { title }</title>
+    <meta name="description" content="Company Portal" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <!--begin::Fonts-->
+    <link rel="stylesheet" href="assets/css/googlefont/poppins.css" />
+    <!--end::Fonts-->
+    <!--begin::Page Custom Styles(used by this page)-->
+    <link
+      href="assets/css/pages/login/login-1.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Page Custom Styles-->
+    <!--begin::Global Theme Styles(used by all pages)-->
+    <link
+      href="assets/plugins/global/plugins.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/plugins/custom/prismjs/prismjs.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
+    <!--end::Global Theme Styles-->
+    <!--begin::Layout Themes(used by all pages)-->
+    <link
+      href="assets/css/themes/layout/header/base/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/header/menu/light.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/brand/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="assets/css/themes/layout/aside/dark.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--end::Layout Themes-->
+    <link
+      rel="shortcut icon"
+      href="asset-corporate-portal/media/logo/logo-small.jpg"
+    />
+    <!--end::Layout Themes SAS-->
+    <link
+      href="asset-corporate-portal/css/sas.bundle.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body
+    id="kt_body"
+    class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
+  >
+    <!--begin::Main-->
+    <div class="p-10 bg-white">
+      <table class="table table-hover table-borderless">
+        <thead>
+          <tr class="rounded-lg bg-header-table">
+            <th scope="col" width="20%">KODE</th>
+            <th scope="col" width="25%">USERGROUP</th>
+            <th scope="col" width="10%">AKSI</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>001</td>
+            <td>Admin</td>
+            <td>
+              <div class="row px-5 d-flex justify-content-around">
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                >
+                  Hapus
+                </button>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>002</td>
+            <td>Tes</td>
+            <td>
+              <div class="row px-5 d-flex justify-content-around">
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                  data-toggle="modal"
+                  data-target="#exampleModal"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                  data-toggle="modal"
+                  data-target="#exampleModal2"
+                >
+                  Hapus
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div></div>
+    <!-- Button trigger modal -->
+    <button
+      type="button"
+      class="btn btn-primary"
+      data-toggle="modal"
+      data-target="#exampleModal"
+    >
+      Launch demo modal
+    </button>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      aria-labelledby="exampleModalLabel"
+      data-backdrop="static"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-lg">
+          <div class="modal-header border-bottom-0">
+            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body border-bottom-0">
+            <p>Apakah anda yakin menghapus user group berikut ?</p>
+            <div class="card rounded-lg">
+              <div class="card-body d-flex flex-row">
+                <div class="d-flex flex-column flex-fill">
+                  <div class="mb-3 text-disabled font-weight-bold">asas</div>
+                  <div class="mb-3 text-disabled">b</div>
+                </div>
+                <div class="d-flex flex-column flex-fill">
+                  <div class="mb-3 font-weight-bold">
+                    d daf;k sa;d sa;ldk s;adj;sads[oai sadksa[ d[
+                  </div>
+                  <div class="mb-3">c</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer border-top-0">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="modal fade modal-list-print"
+      id="exampleModalSizeLg"
+      tabindex="-1"
+      role="dialog"
+      data-backdrop="static"
+      aria-labelledby="exampleModalSizeLg"
+      aria-hidden="true"
+    ></div>
+    <!-- Modal-->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      role="dialog"
+      data-backdrop="static"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog" role="document">
+        <div class="modal-content rounded-lg">
+          <div class="modal-header border-bottom-0">
+            <h6 class="modal-title text-black" id="exampleModalLabel">
+              Modal Title dsf
+            </h6>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <i aria-hidden="true" class="ki ki-close"></i>
+            </button>
+          </div>
+          <div class="modal-body border-bottom-0">
+            ...
+          </div>
+          <div class="modal-footer border-top-0">
+            <button
+              type="button"
+              class="btn btn-outline-secondary font-weight-bold rounded-lg"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button
+              type="button"
+              class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+            >
+              Save changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="modal fade"
+      id="exampleModal2"
+      tabindex="-1"
+      role="dialog"
+      data-backdrop="static"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog" role="document">
+        <div class="modal-content rounded-lg bg-danger">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <i aria-hidden="true" class="ki ki-close"></i>
+            </button>
+          </div>
+          <div class="modal-body">
+            ...
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-light-primary font-weight-bold"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button type="button" class="btn btn-primary font-weight-bold">
+              Save changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--end::Main-->
+    <script src="asset-corporate-portal/js/ktappsetting.js"></script>
+    <!-- iconify -->
+    <script src="assets/js/iconify/iconify.min.js"></script>
+    <!--end::Global Config-->
+    <!--begin::Global Theme Bundle(used by all pages)-->
+    <script src="assets/plugins/global/plugins.bundle.js"></script>
+    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+    <script src="assets/js/scripts.bundle.js"></script>
+    <script>
+      function ShowLoading() {
+        document
+          .getElementById("demo")
+          .setAttribute("style", "display:block !important;");
+        document
+          .getElementById("a")
+          .setAttribute("style", "display:none !important;");
+      }
+      function ShowForm() {
+        document
+          .getElementById("demo")
+          .setAttribute("style", "display:none !important;");
+        document
+          .getElementById("a")
+          .setAttribute("style", "display:block !important;;");
+      }
+    </script>
+    <!--end::Global Theme Bundle-->
+
+    <!--end::Page Scripts-->
+  </body>
+  <!--end::Body-->
+</html>
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
--- a/assets/asset-corporate-portal/js/ktappsetting.js
+++ b/assets/asset-corporate-portal/js/ktappsetting.js
@@ -0,0 +1,58 @@
+var KTAppSettings = {
+    breakpoints: {
+        sm: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+        xxl: 1400,
+    },
+    colors: {
+        theme: {
+            base: {
+                white: "#ffffff",
+                primary: "#3699FF",
+                secondary: "#E5EAEE",
+                success: "#1BC5BD",
+                info: "#8950FC",
+                warning: "#FFA800",
+                danger: "#F64E60",
+                light: "#E4E6EF",
+                dark: "#181C32",
+            },
+            light: {
+                white: "#ffffff",
+                primary: "#E1F0FF",
+                secondary: "#EBEDF3",
+                success: "#C9F7F5",
+                info: "#EEE5FF",
+                warning: "#FFF4DE",
+                danger: "#FFE2E5",
+                light: "#F3F6F9",
+                dark: "#D6D6E0",
+            },
+            inverse: {
+                white: "#ffffff",
+                primary: "#ffffff",
+                secondary: "#3F4254",
+                success: "#ffffff",
+                info: "#ffffff",
+                warning: "#ffffff",
+                danger: "#ffffff",
+                light: "#464E5F",
+                dark: "#ffffff",
+            },
+        },
+        gray: {
+            "gray-100": "#F3F6F9",
+            "gray-200": "#EBEDF3",
+            "gray-300": "#E4E6EF",
+            "gray-400": "#D1D3E0",
+            "gray-500": "#B5B5C3",
+            "gray-600": "#7E8299",
+            "gray-700": "#5E6278",
+            "gray-800": "#3F4254",
+            "gray-900": "#181C32",
+        },
+    },
+    "font-family": "Poppins",
+};
--- a/assets/asset-corporate-portal/media/person/person.png
+++ b/assets/asset-corporate-portal/media/person/person.png
--- a/assets/assets/css/googlefont/poppins.css
+++ b/assets/assets/css/googlefont/poppins.css
@@ -0,0 +1,80 @@
+/* latin-ext */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
--- a/assets/assets/css/googlefont/publicsans.css
+++ b/assets/assets/css/googlefont/publicsans.css
@@ -0,0 +1,120 @@
+/* vietnamese */
+@font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Public Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
--- a/assets/assets/css/googlefont/roboto.css
+++ b/assets/assets/css/googlefont/roboto.css
@@ -0,0 +1,224 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
--- a/assets/assets/css/slick/slick-theme.css
+++ b/assets/assets/css/slick/slick-theme.css
@@ -0,0 +1,2 @@
+@charset 'UTF-8';.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}.slick-next:before{content:'→'}[dir=rtl] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-family:slick;font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000}
+/*# sourceMappingURL=slick-theme.min.css.map */
--- a/assets/assets/css/slick/slick.css
+++ b/assets/assets/css/slick/slick.css
@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}
--- a/assets/assets/js/htmx/htmx.min.js
+++ b/assets/assets/js/htmx/htmx.min.js
--- a/assets/assets/js/iconify/iconify.min.js
+++ b/assets/assets/js/iconify/iconify.min.js
--- a/assets/assets/js/slick/slick.min.js
+++ b/assets/assets/js/slick/slick.min.js
--- a/assets/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/assets/mcu/patient.html
+++ b/assets/mcu/patient.html
@@ -0,0 +1,631 @@
+<!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;
+      }
+
+      /* mik */
+      .input-container {
+        position: relative;
+      }
+
+      .input-label {
+        position: absolute;
+        right: 20px;
+        transform: translateY(-50%);
+        pointer-events: none;
+        transition: all 0.2s ease;
+      }
+      .input-field:not(:placeholder-shown) + .input-label {
+        top: 50%;
+        font-size: 12px;
+        color: var(--secondary-hover);
+      }
+    </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"
+  >
+    <style></style>
+    <!--begin::Main-->
+
+    <div class="wrapperx p-5 h-100">
+      <div class="row">
+        <div class="col-lg-10">
+          <!--begin::Row 1-->
+          <div class="form-row">
+            <div class="col-md-6 col-lg-2">
+              <label
+                for="input1"
+                class="font-weight-bolder"
+                style="font-family: Poppins"
+                >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="mr">Tn</option>
+                <option value="mrs">Ny</option>
+                <option value="ms">Nn</option>
+              </select>
+            </div>
+            <div class="col-md-6 col-lg-3">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Imbuhan Awal</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-md-6 col-lg-5">
+              <label for="input1" 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="Imbuhan Awal 2"
+              />
+            </div>
+            <div class="col-md-6 col-lg-2">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Imbuhan Akhir</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>
+          <!--end::Row 1-->
+          <!--begin::Row 2-->
+          <div class="row mt-5">
+            <div class="col-md-6">
+              <!-- begin::Jenis Kelamin -->
+              <div class="form-row">
+                <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">Perempuan</option>
+                  <option value="mrs">Laki-Laki</option>
+                </select>
+              </div>
+              <!-- end::Jenis Kelamin -->
+            </div>
+            <div class="col-md-6">
+              <!-- begin::Tanggal Lahir -->
+              <div class="form-row">
+                <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>
+              <!-- end::Tanggal Lahir -->
+            </div>
+          </div>
+          <!--end::Row 2-->
+          <!--begin::Row 3-->
+          <div class="row mt-5">
+            <div class="col-lg-6">
+              <!-- begin::Umur -->
+              <div class="form-row">
+                <div class="col">
+                  <label
+                    for="input1"
+                    style="font-family: Poppins; font-weight: 600"
+                    >Umur</label
+                  >
+                  <div class="input-container">
+                    <input
+                      type="text"
+                      id="myInput"
+                      class="input-field form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                    />
+                    <label for="myInput" class="input-label">Tahun</label>
+                  </div>
+                </div>
+                <div class="col mt-8">
+                  <div class="input-container">
+                    <input
+                      type="text"
+                      id="myInput"
+                      class="input-field form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                    />
+                    <label for="myInput" class="input-label">Bulan</label>
+                  </div>
+                </div>
+                <div class="col mt-8">
+                  <div class="input-container">
+                    <input
+                      type="text"
+                      id="myInput"
+                      class="input-field form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                    />
+                    <label for="myInput" class="input-label">Hari</label>
+                  </div>
+                </div>
+              </div>
+              <!-- end::Umur -->
+            </div>
+            <div class="col-lg-6">
+              <!-- begin::Darah -->
+              <div class="form-row">
+                <!-- begin::Golongan Darah -->
+                <div class="col">
+                  <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="">O</option>
+                    <option value="">A</option>
+                    <option value="">B</option>
+                    <option value="">AB</option>
+                  </select>
+                </div>
+                <!-- end::Golongan Darah -->
+                <!-- begin::Rhesus -->
+                <div class="col">
+                  <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="">-</option>
+                    <option value="">+</option>
+                  </select>
+                </div>
+                <!-- end::Rhesus -->
+              </div>
+              <!-- end::Darah -->
+            </div>
+          </div>
+          <!--end::Row 3-->
+          <!--begin::Row 4-->
+          <div class="row mt-5">
+            <!--begin::Pekerjaan-->
+            <div class="col-md-6">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Pekerjaan</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Pekerjaan"
+              />
+            </div>
+            <!--end::Pekerjaan-->
+            <!--begin::Departemen-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <label
+                  for="input1"
+                  style="font-family: Poppins; font-weight: 600"
+                  >Departemen</label
+                >
+                <input
+                  type="text"
+                  class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                  placeholder="Departemen"
+                />
+              </div>
+            </div>
+            <!--end::Departemen-->
+          </div>
+          <!--end::Row 4-->
+          <!--begin::Row 5-->
+          <div class="row mt-5">
+            <!--begin::Posisi-->
+            <div class="col-md-6">
+              <label for="input1" style="font-family: Poppins; font-weight: 600"
+                >Posisi</label
+              >
+              <input
+                type="text"
+                class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                placeholder="Posisi"
+              />
+            </div>
+            <!--end::Posisi-->
+            <!--Begin::Pendidikan Terakhir-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <label style="font-family: Poppins; font-weight: 600"
+                  >Pendidikan Terakhir</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 Pendidikan Terakhir</option>
+                  <option value="mr">SMA/SLTA/Sederajat</option>
+                  <option value="mrs">D3</option>
+                  <option value="ms">Sarjana</option>
+                  <option value="ms">Magister</option>
+                  <option value="ms">Doktor</option>
+                </select>
+              </div>
+            </div>
+            <!--end::Pendidikan Terakhir-->
+          </div>
+          <!--end::Row 5-->
+          <!--begin::Row 6-->
+          <div class="row mt-5">
+            <!--begin::Kewarganegaraan-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <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
+                      class="justify-content-between"
+                      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>
+            </div>
+            <!--end::Kewarganegaraan-->
+            <!--Begin::Etnis-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <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="">Jawa</option>
+                  <option value="">Sunda</option>
+                  <option value="">Batak</option>
+                  <option value="">Betawi</option>
+                  <option value="">Dayak</option>
+                </select>
+              </div>
+            </div>
+            <!--end::Etnis-->
+          </div>
+          <!--end::Row 6-->
+          <!--begin::Row 7-->
+          <div class="row mt-5">
+            <!--begin::Identitas-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <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="">KTP</option>
+                    <option value="">SIM</option>
+                    <option value="">Paspor</option>
+                    <option value="">Kartu Pelajar</option>
+                    <option value="">Surat Keterangan</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <!--end::Identitas-->
+            <!--Begin::Nomor Identitas-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <div class="col">
+                  <label
+                    for="input1"
+                    style="font-family: Poppins; font-weight: 600"
+                    >Nomor Identitas</label
+                  >
+                  <input
+                    type="text"
+                    class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                    placeholder="Nomor Identitas"
+                  />
+                </div>
+              </div>
+            </div>
+            <!--end::Nomor Identitas-->
+          </div>
+          <!--end::Row 7-->
+          <!--begin::Row 8-->
+          <div class="row mt-5">
+            <!--begin::Nomor Hp-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <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>
+            </div>
+            <!--end::Nomor Hp-->
+            <!--Begin::Email-->
+            <div class="col-md-6">
+              <div class="form-row">
+                <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>
+            </div>
+            <!--end::Email-->
+          </div>
+          <!--end::Row 8-->
+        </div>
+        <div class="col-lg-2">
+          <!-- person.png start -->
+          <div class="row">
+            <div class="col">
+              <img
+                src="asset-corporate-portal/media/person/person.png"
+                style="display: block; width: 13vw"
+              />
+            </div>
+          </div>
+
+          <div class="row mt-5">
+            <div class="col">
+              <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>
+      </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/sindhu/catatan_inputan.txt
+++ b/assets/sindhu/catatan_inputan.txt
@@ -0,0 +1,5 @@
+// Example Custom Text Field
+@customtextfield.MainCustomTextField("Kode", "kode", "Kode", "text")
+
+// Example Active Search
+@customtextfieldsearch.MainCustomTextFieldSearch("pid", "PID / Nama","text","/search", "", "input changed delay:500ms, search", ".htmx-indicator")
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -1,92 +1,67 @@
 package main

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

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

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

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

 	app.HTTPErrorHandler = handlers.CustomHTTPErrorHandler

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

-	// We redirect the root route to the "/user" route
-	app.GET("/", func(c echo.Context) error {
-		return c.Redirect(http.StatusMovedPermanently, "/landing_page/")
-	})
+	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),

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

-	us := services.NewServicesUser(services.User{}, uStore)
-
-	h := handlers.New(us)
-
-	handlers.SetupRoutes(app, h)
-
-	LStore, err := db.NewLoginStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	l := services.NewServicesLogin(services.Login{}, LStore)
-	lh := handlers.NewLoginHandler(l)
-	handlers.SetupRoutesLogin(app, lh)
-
-	xStore, err := db.NewXsampleStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	xs := services.NewServicesXsample(services.Xsample{}, xStore)
-	xh := handlers.NewXsampleHandler(xs)
-	handlers.SetupRoutesXsample(app, xh)
-
-	LpStore, err := db.NewLandingPageStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	lps := services.NewServicesLandingPage(services.LandingPage{}, LpStore)
-	lphs := handlers.NewLandingPageHandler(lps)
-	handlers.SetupRoutesLandingPage(app, lphs)
-
-	LpchartStore, err := db.NewPieChartStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	bchart, err := db.NewBarChartStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-
-	lpchart := services.NewServicesPiechart(services.Piechart{}, services.Barchart{}, LpchartStore, bchart)
-	lphsx := handlers.NewPiechartHandler(lpchart)
-	handlers.SetupRoutesPieChart(app, lphsx)
-
-	eStore, err := db.NewEmployeeStore(dbName)
-	if err != nil {
-		app.Logger.Fatalf("failed to create store: %s", err)
-	}
-	el := services.NewServicesEmployee(services.Employee{}, eStore)
-	ehs := handlers.NewEmployeeHandler(el)
-	handlers.SetupRoutesEmployee(app, ehs)
-
+	// SETUP ROUT PUBLIC
+	handlers.SetupRoutesPublic(app, appStore)
+	// SETUP ROUT CORPORATE
+	handlers.SetupRoutesCorporate(app, appStore)
+	// SETUP ROUT CLIENT
+	handlers.SetupRoutesClient(app, appStore)
+	// SETUP ROUT DEV
+	handlers.SetupRoutesDev(app, appStore)
 	app.Logger.Fatal(app.Start(":5000"))
 }

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

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

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

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

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

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

 go 1.21.0

 require (
 	github.com/a-h/templ v0.2.663
-	github.com/labstack/echo/v4 v4.11.3
-	github.com/mattn/go-sqlite3 v1.14.19
+	github.com/fsnotify/fsnotify v1.7.0
+	github.com/glebarez/go-sqlite v1.22.0
+	github.com/go-sql-driver/mysql v1.8.1
+	github.com/jmoiron/sqlx v1.4.0
+	github.com/labstack/echo/v4 v4.12.0
+	github.com/spf13/viper v1.18.2
 	golang.org/x/text v0.14.0
 )

+require (
+	filippo.io/edwards25519 v1.1.0 // indirect
+	github.com/hashicorp/hcl v1.0.0 // indirect
+	github.com/magiconair/properties v1.8.7 // indirect
+	github.com/mitchellh/mapstructure v1.5.0 // indirect
+	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
+	github.com/sagikazarmark/locafero v0.4.0 // indirect
+	github.com/sagikazarmark/slog-shim v0.1.0 // indirect
+	github.com/sourcegraph/conc v0.3.0 // indirect
+	github.com/spf13/afero v1.11.0 // indirect
+	github.com/spf13/cast v1.6.0 // indirect
+	github.com/spf13/pflag v1.0.5 // indirect
+	github.com/subosito/gotenv v1.6.0 // indirect
+	go.uber.org/multierr v1.10.0 // indirect
+	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
+	gopkg.in/ini.v1 v1.67.0 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+)
+
 require (
 	github.com/dustin/go-humanize v1.0.1 // indirect
-	github.com/glebarez/go-sqlite v1.22.0 // indirect
 	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
 	github.com/google/uuid v1.5.0 // indirect
-	github.com/labstack/gommon v0.4.0 // indirect
+	github.com/labstack/gommon v0.4.2
 	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,74 +1,116 @@
-github.com/a-h/templ v0.2.476 h1:+H4hP4CwK4kfJwXsE6kHeFWMGtcVOVoOm/I64uzARBk=
-github.com/a-h/templ v0.2.476/go.mod h1:zQ95mSyadNTGHv6k5Fm+wQU8zkBMMbHCHg7eAvUZKNM=
+filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
+filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
 github.com/a-h/templ v0.2.663 h1:aa0WMm27InkYHGjimcM7us6hJ6BLhg98ZbfaiDPyjHE=
 github.com/a-h/templ v0.2.663/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-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/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
+github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/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/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
+github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
+github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
+github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
 github.com/glebarez/go-sqlite v1.22.0 h1:uAcMJhaA6r3LHMTFgP0SifzgXg46yJkgxqyuyec+ruQ=
 github.com/glebarez/go-sqlite v1.22.0/go.mod h1:PlBIdHe0+aUEFn+r2/uthrWq4FxbzugL0L8Li6yQJbc=
+github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
+github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
 github.com/golang-jwt/jwt v3.2.2+incompatible h1:IfV12K8xAKAnZqdXVzCZ+TOjboZ2keLg81eXfW3O+oY=
 github.com/golang-jwt/jwt v3.2.2+incompatible/go.mod h1:8pz2t5EyA70fFQQSrl6XZXzqecmYZeUEB8OUGHkxJ+I=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
+github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26/go.mod h1:dDKJzRmX4S37WGHujM7tX//fmj1uioxKzKxz3lo4HJo=
 github.com/google/uuid v1.5.0 h1:1p67kYwdtXjb0gL0BPiP1Av9wiZPo5A8z2cWkTZ+eyU=
 github.com/google/uuid v1.5.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/labstack/echo/v4 v4.11.3 h1:Upyu3olaqSHkCjs1EJJwQ3WId8b8b1hxbogyommKktM=
-github.com/labstack/echo/v4 v4.11.3/go.mod h1:UcGuQ8V6ZNRmSweBIJkPvGfwCMIlFmiqrPqiEBfPYws=
-github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
-github.com/labstack/gommon v0.4.0/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
-github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
+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/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
+github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+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.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 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
+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.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
-github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.19 h1:fhGleo2h1p8tVChob4I9HpmVFIAkKGpiukdrgQbWfGI=
-github.com/mattn/go-sqlite3 v1.14.19/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
+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/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRIccs7FGNTlIRMkT8wgtp5eCXdBlqhYGL6U=
+github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/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/rogpeppe/go-internal v1.9.0 h1:73kH8U+JUqXU8lRuOHeVHaa/SZPifC7BkcraZVejAe8=
+github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
+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/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+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.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
+github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-golang.org/x/crypto v0.14.0 h1:wBqGXzWJW6m1XrIKlAH0Hs1JJ7+9KBwnIO8v66Q9cHc=
-golang.org/x/crypto v0.14.0/go.mod h1:MVFd36DqK4CsrnJYDkBA3VC4m2GkXAM0PvzMCn4JQf4=
-golang.org/x/crypto v0.16.0 h1:mMMrFzRSCF0GvB7Ne27XVtVAaXLrPmgPC7/v0tkwHaY=
-golang.org/x/crypto v0.16.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
-golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
-golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
-golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
-golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
-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=
+go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
+go.uber.org/goleak v1.3.0/go.mod h1:CoHD4mav9JJNrW/WLlf7HGZPjdw8EucARQHekz1X6bE=
+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.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.24.0 h1:1PcaxkF854Fu3+lvBIx5SYn9wRlBzzcnHZSiaFFAb0w=
+golang.org/x/net v0.24.0/go.mod h1:2Q7sJY5mzlzWjKtYUEXSlBWCdyaioyXzRB2RtU8KVE8=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
-golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
-golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k=
-golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
+golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
+golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
-golang.org/x/time v0.3.0 h1:rg5rLMjNzMS1RkNLzCG38eapWhnYLFYXDXj2gOlr8j4=
-golang.org/x/time v0.3.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
+golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
+golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15 h1:YR8cESwS4TdDjEe65xsg0ogRM/Nc3DYOhEAlW+xobZo=
+gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15/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=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 modernc.org/libc v1.37.6 h1:orZH3c5wmhIQFTXF+Nt+eeauyd+ZIt2BX6ARe+kD+aw=
--- a/handlers/client/clientdashboard.handlers.go
+++ b/handlers/client/clientdashboard.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_dashboard "cpone/views/client/dashboard"
+
+	"github.com/labstack/echo/v4"
+)
+
+type ClientDashboardService interface {
+}
+
+func NewClientDashboardHandler(us ClientDashboardService) *ClientDashboardHandler {
+	return &ClientDashboardHandler{
+		ClientDashboardService: us,
+	}
+}
+
+type ClientDashboardHandler struct {
+	ClientDashboardService ClientDashboardService
+}
+
+func (uh *ClientDashboardHandler) ShowClientDashboard(c echo.Context) error {
+	helo := client_dashboard.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mcupreregister.handlers.go
+++ b/handlers/client/mcupreregister.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mcupreregister "cpone/views/client/mcupreregister"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MCUPreregisterService interface {
+}
+
+func NewMCUPreregisterHandler(us MCUPreregisterService) *MCUPreregisterHandler {
+	return &MCUPreregisterHandler{
+		MCUPreregisterService: us,
+	}
+}
+
+type MCUPreregisterHandler struct {
+	MCUPreregisterService MCUPreregisterService
+}
+
+func (uh *MCUPreregisterHandler) ShowMCUPreregister(c echo.Context) error {
+	helo := client_mcupreregister.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mcusetup.handlers.go
+++ b/handlers/client/mcusetup.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mcusetup "cpone/views/client/mcusetup"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MCUSetupService interface {
+}
+
+func NewMCUSetupHandler(us MCUSetupService) *MCUSetupHandler {
+	return &MCUSetupHandler{
+		MCUSetupService: us,
+	}
+}
+
+type MCUSetupHandler struct {
+	MCUSetupService MCUSetupService
+}
+
+func (uh *MCUSetupHandler) ShowMCUSetup(c echo.Context) error {
+	helo := client_mcusetup.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdbahan.handlers.go
+++ b/handlers/client/mdbahan.handlers.go
@@ -0,0 +1,27 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+
+	client_mdbahan "cpone/views/client/mdbahan"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdBahanService interface {
+}
+
+func NewMdBahanHandler(us MdBahanService) *MdBahanHandler {
+	return &MdBahanHandler{
+		MdBahanService: us,
+	}
+}
+
+type MdBahanHandler struct {
+	MdBahanService MdBahanService
+}
+
+func (uh *MdBahanHandler) ShowMdBahan(c echo.Context) error {
+	helo := client_mdbahan.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdcorp.handlers.go
+++ b/handlers/client/mdcorp.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdcorp "cpone/views/client/mdcorp"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdCorpService interface {
+}
+
+func NewMdCorpHandler(us MdCorpService) *MdCorpHandler {
+	return &MdCorpHandler{
+		MdCorpService: us,
+	}
+}
+
+type MdCorpHandler struct {
+	MdCorpService MdCorpService
+}
+
+func (uh *MdCorpHandler) ShowMdCorp(c echo.Context) error {
+	helo := client_mdcorp.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mddokter.handlers.go
+++ b/handlers/client/mddokter.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mddokter "cpone/views/client/mddokter"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdDokterService interface {
+}
+
+func NewMdDokterHandler(us MdDokterService) *MdDokterHandler {
+	return &MdDokterHandler{
+		MdDokterService: us,
+	}
+}
+
+type MdDokterHandler struct {
+	MdDokterService MdDokterService
+}
+
+func (uh *MdDokterHandler) ShowMdDokter(c echo.Context) error {
+	helo := client_mddokter.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdhargapanel.handlers.go
+++ b/handlers/client/mdhargapanel.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdhargapanel "cpone/views/client/mdhargapanel"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdHargaPanelService interface {
+}
+
+func NewMdHargaPanelHandler(us MdHargaPanelService) *MdHargaPanelHandler {
+	return &MdHargaPanelHandler{
+		MdHargaPanelService: us,
+	}
+}
+
+type MdHargaPanelHandler struct {
+	MdHargaPanelService MdHargaPanelService
+}
+
+func (uh *MdHargaPanelHandler) ShowMdHargaPanel(c echo.Context) error {
+	helo := client_mdhargapanel.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdhargaprofile.handlers.go
+++ b/handlers/client/mdhargaprofile.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdhargaprofile "cpone/views/client/mdhargaprofile"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdHargaProfileService interface {
+}
+
+func NewMdHargaProfileHandler(us MdHargaProfileService) *MdHargaProfileHandler {
+	return &MdHargaProfileHandler{
+		MdHargaProfileService: us,
+	}
+}
+
+type MdHargaProfileHandler struct {
+	MdHargaProfileService MdHargaProfileService
+}
+
+func (uh *MdHargaProfileHandler) ShowMdHargaProfile(c echo.Context) error {
+	helo := client_mdhargaprofile.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdhargasingle.handlers.go
+++ b/handlers/client/mdhargasingle.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdhargasingle "cpone/views/client/mdhargasingle"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdHargaSingleService interface {
+}
+
+func NewMdHargaSingleHandler(us MdHargaSingleService) *MdHargaSingleHandler {
+	return &MdHargaSingleHandler{
+		MdHargaSingleService: us,
+	}
+}
+
+type MdHargaSingleHandler struct {
+	MdHargaSingleService MdHargaSingleService
+}
+
+func (uh *MdHargaSingleHandler) ShowMdHargaSingle(c echo.Context) error {
+	helo := client_mdhargasingle.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdpaket.handlers.go
+++ b/handlers/client/mdpaket.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdpaket "cpone/views/client/mdpaket"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdPaketService interface {
+}
+
+func NewMdPaketHandler(us MdPaketService) *MdPaketHandler {
+	return &MdPaketHandler{
+		MdPaketService: us,
+	}
+}
+
+type MdPaketHandler struct {
+	MdPaketService MdPaketService
+}
+
+func (uh *MdPaketHandler) ShowMdPaket(c echo.Context) error {
+	helo := client_mdpaket.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdpanel.handlers.go
+++ b/handlers/client/mdpanel.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdpanel "cpone/views/client/mdpanel"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdPanelService interface {
+}
+
+func NewMdPanelHandler(us MdPanelService) *MdPanelHandler {
+	return &MdPanelHandler{
+		MdPanelService: us,
+	}
+}
+
+type MdPanelHandler struct {
+	MdPanelService MdPanelService
+}
+
+func (uh *MdPanelHandler) ShowMdPanel(c echo.Context) error {
+	helo := client_mdpanel.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdpasien.handlers.go
+++ b/handlers/client/mdpasien.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdpasien "cpone/views/client/mdpasien"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdPasienService interface {
+}
+
+func NewMdPasienHandler(us MdPasienService) *MdPasienHandler {
+	return &MdPasienHandler{
+		MdPasienService: us,
+	}
+}
+
+type MdPasienHandler struct {
+	MdPasienService MdPasienService
+}
+
+func (uh *MdPasienHandler) ShowMdPasien(c echo.Context) error {
+	helo := client_mdpasien.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdprofile.handlers.go
+++ b/handlers/client/mdprofile.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdprofile "cpone/views/client/mdprofile"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdProfileService interface {
+}
+
+func NewMdProfileHandler(us MdProfileService) *MdProfileHandler {
+	return &MdProfileHandler{
+		MdProfileService: us,
+	}
+}
+
+type MdProfileHandler struct {
+	MdProfileService MdProfileService
+}
+
+func (uh *MdProfileHandler) ShowMdProfile(c echo.Context) error {
+	helo := client_mdprofile.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdresultnonlab.handlers.go
+++ b/handlers/client/mdresultnonlab.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdresultnonlab "cpone/views/client/mdresultnonlab"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdResultNonLabService interface {
+}
+
+func NewMdResultNonLabHandler(us MdResultNonLabService) *MdResultNonLabHandler {
+	return &MdResultNonLabHandler{
+		MdResultNonLabService: us,
+	}
+}
+
+type MdResultNonLabHandler struct {
+	MdResultNonLabService MdResultNonLabService
+}
+
+func (uh *MdResultNonLabHandler) ShowMdResultNonLab(c echo.Context) error {
+	helo := client_mdresultnonlab.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdsamplestation.handlers.go
+++ b/handlers/client/mdsamplestation.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdsamplestation "cpone/views/client/mdsamplestation"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdSampleStationService interface {
+}
+
+func NewMdSampleStationHandler(us MdSampleStationService) *MdSampleStationHandler {
+	return &MdSampleStationHandler{
+		MdSampleStationService: us,
+	}
+}
+
+type MdSampleStationHandler struct {
+	MdSampleStationService MdSampleStationService
+}
+
+func (uh *MdSampleStationHandler) ShowMdSampleStation(c echo.Context) error {
+	helo := client_mdsamplestation.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdsampletype.handlers.go
+++ b/handlers/client/mdsampletype.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdsampletype "cpone/views/client/mdsampletype"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdSampleTypeService interface {
+}
+
+func NewMdSampleTypeHandler(us MdSampleTypeService) *MdSampleTypeHandler {
+	return &MdSampleTypeHandler{
+		MdSampleTypeService: us,
+	}
+}
+
+type MdSampleTypeHandler struct {
+	MdSampleTypeService MdSampleTypeService
+}
+
+func (uh *MdSampleTypeHandler) ShowMdSampleType(c echo.Context) error {
+	helo := client_mdsampletype.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdtemplatefisik.handlers.go
+++ b/handlers/client/mdtemplatefisik.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdtemplatefisik "cpone/views/client/mdtemplatefisik"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdTemplateFisikService interface {
+}
+
+func NewMdTemplateFisikHandler(us MdTemplateFisikService) *MdTemplateFisikHandler {
+	return &MdTemplateFisikHandler{
+		MdTemplateFisikService: us,
+	}
+}
+
+type MdTemplateFisikHandler struct {
+	MdTemplateFisikService MdTemplateFisikService
+}
+
+func (uh *MdTemplateFisikHandler) ShowMdTemplateFisik(c echo.Context) error {
+	helo := client_mdtemplatefisik.Show()
+	return utils.View(c, helo)
+}
--- a/handlers/client/mdtest.handlers.go
+++ b/handlers/client/mdtest.handlers.go
@@ -0,0 +1,26 @@
+package client_handlers
+
+import (
+	"cpone/utils"
+	client_mdtest "cpone/views/client/mdtest"
+
+	"github.com/labstack/echo/v4"
+)
+
+type MdTestService interface {
+}
+
+func NewMdTestHandler(us MdTestService) *MdTestHandler {
+	return &MdTestHandler{
+		MdTestService: us,
+	}
+}
+
+type MdTestHandler struct {
+	MdTestService MdTestService
+}
+
+func (uh *MdTestHandler) ShowMdTest(c echo.Context) error {
+	helo := client_mdtest.Show()
+	return utils.View(c, helo)
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
adibwp	7f32ac1c1c	add delete & pilih detail + bug target item row di modal	2024-06-07 08:23:31 +07:00
adibwp	709fcb316d	add insert data nonlab template	2024-06-05 15:14:59 +07:00
adibwp	897bdc176c	bug target id missing	2024-06-04 17:44:43 +07:00
adibwp	466aa0d9cf	add delete func + dialog	2024-06-04 15:16:57 +07:00
adibwp	c9a6b21aae	modal templ	2024-06-04 14:25:19 +07:00
adibwp	70d0ce5383	add listing, pagination, filter	2024-06-04 13:43:49 +07:00
sindhu	a4319bee07	change parameter terminology	2024-05-30 15:30:37 +07:00
sindhu	dbead529fe	modify sql null string terminology model	2024-05-30 15:29:46 +07:00
sindhu	1ed188e3ff	add get terminology list in app services	2024-05-30 11:55:07 +07:00
Sas Andy	1e978188ee	modal xl	2024-05-30 09:37:09 +07:00
adibwp	2c183a43cc	add error log	2024-05-29 15:58:22 +07:00
adibwp	2909b06966	add edit func sample station	2024-05-29 15:58:22 +07:00
adibwp	f2d0db174e	modal with func add data	2024-05-29 15:58:21 +07:00
adibwp	42f24d1c77	modal sample station	2024-05-29 15:58:21 +07:00
adibwp	ada2ae9052	fix rebase conflict	2024-05-29 15:58:21 +07:00
adibwp	ac4feb51c1	refactor sample station + loading	2024-05-29 15:58:21 +07:00
adibwp	44eca754f5	add sample station handler, services, model	2024-05-29 15:58:21 +07:00
sindhu	6e7a84f4aa	step 4 : delete group result	2024-05-29 15:58:21 +07:00
sindhu	f6296003c9	step 3 : edit data group result	2024-05-29 15:58:21 +07:00
sindhu	c6c61c7caf	step 2 : add data group result with form validation	2024-05-29 15:58:20 +07:00
sindhu	1b0522146c	step 1 : listing, search and pagination group result	2024-05-29 15:58:20 +07:00
adibwp	d92cc9727c	listing data minus pagination + bug dislpay group name	2024-05-29 15:58:20 +07:00
adibwp	b947c1c6c4	add sample station handler, services, model	2024-05-29 15:58:20 +07:00
adibwp	59a3f87644	add templ for md-sample-station	2024-05-29 15:58:20 +07:00
kaeltorus	3719cbff71	Merge branch 'mike'	2024-05-29 14:24:00 +07:00
kaeltorus	9b8e3301cc	fixing column	2024-05-29 14:15:31 +07:00
kaeltorus	fb29e251d9	Merge branch 'mike'	2024-05-29 11:33:08 +07:00
kaeltorus	cca96b0203	add slicing patient.html	2024-05-29 11:23:14 +07:00
sindhu	275205f5dd	add model radio button	2024-05-29 11:22:49 +07:00
Sas Andy	add659eb2c	Merge branch 'andy/mdbahan'	2024-05-29 11:17:33 +07:00
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
Sas Andy	9a4a9b34dc	routing	2024-05-10 14:35:00 +07:00
Sas Andy	d3d59ebedb	client md test	2024-05-10 14:07:37 +07:00
Sas Andy	f2a84daea0	client md user group	2024-05-10 10:06:05 +07:00
Sas Andy	0bc1cb2a49	client md corp	2024-05-10 09:51:59 +07:00
Sas Andy	6a8f7ef656	client md user	2024-05-10 09:41:07 +07:00
Sas Andy	ff0f95a67f	client dashboard	2024-05-10 09:32:36 +07:00
Sas Andy	f6d177f2f1	patient underdev	2024-05-10 09:23:40 +07:00
Sas Andy	f673933c4c	login	2024-05-10 08:53:32 +07:00
sindhu	c6e7f76e85	client md sample station. sample type, paket, hrg profile	2024-05-09 14:39:58 +07:00
sindhu	15d66cb80a	client harga panel	2024-05-09 13:57:18 +07:00
sindhu	2b6a524e48	client template fisik	2024-05-09 13:49:52 +07:00
sindhu	4b2470ea84	client md result non lab	2024-05-09 13:36:36 +07:00
sindhu	698e81eda7	client md harga single	2024-05-09 13:25:05 +07:00
sindhu	504bec64a2	client md dokter	2024-05-09 13:06:49 +07:00
sindhu	20387e14ab	client md pasien	2024-05-09 13:02:21 +07:00
sindhu	0ba409ab73	client md panel	2024-05-08 16:27:30 +07:00
sindhu	88d9985ca1	client md bahan	2024-05-08 16:14:07 +07:00
Sas Andy	1965359fd5	company under development	2024-05-08 15:56:44 +07:00
Sas Andy	9ae7e495c6	refactor structure	2024-05-08 15:26:14 +07:00
Sas Andy	ac97487b9b	contains utils	2024-05-08 13:58:49 +07:00
Sas Andy	233197a0fb	Merge branch 'andy/table'	2024-05-08 13:58:12 +07:00
sindhu	fb91440c81	autocomplete	2024-05-08 13:36:37 +07:00
Sas Andy	ad26d88feb	try pagination templ	2024-05-08 13:28:03 +07:00
Sas Andy	8f2104270d	modal edit user group	2024-05-08 09:23:43 +07:00
Sas Andy	963885d8a3	Merge branch 'andy/table' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/table	2024-05-06 15:34:10 +07:00
Sas Andy	1f2973360c	table component	2024-05-06 15:25:51 +07:00
Sas Andy	329db2e2ac	layout corporate, navbar & side bar templ	2024-05-06 15:25:51 +07:00
Sas Andy	f527eaa17e	text hover css	2024-05-06 15:25:51 +07:00
Sas Andy	559f0b41a2	user group table	2024-05-06 15:25:51 +07:00
Sas Andy	89bac6fabe	custom buton tosca	2024-05-06 15:25:51 +07:00
Sas Andy	e157e2fe43	table component	2024-05-06 15:23:34 +07:00
Sas Andy	728c4ccf7a	layout corporate, navbar & side bar templ	2024-05-06 13:27:28 +07:00
Sas Andy	6972963f41	text hover css	2024-05-06 13:27:01 +07:00
sindhu	48b4de265f	add active search dan text field biasa	2024-05-06 09:14:45 +07:00
Sas Andy	662382b50b	user group table	2024-05-03 16:54:04 +07:00
Sas Andy	b278020911	custom buton tosca	2024-05-03 16:45:58 +07:00
sindhu	80ff72e3b3	from stash menu sidebar	2024-05-03 09:21:49 +07:00
adibwp	f5e512aa6e	fix bug	2024-05-02 17:16:34 +07:00
adibwp	a4f262af4c	add margin	2024-05-02 17:11:56 +07:00
adibwp	3baa3a2cac	footer + responsive layout	2024-05-02 16:59:33 +07:00
adibwp	df96880e76	create component footer	2024-05-02 16:59:33 +07:00
adibwp	f4c7507e6d	footer + responsive layout	2024-05-02 16:58:26 +07:00
sindhu	cca5fe06d1	Merge branch 'fixcdnall' googlefont and other cdn	2024-05-02 16:38:25 +07:00
sindhu	90d632a515	fix cdn all dan google font	2024-05-02 16:37:32 +07:00
sindhu	a90d4843cc	Merge branch 'fixrelative' base href	2024-05-02 15:50:00 +07:00
sindhu	202f4d22f4	fix relative base href	2024-05-02 15:49:09 +07:00
adibwp	8a474a3082	create component footer	2024-05-02 14:04:03 +07:00