Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into dev

2025-12-15 15:21:30 +07:00
parent 8f8fc83b22 8ddda5281d
commit 00f271524f
26 changed files with 10135 additions and 7230 deletions
@@ -1,33 +1,17 @@
-# Build Stage
+# Build stage
 FROM node:20-alpine AS build-stage
-
-# Set the working directory inside the container
 WORKDIR /app

-# Enable pnpm using corepack
 RUN corepack enable
-
-# Copy pnpm related files and package.json to leverage Docker layer caching
 COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile

-# Install dependencies using pnpm
-# Using --frozen-lockfile ensures consistent installations based on pnpm-lock.yaml
-RUN --mount=type=cache,id=pnpm-store,target=/root/.pnpm-store pnpm install --frozen-lockfile
-
-# Copy the rest of the application files
 COPY . .
+RUN pnpm generate

-# Build the Vue.js application for production
-RUN pnpm build
+# Production stage
+FROM nginx:stable-alpine
+COPY --from=build-stage /app/.output/public /usr/share/nginx/html

-# Production Stage
-FROM nginx:stable-alpine AS production-stage
-
-# Copy the built Vue.js application from the build stage to Nginx's web root
-COPY --from=build-stage /app/dist /usr/share/nginx/html
-
-# Expose port 80 for Nginx
 EXPOSE 80
-
-# Command to run Nginx in the foreground
 CMD ["nginx", "-g", "daemon off;"]
