mdpasien add edit

Merge branch 'andy/mdpatient' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/mdpatient
tmp datepicker
2024-06-04 10:58:24 +07:00 · 2024-05-30 13:49:40 +07:00 · 2024-05-30 13:49:32 +07:00 · 2024-05-30 13:49:32 +07:00 · 2024-05-30 10:56:31 +07:00 · 2024-05-30 09:35:37 +07:00
30 changed files with 5758 additions and 85 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ config.yaml
 restapi.rest
 cpone.db
 coba.Http
+uploads
--- a/assets/asset-corporate-portal/css/sas.bundle.css
+++ b/assets/asset-corporate-portal/css/sas.bundle.css
@@ -296,7 +296,7 @@ a.text-white:focus {
 }

 .btn-field {
-  color: var(--text-black);
+  color: var(--text-black) !important;
  background-color: var(--fieldbg) !important;
  border-color: var(--fieldbg) !important;
 }
@@ -313,13 +313,13 @@ a.text-white:focus {
  border-radius: 0.85rem !important;
 }
 .btn-field:hover {
-  color: var(--text-black);
+  color: var(--text-black) !important;
  background-color: var(--fieldbg) !important;
  border-color: var(--fieldbg) !important;
 }
 .btn-field:focus,
 .btn-field.focus {
-  color: var(--text-black);
+  color: var(--text-black) !important;
  background-color: var(--fieldbg) !important;
  border-color: var(--fieldbg) !important;
  -webkit-box-shadow: 0 0 0 0rem var(--fieldbg) !important;
@@ -327,14 +327,14 @@ a.text-white:focus {
 }
 .btn-field.disabled,
 .btn-field:disabled {
-  color: var(--text-black);
+  color: var(--text-black) !important;
  background-color: var(--fieldbg) !important;
  border-color: var(--fieldbg) !important;
 }
 .btn-field:not(:disabled):not(.disabled):active,
 .btn-field:not(:disabled):not(.disabled).active,
 .show > .btn-field.dropdown-toggle {
-  color: var(--text-black);
+  color: var(--text-black) !important;
  background-color: var(--fieldbg) !important;
  border-color: var(--fieldbg) !important;
 }
@@ -5277,7 +5277,7 @@ a.text-hover-tosca:hover .svg-icon svg:hover g [fill],
 }

 /* ### CUSTOM CSS SELECTPICKER */
