@asdp/ferryui 0.1.22-dev.8893 → 0.1.22-dev.8898

package/dist/index.js

@@ -7873,6 +7873,24 @@ var DEFAULT_LABELS22 = {
     idTypeOtherPlaceholder: "DD/MM/YYYY",
     countryLabel: "Negara Penerbit Passport",
     countryPlaceholder: "Masukkan Negara",
+    autofill: "Isi Data Otomatis",
+    // Scan Identity
+    selectIdTypeTitle: "Isi Data Dengan Scan Identitas",
+    scanIdentityTitle: "Scan Identitas",
+    scanInstructions1: "Posisikan kartu identitas Anda di dalam bingkai.",
+    scanInstructions2: "Pastikan foto terlihat jelas dan tidak buram.",
+    readingData: "Membaca data dari foto...",
+    nameRead: "Nama berhasil dibaca",
+    idNumberRead: "Nomor identitas berhasil dibaca",
+    cityRead: "Kota berhasil dibaca",
+    scanUnreadable: "Hasil scan tidak terbaca",
+    photoNotClear: "Tulisan pada foto tidak terlihat jelas.",
+    retakeAdvice: "Coba ambil ulang foto dengan pencahayaan yang lebih baik.",
+    retakeButton: "Ambil Ulang",
+    manualInputButton: "Input Manual",
+    cancelScanButton: "Batal",
+    savePhotoButton: "Simpan Foto",
+    cameraPermissionError: "Tidak dapat mengakses kamera. Pastikan Anda memberikan izin akses kamera.",
     errors: {
       requiredTitle: "Title harus dipilih",
       requiredName: "Nama lengkap harus diisi",
@@ -7911,6 +7929,24 @@ var DEFAULT_LABELS22 = {
     idTypeOtherPlaceholder: "DD/MM/YYYY",
     countryLabel: "Country of Issue",
     countryPlaceholder: "Enter Country",
+    autofill: "Autofill",
+    // Scan Identity
+    selectIdTypeTitle: "Fill Data by Scanning Identity",
+    scanIdentityTitle: "Scan Identity",
+    scanInstructions1: "Position your identity card within the frame.",
+    scanInstructions2: "Make sure the photo is clear and not blurry.",
+    readingData: "Reading data from photo...",
+    nameRead: "Name read successfully",
+    idNumberRead: "Identity number read successfully",
+    cityRead: "City read successfully",
+    scanUnreadable: "Scan result is unreadable",
+    photoNotClear: "The text on the photo is not clear.",
+    retakeAdvice: "Try retaking the photo with better lighting.",
+    retakeButton: "Retake",
+    manualInputButton: "Manual Input",
+    cancelScanButton: "Cancel",
+    savePhotoButton: "Save Photo",
+    cameraPermissionError: "Cannot access camera. Please make sure you have granted camera permission.",
     errors: {
       requiredTitle: "Title is required",
       requiredName: "Full name is required",
@@ -7961,6 +7997,152 @@ var useStyles22 = reactComponents.makeStyles({
     gap: "1rem",
     justifyContent: "flex-end",
     marginTop: "1rem"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  idTypeList: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  idTypeItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem 0",
+    cursor: "pointer"
+  },
+  idTypeText: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightRegular
+  },
+  // Scan Identity styles
+  scanSurface: {
+    width: "520px"
+  },
+  scannerWrapper: {
+    position: "relative",
+    width: "100%",
+    height: "280px",
+    overflow: "hidden",
+    backgroundColor: "#2f2f2f",
+    marginTop: "30px",
+    marginBottom: "30px"
+  },
+  videoElement: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  scanOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: "none"
+  },
+  darkOverlay: {
+    position: "absolute",
+    background: "rgba(0, 0, 0, 0.6)"
+  },
+  overlayTop: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: "10px"
+  },
+  overlayBottom: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: "10px"
+  },
+  overlayLeft: {
+    top: "10px",
+    left: 0,
+    width: "10px",
+    bottom: "10px"
+  },
+  overlayRight: {
+    top: "10px",
+    right: 0,
+    width: "10px",
+    bottom: "10px"
+  },
+  scanFrame: {
+    position: "absolute",
+    top: "10px",
+    left: "10px",
+    right: "10px",
+    bottom: "10px",
+    border: "3px solid rgba(255, 255, 255, 0.9)",
+    borderRadius: "8px"
+  },
+  corner: {
+    position: "absolute",
+    width: "30px",
+    height: "30px",
+    border: "4px solid white"
+  },
+  cornerTopLeft: {
+    top: "-2px",
+    left: "-2px",
+    borderRight: "none",
+    borderBottom: "none",
+    borderTopLeftRadius: "8px"
+  },
+  cornerTopRight: {
+    top: "-2px",
+    right: "-2px",
+    borderLeft: "none",
+    borderBottom: "none",
+    borderTopRightRadius: "8px"
+  },
+  cornerBottomLeft: {
+    bottom: "-2px",
+    left: "-2px",
+    borderRight: "none",
+    borderTop: "none",
+    borderBottomLeftRadius: "8px"
+  },
+  cornerBottomRight: {
+    bottom: "-2px",
+    right: "-2px",
+    borderLeft: "none",
+    borderTop: "none",
+    borderBottomRightRadius: "8px"
+  },
+  scanLine: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: "2px",
+    background: "linear-gradient(90deg, transparent, #0be6e6, transparent)",
+    animationName: {
+      from: { top: "0" },
+      to: { top: "100%" }
+    },
+    animationDuration: "2s",
+    animationTimingFunction: "linear",
+    animationIterationCount: "infinite"
+  },
+  checklistItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "14px"
+  },
+  spin: {
+    display: "inline-flex",
+    animationName: {
+      from: { transform: "rotate(0deg)" },
+      to: { transform: "rotate(360deg)" }
+    },
+    animationDuration: "1s",
+    animationTimingFunction: "linear",
+    animationIterationCount: "infinite"
   }
 });
 var ModalPassengerForm = ({
@@ -7974,7 +8156,8 @@ var ModalPassengerForm = ({
   isAdultForm = true,
   titleOptions,
   cityOptions,
-  ticketClassOptions
+  ticketClassOptions,
+  onScanComplete
 }) => {
   const styles = useStyles22();
   const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
@@ -7983,6 +8166,15 @@ var ModalPassengerForm = ({
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
+  const idTypes = ["KTP", "SIM", "Paspor"];
+  const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] = React5.useState(false);
+  const [isModalScanOpen, setIsModalScanOpen] = React5.useState(false);
+  const [scannedIdType, setScannedIdType] = React5.useState(null);
+  const [scanStatus, setScanStatus] = React5.useState("idle");
+  const [scanStep, setScanStep] = React5.useState(0);
+  const [capturedImage, setCapturedImage] = React5.useState(null);
+  const [stream, setStream] = React5.useState(null);
+  const videoRef = React5.useRef(null);
   const { control, handleSubmit, reset, watch, setValue } = reactHookForm.useForm({
     defaultValues
   });
@@ -7996,6 +8188,139 @@ var ModalPassengerForm = ({
       setValue("idNumber", "");
     }
   }, [idType, watchPassportCountry, setValue]);
+  const stopCamera = React5.useCallback(() => {
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
+      setStream(null);
+    }
+    if (videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.srcObject = null;
+    }
+  }, [stream]);
+  const startCamera = React5.useCallback(async () => {
+    try {
+      const mediaStream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: "environment",
+          width: { ideal: 1280 },
+          height: { ideal: 720 }
+        }
+      });
+      setStream(mediaStream);
+    } catch (err) {
+      console.error("Failed to start camera:", err);
+      alert(mergedLabels.cameraPermissionError);
+    }
+  }, [mergedLabels.cameraPermissionError]);
+  const capturePhoto = React5.useCallback(() => {
+    if (videoRef.current) {
+      const canvas = document.createElement("canvas");
+      canvas.width = videoRef.current.videoWidth;
+      canvas.height = videoRef.current.videoHeight;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
+        setCapturedImage(canvas.toDataURL("image/jpeg"));
+        stopCamera();
+        if (scannedIdType === "KTP") {
+          setScanStatus("reading");
+        } else {
+          setScanStatus("error");
+        }
+      }
+    }
+  }, [scannedIdType, stopCamera]);
+  React5.useEffect(() => {
+    if (isModalScanOpen && scanStatus === "idle") {
+      startCamera();
+    }
+  }, [isModalScanOpen, scanStatus, startCamera]);
+  React5.useEffect(() => {
+    if (isModalScanOpen && scanStatus === "idle" && stream && videoRef.current) {
+      if (videoRef.current.srcObject !== stream) {
+        videoRef.current.srcObject = stream;
+        const playPromise = videoRef.current.play();
+        if (playPromise !== void 0) {
+          playPromise.catch((error) => {
+            if (error.name !== "AbortError") {
+              console.error("Video play error:", error);
+            }
+          });
+        }
+      }
+    }
+  }, [isModalScanOpen, scanStatus, stream]);
+  React5.useEffect(() => {
+    if (!isModalScanOpen) {
+      stopCamera();
+      setScanStep(0);
+    }
+  }, [isModalScanOpen, stopCamera]);
+  React5.useEffect(() => {
+    return () => {
+      stopCamera();
+    };
+  }, [stopCamera]);
+  React5.useEffect(() => {
+    if (scanStatus !== "reading" || !capturedImage) return;
+    let isCancelled = false;
+    const performOCR = async () => {
+      try {
+        const Tesseract = await import('tesseract.js');
+        const { data: { text } } = await Tesseract.recognize(capturedImage, "ind");
+        if (isCancelled) return;
+        setScanStep(1);
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        setScanStep(2);
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        setScanStep(3);
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        if (isCancelled) return;
+        const lines = text.split("\n").filter((l) => l.trim().length > 0);
+        let name = "";
+        let idNumber = "";
+        let city = "";
+        for (const line of lines) {
+          const lower = line.toLowerCase();
+          console.log({ lower });
+          if (lower.includes("nama") && !lower.includes("kewarganegaraan")) {
+            name = line.replace(/.*nama\s*[:;]?\s*/i, "").trim();
+          } else if (lower.includes("nik")) {
+            idNumber = line.replace(/[^0-9]/g, "");
+          } else if (lower.includes("kota") || lower.includes("kabupaten")) {
+            city = line.trim();
+          }
+        }
+        stopCamera();
+        if (name) {
+          setValue("name", name, {
+            shouldValidate: true,
+            shouldDirty: true
+          });
+        }
+        if (idNumber && scannedIdType) {
+          setValue("idType", scannedIdType.toLowerCase());
+          setValue("idNumber", idNumber);
+        }
+        onScanComplete?.({ name, idNumber, city });
+        setScanStatus("success");
+        setIsModalScanOpen(false);
+        setScanStep(0);
+        setCapturedImage(null);
+      } catch (err) {
+        console.error("OCR Failed:", err);
+        if (!isCancelled) {
+          setScanStatus("error");
+          setCapturedImage(null);
+        }
+      }
+    };
+    performOCR();
+    return () => {
+      isCancelled = true;
+    };
+  }, [scanStatus, capturedImage, stopCamera, setValue, scannedIdType, onScanComplete]);
   const handleFormSubmit = (data) => {
     onSubmit(data);
     reset();
@@ -8004,218 +8329,536 @@ var ModalPassengerForm = ({
     onClose();
     reset();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const handleAutoFill = () => {
+    setIsModalSelectIdTypeOpen(true);
+  };
+  const handleCloseModalSelectTypeId = () => {
+    setIsModalSelectIdTypeOpen(false);
+  };
+  const handleSelectIdType = (selectedIdType) => {
+    setScannedIdType(selectedIdType);
+    setIsModalSelectIdTypeOpen(false);
+    setScanStatus("idle");
+    setIsModalScanOpen(true);
+  };
+  const handleCloseScanModal = () => {
+    stopCamera();
+    setIsModalScanOpen(false);
+    setScanStatus("idle");
+    setScanStep(0);
+    setCapturedImage(null);
+  };
+  const handleRetake = () => {
+    setScanStep(0);
+    setScanStatus("idle");
+    setCapturedImage(null);
+    startCamera();
+  };
+  const renderModalSelectIdType = () => /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
     {
-      open,
-      onOpenChange: (_, data) => {
-        if (!data.open) {
-          handleClose();
-        }
-      },
+      open: isModalSelectIdTypeOpen,
+      onOpenChange: (_, data) => !data.open && handleCloseModalSelectTypeId(),
       children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            InputDynamic_default,
-            {
-              name: "title",
-              control,
-              type: "select",
-              label: mergedLabels.titleLabel,
-              placeholder: mergedLabels.titlePlaceholder,
-              options: titleOptions,
-              size: "large",
-              required: true,
-              validationRules: {
-                required: mergedErrors.requiredTitle
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.DialogTitle,
+          {
+            action: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: handleCloseModalSelectTypeId,
+                className: styles.closeButton
               }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            InputDynamic_default,
-            {
-              name: "name",
-              control,
-              type: "text",
-              label: mergedLabels.nameLabel,
-              placeholder: mergedLabels.namePlaceholder,
-              size: "large",
-              required: true,
-              validationRules: {
-                required: mergedErrors.requiredName,
-                minLength: {
-                  value: 3,
-                  message: mergedErrors.minLengthName
-                }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.selectIdTypeTitle })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.idTypeList, children: idTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles.idTypeItem,
+            onClick: () => handleSelectIdType(type),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleSelectIdType(type);
               }
-            }
-          ),
+            },
+            role: "button",
+            tabIndex: 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.idTypeText, children: type })
+          },
+          type
+        )) }) })
+      ] }) })
+    }
+  );
+  const renderModalScanIdentity = () => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open: isModalScanOpen, modalType: "modal", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.scanSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: mergedLabels.scanIdentityTitle }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
+      scanStatus === "idle" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.scannerWrapper, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            InputDynamic_default,
+            "video",
             {
-              name: "age",
-              control,
-              type: "number",
-              label: mergedLabels.ageLabel,
-              placeholder: mergedLabels.agePlaceholder,
-              size: "large",
-              required: true,
-              validationRules: {
-                required: mergedErrors.requiredAge,
-                min: {
-                  value: 1,
-                  message: mergedErrors.minAge
-                },
-                max: {
-                  value: 150,
-                  message: mergedErrors.maxAge
-                }
-              }
+              ref: videoRef,
+              className: styles.videoElement,
+              autoPlay: true,
+              playsInline: true,
+              muted: true
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            InputDynamic_default,
-            {
-              name: "cityId",
-              control,
-              type: "select",
-              label: mergedLabels.cityLabel,
-              options: cityOptions,
-              placeholder: mergedLabels.cityPlaceholder,
-              size: "large",
-              required: true,
-              validationRules: {
-                required: mergedErrors.requiredCity
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.scanOverlay, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${styles.darkOverlay} ${styles.overlayTop}`
               }
-            }
-          ),
-          isAdultForm ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              InputDynamic_default,
+              "div",
               {
-                name: "idType",
-                control,
-                type: "select",
-                label: mergedLabels.idTypeLabel,
-                placeholder: mergedLabels.idTypePlaceholder,
-                options: TYPE_OPTIONS,
-                size: "large",
-                required: true,
-                validationRules: {
-                  required: mergedErrors.requiredIdType
-                }
+                className: `${styles.darkOverlay} ${styles.overlayBottom}`
               }
             ),
-            idType ? idType === "lainnya" ? /* @__PURE__ */ jsxRuntime.jsx(
-              InputDynamic_default,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                name: "idNumber",
-                control,
-                type: "date",
-                label: mergedLabels.idTypeOtherLabel,
-                placeholder: mergedLabels.idTypeOtherPlaceholder,
-                size: "large",
-                required: true,
-                max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
-                validationRules: {
-                  required: mergedErrors.requiredDate
+                className: `${styles.darkOverlay} ${styles.overlayLeft}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${styles.darkOverlay} ${styles.overlayRight}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.scanFrame, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `${styles.corner} ${styles.cornerTopLeft}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `${styles.corner} ${styles.cornerTopRight}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `${styles.corner} ${styles.cornerBottomLeft}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `${styles.corner} ${styles.cornerBottomRight}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.scanLine })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, children: mergedLabels.scanInstructions1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, style: { marginTop: "10px", marginBottom: "30px" }, children: mergedLabels.scanInstructions2 })
+      ] }),
+      scanStatus === "reading" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactComponents.Text,
+          {
+            weight: "semibold",
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "14px",
+              textAlign: "center",
+              marginTop: "30px",
+              color: "#00B3BD",
+              marginBottom: "30px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.spin, children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.Icon,
+                {
+                  icon: "fluent:arrow-sync-24-regular",
+                  color: "#00B3BD",
+                  width: 24
+                }
+              ) }),
+              mergedLabels.readingData
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 14
+            },
+            children: [
+              scanStep >= 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.checklistItem, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon: "fluent:checkmark-circle-24-regular",
+                    color: "#16a34a",
+                    width: 24
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { children: mergedLabels.nameRead })
+              ] }),
+              scanStep >= 2 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.checklistItem, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon: "fluent:checkmark-circle-24-regular",
+                    color: "#16a34a",
+                    width: 24
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { children: mergedLabels.idNumberRead })
+              ] }),
+              scanStep >= 3 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.checklistItem, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon: "fluent:checkmark-circle-24-regular",
+                    color: "#16a34a",
+                    width: 24
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { children: mergedLabels.cityRead })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      scanStatus === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 20, textAlign: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactComponents.Text,
+          {
+            weight: "semibold",
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "14px",
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Icon,
+                {
+                  icon: "fluent:dismiss-circle-24-regular",
+                  color: "red",
+                  width: 24
+                }
+              ),
+              mergedLabels.scanUnreadable
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, style: { marginTop: 30 }, children: mergedLabels.photoNotClear }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, style: { marginTop: 10, marginBottom: 30 }, children: mergedLabels.retakeAdvice }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 12,
+              justifyContent: "flex-end"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Button,
+                {
+                  appearance: "primary",
+                  size: "medium",
+                  onClick: handleRetake,
+                  shape: "circular",
+                  children: mergedLabels.retakeButton
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Button,
+                {
+                  size: "medium",
+                  appearance: "secondary",
+                  onClick: handleCloseScanModal,
+                  shape: "circular",
+                  children: mergedLabels.manualInputButton
                 }
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    scanStatus === "idle" && /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Button,
+        {
+          appearance: "secondary",
+          onClick: handleCloseScanModal,
+          shape: "circular",
+          children: mergedLabels.cancelScanButton
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Button,
+        {
+          appearance: "primary",
+          onClick: capturePhoto,
+          shape: "circular",
+          children: mergedLabels.savePhotoButton
+        }
+      )
+    ] })
+  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Dialog,
+      {
+        open,
+        onOpenChange: (_, data) => {
+          if (!data.open) {
+            handleClose();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "outline",
+                shape: "circular",
+                style: {
+                  flex: 1,
+                  borderColor: reactComponents.tokens.colorBrandBackground,
+                  color: reactComponents.tokens.colorBrandBackground,
+                  padding: reactComponents.tokens.spacingVerticalM
+                },
+                onClick: handleAutoFill,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:camera-20-filled" }),
+                size: "large",
+                children: mergedLabels.autofill
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              idType === "paspor" && /* @__PURE__ */ jsxRuntime.jsx(
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  menuPlacement: "top",
-                  name: "country",
+                  name: "title",
                   control,
-                  type: "country",
-                  label: mergedLabels.countryLabel,
-                  placeholder: mergedLabels.countryPlaceholder,
+                  type: "select",
+                  label: mergedLabels.titleLabel,
+                  placeholder: mergedLabels.titlePlaceholder,
+                  options: titleOptions,
                   size: "large",
                   required: true,
                   validationRules: {
-                    required: mergedErrors.requiredCountry
+                    required: mergedErrors.requiredTitle
                   }
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  name: "idNumber",
+                  name: "name",
                   control,
-                  type: idType === "ktp" ? "number" : "text",
-                  label: mergedLabels.idNumberLabel,
-                  placeholder: mergedLabels.idNumberPlaceholder,
+                  type: "text",
+                  label: mergedLabels.nameLabel,
+                  placeholder: mergedLabels.namePlaceholder,
                   size: "large",
                   required: true,
                   validationRules: {
-                    required: mergedErrors.requiredIdNumber,
+                    required: mergedErrors.requiredName,
                     minLength: {
-                      value: 6,
-                      message: mergedErrors.minLengthIdNumber
+                      value: 3,
+                      message: mergedErrors.minLengthName
                     }
                   }
                 }
-              )
-            ] }) : null
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            InputDynamic_default,
-            {
-              name: "date",
-              control,
-              type: "date",
-              label: mergedLabels.dateLabel,
-              placeholder: mergedLabels.datePlaceholder,
-              size: "large",
-              required: true,
-              validationRules: {
-                required: mergedErrors.requiredDate
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            InputDynamic_default,
-            {
-              name: "ticketClass",
-              control,
-              type: "radiobutton",
-              label: mergedLabels.ticketClassLabel,
-              options: ticketClassOptions,
-              required: true,
-              disabled: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actions, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Button,
-              {
-                appearance: "primary",
-                size: "large",
-                shape: "circular",
-                type: "submit",
-                children: mergedLabels.saveButton
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Button,
-              {
-                appearance: "secondary",
-                size: "large",
-                shape: "circular",
-                type: "button",
-                onClick: handleClose,
-                children: mergedLabels.cancelButton
-              }
-            )
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                InputDynamic_default,
+                {
+                  name: "age",
+                  control,
+                  type: "number",
+                  label: mergedLabels.ageLabel,
+                  placeholder: mergedLabels.agePlaceholder,
+                  size: "large",
+                  required: true,
+                  validationRules: {
+                    required: mergedErrors.requiredAge,
+                    min: {
+                      value: 1,
+                      message: mergedErrors.minAge
+                    },
+                    max: {
+                      value: 150,
+                      message: mergedErrors.maxAge
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                InputDynamic_default,
+                {
+                  name: "cityId",
+                  control,
+                  type: "select",
+                  label: mergedLabels.cityLabel,
+                  options: cityOptions,
+                  placeholder: mergedLabels.cityPlaceholder,
+                  size: "large",
+                  required: true,
+                  validationRules: {
+                    required: mergedErrors.requiredCity
+                  }
+                }
+              ),
+              isAdultForm ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InputDynamic_default,
+                  {
+                    name: "idType",
+                    control,
+                    type: "select",
+                    label: mergedLabels.idTypeLabel,
+                    placeholder: mergedLabels.idTypePlaceholder,
+                    options: TYPE_OPTIONS,
+                    size: "large",
+                    required: true,
+                    validationRules: {
+                      required: mergedErrors.requiredIdType
+                    }
+                  }
+                ),
+                idType ? idType === "lainnya" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  InputDynamic_default,
+                  {
+                    name: "idNumber",
+                    control,
+                    type: "date",
+                    label: mergedLabels.idTypeOtherLabel,
+                    placeholder: mergedLabels.idTypeOtherPlaceholder,
+                    size: "large",
+                    required: true,
+                    max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+                    validationRules: {
+                      required: mergedErrors.requiredDate
+                    }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  idType === "paspor" && /* @__PURE__ */ jsxRuntime.jsx(
+                    InputDynamic_default,
+                    {
+                      menuPlacement: "top",
+                      name: "country",
+                      control,
+                      type: "country",
+                      label: mergedLabels.countryLabel,
+                      placeholder: mergedLabels.countryPlaceholder,
+                      size: "large",
+                      required: true,
+                      validationRules: {
+                        required: mergedErrors.requiredCountry
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    InputDynamic_default,
+                    {
+                      name: "idNumber",
+                      control,
+                      type: idType === "ktp" ? "number" : "text",
+                      label: mergedLabels.idNumberLabel,
+                      placeholder: mergedLabels.idNumberPlaceholder,
+                      size: "large",
+                      required: true,
+                      validationRules: {
+                        required: mergedErrors.requiredIdNumber,
+                        minLength: {
+                          value: 6,
+                          message: mergedErrors.minLengthIdNumber
+                        }
+                      }
+                    }
+                  )
+                ] }) : null
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                InputDynamic_default,
+                {
+                  name: "date",
+                  control,
+                  type: "date",
+                  label: mergedLabels.dateLabel,
+                  placeholder: mergedLabels.datePlaceholder,
+                  size: "large",
+                  required: true,
+                  validationRules: {
+                    required: mergedErrors.requiredDate
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                InputDynamic_default,
+                {
+                  name: "ticketClass",
+                  control,
+                  type: "radiobutton",
+                  label: mergedLabels.ticketClassLabel,
+                  options: ticketClassOptions,
+                  required: true,
+                  disabled: true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actions, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Button,
+                  {
+                    appearance: "primary",
+                    size: "large",
+                    shape: "circular",
+                    type: "submit",
+                    children: mergedLabels.saveButton
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Button,
+                  {
+                    appearance: "secondary",
+                    size: "large",
+                    shape: "circular",
+                    type: "button",
+                    onClick: handleClose,
+                    children: mergedLabels.cancelButton
+                  }
+                )
+              ] })
+            ] })
           ] })
         ] }) })
-      ] }) })
-    }
-  );
+      }
+    ),
+    renderModalSelectIdType(),
+    renderModalScanIdentity()
+  ] });
 };
 
 // src/components/CardPassengerList/CardPassengerList.constants.ts