From 9b8e3301ccc31012e1b1ed73cc5dd18ee47b441f Mon Sep 17 00:00:00 2001
From: kaeltorus <mikhaeltorus@gmail.com>
Date: Wed, 29 May 2024 14:15:31 +0700
Subject: [PATCH] fixing column

---
 assets/mcu/mike/patient.html | 628 ----------------------------------
 assets/mcu/patient.html      | 631 +++++++++++++++++++++++++++++++++++
 2 files changed, 631 insertions(+), 628 deletions(-)
 delete mode 100644 assets/mcu/mike/patient.html
 create mode 100644 assets/mcu/patient.html
diff --git a/assets/mcu/mike/patient.html b/assets/mcu/mike/patient.html
deleted file mode 100644
index abb290b..0000000
--- a/assets/mcu/mike/patient.html
+++ /dev/null
@@ -1,628 +0,0 @@
-<!DOCTYPE html>
-<!--
-		Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
-		Author: KeenThemes
-		Website: http://www.keenthemes.com/
-		Contact: support@keenthemes.com
-		Follow: www.twitter.com/keenthemes
-		Dribbble: www.dribbble.com/keenthemes
-		Like: www.facebook.com/keenthemes
-		Purchase: https://1.envato.market/EA4JP
-		Renew Support: https://1.envato.market/EA4JP
-		License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-		-->
-<html lang="en">
-  <!--begin::Head-->
-  <head>
-    <base href="../" />
-    <meta charset="utf-8" />
-    <title>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"
-  >
-    <style>
-      .left {
-        width: 85%;
-        float: left;
-        height: 100%;
-        z-index: 1010101010;
-      }
-      .right {
-        width: 15%;
-        float: right;
-        height: 100%;
-        z-index: 1010101010;
-      }
-
-      .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>
-    <!--begin::Main-->
-
-    <div class="wrappery p-5 h-100">
-      <div class="left px-2">
-        <!--begin::Row 1-->
-        <div class="form-row">
-          <div class="col-2">
-            <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="mr">Tn</option>
-              <option value="mrs">Ny</option>
-              <option value="ms">Nn</option>
-            </select>
-          </div>
-          <div class="col-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-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-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-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-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-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-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="">B</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-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-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-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-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-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-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-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-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-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-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="right px-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>
-
-    <!--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>
diff --git a/assets/mcu/patient.html b/assets/mcu/patient.html
new file mode 100644
index 0000000..c61f56a
--- /dev/null
+++ 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>