-.btn-custom-selectpicker{
+.btn-custom-selectpicker {
  height: 8vh;
  text-align: center;
 }
--- a/assets/assets/js/jquery/jquery.bundle.min.js
+++ b/assets/assets/js/jquery/jquery.bundle.min.js
--- a/assets/mcu/patient.html
+++ b/assets/mcu/patient.html
@@ -129,8 +129,75 @@
    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>
+    <style>
+      /* input[type="file"] {
+        display: none;
+      } */
+    </style>
    <!--begin::Main-->
+    <script
+      src="https://unpkg.com/htmx.org@1.9.12"
+      integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
+      crossorigin="anonymous"
+    ></script>
+    <script>
+      function onChangeInput() {
+        const fileInput = document.getElementById("file-upload");
+
+        const previewImage = document.getElementById("preview-image");
+
+        if (fileInput.files.length > 0) {
+          if (fileInput.files[0].size > 500000) {
+            fileInput.value = "";
+            Swal.fire("Warning", "File is too big!", "warning");
+          } else {
+            previewImage.src = URL.createObjectURL(fileInput.files[0]);
+            console.log(URL.createObjectURL(fileInput.files[0]));
+            console.log(fileInput.files[0].mozFullPath);
+          }
+        }
+      }
+      // window.addEventListener("DOMContentLoaded", () => {
+      //   const fileInput = document.getElementById("file-upload");
+
+      //   const previewImage = document.getElementById("preview-image");
+
+      //   fileInput.addEventListener("change", (event) => {
+      //     if (event.target.files.length > 0) {
+      //       previewImage.src = URL.createObjectURL(event.target.files[0]);
+      //     }
+
+      //     // 👇️ reset file input once you're done
+      //     fileInput.value = null;
+      //   });
+      // });
+    </script>
+    <div>
+      <input
+        type="file"
+        hx-post="\dev\md\pasien\add"
+        name="pasienprofile"
+        hx-trigger="change"
+      />
+      <div class="text-center">
+        <img
+          id="preview-image"
+          src="asset-corporate-portal/media/person/person.png"
+          class="rounded-lg"
+          alt="..."
+          style="width: 10vw; min-width: 100px;"
+        />
+      </div>
+      <label for="file-upload" class="btn btn-light-primary d-block mt-5">
+        Update Foto
+      </label>
+      <input
+        id="file-upload"
+        type="file"
+        accept=".png, .jpg, .jpeg"
+        onchange="onChangeInput()"
+      />
+    </div>

    <div class="wrapperx p-5 h-100">
      <div class="row">
@@ -141,7 +208,7 @@
              <label
                for="input1"
                class="font-weight-bolder"
-                style="font-family: Poppins"
+                style="font-family: Poppins;"
                >Sapaan</label
              >
              <select
@@ -157,7 +224,9 @@
              </select>
            </div>
            <div class="col-md-6 col-lg-3">
-              <label for="input1" style="font-family: Poppins; font-weight: 600"
+              <label
+                for="input1"
+                style="font-family: Poppins; font-weight: 600;"
                >Imbuhan Awal</label
              >
              <input
@@ -167,7 +236,9 @@
              />
            </div>
            <div class="col-md-6 col-lg-5">
-              <label for="input1" style="font-family: Poppins; font-weight: 600"
+              <label
+                for="input1"
+                style="font-family: Poppins; font-weight: 600;"
                >Nama
              </label>
              <input
@@ -177,7 +248,9 @@
              />
            </div>
            <div class="col-md-6 col-lg-2">
-              <label for="input1" style="font-family: Poppins; font-weight: 600"
+              <label
+                for="input1"
+                style="font-family: Poppins; font-weight: 600;"
                >Imbuhan Akhir</label
              >
              <input
@@ -195,7 +268,7 @@
              <div class="form-row">
                <label
                  for="input1"
-                  style="font-family: Poppins; font-weight: 600"
+                  style="font-family: Poppins; font-weight: 600;"
                  >Jenis Kelamin</label
                >
                <select
@@ -215,7 +288,7 @@
            <div class="col-md-6">
              <!-- begin::Tanggal Lahir -->
              <div class="form-row">
-                <label style="font-family: Poppins; font-weight: 600"
+                <label style="font-family: Poppins; font-weight: 600;"
                  >Tanggal Lahir</label
                >
                <div class="input-group date bg-field border-0 rounded-lg">
@@ -234,7 +307,7 @@
                      <span
                        class="iconify text-grey"
                        data-icon="heroicons-solid:calendar"
-                        style="font-size: 20px"
+                        style="font-size: 20px;"
                      ></span>
                    </span>
                  </div>
@@ -252,7 +325,7 @@
                <div class="col">
                  <label
                    for="input1"
-                    style="font-family: Poppins; font-weight: 600"
+                    style="font-family: Poppins; font-weight: 600;"
                    >Umur</label
                  >
                  <div class="input-container">
@@ -294,7 +367,7 @@
                <div class="col">
                  <label
                    for="input1"
-                    style="font-family: Poppins; font-weight: 600"
+                    style="font-family: Poppins; font-weight: 600;"
                    >Golongan Darah</label
                  >
                  <select
@@ -314,7 +387,7 @@
                <!-- end::Golongan Darah -->
                <!-- begin::Rhesus -->
                <div class="col">
-                  <label style="font-family: Poppins; font-weight: 600"
+                  <label style="font-family: Poppins; font-weight: 600;"
                    >Rhesus</label
                  >
                  <select
@@ -339,7 +412,9 @@
          <div class="row mt-5">
            <!--begin::Pekerjaan-->
            <div class="col-md-6">
-              <label for="input1" style="font-family: Poppins; font-weight: 600"
+              <label
+                for="input1"
+                style="font-family: Poppins; font-weight: 600;"
                >Pekerjaan</label
              >
              <input
@@ -354,7 +429,7 @@
              <div class="form-row">
                <label
                  for="input1"
-                  style="font-family: Poppins; font-weight: 600"
+                  style="font-family: Poppins; font-weight: 600;"
                  >Departemen</label
                >
                <input
@@ -371,7 +446,9 @@
          <div class="row mt-5">
            <!--begin::Posisi-->
            <div class="col-md-6">
-              <label for="input1" style="font-family: Poppins; font-weight: 600"
+              <label
+                for="input1"
+                style="font-family: Poppins; font-weight: 600;"
                >Posisi</label
              >
              <input
@@ -384,7 +461,7 @@
            <!--Begin::Pendidikan Terakhir-->
            <div class="col-md-6">
              <div class="form-row">
-                <label style="font-family: Poppins; font-weight: 600"
+                <label style="font-family: Poppins; font-weight: 600;"
                  >Pendidikan Terakhir</label
                >
                <select
@@ -413,26 +490,26 @@
              <div class="form-row">
                <label
                  for="input1"
-                  style="font-family: Poppins; font-weight: 600"
+                  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"
+                      style="display: flex; gap: 20px;"
                    >
                      <label
-                        style="display: flex; align-items: center; gap: 5px"
+                        style="display: flex; align-items: center; gap: 5px;"
                      >
                        <input type="radio" name="nationality" value="wni" />
-                        <p style="margin: 0">WNI</p>
+                        <p style="margin: 0;">WNI</p>
                      </label>
                      <label
-                        style="display: flex; align-items: center; gap: 5px"
+                        style="display: flex; align-items: center; gap: 5px;"
                      >
                        <input type="radio" name="nationality" value="wna" />
-                        <p style="margin: 0">WNA</p>
+                        <p style="margin: 0;">WNA</p>
                      </label>
                    </div>
                  </div>
@@ -443,7 +520,7 @@
            <!--Begin::Etnis-->
            <div class="col-md-6">
              <div class="form-row">
-                <label style="font-family: Poppins; font-weight: 600"
+                <label style="font-family: Poppins; font-weight: 600;"
                  >Etnis</label
                >
                <select
@@ -473,7 +550,7 @@
                <div class="col">
                  <label
                    for="input1"
-                    style="font-family: Poppins; font-weight: 600"
+                    style="font-family: Poppins; font-weight: 600;"
                    >Identitas</label
                  >
                  <select
@@ -500,7 +577,7 @@
                <div class="col">
                  <label
                    for="input1"
-                    style="font-family: Poppins; font-weight: 600"
+                    style="font-family: Poppins; font-weight: 600;"
                    >Nomor Identitas</label
                  >
                  <input
@@ -522,7 +599,7 @@
                <div class="col">
                  <label
                    for="input1"
-                    style="font-family: Poppins; font-weight: 600"
+                    style="font-family: Poppins; font-weight: 600;"
                    >Nomor HP</label
                  >
                  <input
@@ -540,7 +617,7 @@
                <div class="col">
                  <label
                    for="input1"
-                    style="font-family: Poppins; font-weight: 600"
+                    style="font-family: Poppins; font-weight: 600;"
                    >Email</label
                  >
                  <input
@@ -561,7 +638,7 @@
            <div class="col">
              <img
                src="asset-corporate-portal/media/person/person.png"
-                style="display: block; width: 13vw"
+                style="display: block; width: 13vw;"
              />
            </div>
          </div>
@@ -570,7 +647,7 @@
            <div class="col">
              <button
                class="btn bg-primary-transparent text-center text-primary"
-                style="width: 13vw; font-weight: 600"
+                style="width: 13vw; font-weight: 600;"
              >
                Update Foto
              </button>
@@ -580,6 +657,45 @@
        </div>
      </div>
    </div>
+    <div>
+      <div
+        class="image-input image-input-empty image-input-outline"
+        id="kt_image_5"
+        style="background-image: url(assets/media/users/blank.png);"
+      >
+        <div class="image-input-wrapper"></div>
+
+        <label
+          class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
+          data-action="change"
+          data-toggle="tooltip"
+          title=""
+          data-original-title="Change avatar"
+        >
+          <i class="fa fa-pen icon-sm text-muted"></i>
+          <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg" />
+          <input type="hidden" name="profile_avatar_remove" />
+        </label>
+
+        <span
+          class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
+          data-action="cancel"
+          data-toggle="tooltip"
+          title="Cancel avatar"
+        >
+          <i class="ki ki-bold-close icon-xs text-muted"></i>
+        </span>
+
+        <span
+          class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
+          data-action="remove"
+          data-toggle="tooltip"
+          title="Remove avatar"
+        >
+          <i class="ki ki-bold-close icon-xs text-muted"></i>
+        </span>
+      </div>
+    </div>

    <!--end::Main-->
    <script src="asset-corporate-portal/js/ktappsetting.js"></script>
@@ -593,6 +709,7 @@
    <script src="assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script>

    <script>
+      var avatar5 = new KTImageInput("kt_image_5");
      function ShowLoading() {
        document
          .getElementById("demo")
--- a/component/customdatepicker/customdatepicker.templ
+++ b/component/customdatepicker/customdatepicker.templ
@@ -0,0 +1,113 @@
+package customdatepicker 
+
+import "cpone/models"
+
+templ CustomDatePicker(inp models.CustomDatePickerPrm) {
+	<div class="form-row">
+		<label style="font-family: Poppins; font-weight: 600;">{ inp.Label }</label>
+		<div class="input-group date rounded-left-lg">
+			<input
+				type="text"
+				readonly
+				name={ inp.Name }
+				value={ inp.Value }
+				placeholder={ inp.Placeholder }
+				id="datepicker"
+				if inp.ErrorMsg == "" {
+					class="form-control bg-field border-0 h-auto "
+				} else {
+					class="form-control is-invalid bg-field border-0 h-auto "
+				}
+			/>
+			<div class="input-group-prepend">
+				<span
+					class="input-group-text bg-field border-0 rounded-lg rounded-left-0"
+					id="calendar-icon"
+				>
+					<span
+						class="iconify text-grey"
+						data-icon="heroicons-solid:calendar"
+						style="font-size: 20px;"
+					></span>
+				</span>
+			</div>
+			<div class="invalid-feedback text-danger mt-3 ml-2">
+				{ inp.ErrorMsg }
+			</div>
+		</div>
+	</div>
+	if inp.ID == "" {
+		<div class="text-danger mt-3 ml-2">
+			ID Mandatory 
+		</div>
+	}
+	@TES(inp.ID)
+	// @JsDatePicker("#" + inp.ID)
+}
+
+templ CustomDatePickerV2(inp models.CustomDatePickerPrm) {
+	<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="date"
+			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>
+	// @JsDatePicker("#" + inp.ID)
+}
+
+script TES(id string) {
+	$(document).ready(function () {
+        $(id).datepicker({
+    		format: "dd/mm/yyyy",
+        });
+        $("#calendar-icon").click(function () {
+    		$(id).datepicker("show");
+        });
+    });
+	
+}
+
+script Format(idtest string) {
+ 		$(idtest).datepicker({
+    		format: "dd/mm/yyyy",
+        });
+}
+
+script IconOnClick(idtest string) {
+ 		$("#calendar-icon").click(function () {
+    		$(idtest).datepicker("show");
+        });
+}
+
+templ JsDatePicker(id string) {
+	<script>
+	var idCoba = {inp.ID}
+	$(document).ready(function () {
+        $(idDp).datepicker({
+    		format: "dd/mm/yyyy",
+        });
+        $("#calendar-icon").click(function () {
+    		$(idDp).datepicker("show");
+        });
+    });
+	</script>
+}
--- a/component/customdatepicker/customdatepicker_templ.go
+++ b/component/customdatepicker/customdatepicker_templ.go
@@ -0,0 +1,325 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customdatepicker
+
+//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 CustomDatePicker(inp models.CustomDatePickerPrm) 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-row\"><label 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\customdatepicker\customdatepicker.templ`, Line: 7, Col: 68}
+		}
+		_, 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=\"input-group date rounded-left-lg\"><input type=\"text\" readonly 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\customdatepicker\customdatepicker.templ`, Line: 12, 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("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.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("\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Placeholder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.templ`, Line: 14, 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("\" id=\"datepicker\"")
+		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 h-auto \"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control is-invalid bg-field border-0 h-auto \"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div class=\"input-group-prepend\"><span class=\"input-group-text bg-field border-0 rounded-lg rounded-left-0\" id=\"calendar-icon\"><span class=\"iconify text-grey\" data-icon=\"heroicons-solid:calendar\" style=\"font-size: 20px;\"></span></span></div><div class=\"invalid-feedback text-danger mt-3 ml-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.templ`, Line: 35, 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("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if inp.ID == "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"text-danger mt-3 ml-2\">ID Mandatory \r</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = TES(inp.ID).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CustomDatePickerV2(inp models.CustomDatePickerPrm) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"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_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Label)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.templ`, Line: 57, Col: 14}
+		}
+		_, 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("</label> <input id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.templ`, Line: 59, Col: 16}
+		}
+		_, 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("\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.templ`, Line: 60, Col: 18}
+		}
+		_, 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("\" type=\"date\" placeholder=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Placeholder)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.templ`, Line: 62, Col: 32}
+		}
+		_, 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("\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Value)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdatepicker\customdatepicker.templ`, Line: 63, Col: 20}
+		}
+		_, 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
+		}
+		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_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\customdatepicker\customdatepicker.templ`, Line: 71, 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 TES(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_TES_b105`,
+		Function: `function __templ_TES_b105(id){$(document).ready(function () {
+        $(id).datepicker({
+    		format: "dd/mm/yyyy",
+        });
+        $("#calendar-icon").click(function () {
+    		$(id).datepicker("show");
+        });
+    });
+	
+}`,
+		Call:       templ.SafeScript(`__templ_TES_b105`, id),
+		CallInline: templ.SafeScriptInline(`__templ_TES_b105`, id),
+	}
+}
+
+func Format(idtest string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_Format_c41d`,
+		Function: `function __templ_Format_c41d(idtest){$(idtest).datepicker({
+    		format: "dd/mm/yyyy",
+        });
+}`,
+		Call:       templ.SafeScript(`__templ_Format_c41d`, idtest),
+		CallInline: templ.SafeScriptInline(`__templ_Format_c41d`, idtest),
+	}
+}
+
+func IconOnClick(idtest string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_IconOnClick_a67e`,
+		Function: `function __templ_IconOnClick_a67e(idtest){$("#calendar-icon").click(function () {
+    		$(idtest).datepicker("show");
+        });
+}`,
+		Call:       templ.SafeScript(`__templ_IconOnClick_a67e`, idtest),
+		CallInline: templ.SafeScriptInline(`__templ_IconOnClick_a67e`, idtest),
+	}
+}
+
+func JsDatePicker(id 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_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("<script>\r\n\tvar idCoba = {inp.ID}\r\n\t$(document).ready(function () {\r\n        $(idDp).datepicker({\r\n    \t\tformat: \"dd/mm/yyyy\",\r\n        });\r\n        $(\"#calendar-icon\").click(function () {\r\n    \t\t$(idDp).datepicker(\"show\");\r\n        });\r\n    });\r\n\t</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/customdropdown/customdropdown.templ
+++ b/component/customdropdown/customdropdown.templ
@@ -98,9 +98,9 @@ templ CustomDropdownForm(
 		<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"
+				class="form-control text-black form-control-lg bg-field btn-lg border-0 rounded-lg selectpicker"
 			} else {
-				class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker is-invalid"
+				class="form-control text-black form-control-lg bg-field btn-lg border-1 rounded-lg selectpicker is-invalid"
 			}
 			data-live-search="true"
 			data-size="5"
--- a/component/customdropdown/customdropdown_templ.go
+++ b/component/customdropdown/customdropdown_templ.go
@@ -376,7 +376,7 @@ func CustomDropdownFilter(
 		var templ_7745c5c3_Var23 string
 		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(idCmp)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 80, Col: 12}
+			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 {
@@ -389,7 +389,7 @@ func CustomDropdownFilter(
 		var templ_7745c5c3_Var24 string
 		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(hxName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 81, Col: 15}
+			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 {
@@ -402,7 +402,7 @@ func CustomDropdownFilter(
 		var templ_7745c5c3_Var25 string
 		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(hxInclude)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 82, Col: 24}
+			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 {
@@ -415,7 +415,7 @@ func CustomDropdownFilter(
 		var templ_7745c5c3_Var26 string
 		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(hxGet)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 83, Col: 16}
+			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 {
@@ -428,7 +428,7 @@ func CustomDropdownFilter(
 		var templ_7745c5c3_Var27 string
 		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwap)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 84, Col: 18}
+			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 {
@@ -441,7 +441,7 @@ func CustomDropdownFilter(
 		var templ_7745c5c3_Var28 string
 		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(hxTarget)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 85, Col: 22}
+			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 {
@@ -454,7 +454,7 @@ func CustomDropdownFilter(
 		var templ_7745c5c3_Var29 string
 		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(hxTrigger)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 86, Col: 24}
+			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 {
@@ -518,7 +518,7 @@ func CustomDropdownForm(
 		var templ_7745c5c3_Var33 string
 		templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Label)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 97, Col: 87}
+			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 {
@@ -529,12 +529,12 @@ func CustomDropdownForm(
 			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\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control text-black form-control-lg bg-field btn-lg border-0 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\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"form-control text-black form-control-lg bg-field btn-lg border-1 rounded-lg selectpicker is-invalid\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -546,7 +546,7 @@ func CustomDropdownForm(
 		var templ_7745c5c3_Var34 string
 		templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Placeholder)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 106, Col: 26}
+			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 {
@@ -559,7 +559,7 @@ func CustomDropdownForm(
 		var templ_7745c5c3_Var35 string
 		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 109, Col: 18}
+			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 {
@@ -572,7 +572,7 @@ func CustomDropdownForm(
 		var templ_7745c5c3_Var36 string
 		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 110, Col: 14}
+			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 {
@@ -593,7 +593,7 @@ func CustomDropdownForm(
 		var templ_7745c5c3_Var37 string
 		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customdropdown\customdropdown.templ`, Line: 115, Col: 17}
+			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 {
--- a/component/customtextfield/customtextfieldv2.templ
+++ b/component/customtextfield/customtextfieldv2.templ
@@ -18,6 +18,8 @@ templ CustomTextFieldv2(inp models.CustomTextFieldv2Prm) {
 			type={ inp.Type }
 			placeholder={ inp.Placeholder }
 			value={ inp.Value }
+			min={ inp.Min }
+			min={ inp.Max }
 			if inp.ErrorMsg =="" {
 				class="form-control bg-field border-0 form-control-lg bg-field rounded-lg"
 			} else {
--- a/component/customtextfield/customtextfieldv2_templ.go
+++ b/component/customtextfield/customtextfieldv2_templ.go
@@ -118,6 +118,32 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" min=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Min)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 21, Col: 16}
+		}
+		_, 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("\" min=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(inp.Max)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 22, Col: 16}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -137,12 +163,12 @@ func CustomTextFieldv2(inp models.CustomTextFieldv2Prm) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(inp.ErrorMsg)
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, 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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customtextfield\customtextfieldv2.templ`, Line: 30, Col: 17}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/component/customuploadfoto/customuploadfoto.templ
+++ b/component/customuploadfoto/customuploadfoto.templ
@@ -0,0 +1,51 @@
+package customuploadfoto 
+
+import "cpone/models"
+
+templ CustomUploadFotoWithPreview(prm models.CustomUploadFotoPrm) {
+	<div>
+		<div class="text-center">
+			<img
+				id={ prm.ID + "-preview-image" }
+				if prm.LinkFoto == "" {
+					src="asset-corporate-portal/media/person/person.png"
+				} else {
+					src={ prm.LinkFoto }
+				}
+				class="rounded-lg"
+				alt="..."
+				style="width: 10vw; min-width: 100px;"
+			/>
+		</div>
+		<label for={ prm.ID } class="btn btn-light-primary d-block mt-5">
+			{ prm.Label }
+		</label>
+		<input
+			id={ prm.ID }
+			style="display: none;"
+			name={ prm.Name }
+			type="file"
+			accept={ prm.Accept }
+			onchange={ OnSelect(prm.ID) }
+			hx-on::load={ OnSelect(prm.ID) }
+		/>
+	</div>
+}
+
+script OnSelect(id string) {
+	const fileInput = document.getElementById(id);
+
+        const previewImage = document.getElementById(id+"-preview-image");
+
+        if (fileInput.files.length > 0) {
+          if (fileInput.files[0].size > 500000) {
+            fileInput.value = "";
+            Swal.fire("Warning", "File is too big!", "warning");
+          } else {
+            previewImage.src = URL.createObjectURL(fileInput.files[0]);
+          }
+        }
+
+        // 👇️ reset file input once you're done
+        
+}
--- a/component/customuploadfoto/customuploadfoto_templ.go
+++ b/component/customuploadfoto/customuploadfoto_templ.go
@@ -0,0 +1,193 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package customuploadfoto
+
+//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 CustomUploadFotoWithPreview(prm models.CustomUploadFotoPrm) 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><div class=\"text-center\"><img id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(prm.ID + "-preview-image")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customuploadfoto\customuploadfoto.templ`, Line: 9, Col: 34}
+		}
+		_, 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
+		}
+		if prm.LinkFoto == "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" src=\"asset-corporate-portal/media/person/person.png\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" src=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(prm.LinkFoto)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customuploadfoto\customuploadfoto.templ`, Line: 13, Col: 23}
+			}
+			_, 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
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"rounded-lg\" alt=\"...\" style=\"width: 10vw; min-width: 100px;\"></div><label for=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(prm.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customuploadfoto\customuploadfoto.templ`, Line: 20, 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("\" class=\"btn btn-light-primary d-block mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(prm.Label)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customuploadfoto\customuploadfoto.templ`, Line: 21, 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("</label> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, OnSelect(prm.ID), OnSelect(prm.ID))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(prm.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customuploadfoto\customuploadfoto.templ`, Line: 24, Col: 14}
+		}
+		_, 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("\" style=\"display: none;\" name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(prm.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customuploadfoto\customuploadfoto.templ`, Line: 26, Col: 18}
+		}
+		_, 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("\" type=\"file\" accept=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(prm.Accept)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\customuploadfoto\customuploadfoto.templ`, Line: 28, 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("\" onchange=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 templ.ComponentScript = OnSelect(prm.ID)
+		_, 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-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 templ.ComponentScript = OnSelect(prm.ID)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10.Call)
+		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 OnSelect(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_OnSelect_4511`,
+		Function: `function __templ_OnSelect_4511(id){const fileInput = document.getElementById(id);
+
+        const previewImage = document.getElementById(id+"-preview-image");
+
+        if (fileInput.files.length > 0) {
+          if (fileInput.files[0].size > 500000) {
+            fileInput.value = "";
+            Swal.fire("Warning", "File is too big!", "warning");
+          } else {
+            previewImage.src = URL.createObjectURL(fileInput.files[0]);
+          }
+        }
+
+        // 👇️ reset file input once you're done
+        
+}`,
+		Call:       templ.SafeScript(`__templ_OnSelect_4511`, id),
+		CallInline: templ.SafeScriptInline(`__templ_OnSelect_4511`, id),
+	}
+}
--- a/handlers/dev/md.pasien.handlers.go
+++ b/handlers/dev/md.pasien.handlers.go
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -321,4 +321,18 @@ func SetupRoutesDev(app *echo.Echo, appStore db.AppStore) {
 	dev.GET("/md/bahan/opendelete", devMdBahanHandlers.HandleOpenDeleteMdBahan)
 	dev.POST("/md/bahan/closedeleteform", devMdBahanHandlers.HandleCloseDeleteMdBahan)
 	dev.POST("/md/bahan/delete", devMdBahanHandlers.HandleDeleteMdBahan)
+
+	//MD Pasien
+	devMdPasienServices := dev_services.NewMdPasienServices(appStore)
+	devMdPasienHandlers := dev_handlers.NewMdPasienHandler(devMdPasienServices)
+	dev.GET("/md/pasien", devMdPasienHandlers.HandleShowMdPasienScreen)
+	dev.GET("/md/pasien/filter", devMdPasienHandlers.HandleSearchMdPasien)
+	dev.GET("/md/pasien/pagination", devMdPasienHandlers.HandlePaginationMdPasien)
+	dev.POST("/md/pasien/add", devMdPasienHandlers.HandleAddMdPasien)
+	dev.POST("/md/pasien/closeaddform", devMdPasienHandlers.HandleCloseModalMdPasien)
+	dev.GET("/md/pasien/openedit", devMdPasienHandlers.HandleOpenEditMdPasien)
+	dev.POST("/md/pasien/closeeditform", devMdPasienHandlers.HandleCloseModalEditMdPasien)
+	dev.GET("/md/pasien/foto/:filename", devMdPasienHandlers.GetFotoProfile)
+	dev.POST("/md/pasien/edit", devMdPasienHandlers.HandleEditMdPasien)
+
 }
--- a/layout/layout_corporate.templ
+++ b/layout/layout_corporate.templ
@@ -114,6 +114,16 @@ templ CorporateLayout(title string, css templ.Component, js templ.Component, nav
 		>
 			// htmx
 			<script src="assets/js/htmx/htmx.min.js"></script>
+			<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>
+			// bootstrap datepicker
+			<script src="assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script>
 			<!--start::Navbar Mobile-->
 			<div id="kt_header_mobile" class="header-mobile align-items-center  header-mobile-fixed ">
 				<!--begin::Logo-->
@@ -258,16 +268,6 @@ templ CorporateLayout(title string, css templ.Component, js templ.Component, nav
 			<!--end::Navbar Laptop With Sidebar-->
 			@sidebaruserprofile
 			<!--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>
-			// bootstrap datepicker
-			<script src="assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js"></script>
 			@js
 			<!--end::Page Scripts-->
 		</body>
--- a/layout/layout_corporate_templ.go
+++ b/layout/layout_corporate_templ.go
@@ -46,7 +46,7 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, navb
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head><!--end::Head--><!--begin::Body--><body id=\"kt_body\" class=\"header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading bg-white\"><script src=\"assets/js/htmx/htmx.min.js\"></script><!--start::Navbar Mobile--><div id=\"kt_header_mobile\" class=\"header-mobile align-items-center  header-mobile-fixed \"><!--begin::Logo--><a href=\"index.html\"><img alt=\"Logo\" src=\"asset-corporate-portal/media/logo/logo.png\" style=\"object-fit: contain;height: 4vh;\"></a><!--end::Logo--><!--begin::Toolbar--><div class=\"d-flex align-items-center\"><!--begin::Aside Mobile Toggle--><button class=\"btn p-0 burger-icon burger-icon-left\" id=\"kt_aside_mobile_toggle\"><span></span></button><!--end::Aside Mobile Toggle--><!--begin::Topbar Mobile Toggle--><button class=\"btn btn-hover-text-primary p-0 ml-2\" id=\"kt_header_mobile_topbar_toggle\"><span class=\"svg-icon svg-icon-xl\"><!--begin::Svg Icon | path:/assets/media/svg/icons/General/User.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,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\" fill=\"#000000\" fill-rule=\"nonzero\" opacity=\"0.3\"></path> <path d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\" fill=\"#000000\" fill-rule=\"nonzero\"></path></g></svg><!--end::Svg Icon--></span></button><!--end::Topbar Mobile Toggle--></div><!--end::Toolbar--></div><!--start::Navbar Mobile--><!--start::Navbar Laptop With Sidebar--><div class=\"d-flex flex-column flex-root\"><!--begin::Page--><div class=\"d-flex flex-row flex-column-fluid page\"><!--begin::Aside--><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=\"index.html\" class=\"brand-logo\" style=\"\"><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\"></polygon> <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> <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) \"></path></g></svg><!--end::Svg Icon--></span></button><!--end::Toolbar--></div><!--end::Brand--><!--begin::Aside Menu-->")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head><!--end::Head--><!--begin::Body--><body id=\"kt_body\" class=\"header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading bg-white\"><script src=\"assets/js/htmx/htmx.min.js\"></script><script src=\"asset-corporate-portal/js/ktappsetting.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script><script src=\"assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js\"></script><!--start::Navbar Mobile--><div id=\"kt_header_mobile\" class=\"header-mobile align-items-center  header-mobile-fixed \"><!--begin::Logo--><a href=\"index.html\"><img alt=\"Logo\" src=\"asset-corporate-portal/media/logo/logo.png\" style=\"object-fit: contain;height: 4vh;\"></a><!--end::Logo--><!--begin::Toolbar--><div class=\"d-flex align-items-center\"><!--begin::Aside Mobile Toggle--><button class=\"btn p-0 burger-icon burger-icon-left\" id=\"kt_aside_mobile_toggle\"><span></span></button><!--end::Aside Mobile Toggle--><!--begin::Topbar Mobile Toggle--><button class=\"btn btn-hover-text-primary p-0 ml-2\" id=\"kt_header_mobile_topbar_toggle\"><span class=\"svg-icon svg-icon-xl\"><!--begin::Svg Icon | path:/assets/media/svg/icons/General/User.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,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\" fill=\"#000000\" fill-rule=\"nonzero\" opacity=\"0.3\"></path> <path d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\" fill=\"#000000\" fill-rule=\"nonzero\"></path></g></svg><!--end::Svg Icon--></span></button><!--end::Topbar Mobile Toggle--></div><!--end::Toolbar--></div><!--start::Navbar Mobile--><!--start::Navbar Laptop With Sidebar--><div class=\"d-flex flex-column flex-root\"><!--begin::Page--><div class=\"d-flex flex-row flex-column-fluid page\"><!--begin::Aside--><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=\"index.html\" class=\"brand-logo\" style=\"\"><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\"></polygon> <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> <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) \"></path></g></svg><!--end::Svg Icon--></span></button><!--end::Toolbar--></div><!--end::Brand--><!--begin::Aside Menu-->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -78,7 +78,7 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, navb
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--begin::Global Config(global config for global JS scripts)--><script src=\"asset-corporate-portal/js/ktappsetting.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script><script src=\"assets/js/pages/crud/forms/widgets/bootstrap-datepicker.js\"></script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--begin::Global Config(global config for global JS scripts)-->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/models/CustomTextField.models.go
+++ b/models/CustomTextField.models.go
@@ -12,5 +12,7 @@ type CustomTextFieldv2Prm struct {
 	Type        string `default:"text"`
 	Value       string `default:""`
 	ErrorMsg    string `default:""`
+	Min         string
+	Max         string
 	ID          string
 }
--- a/models/customdatepicker.models.go
+++ b/models/customdatepicker.models.go
@@ -0,0 +1,11 @@
+package models
+
+type CustomDatePickerPrm struct {
+	Label       string `default:"Label"`
+	Name        string `default:"name"`
+	Placeholder string `default:"Placeholder"`
+	Type        string `default:"text"`
+	Value       string `default:""`
+	ErrorMsg    string `default:""`
+	ID          string
+}
--- a/models/customuploadfoto.models.go
+++ b/models/customuploadfoto.models.go
@@ -0,0 +1,9 @@
+package models
+
+type CustomUploadFotoPrm struct {
+	ID       string `desc:"ID"`
+	Name     string `desc:"name"`
+	Accept   string `desc:"ekstension acc (.png, .jpg, .jpeg)"`
+	Label    string `desc:"label title"`
+	LinkFoto string
+}
--- a/models/pasien.models.go
+++ b/models/pasien.models.go
@@ -0,0 +1,157 @@
+package models
+
+import (
+	"mime/multipart"
+
+	"github.com/a-h/templ"
+)
+
+type Pasien struct {
+	M_PatientID                     int    `db:"M_PatientID"`
+	M_PatientNoReg                  string `db:"M_PatientNoReg"`
+	M_PatientM_TitleID              string `db:"M_PatientM_TitleID"`
+	M_PatientPrefix                 string `db:"M_PatientPrefix"`
+	M_PatientName                   string `db:"M_PatientName"`
+	M_PatientSuffix                 string `db:"M_PatientSuffix"`
+	M_PatientGender                 string `db:"M_PatientGender"`
+	M_PatientDOB                    string `db:"M_PatientDOB"`
+	M_PatientReligionCode           string `db:"M_PatientReligionCode"`
+	M_PatientReligionSystem         string `db:"M_PatientReligionSystem"`
+	M_PatientBloodTypeCode          string `db:"M_PatientBloodTypeCode"`
+	M_PatientBloodTypeSystem        string `db:"M_PatientBloodTypeSystem"`
+	M_PatientBloodRhCode            string `db:"M_PatientBloodRhCode"`
+	M_PatientBloodRhSystem          string `db:"M_PatientBloodRhSystem"`
+	M_PatientEducationCode          string `db:"M_PatientEducationCode"`
+	M_PatientEducationSystem        string `db:"M_PatientEducationSystem"`
+	M_PatientCitizenship            string `db:"M_PatientCitizenship"`
+	M_PatientEtnicCode              string `db:"M_PatientEtnicCode"`
+	M_PatientEtnicSystem            string `db:"M_PatientEtnicSystem"`
+	M_PatientIdentifierCode         string `db:"M_PatientIdentifierCode"`
+	M_PatientIdentifierSystem       string `db:"M_PatientIdentifierSystem"`
+	M_PatientIdentifierValue        string `db:"M_PatientIdentifierValue"`
+	M_PatientJob                    string `db:"M_PatientJob"`
+	M_PatientPosisi                 string `db:"M_PatientPosisi"`
+	M_PatientDivisi                 string `db:"M_PatientDivisi"`
+	M_PatientHp                     string `db:"M_PatientHp"`
+	M_PatientEmail                  string `db:"M_PatientEmail"`
+	M_PatientPhoto                  string `db:"M_PatientPhoto"`
+	M_PatientPhotoLastUpdated       string `db:"M_PatientPhotoLastUpdated"`
+	M_PatientPhotoLastUpdatedUserID string `db:"M_PatientPhotoLastUpdatedUserID"`
+	M_PatientAddress                string `db:"M_PatientAddress"`
+	M_PatientAddressRegionalCd      string `db:"M_PatientAddressRegionalCd"`
+	M_PatientAddressCity            string `db:"M_PatientAddressCity"`
+	M_PatientAddressDistrict        string `db:"M_PatientAddressDistrict"`
+	M_PatientAddressState           string `db:"M_PatientAddressState"`
+	M_PatientAddressCountry         string `db:"M_PatientAddressCountry"`
+	M_PatientIsActive               string `db:"M_PatientIsActive"`
+	M_PatientCreated                string `db:"M_PatientCreated"`
+	M_PatientCreatedUserID          string `db:"M_PatientCreatedUserID"`
+	M_PatientLastUpdated            string `db:"M_PatientLastUpdated"`
+	M_PatientLastUpdatedUserID      string `db:"M_PatientLastUpdatedUserID"`
+	M_PatientDeletedUserID          string `db:"M_PatientDeletedUserID"`
+	M_PatientDeleted                string `db:"M_PatientDeleted"`
+}
+
+type SapaanPasien struct {
+	M_TitleID                int    `db:"M_TitleID"`
+	M_TitleName              string `db:"M_TitleName"`
+	M_TitleGender            string `db:"M_TitleGender"`
+	M_TitleOrder             string `db:"M_TitleOrder"`
+	M_TitleIsActive          string `db:"M_TitleIsActive"`
+	M_TitleCreated           string `db:"M_TitleCreated"`
+	M_TitleCreatedUserID     string `db:"M_TitleCreatedUserID"`
+	M_TitleLastUpdated       string `db:"M_TitleLastUpdated"`
+	M_TitleLastUpdatedUserID string `db:"M_TitleLastUpdatedUserID"`
+	M_TitleDeleted           string `db:"M_TitleDeleted"`
+	M_TitleDeletedUserID     string `db:"M_TitleDeletedUserID"`
+}
+
+type PasienFormComponent struct {
+	IDComponent  string
+	Link         string
+	HxTarget     string
+	HxSwap       string
+	HxInclude    string
+	ModalID      string
+	ModalTitle   string
+	DialogBody   templ.Component
+	DialogAction templ.Component
+	ButtonCLose  templ.Component
+}
+
+type PasineFormBodyComponent struct {
+	IDComponentUpload string
+	IDForm            string
+	SapaanErr         string `json:"sapaanErr"`
+	SapaanItems       templ.Component
+	ImbuhanAwalErr    string `json:"imbuhanAwalErr"`
+	ImbuhanAwalVal    string `json:"imbuhanAwalVal"`
+	NamaErr           string `json:"namaErr"`
+	NamaVal           string `json:"namaVal"`
+	ImbuhanAkhirErr   string `json:"imbuhanAkhirErr"`
+	ImbuhanAkhirVal   string `json:"imbuhanAkhirVal"`
+	GenderErr         string `json:"genderErr"`
+	GenderItems       templ.Component
+	DobErr            string `json:"dobErr"`
+	DobVal            string `json:"dobVal"`
+	YearErr           string `json:"yearErr"`
+	YearVal           string `json:"yearVal"`
+	MonthErr          string `json:"monthErr"`
+	MonthVal          string `json:"monthVal"`
+	DayErr            string `json:"DayErr"`
+	DayVal            string `json:"DayVal"`
+	GoldarErr         string `json:"goldarErr"`
+	GoldarItems       templ.Component
+	RhesusErr         string `json:"rhesusErr"`
+	RhesusItems       templ.Component
+	PekerjaanErr      string `json:"pekerjaanErr"`
+	PekerjaanVal      string `json:"pekerjaanVal"`
+	DepartementErr    string `json:"departementErr"`
+	DepartementVal    string `json:"departementVal"`
+	PosisiErr         string `json:"posisiErr"`
+	PosisiVal         string `json:"posisiVal"`
+	PendidikanErr     string `json:"pendidikanErr"`
+	PendidikanItems   templ.Component
+	EtnisErr          string `json:"etnisErr"`
+	EtnisItems        templ.Component
+	IDErr             string `json:"idErr"`
+	IDItems           templ.Component
+	NoIDErr           string `json:"noIDErr"`
+	NoIDhVal          string `json:"noIDhVal"`
+	HpErr             string `json:"hpErr"`
+	HpVal             string `json:"hpVal"`
+	EmailErr          string `json:"emailErr"`
+	EmailVal          string `json:"emailVal"`
+	HxOnLoad          templ.ComponentScript
+	HxSwapOOB         string
+	LinkFoto          string
+	IDPasien          string
+	CitizenshipVal    string `json:"CitizenshipVal"`
+}
+
+type PasienFormServicesPrm struct {
+	PasienID       string
+	Sapaan         string
+	Imbuhanawal    string
+	Nama           string
+	Imbuhanakhir   string
+	Gender         string
+	Dob            string
+	Tahun          string
+	Bulan          string
+	Hari           string
+	Goldar         string
+	Rhesus         string
+	Pekerjaan      string
+	Departement    string
+	Posisi         string
+	Pendidikan     string
+	Nationality    string
+	Etnis          string
+	Identitas      string
+	Nomoridentitas string
+	Hp             string
+	Email          string
+	UserID         string
+	Foto           *multipart.FileHeader
+}
--- a/models/terminology.models.go
+++ b/models/terminology.models.go
@@ -1,24 +1,28 @@
 package models

+import (
+	"database/sql"
+)
+
 type TerminologyV0 struct {
-	ResourceType    string `db:"resource_type"`
-	AttributePath   string `db:"attribute_path"`
-	Code            string `db:"code"`
-	ParentCode      string `db:"parent_code"`
-	Display         string `db:"display"`
-	DisplayEn       string `db:"display_en"`
-	CodeSystem      string `db:"code_system"`
-	OrderNo         uint   `db:"order_no"`
-	FtIndex         string `db:"ft_index"`
-	UseInd          bool   `db:"use_ind"`
-	Description     string `db:"description"`
-	StatusCd        string `db:"status_cd"`
-	CreatedDttm     string `db:"created_dttm"`
-	CreatedUserID   uint   `db:"created_user_id"`
-	UpdatedDttm     string `db:"updated_dttm"`
-	UpdatedUserID   uint   `db:"updated_user_id"`
-	NullifiedDttm   string `db:"nullified_dttm"`
-	NullifiedUserID uint   `db:"nullified_user_id"`
+	ResourceType    string         `db:"resource_type"`
+	AttributePath   string         `db:"attribute_path"`
+	Code            string         `db:"code"`
+	ParentCode      string         `db:"parent_code"`
+	Display         string         `db:"display"`
+	DisplayEn       string         `db:"display_en"`
+	CodeSystem      string         `db:"code_system"`
+	OrderNo         uint           `db:"order_no"`
+	FtIndex         sql.NullString `db:"ft_index"`
+	UseInd          bool           `db:"use_ind"`
+	Description     sql.NullString `db:"description"`
+	StatusCd        string         `db:"status_cd"`
+	CreatedDttm     string         `db:"created_dttm"`
+	CreatedUserID   uint           `db:"created_user_id"`
+	UpdatedDttm     string         `db:"updated_dttm"`
+	UpdatedUserID   uint           `db:"updated_user_id"`
+	NullifiedDttm   string         `db:"nullified_dttm"`
+	NullifiedUserID uint           `db:"nullified_user_id"`
 }

 type TerminologyParamv0 struct {
--- a/services/app.services.go
+++ b/services/app.services.go
@@ -542,7 +542,7 @@ func GetTerminologyList(inp models.TerminologyParamv0) ([]models.TerminologyV0,

 	if err := dbx.Handlex.Select(&term, query,
 		inp.CodeSystem,
-		inp.CodeSystem); err != nil {
+		inp.AttributePath); err != nil {
 		return nil, fmt.Errorf("error querying database terminology: %v", err)
 	}

--- a/services/dev/md.pasien.services.go
+++ b/services/dev/md.pasien.services.go
@@ -0,0 +1,616 @@
+package dev_services
+
+import (
+	"cpone/db"
+	"cpone/models"
+	dbx "cpone/package/database"
+	"cpone/services"
+	"cpone/utils"
+	"fmt"
+	"io"
+	"math"
+	"os"
+	"path/filepath"
+	"runtime"
+	"strings"
+
+	"go.uber.org/zap"
+)
+
+func NewMdPasienServices(uStore db.AppStore) *MdPasienServices {
+
+	return &MdPasienServices{
+
+		MdPasienStore: uStore,
+	}
+}
+
+type MdPasienServices struct {
+	MdPasienStore db.AppStore
+}
+
+func (su *MdPasienServices) GetListMdPasien(
+	search string,
+	currentPage int,
+	rowPerPage int) ([]models.Pasien, int, error) {
+	var pasienList []models.Pasien
+	var totalData int
+	offset := (currentPage - 1) * rowPerPage
+	prm := "%" + strings.TrimSpace(search) + "%"
+
+	querytotal := `
+		SELECT COUNT(*)
+		FROM m_patient
+		JOIN m_title 
+		ON M_PatientM_TitleID = M_TitleID
+		AND M_TitleIsActive = 'Y'
+		WHERE 
+		(M_PatientNoReg LIKE ? OR M_PatientName LIKE ?)
+		AND M_PatientIsActive = 'Y'
+	`
+	if err := dbx.Handlex.Get(&totalData, querytotal, prm, prm); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+	query := `
+		SELECT m_patient.*,
+			CASE
+				WHEN M_PatientGender = "MALE" THEN "Laki-laki"
+				WHEN M_PatientGender = "FEMALE" THEN "Perempuan"
+				ELSE ""
+			END AS M_PatientGender
+		FROM m_patient
+		JOIN m_title 
+		ON M_PatientM_TitleID = M_TitleID
+		AND M_TitleIsActive = 'Y'
+		WHERE 
+		(M_PatientNoReg LIKE ? OR M_PatientName LIKE ?)
+		AND M_PatientIsActive = 'Y'
+		LIMIT ? OFFSET ?
+	`
+
+	if err := dbx.Handlex.Select(&pasienList, query, prm, prm, rowPerPage, offset); err != nil {
+		return nil, 0, fmt.Errorf("error querying database: %v", err)
+	}
+	totalPage := int(math.Ceil(float64(totalData) / float64(rowPerPage)))
+
+	return pasienList, totalPage, nil
+
+}
+func (su *MdPasienServices) GetMdPasienBreadCrumb(title string) (models.BreadCrumbV1, error) {
+
+	ret := models.BreadCrumbV1{
+		Title: "Master Pasien",
+		Item: []models.ItemBreadCrumbV1{
+			{
+				Item: "Dashboard",
+				Url:  "/dev/dashboard",
+			},
+			{
+				Item: "Master",
+				Url:  "/dev/master",
+			},
+			{
+				Item: "Pasien",
+				Url:  "",
+			},
+		},
+	}
+
+	return ret, nil
+}
+func (su *MdPasienServices) GetPasienTitle() ([]models.SapaanPasien, error) {
+	var sapaanList []models.SapaanPasien
+	query := `
+		SELECT * FROM m_title WHERE M_TitleIsActive = 'Y'
+	`
+
+	if err := dbx.Handlex.Select(&sapaanList, query); err != nil {
+		return nil, fmt.Errorf("error querying database: %v", err)
+	}
+
+	return sapaanList, nil
+
+}
+func (su *MdPasienServices) Addpasien(prm models.PasienFormServicesPrm) (string, error) {
+	logger, _ := zap.NewProduction()
+	tx := dbx.Handlex.MustBegin()
+	var numbering string
+	var newFileName string
+	if prm.Foto != nil {
+		_, b, _, _ := runtime.Caller(0)
+		basepath := filepath.Dir(b)
+		println("Basepath")
+		println(basepath)
+		// defer logger.Sync()
+		// logger.Info("FIlE",
+		// 	zap.Any("filename", file.Filename),
+		// )
+		src, err := prm.Foto.Open()
+		if err != nil {
+			return "", fmt.Errorf("error open file")
+		}
+		defer src.Close()
+		ext := filepath.Ext(prm.Foto.Filename)
+		newFileName = utils.GenerateRandomID(prm.Foto.Filename) + ext
+		uploadDir := filepath.Join(basepath, "..", "..", "uploads", "patient")
+		println(uploadDir)
+		// Menentukan path file tujuan
+		dstPath := filepath.Join(uploadDir, newFileName)
+		// Membuat direktori jika belum ada
+		if err := os.MkdirAll(uploadDir, os.ModePerm); err != nil {
+			return "", fmt.Errorf("error mkdir")
+		}
+		// Membuka file tujuan
+		dst, err := os.Create(dstPath)
+		if err != nil {
+			return "", fmt.Errorf("error create file")
+		}
+		defer dst.Close()
+		// Menyalin konten file yang diupload ke file tujuan
+		if _, err = io.Copy(dst, src); err != nil {
+			return "", fmt.Errorf("error copy file")
+		}
+	}
+
+	qryNum :=
+		`SELECT fn_numbering("P") AS numbering`
+	if err := tx.Get(&numbering, qryNum); err != nil {
+		tx.Rollback()
+		defer logger.Sync()
+		logger.Error("Error get numbering",
+			zap.Any("error", err),
+		)
+		return "", fmt.Errorf("error querying database: %v", err)
+	}
+	gender := strings.Trim(prm.Gender, "@")
+	bloodType := []string{}
+	if prm.Goldar == "" {
+		bloodType = append(bloodType, "")
+		bloodType = append(bloodType, "")
+	} else {
+		bloodType = strings.Split(prm.Goldar, "@")
+		if prm.Goldar != "" && len(bloodType) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split bloodtype",
+				zap.Any("blood Type", bloodType),
+			)
+			return "", fmt.Errorf("error bloodtype")
+		}
+	}
+	rhesus := []string{}
+	if prm.Rhesus == "" {
+		rhesus = append(rhesus, "")
+		rhesus = append(rhesus, "")
+	} else {
+		rhesus = strings.Split(prm.Rhesus, "@")
+		if prm.Rhesus != "" && len(rhesus) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split rhesus",
+				zap.Any("blood Type", rhesus),
+			)
+			return "", fmt.Errorf("error rhesus")
+		}
+	}
+	education := []string{}
+	if prm.Pendidikan == "" {
+		education = append(education, "")
+		education = append(education, "")
+	} else {
+		education = strings.Split(prm.Pendidikan, "@")
+		if prm.Pendidikan != "" && len(education) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split education",
+				zap.Any("blood Type", education),
+			)
+			return "", fmt.Errorf("error education")
+		}
+	}
+	etnis := []string{}
+	if prm.Etnis == "" {
+		etnis = append(etnis, "")
+		etnis = append(etnis, "")
+	} else {
+		etnis = strings.Split(prm.Etnis, "@")
+		if prm.Etnis != "" && len(etnis) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split etnis",
+				zap.Any("blood Type", etnis),
+			)
+			return "", fmt.Errorf("error etnis")
+		}
+	}
+	identifier := strings.Split(prm.Identitas, "@")
+	if len(identifier) != 2 {
+		tx.Rollback()
+		defer logger.Sync()
+		logger.Error("Error split identifier",
+			zap.Any("blood Type", identifier),
+		)
+		return "", fmt.Errorf("error identifier")
+	}
+
+	query := `
+		INSERT INTO m_patient
+		(M_PatientNoReg,
+		M_PatientM_TitleID,
+		M_PatientPrefix,
+		M_PatientName,
+		M_PatientSuffix,
+		M_PatientGender,
+		M_PatientDOB,
+		M_PatientReligionCode,
+		M_PatientReligionSystem,
+		M_PatientBloodTypeCode,
+		M_PatientBloodTypeSystem,
+		M_PatientBloodRhCode,
+		M_PatientBloodRhSystem,
+		M_PatientEducationCode,
+		M_PatientEducationSystem,
+		M_PatientCitizenship,
+		M_PatientEtnicCode,
+		M_PatientEtnicSystem,
+		M_PatientIdentifierCode,
+		M_PatientIdentifierSystem,
+		M_PatientIdentifierValue,
+		M_PatientJob,
+		M_PatientPosisi,
+		M_PatientDivisi,
+		M_PatientHp,
+		M_PatientEmail,
+		M_PatientPhoto,
+		M_PatientAddress,
+		M_PatientAddressRegionalCd,
+		M_PatientAddressCity,
+		M_PatientAddressDistrict,
+		M_PatientAddressState,
+		M_PatientAddressCountry,
+		M_PatientCreatedUserID
+		)
+		VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)
+	`
+
+	rst := tx.MustExec(query,
+		numbering,
+		prm.Sapaan,
+		prm.Imbuhanawal,
+		prm.Nama,
+		prm.Imbuhanakhir,
+		gender,
+		prm.Dob,
+		"",
+		"",
+		bloodType[0],
+		bloodType[1],
+		rhesus[0],
+		rhesus[1],
+		education[0],
+		education[1],
+		prm.Nationality,
+		etnis[0],
+		etnis[1],
+		identifier[0],
+		identifier[1],
+		prm.Nomoridentitas,
+		prm.Pekerjaan,
+		prm.Posisi,
+		prm.Departement,
+		prm.Hp,
+		prm.Email,
+		newFileName,
+		"",
+		"",
+		"",
+		"",
+		"",
+		"",
+		prm.UserID,
+	)
+	_, err := rst.LastInsertId()
+	if err != nil {
+		tx.Rollback()
+		defer logger.Sync()
+		logger.Error("Error insert db",
+			zap.Any("rows Affected", rst),
+			zap.Any("Error", err.Error()),
+		)
+		return "", fmt.Errorf("error querying database: %v", err)
+	}
+	tx.Commit()
+	return numbering, nil
+
+}
+func (su *MdPasienServices) GetPasienByID(id string) (*models.Pasien, error) {
+	logger, _ := zap.NewProduction()
+
+	var pasien models.Pasien
+	query := `SELECT * FROM m_patient WHERE M_PatientID = ?`
+	err := dbx.Handlex.Get(&pasien, query, id)
+	if err != nil {
+		defer logger.Sync()
+		logger.Error("Error get patient",
+			zap.Any("Error", err.Error()),
+		)
+		return nil, fmt.Errorf("error querying database: %v", err)
+	}
+	return &pasien, nil
+}
+
+func (su *MdPasienServices) GetPasienTermonology() (
+	sapaan []models.SapaanPasien,
+	gender []models.TerminologyV0,
+	goldar []models.TerminologyV0,
+	rh []models.TerminologyV0,
+	pendidikan []models.TerminologyV0,
+	etnis []models.TerminologyV0,
+	idType []models.TerminologyV0,
+	err error) {
+	logger, err := zap.NewProduction()
+	sapaanList, err := su.GetPasienTitle()
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERRO GET SAPAAN LIST",
+			zap.Any("error", err),
+		)
+		return nil, nil, nil, nil, nil, nil, nil, fmt.Errorf("error get sapaan")
+	}
+	genderList := []models.TerminologyV0{{Code: "MALE", Display: "Laki Laki"}, {Code: "FEMALE", Display: "Perempuan"}}
+	goldarList, err := services.GetTerminologyList(models.TerminologyParamv0{AttributePath: "Person.blood.type", CodeSystem: "http://loinc.org"})
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERRO GET GOLDAR LIST",
+			zap.Any("error", err),
+		)
+		return nil, nil, nil, nil, nil, nil, nil, fmt.Errorf("error get tipe golongan darah")
+	}
+	rhesusList, err := services.GetTerminologyList(models.TerminologyParamv0{AttributePath: "Person.blood.rhesus", CodeSystem: "http://snomed.info/sct"})
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERRO GET RH LIST",
+			zap.Any("error", err),
+		)
+		return nil, nil, nil, nil, nil, nil, nil, fmt.Errorf("error get tipe rhesus")
+
+	}
+	pendidikanList, err := services.GetTerminologyList(models.TerminologyParamv0{AttributePath: "Person.education", CodeSystem: "xhis.code.education.level"})
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERRO GET PENDIDIKAN LIST",
+			zap.Any("error", err),
+		)
+		return nil, nil, nil, nil, nil, nil, nil, fmt.Errorf("error get pendidikan")
+
+	}
+	etnisList, err := services.GetTerminologyList(models.TerminologyParamv0{AttributePath: "Person.etnicity", CodeSystem: "xhis.code.etnicity"})
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERRO GET ETNIS LIST",
+			zap.Any("error", err),
+		)
+		return nil, nil, nil, nil, nil, nil, nil, fmt.Errorf("error get sapaan")
+
+	}
+	idTypeList, err := services.GetTerminologyList(models.TerminologyParamv0{AttributePath: "Person.identifier.type", CodeSystem: "http://terminology.hl7.org/CodeSystem/v2-0203"})
+	if err != nil {
+		defer logger.Sync()
+		logger.Info("ERRO GET ID TYPE LIST",
+			zap.Any("error", err),
+		)
+		return nil, nil, nil, nil, nil, nil, nil, fmt.Errorf("error get tipe identitas")
+
+	}
+	return sapaanList,
+		genderList,
+		goldarList,
+		rhesusList,
+		pendidikanList,
+		etnisList,
+		idTypeList,
+		nil
+}
+
+func (su *MdPasienServices) EditPasien(prm models.PasienFormServicesPrm) (string, error) {
+	logger, _ := zap.NewProduction()
+	tx := dbx.Handlex.MustBegin()
+	var newFileName string
+	if prm.Foto != nil {
+		_, b, _, _ := runtime.Caller(0)
+		basepath := filepath.Dir(b)
+		println("Basepath")
+		println(basepath)
+		// defer logger.Sync()
+		// logger.Info("FIlE",
+		// 	zap.Any("filename", file.Filename),
+		// )
+		src, err := prm.Foto.Open()
+		if err != nil {
+			return "", fmt.Errorf("error open file")
+		}
+		defer src.Close()
+		ext := filepath.Ext(prm.Foto.Filename)
+		newFileName = utils.GenerateRandomID(prm.Foto.Filename) + ext
+		uploadDir := filepath.Join(basepath, "..", "..", "uploads", "patient")
+		println(uploadDir)
+		// Menentukan path file tujuan
+		dstPath := filepath.Join(uploadDir, newFileName)
+		// Membuat direktori jika belum ada
+		if err := os.MkdirAll(uploadDir, os.ModePerm); err != nil {
+			return "", fmt.Errorf("error mkdir")
+		}
+		// Membuka file tujuan
+		dst, err := os.Create(dstPath)
+		if err != nil {
+			return "", fmt.Errorf("error create file")
+		}
+		defer dst.Close()
+		// Menyalin konten file yang diupload ke file tujuan
+		if _, err = io.Copy(dst, src); err != nil {
+			return "", fmt.Errorf("error copy file")
+		}
+	}
+	updateFotoPath := ""
+	if newFileName != "" {
+		updateFotoPath = "M_PatientPhoto = '" + newFileName + "',"
+	}
+	gender := strings.Trim(prm.Gender, "@")
+	bloodType := []string{}
+	if prm.Goldar == "" {
+		bloodType = append(bloodType, "")
+		bloodType = append(bloodType, "")
+	} else {
+		bloodType = strings.Split(prm.Goldar, "@")
+		if prm.Goldar != "" && len(bloodType) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split bloodtype",
+				zap.Any("blood Type", bloodType),
+			)
+			return "", fmt.Errorf("error bloodtype")
+		}
+	}
+	rhesus := []string{}
+	if prm.Rhesus == "" {
+		rhesus = append(rhesus, "")
+		rhesus = append(rhesus, "")
+	} else {
+		rhesus = strings.Split(prm.Rhesus, "@")
+		if prm.Rhesus != "" && len(rhesus) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split rhesus",
+				zap.Any("blood Type", rhesus),
+			)
+			return "", fmt.Errorf("error rhesus")
+		}
+	}
+	education := []string{}
+	if prm.Pendidikan == "" {
+		education = append(education, "")
+		education = append(education, "")
+	} else {
+		education = strings.Split(prm.Pendidikan, "@")
+		if prm.Pendidikan != "" && len(education) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split education",
+				zap.Any("blood Type", education),
+			)
+			return "", fmt.Errorf("error education")
+		}
+	}
+	etnis := []string{}
+	if prm.Etnis == "" {
+		etnis = append(etnis, "")
+		etnis = append(etnis, "")
+	} else {
+		etnis = strings.Split(prm.Etnis, "@")
+		if prm.Etnis != "" && len(etnis) != 2 {
+			tx.Rollback()
+			defer logger.Sync()
+			logger.Error("Error split etnis",
+				zap.Any("blood Type", etnis),
+			)
+			return "", fmt.Errorf("error etnis")
+		}
+	}
+	identifier := strings.Split(prm.Identitas, "@")
+	if len(identifier) != 2 {
+		tx.Rollback()
+		defer logger.Sync()
+		logger.Error("Error split identifier",
+			zap.Any("blood Type", identifier),
+		)
+		return "", fmt.Errorf("error identifier")
+	}
+
+	query := `
+		UPDATE m_patient
+		SET
+		M_PatientM_TitleID = ?,
+		M_PatientPrefix = ?,
+		M_PatientName = ?,
+		M_PatientSuffix = ?,
+		M_PatientGender = ?,
+		M_PatientDOB = ?,
+		M_PatientReligionCode = ?,
+		M_PatientReligionSystem = ?,
+		M_PatientBloodTypeCode = ?,
+		M_PatientBloodTypeSystem = ?,
+		M_PatientBloodRhCode = ?,
+		M_PatientBloodRhSystem = ?,
+		M_PatientEducationCode = ?,
+		M_PatientEducationSystem = ?,
+		M_PatientCitizenship = ?,
+		M_PatientEtnicCode = ?,
+		M_PatientEtnicSystem = ?,
+		M_PatientIdentifierCode = ?,
+		M_PatientIdentifierSystem = ?,
+		M_PatientIdentifierValue = ?,
+		M_PatientJob = ?,
+		M_PatientPosisi = ?,
+		M_PatientDivisi = ?,
+		M_PatientHp = ?,
+		M_PatientEmail = ?,
+		` + updateFotoPath + `
+		M_PatientAddress = ?,
+		M_PatientAddressRegionalCd = ?,
+		M_PatientAddressCity = ?,
+		M_PatientAddressDistrict = ?,
+		M_PatientAddressState = ?,
+		M_PatientAddressCountry = ?,
+		M_PatientCreatedUserID = ?
+		WHERE M_PatientID = ?
+	`
+
+	rst := tx.MustExec(query,
+		prm.Sapaan,
+		prm.Imbuhanawal,
+		prm.Nama,
+		prm.Imbuhanakhir,
+		gender,
+		prm.Dob,
+		"",
+		"",
+		bloodType[0],
+		bloodType[1],
+		rhesus[0],
+		rhesus[1],
+		education[0],
+		education[1],
+		prm.Nationality,
+		etnis[0],
+		etnis[1],
+		identifier[0],
+		identifier[1],
+		prm.Nomoridentitas,
+		prm.Pekerjaan,
+		prm.Posisi,
+		prm.Departement,
+		prm.Hp,
+		prm.Email,
+		"",
+		"",
+		"",
+		"",
+		"",
+		"",
+		prm.UserID,
+		prm.PasienID,
+	)
+	_, err := rst.LastInsertId()
+	if err != nil {
+		tx.Rollback()
+		defer logger.Sync()
+		logger.Error("Error update db",
+			zap.Any("rows Affected", rst),
+			zap.Any("Error", err.Error()),
+		)
+		return "", fmt.Errorf("error querying database: %v", err)
+	}
+	tx.Commit()
+	return "", nil
+
+}
--- a/utils/getage.utils.go
+++ b/utils/getage.utils.go
@@ -0,0 +1,42 @@
+package utils
+
+import (
+	"fmt"
+	"time"
+)
+
+func daysInMonth(t time.Time) int {
+	firstDayOfMonth := time.Date(t.Year(), t.Month(), 1, 0, 0, 0, 0, t.Location())
+	firstDayOfNextMonth := firstDayOfMonth.AddDate(0, 1, 0)
+	return int(firstDayOfNextMonth.Sub(firstDayOfMonth).Hours() / 24)
+}
+func CalculateStringAge(birthDateStr string) (int, int, int, error) {
+	layout := "2006-01-02"
+	birthDate, err := time.Parse(layout, birthDateStr)
+	if err != nil {
+		return 0, 0, 0, err
+	}
+
+	currentDate := time.Now()
+	if currentDate.Before(birthDate) {
+		return 0, 0, 0, fmt.Errorf("birth date is in the future")
+	}
+
+	years := currentDate.Year() - birthDate.Year()
+	months := int(currentDate.Month() - birthDate.Month())
+	days := currentDate.Day() - birthDate.Day()
+
+	// Adjust if current month and day are before birth month and day
+	if days < 0 {
+		previousMonth := currentDate.AddDate(0, -1, 0)
+		days += daysInMonth(previousMonth)
+		months--
+	}
+
+	if months < 0 {
+		years--
+		months += 12
+	}
+
+	return years, months, days, nil
+}
--- a/views/dev/mdpasien/mdpasien.templ
+++ b/views/dev/mdpasien/mdpasien.templ
@@ -0,0 +1,380 @@
+package dev_mdpasienview
+
+import "cpone/component/customtextfield"
+import "cpone/layout"
+import "cpone/models"
+
+templ MdPasienScreen(tableID string,
+	paginationID string,
+	dialogAddID string,
+	dialogAddBodyID string,
+	dialogEditID string,
+	dialogEditBodyID string,
+	dialogDeleteID string,
+	dialogDeleteBodyID string,
+	breadcrumb templ.Component,
+	tablecontent templ.Component,
+	filterComponent templ.Component,
+	pagination templ.Component,
+	dialogAddCmp templ.Component,
+	dialogEditCmp templ.Component,
+	dialogDeleteCmp templ.Component) {
+	<div class="container-fluid">
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
+			Name:  "dialogAddID",
+			Type:  "hidden",
+			Value: dialogAddID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
+			Name:  "dialogAddBodyID",
+			Type:  "hidden",
+			Value: dialogAddBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
+			Name:  "dialogEditID",
+			Type:  "hidden",
+			Value: dialogEditID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
+			Name:  "dialogEditBodyID",
+			Type:  "hidden",
+			Value: dialogEditBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
+			Name:  "dialogDeleteID",
+			Type:  "hidden",
+			Value: dialogDeleteID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
+			Name:  "dialogDeleteBodyID",
+			Type:  "hidden",
+			Value: dialogDeleteBodyID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
+			Name:  "tableID",
+			Type:  "hidden",
+			Value: tableID})
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
+			Name:  "paginationID",
+			Type:  "hidden",
+			Value: paginationID})
+		<div class="row align-items-center mb-10">
+			<div class="col-md-10 col-sm-12 p-0 ">
+				@breadcrumb
+			</div>
+			<div class="col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none">
+				// <div class="d-block align-items-center">
+				<div class="d-flex justify-content-end">
+					<button
+						type="button"
+						class="btn btn-primary"
+						data-toggle="modal"
+						data-target={ "#" + dialogAddID }
+					>Add New</button>
+				</div>
+			</div>
+			<div class="col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5">
+				<button
+					type="button"
+					class="btn btn-primary btn-block"
+					data-toggle="modal"
+					data-target={ "#" + dialogAddID }
+				>Add New</button>
+			</div>
+		</div>
+		<div id="loading-parent" class=" rounded">
+			@filterComponent
+			@tablecontent
+			@pagination
+			<div id="loading-child" class=" rounded bg-transparent">
+				// <div class="spinner spinner-lg spinner-primary"></div>
+				<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+		</div>
+		<div id="loadingcontent"></div>
+		@dialogAddCmp
+		@dialogEditCmp
+		@dialogDeleteCmp
+	</div>
+}
+
+templ CssMdPasien() {
+}
+
+templ JsMdPasien() {
+	<script type="text/javascript">
+	
+		window.addEventListener("DOMContentLoaded", () => {
+			document.addEventListener('htmx:afterSwap', function(event) {
+				// Reinitialize selectpicker after HTMX content swap
+				$('.selectpicker').selectpicker('refresh');
+			});
+		
+			document.addEventListener('htmx:beforeRequest', function(event) {
+				console.log("Before Request")
+				console.log(event.detail.xhr)
+				console.log(event.detail.target)
+				
+			});
+
+			document.addEventListener('htmx:afterRequest', function(event) {
+				console.log("After Request")
+				console.log(event.detail.xhr)
+				console.log(event.detail.target)
+			});
+			document.addEventListener('htmx:historyCacheError', function(event) {
+				console.log("Error History Cache Error")
+				console.log(event.detail.cause)
+				
+			});
+			document.addEventListener('htmx:historyCacheMissError', function(event) {
+				console.log("Error History Cache Miss Error")
+				console.log(event.detail.xhr)
+				console.log(event.detail.path)
+				
+			});
+			document.addEventListener('htmx:oobErrorNoTarget', function(event) {
+				console.log("Error OOB No Target")
+				console.log(event.detail.content)
+			});
+			document.addEventListener('htmx:onLoadError', function(event) {
+				console.log("Error On Load")
+				console.log(event.detail.xhr)
+				console.log(event.detail.elt)
+				console.log(event.detail.target)
+				console.log(event.detail.exception)
+				console.log(event.detail.requestConfig)
+			});
+			document.addEventListener('htmx:responseError', function(event) {
+				console.log("Error Response")
+				console.log(event.detail.xhr)
+				console.log(event.detail.elt)
+				console.log(event.detail.requestConfig)
+			});
+			document.addEventListener('htmx:sendError', function(event) {
+				console.log("Error Send Error")
+				console.log(event.detail.xhr)
+				console.log(event.detail.elt)
+				console.log(event.detail.requestConfig)
+			});
+			document.addEventListener('htmx:sseError', function(event) {
+				console.log("Error Sse ")
+				console.log(event.detail.xhr)
+				console.log(event.detail.error)
+				console.log(event.detail.source)
+			});
+			document.addEventListener('htmx:swapError', function(event) {
+				console.log("Error Swap Error")
+				console.log(event.detail.xhr)
+				console.log(event.detail.elt)
+				console.log("Target Swap: "+event.detail.target)
+				console.log(event.detail.requestConfig)
+			});
+			document.addEventListener('htmx:targetError', function(event) {
+				console.log("Error target")
+				console.log(event.detail.elt)
+				console.log("Target ID: "+event.detail.target)
+			});
+			htmx.onLoad(function(content) {
+				const dobElement = document.querySelectorAll("input[name='dob']");
+				const dayElement = document.querySelectorAll("input[name='hari']");
+				const monthElement = document.querySelectorAll("input[name='bulan']");
+				const yearElement = document.querySelectorAll("input[name='tahun']");
+
+				for(var i = 0; i < dobElement.length; i++) {
+					dobElement[i].addEventListener("change", (event) => {
+						try {
+							todate= new Date();
+							
+
+							var age= [], fromdate= new Date(event.target.value),
+							y= [todate.getFullYear(), fromdate.getFullYear()],
+							ydiff= y[0]-y[1],
+							m= [todate.getMonth(), fromdate.getMonth()],
+							mdiff= m[0]-m[1],
+							d= [todate.getDate(), fromdate.getDate()],
+							ddiff= d[0]-d[1];
+
+							if(mdiff < 0 || (mdiff=== 0 && ddiff<0))--ydiff;
+							if(mdiff<0) mdiff+= 12;
+							if(ddiff<0){
+								fromdate.setMonth(m[1]+1, 0);
+								ddiff= fromdate.getDate()-d[1]+d[0];
+								--mdiff;
+							}
+							if(ydiff> 0) age.push(ydiff+ ' year'+(ydiff> 1? 's ':' '));
+							if(mdiff> 0) age.push(mdiff+ ' month'+(mdiff> 1? 's':''));
+							if(ddiff> 0) age.push(ddiff+ ' day'+(ddiff> 1? 's':''));
+							if(age.length>1) age.splice(age.length-1,0,' and ');    
+							for (var t = 0; t < yearElement.length; ++t) {
+								yearElement[t].value = ydiff;
+							}
+							for (var m = 0; m < monthElement.length; ++m) {
+								monthElement[m].value = mdiff;
+
+							}
+							for (var d = 0; d < dayElement.length; ++d) {
+								dayElement[d].value = ddiff;
+
+							}
+
+
+							// var tanggalLahir = event.target.value;
+							// console.log("tgl lahir");
+							// console.log(tanggalLahir);
+							// const [ tahunLahir, bulanLahir, hariLahir] = tanggalLahir.split('-').map(Number);
+
+							// // Mendapatkan tanggal saat ini
+							// const tanggalSekarang = new Date();
+							// const tahunSekarang = tanggalSekarang.getFullYear();
+							// const bulanSekarang = tanggalSekarang.getMonth() + 1; // getMonth() dimulai dari 0
+							// const hariSekarang = tanggalSekarang.getDate();
+							// console.log("Menghitung tahun, bulan, dan hari")
+
+							// // Menghitung tahun, bulan, dan hari
+							// let tahunUmur = tahunSekarang - tahunLahir;
+							// let bulanUmur = bulanSekarang - bulanLahir;
+							// let hariUmur = hariSekarang - hariLahir;
+							// console.log("bulanUmur < 0")
+
+							// // Jika bulan negatif, kurangi satu tahun dan tambah 12 bulan
+							// if (bulanUmur < 0) {
+							// 	tahunUmur--;
+							// 	bulanUmur += 12;
+							// }
+							// console.log("hariUmur < 0")
+
+							// // Jika hari negatif, kurangi satu bulan dan tambahkan jumlah hari dari bulan sebelumnya
+							// if (hariUmur < 0) {
+							// 	bulanUmur--;
+
+							// 	// Mendapatkan jumlah hari dalam bulan sebelumnya
+							// 	const bulanSebelumnya = bulanSekarang - 1 < 1 ? 12 : bulanSekarang - 1;
+							// 	const tahunSebelumnya = bulanSebelumnya === 12 ? tahunSekarang - 1 : tahunSekarang;
+							// 	hariUmur += new Date(tahunSebelumnya, bulanSebelumnya, 0).getDate();
+							// }
+							// console.log("sampai mau assign value")
+							// for (var t = 0; t < yearElement.length; ++t) {
+							// 	yearElement[t].value = tahunUmur;
+							// }
+							// for (var m = 0; m < monthElement.length; ++m) {
+							// 	monthElement[m].value = bulanUmur;
+
+							// }
+							// for (var d = 0; d < dayElement.length; ++d) {
+							// 	dayElement[d].value = hariUmur;
+
+							// }
+							// // yearElement[i].value = tahunUmur;
+							// // monthElement[i].value = bulanUmur;
+							// // dayElement[i].value = hariUmur;
+							// console.log("tahunUmur "+ tahunUmur);
+							// console.log("bukanUmur "+ bulanUmur);
+							// console.log("hariUmur "+ hariUmur);
+						} catch (error) {
+						console.error(error);
+						
+						}
+					}, false);
+				}
+				function tentukanTanggalLahir(umurTahun, umurBulan, umurHari) {
+					// Memecah tanggal sekarang menjadi tahun, bulan, dan hari
+					var tanggalSekarang = new Date().toISOString().slice(0, 10)
+					console.log("tanggal sekarang");
+					console.log(tanggalSekarang);
+					const [tahunSekarang, bulanSekarang, hariSekarang] = tanggalSekarang.split('-').map(Number);
+
+
+					// Mengurangi umur dari tanggal sekarang
+					let tahunLahir = tahunSekarang - umurTahun;
+					let bulanLahir = bulanSekarang - umurBulan;
+					let hariLahir = hariSekarang - umurHari;
+
+					// Jika hari negatif, kurangi satu bulan dan tambahkan jumlah hari dari bulan sebelumnya
+					if (hariLahir < 0) {
+						bulanLahir--;
+						
+						// Mendapatkan jumlah hari dalam bulan sebelumnya
+						const bulanSebelumnya = bulanSekarang - 1 < 1 ? 12 : bulanSekarang - 1;
+						const tahunSebelumnya = bulanSebelumnya === 12 ? tahunSekarang - 1 : tahunSekarang;
+						hariLahir += new Date(tahunSebelumnya, bulanSebelumnya, 0).getDate();
+					}
+
+					// Jika bulan negatif, kurangi satu tahun dan tambahkan 12 bulan
+					if (bulanLahir < 0) {
+						tahunLahir--;
+						bulanLahir += 12;
+					}
+
+					// Mengembalikan tanggal lahir dalam format YYYY-MM-DD
+					return `${tahunLahir}-${String(bulanLahir).padStart(2, '0')}-${String(hariLahir).padStart(2, '0')}`;
+				}
+
+				dayElement[0].addEventListener("change", (event) => {
+					const tgll = tentukanTanggalLahir(yearElement[0].value, monthElement[0].value, dayElement[0].value);
+					console.log(`Tanggal Lahir: ${tgll}`);
+					dobElement[0].value = tgll
+				});
+				monthElement[0].addEventListener("change", (event) => {
+					const tgll = tentukanTanggalLahir(yearElement[0].value, monthElement[0].value, dayElement[0].value);
+					console.log(`Tanggal Lahir: ${tgll}`);
+					dobElement[0].value = tgll
+
+				});
+				yearElement[0].addEventListener("change", (event) => {
+					const tgll = tentukanTanggalLahir(yearElement[0].value, monthElement[0].value, dayElement[0].value);
+					console.log(`Tanggal Lahir: ${tgll}`);
+					dobElement[0].value = tgll
+				});
+				dayElement[1].addEventListener("change", (event) => {
+					const tgll = tentukanTanggalLahir(yearElement[1].value, monthElement[1].value, dayElement[1].value);
+					console.log(`Tanggal Lahir: ${tgll}`);
+					dobElement[1].value = tgll
+				});
+				monthElement[1].addEventListener("change", (event) => {
+					const tgll = tentukanTanggalLahir(yearElement[1].value, monthElement[1].value, dayElement[1].value);
+					console.log(`Tanggal Lahir: ${tgll}`);
+					dobElement[1].value = tgll
+
+				});
+				yearElement[1].addEventListener("change", (event) => {
+					const tgll = tentukanTanggalLahir(yearElement[1].value, monthElement[1].value, dayElement[1].value);
+					console.log(`Tanggal Lahir: ${tgll}`);
+					dobElement[1].value = tgll
+				});
+			});
+
+			
+		});
+		
+		
+		
+	</script>
+}
+
+script BeforeRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}
+
+script AfterRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}
+
+templ ShowMdPasienScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
+	navbarmenu templ.Component,
+	navbaruser templ.Component,
+	userprofile templ.Component) {
+	@layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
+		@cmp
+	}
+}
--- a/views/dev/mdpasien/mdpasien_templ.go
+++ b/views/dev/mdpasien/mdpasien_templ.go
--- a/views/dev/mdpasien/mdpasienformmodal.templ
+++ b/views/dev/mdpasien/mdpasienformmodal.templ
@@ -0,0 +1,585 @@
+package dev_mdpasienview
+
+import "cpone/models"
+import "cpone/component/modal"
+import "cpone/component/customdatepicker"
+import "cpone/component/customdropdown"
+import "cpone/component/customtextfield"
+import "strconv"
+import "cpone/component/customuploadfoto"
+
+templ PasienForm(data models.PasienFormComponent) {
+	<div class="">
+		<form
+			id={ data.IDComponent }
+			hx-encoding="multipart/form-data"
+			hx-post={ data.Link }
+			class="form"
+			hx-target={ data.HxTarget }
+			hx-swap={ data.HxSwap }
+			hx-include={ data.HxInclude }
+			hx-indicator=".formloading"
+			hx-on::before-request={ HandleFormBeforeRequest() }
+			hx-on::after-request={ HandleFormAfterRequest() }
+		>
+			@modalcomponent.ModalXL(data.ModalID,
+				data.ModalTitle,
+				data.DialogBody,
+				data.DialogAction,
+				data.ButtonCLose)
+		</form>
+	</div>
+}
+
+script HandleFormBeforeRequest() {
+	console.log("handle disable btn add");
+	const btnActCancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+	for (let i = 0; i < btnActCancel.length; i++) {
+		btnActCancel[i].setAttribute('disabled', 'true');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+		btnactsavedata[i].setAttribute('disabled', 'true');
+		
+	}
+}
+
+script HandleFormAfterRequest() {
+	console.log("handle enable btn add");
+
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ TmpisiDD() {
+	<option>a</option>
+}
+
+templ ListItemSapaan(
+	dataStation []models.SapaanPasien,
+	selected int) {
+	for _, v := range dataStation {
+		if v.M_TitleID == selected {
+			<option value={ strconv.Itoa(v.M_TitleID) } selected="selected">{ v.M_TitleName }</option>
+		} else {
+			<option value={ strconv.Itoa(v.M_TitleID) }>{ v.M_TitleName }</option>
+		}
+	}
+}
+
+templ ListItemTerminology(
+	dataStation []models.TerminologyV0,
+	selected string) {
+	for _, v := range dataStation {
+		if (v.Code + "@" + v.CodeSystem) == selected {
+			<option value={ v.Code + "@" + v.CodeSystem } selected="selected">{ v.Display }</option>
+		} else {
+			<option value={ v.Code + "@" + v.CodeSystem }>{ v.Display }</option>
+		}
+	}
+}
+
+templ BodyFormPasien(prm models.PasineFormBodyComponent) {
+	<div id={ prm.IDForm } hx-swap-oob={ prm.HxSwapOOB } hx-on::load={ prm.HxOnLoad }>
+		<div class="container p-0">
+			<div class="row">
+				<div class="col-lg-10">
+					<!--begin::Row 1-->
+					<div class="form-row">
+						<div class="col-md-6 col-lg-2">
+							@customdropdown.CustomDropdownForm(models.CustomDropdownV2Prm{
+								Name:        "sapaan",
+								Label:       "Sapaan",
+								Placeholder: "Sapaan",
+								ErrorMsg:    prm.SapaanErr,
+								ListItem:    prm.SapaanItems})
+						</div>
+						<div class="col-md-6 col-lg-3">
+							@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+								Label:       "Imbuhan Awal",
+								Name:        "imbuhanawal",
+								Placeholder: "Imbuhan Awal",
+								Type:        "text",
+								Value:       prm.ImbuhanAwalVal,
+								ErrorMsg:    prm.ImbuhanAwalErr})
+						</div>
+						<div class="col-md-6 col-lg-5">
+							@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+								Label:       "Nama",
+								Name:        "nama",
+								Placeholder: "Nama",
+								Type:        "text",
+								Value:       prm.NamaVal,
+								ErrorMsg:    prm.NamaErr})
+						</div>
+						<div class="col-md-6 col-lg-2">
+							@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+								Label:       "Imbuhan Akhir",
+								Name:        "imbuhanakhir",
+								Placeholder: "Imbuhan Akhir",
+								Type:        "text",
+								Value:       prm.ImbuhanAkhirVal,
+								ErrorMsg:    prm.ImbuhanAkhirErr})
+						</div>
+					</div>
+					<!--end::Row 1-->
+					<!--begin::Row 2-->
+					<div class="row mt-5">
+						<div class="col-md-6">
+							<!-- begin::Jenis Kelamin -->
+							@customdropdown.CustomDropdownForm(models.CustomDropdownV2Prm{
+								Name:        "gender",
+								Label:       "Jenis Kelamin",
+								Placeholder: "Jenis Kelamin",
+								ErrorMsg:    prm.GenderErr,
+								ListItem:    prm.GenderItems})
+							<!-- end::Jenis Kelamin -->
+						</div>
+						<div class="col-md-6">
+							<!-- begin::Tanggal Lahir -->
+							@customdatepicker.CustomDatePickerV2(models.CustomDatePickerPrm{Label: "Tanggal Lahir",
+								Name:        "dob",
+								Placeholder: "Tanggal lahir",
+								Value:       prm.DobVal,
+							
+								ErrorMsg: prm.DobErr,
+							})
+							<!-- 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">
+									@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+									
+										Label:       "Tahun",
+										Name:        "tahun",
+										Placeholder: "Tahun",
+										Type:        "number",
+										Value:       prm.YearVal,
+										ErrorMsg:    prm.YearErr})
+								</div>
+								<div class="col">
+									@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+									
+										Label:       "Bulan",
+										Name:        "bulan",
+										Placeholder: "Bulan",
+										Min:         "0",
+										Max:         "12",
+										Type:        "number",
+										Value:       prm.MonthVal,
+										ErrorMsg:    prm.MonthErr})
+								</div>
+								<div class="col">
+									@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+									
+										Label:       "Hari",
+										Name:        "hari",
+										Placeholder: "Hari",
+										Type:        "number",
+										Min:         "0",
+										Max:         "31",
+										Value:       prm.DayVal,
+										ErrorMsg:    prm.DayErr})
+								</div>
+							</div>
+							<!-- end::Umur -->
+						</div>
+						<div class="col-lg-6">
+							<!-- begin::Darah -->
+							<div class="form-row">
+								<!-- begin::Golongan Darah -->
+								<div class="col">
+									@customdropdown.CustomDropdownForm(models.CustomDropdownV2Prm{
+										Name:        "goldar",
+										Label:       "Golongan Darah",
+										Placeholder: "Golongan Darah",
+										ErrorMsg:    prm.GoldarErr,
+										ListItem:    prm.GoldarItems})
+								</div>
+								<!-- end::Golongan Darah -->
+								<!-- begin::Rhesus -->
+								<div class="col">
+									@customdropdown.CustomDropdownForm(models.CustomDropdownV2Prm{
+										Name:        "rhesus",
+										Label:       "Rhesus",
+										Placeholder: "Rhesus",
+										ErrorMsg:    prm.RhesusErr,
+										ListItem:    prm.RhesusItems})
+								</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">
+							@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+								Label:       "Pekerjaan",
+								Name:        "pekerjaan",
+								Placeholder: "Pekerjaan",
+								Type:        "text",
+								Value:       prm.PekerjaanVal,
+								ErrorMsg:    prm.PekerjaanErr})
+						</div>
+						<!--end::Pekerjaan-->
+						<!--begin::Departemen-->
+						<div class="col-md-6">
+							@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+								Label:       "Departement",
+								Name:        "departement",
+								Placeholder: "Departement",
+								Type:        "text",
+								Value:       prm.DepartementVal,
+								ErrorMsg:    prm.DepartementErr})
+						</div>
+						<!--end::Departemen-->
+					</div>
+					<!--end::Row 4-->
+					<!--begin::Row 5-->
+					<div class="row mt-5">
+						<!--begin::Posisi-->
+						<div class="col-md-6">
+							@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+								Label:       "Posisi",
+								Name:        "posisi",
+								Placeholder: "Posisi",
+								Type:        "text",
+								Value:       prm.PosisiVal,
+								ErrorMsg:    prm.PosisiErr})
+						</div>
+						<!--end::Posisi-->
+						<!--Begin::Pendidikan Terakhir-->
+						<div class="col-md-6">
+							@customdropdown.CustomDropdownForm(models.CustomDropdownV2Prm{
+								Name:        "pendidikan",
+								Label:       "Pendidikan Terakhir",
+								Placeholder: "Pendidikan Terakhir",
+								ErrorMsg:    prm.PendidikanErr,
+								ListItem:    prm.PendidikanItems})
+						</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-around"
+											style="display: flex; gap: 20px;"
+										>
+											<label
+												style="display: flex; align-items: center; gap: 5px;"
+											>
+												<input
+													type="radio"
+													if prm.CitizenshipVal == "WNI" {
+														checked="checked"
+													}
+													if prm.CitizenshipVal == "" {
+														checked="checked"
+													}
+													name="nationality"
+													value="WNI"
+												/>
+												<p style="margin: 0;">WNI</p>
+											</label>
+											<label
+												style="display: flex; align-items: center; gap: 5px;"
+											>
+												<input
+													type="radio"
+													if prm.CitizenshipVal == "WNA" {
+														checked="checked"
+													}
+													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">
+							@customdropdown.CustomDropdownForm(models.CustomDropdownV2Prm{
+								Name:        "etnis",
+								Label:       "Etnis",
+								Placeholder: "Etnis",
+								ErrorMsg:    prm.EtnisErr,
+								ListItem:    prm.EtnisItems})
+						</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">
+									@customdropdown.CustomDropdownForm(models.CustomDropdownV2Prm{
+										Name:        "identitas",
+										Label:       "Identitas",
+										Placeholder: "Identitas",
+										ErrorMsg:    prm.IDErr,
+										ListItem:    prm.IDItems})
+								</div>
+							</div>
+						</div>
+						<!--end::Identitas-->
+						<!--Begin::Nomor Identitas-->
+						<div class="col-md-6">
+							<div class="form-row">
+								<div class="col">
+									@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+										Label:       "Nomor Identitas",
+										Name:        "nomoridentitas",
+										Placeholder: "Nomor Identitas",
+										Type:        "text",
+										Value:       prm.NoIDhVal,
+										ErrorMsg:    prm.NoIDErr})
+								</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">
+									@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+										Label:       "Nomor Hp",
+										Name:        "hp",
+										Placeholder: "Nomor Hp",
+										Type:        "text",
+										Value:       prm.HpVal,
+										ErrorMsg:    prm.HpErr})
+								</div>
+							</div>
+						</div>
+						<!--end::Nomor Hp-->
+						<!--Begin::Email-->
+						<div class="col-md-6">
+							<div class="form-row">
+								<div class="col">
+									@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{
+										Label:       "Email",
+										Name:        "email",
+										Placeholder: "email",
+										Type:        "text",
+										Value:       prm.EmailVal,
+										ErrorMsg:    prm.EmailErr})
+								</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>
+					// <div>
+					// 	<div class="text-center">
+					// 		<img
+					// 			id="preview-image"
+					// 			if prm.LinkFoto == "" {
+					// 				src="asset-corporate-portal/media/person/person.png"
+					// 			} else {
+					// 				src={ prm.LinkFoto }
+					// 			}
+					// 			class="rounded-lg"
+					// 			alt="..."
+					// 			style="width: 10vw; min-width: 100px;"
+					// 		/>
+					// 	</div>
+					// 	<label for="file-upload" class="btn btn-light-primary d-block mt-5">
+					// 		Update Foto
+					// 	</label>
+					// 	<input
+					// 		id="file-upload"
+					// 		style="display: none;"
+					// 		name="pasienprofile"
+					// 		type="file"
+					// 		accept=".png, .jpg, .jpeg"
+					// 		onchange={ OnSelect() }
+					// 		hx-on::load={ OnSelect() }
+					// 	/>
+					// </div>
+					<div>
+						@customuploadfoto.CustomUploadFotoWithPreview(models.CustomUploadFotoPrm{
+							ID:       prm.IDComponentUpload,
+							Name:     "pasienprofile",
+							Accept:   ".png, .jpg, .jpeg",
+							Label:    "Update Foto",
+							LinkFoto: prm.LinkFoto,
+						})
+					</div>
+					@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "pasienid",
+						Name:  "pasienid",
+						Type:  "hidden",
+						Value: prm.IDPasien})
+					<!-- person.png end -->
+				</div>
+			</div>
+		</div>
+	</div>
+}
+
+script JsHideModal(modalID string) {
+	$(modalID).modal('hide')
+}
+
+script OnSelect() {
+	const fileInput = document.getElementById("file-upload");
+
+        const previewImage = document.getElementById("preview-image");
+
+        if (fileInput.files.length > 0) {
+          if (fileInput.files[0].size > 500000) {
+            fileInput.value = "";
+            Swal.fire("Warning", "File is too big!", "warning");
+          } else {
+            previewImage.src = URL.createObjectURL(fileInput.files[0]);
+          }
+        }
+
+        // 👇️ reset file input once you're done
+        
+}
+
+script JsShowModal(modalID string) {
+	$(modalID).modal('show')
+	const btnactcancel = document.querySelectorAll('.btnactcancel');
+	const btnactsavedata = document.querySelectorAll('.btnactsavedata');
+
+
+	for (let i = 0; i < btnactcancel.length; i++) {
+			btnactcancel[i].removeAttribute('disabled');
+		
+	}
+	for (let i = 0; i < btnactsavedata.length; i++) {
+			btnactsavedata[i].removeAttribute('disabled');
+		
+	}
+}
+
+templ ActionFormPasien(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<div>
+		<button
+			hx-on::after-request={ JsHideModal(modalID) }
+			hx-post={ LinkClose }
+			hx-target={ targetClose }
+			hx-swap={ hxSwapClose }
+			hx-indicator=".cancelloading"
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel "
+			data-dismiss="modal"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+			Batal
+		</button>
+		<button
+			type="submit"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+		>
+			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+			Simpan
+		</button>
+	</div>
+}
+
+templ BtnCloseFormPasien(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
+	<button
+		hx-post={ LinkClose }
+		hx-target={ targetClose }
+		hx-swap={ hxSwapClose }
+		type="button"
+		hx-on::after-request={ JsHideModal(modalID) }
+		class="close btnactcancel"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
+templ DeleteConfirmationBody(inputId string,
+	componentID string,
+	message string,
+	datHeader []string,
+	dataText []string,
+	hxOnLoad templ.ComponentScript) {
+	<div id={ componentID } hx-on::load={ hxOnLoad }>
+		<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>
+		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{Name: "pasienid", ID: "pasienid", Type: "hidden", Value: inputId})
+	</div>
+}
--- a/views/dev/mdpasien/mdpasienformmodal_templ.go
+++ b/views/dev/mdpasien/mdpasienformmodal_templ.go
--- a/views/dev/mdpasien/mdpasientable.templ
+++ b/views/dev/mdpasien/mdpasientable.templ
@@ -0,0 +1,131 @@
+package dev_mdpasienview
+
+import "cpone/component/table"
+import "cpone/models"
+import "strconv"
+
+templ TablePasien(data []models.Pasien,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	<div id={ tableID } hx-swap-oob="true">
+		@tablecomponent.TableV3([]string{"PID", "NAMA", "NO HP", "JENIS KELAMIN", "AKSI"},
+			[]string{"20%", "30%", "10%", "20%", "20%"},
+			RowPasien(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			))
+	</div>
+}
+
+templ RowPasien(data []models.Pasien,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) {
+	if len(data) == 0 {
+		<tr>
+			<td colspan="5" class="text-center">Data Tidak Ditemukan</td>
+		</tr>
+	}
+	for _, v := range data {
+		<tr>
+			<td>{ v.M_PatientNoReg }</td>
+			<td>{ v.M_PatientName }</td>
+			<td>{ v.M_PatientHp }</td>
+			<td>{ v.M_PatientGender }</td>
+			<td>
+				@TableAction(v.M_PatientID,
+					hxGetEdit,
+					hxTargetEdit,
+					hxSwapEdit,
+					hxIncludeEdit,
+					hxGetDelete,
+					hxTargetDelete,
+					hxSwapDelete,
+					hxIncludeDelete,
+				)
+			</td>
+		</tr>
+	}
+}
+
+templ TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+
+) {
+	<div class="row px-5 d-flex justify-content-around">
+		<a
+			type="button"
+			class="btnactbhn col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm"
+			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetEdit }
+			hx-swap={ hxSwapEdit }
+			hx-include={ hxIncludeEdit }
+			hx-indicator={ "#spnredt" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnredt" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Edit
+		</a>
+		<a
+			type="button"
+			class=" btnactbhn col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
+			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
+			hx-target={ hxTargetDelete }
+			hx-swap={ hxSwapDelete }
+			hx-include={ hxIncludeDelete }
+			hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
+			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
+			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
+		>
+			<span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+			Hapus
+		</a>
+	</div>
+}
+
+script HandleBeforeRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactbhn');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	console.log(id)
+}
+
+script HandleAfterRequestRow(id string) {
+	var cusid_ele = document.getElementsByClassName('btnactbhn');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	console.log(id)
+}
--- a/views/dev/mdpasien/mdpasientable_templ.go
+++ b/views/dev/mdpasien/mdpasientable_templ.go
@@ -0,0 +1,464 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package dev_mdpasienview
+
+//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/table"
+import "cpone/models"
+import "strconv"
+
+func TablePasien(data []models.Pasien,
+	tableID string,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete string,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(tableID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 18, 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("\" hx-swap-oob=\"true\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.TableV3([]string{"PID", "NAMA", "NO HP", "JENIS KELAMIN", "AKSI"},
+			[]string{"20%", "30%", "10%", "20%", "20%"},
+			RowPasien(data,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			)).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
+	})
+}
+
+func RowPasien(data []models.Pasien,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(data) == 0 {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td colspan=\"5\" class=\"text-center\">Data Tidak Ditemukan</td></tr>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		for _, v := range data {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_PatientNoReg)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 51, 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("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_PatientName)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 52, Col: 24}
+			}
+			_, 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("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_PatientHp)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 53, 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("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var7 string
+			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(v.M_PatientGender)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 54, 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("</td><td>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = TableAction(v.M_PatientID,
+				hxGetEdit,
+				hxTargetEdit,
+				hxSwapEdit,
+				hxIncludeEdit,
+				hxGetDelete,
+				hxTargetDelete,
+				hxSwapDelete,
+				hxIncludeDelete,
+			).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td></tr>")
+			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 TableAction(
+	id int,
+	hxGetEdit string,
+	hxTargetEdit string,
+	hxSwapEdit string,
+	hxIncludeEdit string,
+	hxGetDelete string,
+	hxTargetDelete string,
+	hxSwapDelete string,
+	hxIncludeDelete 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_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row px-5 d-flex justify-content-around\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\"btnactbhn col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetEdit + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 87, Col: 49}
+		}
+		_, 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-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(hxTargetEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 88, Col: 27}
+		}
+		_, 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("\" hx-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 89, Col: 23}
+		}
+		_, 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-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeEdit)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 90, Col: 29}
+		}
+		_, 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-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs("#spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 91, Col: 47}
+		}
+		_, 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 = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, 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-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("spnredt" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 95, Col: 42}
+		}
+		_, 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("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Edit\r</a> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleBeforeRequestRow(strconv.Itoa(id)), HandleAfterRequestRow(strconv.Itoa(id)))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a type=\"button\" class=\" btnactbhn col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(hxGetDelete + "?id=" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 101, Col: 51}
+		}
+		_, 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(hxTargetDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 102, Col: 29}
+		}
+		_, 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-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var19 string
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 103, Col: 25}
+		}
+		_, 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-include=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxIncludeDelete)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 104, Col: 31}
+		}
+		_, 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-indicator=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs("#spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 105, Col: 47}
+		}
+		_, 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("\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 templ.ComponentScript = HandleBeforeRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var22.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_Var23 templ.ComponentScript = HandleAfterRequestRow(strconv.Itoa(id))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var23.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs("spnrdel" + strconv.Itoa(id))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpasien\mdpasientable.templ`, Line: 109, Col: 42}
+		}
+		_, 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("\" class=\"htmx-indicator spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Hapus\r</a></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 HandleBeforeRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleBeforeRequestRow_7d4f`,
+		Function: `function __templ_HandleBeforeRequestRow_7d4f(id){var cusid_ele = document.getElementsByClassName('btnactbhn');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.add('disabled');
+	}
+	console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleBeforeRequestRow_7d4f`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleBeforeRequestRow_7d4f`, id),
+	}
+}
+
+func HandleAfterRequestRow(id string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleAfterRequestRow_ce9e`,
+		Function: `function __templ_HandleAfterRequestRow_ce9e(id){var cusid_ele = document.getElementsByClassName('btnactbhn');
+	for (var i = 0; i < cusid_ele.length; ++i) {
+		var item = cusid_ele[i];  
+		item.classList.remove('disabled');
+	}
+	console.log(id)
+}`,
+		Call:       templ.SafeScript(`__templ_HandleAfterRequestRow_ce9e`, id),
+		CallInline: templ.SafeScriptInline(`__templ_HandleAfterRequestRow_ce9e`, id),
+	}
+}
Author	SHA1	Message	Date
Sas Andy	d6fb303970	mdpasien add edit	2024-06-04 10:58:24 +07:00
Sas Andy	2e61efa16f	Merge branch 'andy/mdpatient' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/mdpatient	2024-05-30 13:49:40 +07:00
Sas Andy	429dd01928	tmp datepicker	2024-05-30 13:49:32 +07:00
Sas Andy	50f08ec99f	search & oagination md pasien	2024-05-30 13:49:32 +07:00
Sas Andy	6aaa3b92e5	tmp datepicker	2024-05-30 10:56:31 +07:00
Sas Andy	edebafa39c	modal xl	2024-05-30 09:35:37 +07:00
Sas Andy	ac8cd1072e	Merge branch 'andy/mdpatient' of https://devone.aplikasi.web.id/gitea/andy/corporate_portal_westerindo into andy/mdpatient	2024-05-29 16:32:10 +07:00
Sas Andy	0ac2756517	search & oagination md pasien	2024-05-29 16:31:55 +07:00
Sas Andy	66ee6a7839	search & oagination md pasien	2024-05-29 16:30:42 +07:00