@@ -11,6 +11,7 @@ import { calculateAge } from '~/models/person'
 // components
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import { InputBase, FileField as FileUpload } from '~/components/pub/my-ui/form'
+import { Skeleton } from '~/components/pub/ui/skeleton'
 import { SelectBirthPlace } from '~/components/app/person/fields'
 import {
  InputName,
@@ -60,10 +61,20 @@ interface PatientFormInput {

 interface Props {
  isReadonly: boolean
+  languageOptions?: { value: string; label: string }[]
+  ethnicOptions?: { value: string; label: string }[]
  initialValues?: PatientFormInput
+  mode?: 'add' | 'edit'
+  identityFileUrl?: string
+  familyCardFileUrl?: string
 }

 const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'preview', url: string): void
+}>()
+
 const formSchema = toTypedSchema(PatientSchema)

 const { values, resetForm, setValues, setFieldValue, validate, setFieldError } = useForm<FormData>({
@@ -208,6 +219,7 @@ watch(
        label="Suku"
        placeholder="Pilih suku bangsa"
        :is-disabled="isReadonly || values.nationality !== 'WNI'"
+        :items="ethnicOptions || []"
      />
      <SelectLanguage
        field-name="language"
@@ -215,6 +227,7 @@ watch(
        placeholder="Pilih preferensi bahasa"
        is-required
        :is-disabled="isReadonly"
+        :items="languageOptions || []"
      />
      <SelectReligion
        field-name="religion"
@@ -256,22 +269,112 @@ watch(
      :col-count="2"
      :cell-flex="false"
    >
-      <FileUpload
-        field-name="identityCardFile"
-        label="Dokumen KTP"
-        placeholder="Unggah scan dokumen KTP"
-        :accept="['pdf', 'jpg', 'png']"
-        :max-size-mb="1"
-        :is-disabled="isReadonly"
-      />
-      <FileUpload
-        field-name="familyCardFile"
-        label="Dokumen KK"
-        placeholder="Unggah scan dokumen KK"
-        :accept="['pdf', 'jpg', 'png']"
-        :max-size-mb="1"
-        :is-disabled="isReadonly"
-      />
+      <div class="flex flex-col gap-3">
+        <FileUpload
+          field-name="residentIdentityFile"
+          label="Dokumen KTP"
+          placeholder="Unggah scan dokumen KTP"
+          :accept="['pdf', 'jpg', 'png']"
+          :max-size-mb="1"
+          :is-disabled="isReadonly"
+        />
+        <!-- Embed Preview Dokumen KTP (mode edit) -->
+        <div
+          v-if="mode === 'edit'"
+          class="flex flex-col gap-1"
+        >
+          <span class="text-xs text-muted-foreground">Dokumen Tersimpan</span>
+          <div
+            class="relative h-28 w-48 cursor-pointer overflow-hidden rounded-md border bg-muted"
+            :class="{ 'cursor-not-allowed opacity-60': !identityFileUrl }"
+            @click="identityFileUrl && emit('preview', identityFileUrl)"
+          >
+            <img
+              v-if="identityFileUrl"
+              :src="identityFileUrl"
+              alt="Dokumen KTP"
+              class="h-full w-full object-cover"
+            />
+            <Skeleton
+              v-else
+              class="h-full w-full"
+            />
+            <!-- Overlay -->
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+              :class="identityFileUrl ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+            >
+              <div
+                v-if="identityFileUrl"
+                class="flex flex-col items-center gap-1 text-white"
+              >
+                <span class="i-lucide-eye h-5 w-5" />
+                <span class="text-xs font-medium">Lihat Dokumen</span>
+              </div>
+              <div
+                v-else
+                class="flex flex-col items-center gap-1 text-white/70"
+              >
+                <span class="i-lucide-info h-5 w-5" />
+                <span class="text-xs font-medium">No Data</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-3">
+        <FileUpload
+          field-name="familyIdentityFile"
+          label="Dokumen KK"
+          placeholder="Unggah scan dokumen KK"
+          :accept="['pdf', 'jpg', 'png']"
+          :max-size-mb="1"
+          :is-disabled="isReadonly"
+        />
+        <!-- Embed Preview Dokumen KK (mode edit) -->
+        <div
+          v-if="mode === 'edit'"
+          class="flex flex-col gap-1"
+        >
+          <span class="text-xs text-muted-foreground">Dokumen Tersimpan</span>
+          <div
+            class="relative h-28 w-48 cursor-pointer overflow-hidden rounded-md border bg-muted"
+            :class="{ 'cursor-not-allowed opacity-60': !familyCardFileUrl }"
+            @click="familyCardFileUrl && emit('preview', familyCardFileUrl)"
+          >
+            <img
+              v-if="familyCardFileUrl"
+              :src="familyCardFileUrl"
+              alt="Dokumen KK"
+              class="h-full w-full object-cover"
+            />
+            <Skeleton
+              v-else
+              class="h-full w-full"
+            />
+            <!-- Overlay -->
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+              :class="familyCardFileUrl ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+            >
+              <div
+                v-if="familyCardFileUrl"
+                class="flex flex-col items-center gap-1 text-white"
+              >
+                <span class="i-lucide-eye h-5 w-5" />
+                <span class="text-xs font-medium">Lihat Dokumen</span>
+              </div>
+              <div
+                v-else
+                class="flex flex-col items-center gap-1 text-white/70"
+              >
+                <span class="i-lucide-info h-5 w-5" />
+                <span class="text-xs font-medium">No Data</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
    </DE.Block>
  </form>
 </template>
@@ -6,6 +6,7 @@ import { cn } from '~/lib/utils'
 import * as DE from '~/components/pub/my-ui/doc-entry'

 const props = defineProps<{
+  items: { value: string; label: string }[]
  fieldName?: string
  label?: string
  placeholder?: string
@@ -28,23 +29,23 @@ const {
  labelClass,
 } = props

-const ethnicOptions = [
-  { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
-  { label: 'Jawa', value: 'jawa' },
-  { label: 'Sunda', value: 'sunda' },
-  { label: 'Batak', value: 'batak' },
-  { label: 'Betawi', value: 'betawi' },
-  { label: 'Minangkabau', value: 'minangkabau' },
-  { label: 'Bugis', value: 'bugis' },
-  { label: 'Madura', value: 'madura' },
-  { label: 'Banjar', value: 'banjar' },
-  { label: 'Bali', value: 'bali' },
-  { label: 'Dayak', value: 'dayak' },
-  { label: 'Aceh', value: 'aceh' },
-  { label: 'Sasak', value: 'sasak' },
-  { label: 'Papua', value: 'papua' },
-  { label: 'Lainnya', value: 'lainnya', priority: -100 },
-]
+// const ethnicOptions = [
+//   { label: 'Tidak diketahui', value: 'unknown', priority: 1 },
+//   { label: 'Jawa', value: 'jawa' },
+//   { label: 'Sunda', value: 'sunda' },
+//   { label: 'Batak', value: 'batak' },
+//   { label: 'Betawi', value: 'betawi' },
+//   { label: 'Minangkabau', value: 'minangkabau' },
+//   { label: 'Bugis', value: 'bugis' },
+//   { label: 'Madura', value: 'madura' },
+//   { label: 'Banjar', value: 'banjar' },
+//   { label: 'Bali', value: 'bali' },
+//   { label: 'Dayak', value: 'dayak' },
+//   { label: 'Aceh', value: 'aceh' },
+//   { label: 'Sasak', value: 'sasak' },
+//   { label: 'Papua', value: 'papua' },
+//   { label: 'Lainnya', value: 'lainnya', priority: -100 },
+// ]
 </script>

 <template>
@@ -70,7 +71,7 @@ const ethnicOptions = [
            <Combobox
              :id="fieldName"
              v-bind="componentField"
-              :items="ethnicOptions"
+              :items="items"
              :placeholder="placeholder"
              :is-disabled="isDisabled"
              search-placeholder="Cari..."
@@ -6,6 +6,7 @@ import { cn } from '~/lib/utils'
 import * as DE from '~/components/pub/my-ui/doc-entry'

 const props = defineProps<{
+  items: { value: string; label: string }[]
  fieldName?: string
  label?: string
  placeholder?: string
@@ -29,15 +30,15 @@ const {
  labelClass,
 } = props

-const langOptions = [
-  { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
-  { label: 'Bahasa Jawa', value: 'jawa' },
-  { label: 'Bahasa Sunda', value: 'sunda' },
-  { label: 'Bahasa Bali', value: 'bali' },
-  { label: 'Bahasa Jaksel', value: 'jaksel' },
-  { label: 'Bahasa Inggris', value: 'en' },
-  { label: 'Tidak Diketahui', value: 'unknown', priority: 100 },
-]
+// const langOptions = [
+//   { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
+//   { label: 'Bahasa Jawa', value: 'jawa' },
+//   { label: 'Bahasa Sunda', value: 'sunda' },
+//   { label: 'Bahasa Bali', value: 'bali' },
+//   { label: 'Bahasa Jaksel', value: 'jaksel' },
+//   { label: 'Bahasa Inggris', value: 'en' },
+//   { label: 'Tidak Diketahui', value: 'unknown', priority: 100 },
+// ]
 </script>

 <template>
@@ -64,7 +65,7 @@ const langOptions = [
              :is-disabled="isDisabled"
              :id="fieldName"
              v-bind="componentField"
-              :items="langOptions"
+              :items="items"
              :placeholder="placeholder"
              :preserve-order="false"
              :class="
@@ -38,6 +38,7 @@ const props = defineProps<{
 const emit = defineEmits<{
  (e: 'back'): void
  (e: 'edit'): void
+  (e: 'preview', url: string): void
 }>()

 // #endregion
@@ -70,6 +71,14 @@ const patientAge = computed(() => {
  }
  return calculateAge(props.patient.person.birthDate)
 })
+
+const familiyCardFile = computed(() => {
+  return props.patient.person.familyIdentityFileUrl || ''
+})
+const identityFile = computed(() => {
+  return props.patient.person.residentIdentityFileUrl || ''
+})
+
 // #endregion

 // #region Lifecycle Hooks
@@ -166,13 +175,85 @@ function onNavigate(type: ClickType) {
        <AccordionTrigger>{{ section }}</AccordionTrigger>
        <AccordionContent>
          <div class="grid grid-cols-2 gap-4">
+            <!-- Dokumen KTP -->
            <div class="flex flex-col gap-2">
              <span class="text-sm text-muted-foreground">Dokumen KTP</span>
-              <Skeleton class="h-32 w-64 rounded-md" />
+              <div
+                class="relative h-32 w-64 cursor-pointer overflow-hidden rounded-md border bg-muted"
+                :class="{ 'cursor-not-allowed opacity-60': !identityFile }"
+                @click="identityFile && emit('preview', identityFile)"
+              >
+                <img
+                  v-if="identityFile"
+                  :src="identityFile"
+                  alt="Dokumen KTP"
+                  class="h-full w-full object-cover"
+                />
+                <Skeleton
+                  v-else
+                  class="h-full w-full"
+                />
+                <!-- Overlay -->
+                <div
+                  class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+                  :class="identityFile ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+                >
+                  <div
+                    v-if="identityFile"
+                    class="flex flex-col items-center gap-1 text-white"
+                  >
+                    <span class="i-lucide-eye h-6 w-6" />
+                    <span class="text-sm font-medium">Lihat Dokumen</span>
+                  </div>
+                  <div
+                    v-else
+                    class="flex flex-col items-center gap-1 text-white/70"
+                  >
+                    <span class="i-lucide-info h-6 w-6" />
+                    <span class="text-sm font-medium">No Data</span>
+                  </div>
+                </div>
+              </div>
            </div>
+            <!-- Dokumen KK -->
            <div class="flex flex-col gap-2">
              <span class="text-sm text-muted-foreground">Dokumen KK</span>
-              <Skeleton class="h-32 w-64 rounded-md" />
+              <div
+                class="relative h-32 w-64 cursor-pointer overflow-hidden rounded-md border bg-muted"
+                :class="{ 'cursor-not-allowed opacity-60': !familiyCardFile }"
+                @click="familiyCardFile && emit('preview', familiyCardFile)"
+              >
+                <img
+                  v-if="familiyCardFile"
+                  :src="familiyCardFile"
+                  alt="Dokumen KK"
+                  class="h-full w-full object-cover"
+                />
+                <Skeleton
+                  v-else
+                  class="h-full w-full"
+                />
+                <!-- Overlay -->
+                <div
+                  class="absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity"
+                  :class="familiyCardFile ? 'opacity-0 hover:opacity-100' : 'opacity-100'"
+                >
+                  <div
+                    v-if="familiyCardFile"
+                    class="flex flex-col items-center gap-1 text-white"
+                  >
+                    <span class="i-lucide-eye h-6 w-6" />
+                    <span class="text-sm font-medium">Lihat Dokumen</span>
+                  </div>
+                  <div
+                    v-else
+                    class="flex flex-col items-center gap-1 text-white/70"
+                  >
+                    <span class="i-lucide-info h-6 w-6" />
+                    <span class="text-sm font-medium">No Data</span>
+                  </div>
+                </div>
+              </div>
            </div>
          </div>
        </AccordionContent>
@@ -0,0 +1,476 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Form } from '~/components/pub/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/my-ui/form/block.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const religionOpts = mapToComboboxOptList(religionCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form
+      id="entry-form"
+      @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))"
+    >
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <Block>
+            <FieldGroup>
+              <Label label-for="residentIdentityNumber">KTP</Label>
+              <Field
+                id="residentIdentityNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="residentIdentityNumber"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="residentIdentityNumber"
+                        type="text"
+                        maxlength="16"
+                        placeholder="Nomor KTP"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- FrontTitle -->
+            <FieldGroup :column="3">
+              <Label label-for="frontTitle">Gelar Depan</Label>
+              <Field
+                id="frontTitle"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="frontTitle"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="frontTitle"
+                        type="text"
+                        placeholder="Dr., Ir., dll"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <FieldGroup :column="3">
+              <Label
+                label-for="name"
+                position="dynamic"
+              >
+                Nama
+              </Label>
+              <Field
+                id="name"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="name"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="name"
+                        type="text"
+                        placeholder="Nama lengkap"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- EndTitle -->
+            <FieldGroup :column="3">
+              <Label
+                label-for="endTitle"
+                position="dynamic"
+              >
+                Gelar Belakang
+              </Label>
+              <Field
+                id="endTitle"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="endTitle"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="endTitle"
+                        type="text"
+                        placeholder="S.Kom, M.Kes, dll"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- BirthDate -->
+            <FieldGroup :column="2">
+              <Label label-for="birthDate">Tanggal Lahir</Label>
+              <Field
+                id="birthDate"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="birthDate"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="birthDate"
+                        type="date"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- BirthRegency_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="birthRegencyCode">Tempat Lahir</Label>
+              <Field
+                id="birthRegencyCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="birthRegencyCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="parentId"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Gender_Code -->
+            <FieldGroup>
+              <Label label-for="genderCode">Jenis Kelamin</Label>
+              <Field
+                id="genderCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="genderCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="genderCode"
+                        v-bind="componentField"
+                        :items="genderOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- PassportNumber -->
+            <FieldGroup :column="2">
+              <Label label-for="passportNumber">Paspor</Label>
+              <Field
+                id="passportNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="passportNumber"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="passportNumber"
+                        type="text"
+                        placeholder="Nomor Paspor"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- DrivingLicenseNumber -->
+            <FieldGroup :column="2">
+              <Label label-for="drivingLicenseNumber">SIM</Label>
+              <Field
+                id="drivingLicenseNumber"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="drivingLicenseNumber"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="drivingLicenseNumber"
+                        type="text"
+                        placeholder="Nomor SIM"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Religion_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="religionCode">Agama</Label>
+              <Field
+                id="religionCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="religionCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="religionCode"
+                        v-bind="componentField"
+                        :items="religionOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <FieldGroup :column="2">
+              <Label label-for="ethnicCode">Suku</Label>
+              <Field
+                id="ethnicCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="ethnicCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="ethnicCode"
+                        v-bind="componentField"
+                        :items="occupationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Language_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="languageCode">Bahasa</Label>
+              <Field
+                id="languageCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="languageCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="parentId"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Education_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="educationCode">Pendidikan</Label>
+              <Field
+                id="educationCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="educationCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="educationCode"
+                        v-bind="componentField"
+                        :items="educationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Code -->
+            <FieldGroup :column="2">
+              <Label label-for="occupationCode">Pekerjaan</Label>
+              <Field
+                id="occupationCode"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="occupationCode"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Combobox
+                        id="occupationCode"
+                        v-bind="componentField"
+                        :items="occupationOpts"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Occupation_Name -->
+            <FieldGroup :column="2">
+              <Label label-for="occupationName">Detail Pekerjaan</Label>
+              <Field
+                id="occupationName"
+                :errors="errors"
+              >
+                <FormField
+                  v-slot="{ componentField }"
+                  name="occupationName"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="occupationName"
+                        type="text"
+                        placeholder="Contoh: Guru SMP, Petani"
+                        autocomplete="off"
+                        v-bind="componentField"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
@@ -15,13 +15,14 @@ import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler
 // Props
 const props = defineProps<{
  id: number
-  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
-  subclassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient'
+  subclassCode?: 'regular' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
  formType: string
 }>()

 const route = useRoute()
 const formRef = ref<InstanceType<typeof AppEncounterEntryForm> | null>(null)
+// const patientMode = ref<'new' | 'exists'>('exists')

 const {
  paymentsList,
@@ -56,7 +57,6 @@ const {
  getDoctorInfo,
  getValidateMember,
  getValidateSepNumber,
-  handleFetchDoctors,
 } = useEncounterEntry(props)
 const { recSepId, openHistory, histories, getMonitoringHistoryMappers } = useIntegrationSepEntry()

@@ -82,11 +82,13 @@ function handleFetch(value?: any) {

 async function handleEvent(menu: string, value?: any) {
  if (menu === 'search') {
+    // patientMode.value = 'exists'
    getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
      openPatient.value = true
    })
  } else if (menu === 'add') {
-    navigateTo('/client/patient/add')
+    // navigateTo('/client/patient/add')
+    // patientMode.value = 'new'
  } else if (menu === 'add-sep') {
    if (isSepValid.value) {
      return
@@ -167,6 +169,7 @@ onMounted(async () => {
    Kunjungan
  </div>

+  <!-- :patientMode="patientMode" -->
  <AppEncounterEntryForm
    ref="formRef"
    :mode="props.formType"
@@ -226,10 +229,10 @@ onMounted(async () => {
      />
      Batal
    </Button>
+      <!-- :disabled="isSaveDisabled" -->
    <Button
      type="button"
      class="h-[40px] min-w-[120px] text-white"
-      :disabled="isSaveDisabled"
      @click="handleSaveClick"
    >
      <Icon
@@ -35,7 +35,7 @@ import FilterForm from '~/components/app/encounter/filter-form.vue'
 // Props
 const props = defineProps<{
  classCode?: 'ambulatory' | 'emergency' | 'inpatient'
-  subclassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+  subclassCode?: 'regular' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk' | undefined
  canCreate?: boolean
  canUpdate?: boolean
  canDelete?: boolean
@@ -162,7 +162,6 @@ async function getPatientList() {
    'Responsible_Doctor-employee',
    'Responsible_Doctor-employee-person',
    'EncounterDocuments',
-    'unit',
    'vclaimReference', // vclaimReference | vclaimSep
  ]
  const includesParams = includesParamsArrays.join(',')
@@ -172,8 +171,11 @@ async function getPatientList() {
    if (props.classCode) {
      params['class-code'] = props.classCode
    }
-    if (props.subclassCode) {
-      params['subclass-code'] = props.subclassCode
+    if (props.subclassCode == 'regular') {
+      params['specialist-code'] = 'rehab'
+      params['specialist-code-opt'] = 'ne'
+    } else {
+      params['specialist-code'] = 'rehab'
    }
    const result = await getEncounterList(params)
    if (result.success) {
@@ -365,6 +367,7 @@ function handleRemoveConfirmation() {
 </script>

 <template>
+  {{  subclassCode }}
  <CH.ContentHeader v-bind="hreaderPrep">
    <FilterNav
      :active-positon="activeServicePosition"
@@ -6,6 +6,8 @@ import type { Person } from '~/models/person'

 // Components
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'

 import { getPatientDetail } from '~/services/patient.service'

@@ -17,6 +19,9 @@ const props = defineProps<{
 // #endregion

 // #region State & Computed
+const isDocPreviewDialogOpen = ref<boolean>(false)
+const docPreviewUrl = ref<string>('')
+
 const patient = ref(
  withBase<PatientEntity>({
    person: {} as Person,
@@ -80,6 +85,19 @@ async function onEdit() {
      :patient="patient"
      @back="onBack"
      @edit="onEdit"
+      @preview="
+        (url: string) => {
+          docPreviewUrl = url
+          isDocPreviewDialogOpen = true
+        }
+      "
    />
+    <Dialog
+      v-model:open="isDocPreviewDialogOpen"
+      title="Preview Dokumen"
+      size="2xl"
+    >
+      <DocPreviewDialog :link="docPreviewUrl" />
+    </Dialog>
  </div>
 </template>
@@ -17,6 +17,8 @@ import AppPersonAddressEntryFormRelative from '~/components/app/person-address/e
 import AppPersonFamilyParentsForm from '~/components/app/person/family-parents-form.vue'
 import AppPersonContactEntryForm from '~/components/app/person-contact/entry-form.vue'
 import AppPersonRelativeEntryForm from '~/components/app/person-relative/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'

 // helper
 import { format, parseISO } from 'date-fns'
@@ -24,6 +26,8 @@ import { id as localeID } from 'date-fns/locale'

 // services
 import { getPatientDetail, uploadAttachment } from '~/services/patient.service'
+import { getValueLabelList as getEthnicOpts } from '~/services/ethnic.service'
+import { getValueLabelList as getLanguageOpts } from '~/services/language.service'

 import { isReadonly, isProcessing, handleActionSave, handleActionEdit } from '~/handlers/patient.handler'

@@ -47,6 +51,23 @@ const props = defineProps<{
 const residentIdentityFile = ref<File>()
 const familyCardFile = ref<File>()

+// Dialog preview dokumen
+const isDocPreviewDialogOpen = ref<boolean>(false)
+const docPreviewUrl = ref<string>('')
+
+// Computed untuk URL dokumen tersimpan
+const identityFileUrl = computed(() => {
+  return patientDetail.value.person?.residentIdentityFileUrl || ''
+})
+const familyCardFileUrl = computed(() => {
+  return patientDetail.value.person?.familyIdentityFileUrl || ''
+})
+
+function handlePreviewDoc(url: string) {
+  docPreviewUrl.value = url
+  isDocPreviewDialogOpen.value = true
+}
+
 // form related state
 const personAddressForm = ref<ExposedForm<any> | null>(null)
 const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
@@ -58,6 +79,9 @@ const personPatientForm = ref<ExposedForm<any> | null>(null)
 // #endregion

 // #region State & Computed
+const ethnicOptions = ref<{ value: string; label: string }[]>([])
+const languageOptions = ref<{ value: string; label: string }[]>([])
+
 const patientDetail = ref(
  withBase<PatientEntity>({
    person: {} as Person,
@@ -223,6 +247,13 @@ const responsibleFormInitialValues = computed(() => {

 // #region Lifecycle Hooks
 onMounted(async () => {
+  const optsReq = {
+    'page-no-limit': true,
+  }
+
+  ethnicOptions.value = await getEthnicOpts(optsReq, true)
+  languageOptions.value = await getLanguageOpts(optsReq, true)
+
  // if edit mode, fetch patient detail
  if (props.mode === 'edit' && props.patientId) {
    await loadInitData(props.patientId)
@@ -309,7 +340,9 @@ async function handleActionClick(eventType: string) {
      const patient: Patient = await composeFormData()

      let createdPatientId = 0
+      let createdPersonId = 0
      let response: any
+
      // return
      if (props.mode === 'edit' && props.patientId) {
        response = await handleActionEdit(
@@ -330,13 +363,15 @@ async function handleActionClick(eventType: string) {

      const data = (response?.body?.data ?? null) as PatientBase | null
      if (!data) return
+
      createdPatientId = data.id
+      createdPersonId = data.person_id!

      if (residentIdentityFile.value) {
-        void uploadAttachment(residentIdentityFile.value, createdPatientId, 'ktp')
+        void uploadAttachment(residentIdentityFile.value, createdPersonId, 'ktp')
      }
      if (familyCardFile.value) {
-        void uploadAttachment(familyCardFile.value, createdPatientId, 'kk')
+        void uploadAttachment(familyCardFile.value, createdPersonId, 'kk')
      }

      // If has callback provided redirect to callback with patientData
@@ -435,10 +470,16 @@ watch(
    {{ mode === 'edit' ? 'Edit Pasien' : 'Tambah Pasien' }}
  </div>
  <AppPatientEntryForm
-    :key="`patient-${formKey}`"
    ref="personPatientForm"
+    :key="`patient-${formKey}`"
    :is-readonly="isProcessing || isReadonly"
    :initial-values="patientFormInitialValues"
+    :language-options="languageOptions"
+    :ethnic-options="ethnicOptions"
+    :mode="mode"
+    :identity-file-url="identityFileUrl"
+    :family-card-file-url="familyCardFileUrl"
+    @preview="handlePreviewDoc"
  />
  <div class="h-6"></div>
  <AppPersonAddressEntryForm
@@ -483,6 +524,15 @@ watch(
  <div class="my-2 flex justify-end py-2">
    <Action @click="handleActionClick" />
  </div>
+
+  <!-- Dialog Preview Dokumen -->
+  <Dialog
+    v-model:open="isDocPreviewDialogOpen"
+    title="Preview Dokumen"
+    size="2xl"
+  >
+    <DocPreviewDialog :link="docPreviewUrl" />
+  </Dialog>
 </template>

 <style scoped>
@@ -24,6 +24,7 @@ import {
 import { getDetail as getDoctorDetail, getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
 import {
  create as createEncounter,
+  createWithPatient,
  getDetail as getEncounterDetail,
  update as updateEncounter,
 } from '~/services/encounter.service'
@@ -44,7 +45,8 @@ import {
 export function useEncounterEntry(props: {
  id: number
  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
-  subclassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+  subclassCode?: 'regular' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+  specialist_Code?: 'regular' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
 }) {
  const route = useRoute()
  const userStore = useUserStore()
@@ -207,7 +209,7 @@ export function useEncounterEntry(props: {
  }

  async function getDoctorInfo(value: string) {
-    const resp = await getDoctorDetail(value, { includes: 'unit,specialist,subspecialist' })
+    const resp = await getDoctorDetail(value, { includes: 'specialist,subspecialist' })
    if (resp.success) {
      selectedDoctor.value = resp.body.data
    }
@@ -294,22 +296,22 @@ export function useEncounterEntry(props: {
    }
  }

-  async function handleFetchDoctors(unit?: string, specialist_code?: string, subSpecialist_code?: string) {
+  async function handleFetchDoctors(specialist_code?: string, subSpecialist_code?: string) {
    try {
      const filterParams: Record<string, any> = {
        'page-size': 100,
-        includes: 'employee-Person,unit,specialist,subspecialist'
+        includes: 'employee-Person,specialist,subspecialist'
      }

      // rehab is special
-      if (unit) {
-        if (unit == 'rehab') {
-          filterParams['unit-code'] = 'rehab'
-        } else {
-          filterParams['unit-code'] = 'rehab'
-          filterParams['unit-code-opt'] = 'ne'
-        }
-      }
+      // if (unit) {
+      //   if (unit == 'rehab') {
+      //     filterParams['unit-code'] = 'rehab'
+      //   } else {
+      //     filterParams['unit-code'] = 'rehab'
+      //     filterParams['unit-code-opt'] = 'ne'
+      //   }
+      // }
      if (specialist_code) {
        if (specialist_code == 'rehab') {
          filterParams['specialist-code'] = 'rehab'
@@ -318,7 +320,9 @@ export function useEncounterEntry(props: {
          filterParams['specialist-code-opt'] = 'ne'
        }
      }
-      if (subSpecialist_code) filterParams['subspecialist-code'] = subSpecialist_code
+      if (subSpecialist_code) {
+        filterParams['subspecialist-code'] = subSpecialist_code
+      }
      doctorsList.value = await getDoctorValueLabelList(filterParams, true)

      // const isSub = getIsSubspecialist(subSpecialistId, specialistsTree.value)
@@ -507,13 +511,18 @@ export function useEncounterEntry(props: {
  }

  async function handleSaveEncounter(formValues: any) {
-    if (!selectedPatient.value || !selectedPatientObject.value) {
-      toast({
-        title: 'Gagal',
-        description: 'Pasien harus dipilih terlebih dahulu',
-        variant: 'destructive',
-      })
-      return
+    let enccounterRef = formValues
+    if (!formValues.encounter) {
+      if (!selectedPatient.value || !selectedPatientObject.value) {
+        toast({
+          title: 'Gagal',
+          description: 'Pasien harus dipilih terlebih dahulu',
+          variant: 'destructive',
+        })
+        return
+      }
+    } else {
+      enccounterRef = {...formValues.encounter}
    }

    try {
@@ -527,24 +536,24 @@ export function useEncounterEntry(props: {
        return date.toISOString()
      }

-      const { specialist_id, subspecialist_id } = getSpecialistIdsFromCode(formValues.subSpecialistId || '')
+      const { specialist_id, subspecialist_id } = getSpecialistIdsFromCode(enccounterRef.subSpecialistId || '')

-      const patientId = formValues.patient_id || selectedPatientObject.value?.id || Number(selectedPatient.value)
+      const patientId = enccounterRef.patient_id || selectedPatientObject.value?.id || Number(selectedPatient.value)

-      const registeredAtValue = formValues.registeredAt || formValues.registerDate || ''
-      const visitDateValue = formValues.visitDate || formValues.registeredAt || formValues.registerDate || ''
-      const memberNumber = formValues.member_number ?? formValues.cardNumber ?? formValues.memberNumber ?? null
-      const refNumber = formValues.ref_number ?? formValues.sepNumber ?? formValues.refNumber ?? null
-      sepFile.value = formValues.sepFile || null
-      sippFile.value = formValues.sippFile || null
+      const registeredAtValue = enccounterRef.registeredAt || enccounterRef.registerDate || ''
+      const visitDateValue = enccounterRef.visitDate || enccounterRef.registeredAt || enccounterRef.registerDate || ''
+      const memberNumber = enccounterRef.member_number ?? enccounterRef.cardNumber ?? enccounterRef.memberNumber ?? null
+      const refNumber = enccounterRef.ref_number ?? enccounterRef.sepNumber ?? enccounterRef.refNumber ?? null
+      sepFile.value = enccounterRef.sepFile || null
+      sippFile.value = enccounterRef.sippFile || null

-      let paymentMethodCode = formValues.paymentMethod_code ?? null
+      let paymentMethodCode = enccounterRef.paymentMethod_code ?? null
      if (!isUsePaymentNew && !paymentMethodCode) {
-        if (formValues.paymentType === 'jkn' || formValues.paymentType === 'jkmm') {
+        if (enccounterRef.paymentType === 'jkn' || enccounterRef.paymentType === 'jkmm') {
          paymentMethodCode = 'insurance'
-        } else if (formValues.paymentType === 'spm') {
+        } else if (enccounterRef.paymentType === 'spm') {
          paymentMethodCode = 'cash'
-        } else if (formValues.paymentType === 'pks') {
+        } else if (enccounterRef.paymentType === 'pks') {
          paymentMethodCode = 'membership'
        } else {
          paymentMethodCode = 'cash'
@@ -553,19 +562,20 @@ export function useEncounterEntry(props: {

      const payload: any = {
        patient_id: patientId,
-        appointment_doctor_code: formValues.doctor_code || null,
+        appointment_doctor_code: enccounterRef.doctor_code || null,
        class_code: props.classCode || '',
        subClass_code: props.subclassCode || '',
-        infra_id: formValues.infra_id ?? null,
-        unit_code: formValues.unitCode ?? userStore?.user?.unit_code ?? null,
-        refSource_name: formValues.refSource_name ?? 'RSSA',
-        refTypeCode: formValues.paymentType === 'jkn' ? 'bpjs' : '',
+        specialist_code: selectedDoctor.value?.specialist_code || '',
+        infra_id: enccounterRef.infra_id ?? null,
+        unit_code: enccounterRef.unitCode ?? userStore?.user?.unit_code ?? null,
+        refSource_name: enccounterRef.refSource_name ?? 'RSSA',
+        refTypeCode: enccounterRef.paymentType === 'jkn' ? 'bpjs' : '',
        vclaimReference: vclaimReference.value ?? null,
-        paymentType: formValues.paymentType,
+        paymentType: enccounterRef.paymentType,
        registeredAt: formatDate(registeredAtValue),
        visitDate: formatDate(visitDateValue),
      }
-      
+
      if (props.classCode !== 'inpatient') {
        delete payload.infra_id
      }
@@ -588,10 +598,10 @@ export function useEncounterEntry(props: {
      }

      if (paymentMethodCode === 'insurance') {
-        payload.insuranceCompany_id = formValues.insuranceCompany_id ?? null
+        payload.insuranceCompany_id = enccounterRef.insuranceCompany_id ?? null
        if (memberNumber) payload.member_number = memberNumber
-        if (formValues.refTypeCode) payload.refTypeCode = formValues.refTypeCode
-        if (formValues.vclaimReference) payload.vclaimReference = formValues.vclaimReference
+        if (enccounterRef.refTypeCode) payload.refTypeCode = enccounterRef.refTypeCode
+        if (enccounterRef.vclaimReference) payload.vclaimReference = enccounterRef.vclaimReference
      } else {
        if (paymentMethodCode === 'membership' && memberNumber) {
          payload.member_number = memberNumber
@@ -607,8 +617,18 @@ export function useEncounterEntry(props: {
      if (isEditMode.value) {
        result = await updateEncounter(props.id, payload)
      } else {
-        console.log('💾 [ADD MODE] Sending POST request:', { payload })
-        result = await createEncounter(payload)
+        // console.log('💾 [ADD MODE] Sending POST request:', { payload })
+        if (!formValues.encounter) {
+          result = await createEncounter(payload)
+        } else {
+          if (formValues.patient?.person?.birthDate) {
+            formValues.patient.person.birthDate += 'T00:00:00.000Z'
+          }
+          result = await createWithPatient({
+            encounter: payload,
+            patient: formValues.patient,
+          })
+        }
      }

      if (result.success) {
@@ -5,6 +5,10 @@ import type { EncounterDocument } from "./encounter-document"
 import type { InternalReference } from "./internal-reference"
 import type { Nurse } from "./nurse"
 import { type Patient, genPatient } from "./patient"
+import type { Person } from "./person"
+import type { PersonAddress } from "./person-address"
+import type { PersonContact } from "./person-contact"
+import type { PersonRelative } from "./person-relative"
 import type { Specialist } from "./specialist"
 import type { Subspecialist } from "./subspecialist"
 import { genUnit, type Unit } from "./unit"
@@ -45,6 +49,16 @@ export interface Encounter {
    encounterDocuments: EncounterDocument[]
 }

+export interface CreateDtoWithPatient {
+  encounter: Encounter
+  patient: {
+    person: Person
+    personAddresses: PersonAddress[]
+    personContacts: PersonContact[]
+    personRelatives: PersonRelative[]
+  }
+}
+
 export function genEncounter(): Encounter {
    return {
        id: 0,
@@ -62,6 +76,7 @@ export function genEncounter(): Encounter {
        medicalDischargeEducation: '',
        status_code: '',
        encounterDocuments: [],
+
    }
 }

@@ -1,4 +1,4 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'

 export interface Ethnic extends Base {
  code: string
@@ -1,11 +1,11 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'

 export interface Language extends Base {
  code: string
  name: string
 }

-export function genMcuSrc(): Language {
+export function genLanguage(): Language {
  return {
    ...genBase(),
    code: '',
@@ -32,29 +32,26 @@ const hasAccess = getPageAccess(roleAccess, 'create')

 // TODO: Make a function for this
 const { user } = useUserStore()
-const servicePosition =  user.user_contractPosition_code == 'emp' ? getServicePosition('emp|'+user.employee_position_code) : null
+const servicePosition =  user.user_contractPosition_code == 'emp' ? getServicePosition(user.activeRole) : null
 const subClassCode = servicePosition == 'med' ?
  // medic
-  (user.unit_code == 'rehab' ? 'rehab' : 'reg') :
+  (user.specialist_code == 'rehab' ? 'rehab' : 'regular') :
  // non medic
  (
-    user.employee_position_code == 'reg' ?
-      (user.installation_code == 'rehab' ? 'rehab' : 'reg') :
+    servicePosition == 'reg' ?
+      (user.installation_code == 'rehab' ? 'rehab' : 'regular') :
      undefined
  )
 </script>

 <template>
-  <div v-if="hasAccess">
-    <Content
-      :id="0"
-      class-code="ambulatory"
-      :subclass-code="subClassCode"
-      form-type="add"
-    />
-  </div>
-  <Error
-    v-else
+  <Content v-if="hasAccess"
+    :id="0"
+    class-code="ambulatory"
+    :subclass-code="subClassCode"
+    form-type="add"
+  />
+  <Error v-else
    :status-code="403"
  />
 </template>
@@ -39,24 +39,23 @@ const canRemove = getPageAccess(roleAccess, 'delete')
 // User info
 const { user } = useUserStore()
 // TODO: Make a function for this
-const servicePosition =  user.user_contractPosition_code == 'emp' ? getServicePosition('emp|'+user.employee_position_code) : null
+const servicePosition =  user.user_contractPosition_code == 'emp' ? getServicePosition(user.activeRole) : null
 const subClassCode = servicePosition == 'med' ?
  // medic
-  (user.unit_code == 'rehab' ? 'rehab' : 'reg') :
+  (user.specialist_code == 'rehab' ? 'rehab' : 'regular') :
  // non medic
  (
-    user.employee_position_code == 'reg' ?
-      (user.installation_code == 'rehab' ? 'rehab' : 'reg') :
+    servicePosition == 'reg' ?
+      (user.installation_code == 'rehab' ? 'rehab' : 'regular') :
      undefined
  )
 </script>

 <template>
  <div>
-    {{ user.employee_position_code }}---<br />
-    {{ servicePosition }}---<br />
-    {{ subClassCode }}---
    <div v-if="hasAccess">
+      {{ servicePosition }}--
+      {{ subClassCode }}--
      <Content
        class-code="ambulatory"
        :subclass-code="subClassCode"
@@ -1,5 +1,9 @@
 import { isValid } from "date-fns"
 import { z } from 'zod'
+import { PatientSchema } from "./patient.schema"
+import { PersonAddressSchema } from "./person-address.schema"
+import { PersonContactBaseSchema } from "./person-contact.schema"
+import { PersonAddressRelativeSchema } from "./person-address-relative.schema"

 const ERROR_MESSAGES = {
  required: {
@@ -18,12 +22,15 @@ const ERROR_MESSAGES = {

 const ACCEPTED_UPLOAD_TYPES = ['image/jpeg', 'image/png', 'application/pdf']
 const isValidationSep = false
+// const encounterPatientShcema = z.object({
+//   })

 const IntegrationEncounterSchema = z
  .object({
    // Patient data (readonly, populated from selected patient)
+    patientSource: z.string().optional(),
    patientName: z.string().optional(),
-    nationalIdentity: z.string().optional(),
+    residentIdentiyNumber: z.string().optional(),
    medicalRecordNumber: z.string().optional(),

    // Visit data
@@ -129,8 +136,21 @@ const IntegrationEncounterSchema = z
    },
  )

+const IntegrationEncounterWPSchema = z
+  .object({
+    encounter: IntegrationEncounterSchema,
+    patient: z.object({
+      person: PatientSchema,
+      personAddresses: z.array(PersonAddressSchema),
+      personContacts: z.array(PersonContactBaseSchema),
+      personRelatives: z.array(PersonAddressRelativeSchema),
+    }),
+  })
+
+
 type IntegrationEncounterFormData = z.infer<typeof IntegrationEncounterSchema>
+type IntegrationEncounterWPFormData = z.infer<typeof IntegrationEncounterWPSchema>

-export { IntegrationEncounterSchema }
-export type { IntegrationEncounterFormData }
+export { IntegrationEncounterSchema, IntegrationEncounterWPSchema }
+export type { IntegrationEncounterFormData, IntegrationEncounterWPFormData }

@@ -102,7 +102,8 @@ const PatientSchema = z
    (data) => {
      if (data.nationality === 'WNI') {
        const nik = data.identityNumber?.trim()
-        return !!nik && nik.length === 16 && /^\d+$/.test(nik)
+        if (!nik) return true
+        return nik && nik.length === 16 && /^\d+$/.test(nik)
      }
      return true
    },
@@ -64,4 +64,17 @@ export async function checkIn(id: number, data: CheckInFormData) {
    console.error(`Error putting ${name}:`, error)
    throw new Error(`Failed to put ${name}`)
  }
-}
+}
+
+export async function createWithPatient(data: any) {
+  try {
+    const resp = await xfetch(path + '/create-with-patient', 'POST', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error putting ${name}:`, error)
+    throw new Error(`Failed to put ${name}`)
+  }
+}
@@ -0,0 +1,44 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Ethnic } from '~/models/ethnic'
+
+const path = '/api/v1/ethnic'
+const name = 'ethnic'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Ethnic) => ({
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
@@ -0,0 +1,44 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Language } from '~/models/language'
+
+const path = '/api/v1/language'
+const name = 'language'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(
+  params: any = null,
+  useCodeAsValue = false,
+): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Language) => ({
+      value: useCodeAsValue ? item.code : item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
@@ -101,7 +101,7 @@ export async function removePatient(id: number) {
  }
 }

-export async function uploadAttachment(file: File, userId: number, key: UploadCodeKey) {
+export async function uploadAttachment(file: File, personId: number, key: UploadCodeKey) {
  try {
    const resolvedKey = uploadCode[key]
    if (!resolvedKey) {
@@ -110,11 +110,14 @@ export async function uploadAttachment(file: File, userId: number, key: UploadCo

    // siapkan form-data body
    const formData = new FormData()
-    formData.append('code', resolvedKey)
    formData.append('content', file)
+    formData.append('entityType_code', 'person')
+    formData.append('ref_id', String(personId))
+    // formData.append('upload_employee_id', String(userId))
+    formData.append('type_code', resolvedKey)

    // kirim via xfetch
-    const resp = await xfetch(`${mainUrl}/${userId}/upload`, 'POST', formData)
+    const resp = await xfetch(`/api/v1/upload-file`, 'POST', formData)

    // struktur hasil sama seperti patchPatient
    const result: any = {}
@@ -21,11 +21,6 @@
          }
        ]
      },
-      {
-        "title": "IGD",
-        "icon": "i-lucide-zap",
-        "link": "/emergency/encounter"
-      },
      {
        "title": "Rawat Inap",
        "icon": "i-lucide-building-2",