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

Dockerfile

@@ -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
+# Production stage
-RUN pnpm build
+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;"]

app/components/app/patient/entry-form.vue

@@ -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
+      <div class="flex flex-col gap-3">
-        field-name="identityCardFile"
+        <FileUpload
-        label="Dokumen KTP"
+          field-name="residentIdentityFile"
-        placeholder="Unggah scan dokumen KTP"
+          label="Dokumen KTP"
-        :accept="['pdf', 'jpg', 'png']"
+          placeholder="Unggah scan dokumen KTP"
-        :max-size-mb="1"
+          :accept="['pdf', 'jpg', 'png']"
-        :is-disabled="isReadonly"
+          :max-size-mb="1"
-      />
+          :is-disabled="isReadonly"
-      <FileUpload
+        />
-        field-name="familyCardFile"
+        <!-- Embed Preview Dokumen KTP (mode edit) -->
-        label="Dokumen KK"
+        <div
-        placeholder="Unggah scan dokumen KK"
+          v-if="mode === 'edit'"
-        :accept="['pdf', 'jpg', 'png']"
+          class="flex flex-col gap-1"
-        :max-size-mb="1"
+        >
-        :is-disabled="isReadonly"
+          <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>

app/components/app/patient/fields/select-ethnicity.vue

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

app/components/app/patient/fields/select-lang.vue

@@ -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 = [
+// const langOptions = [
-  { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
+//   { label: 'Bahasa Indonesia', value: 'id', priority: 1 },
-  { label: 'Bahasa Jawa', value: 'jawa' },
+//   { label: 'Bahasa Jawa', value: 'jawa' },
-  { label: 'Bahasa Sunda', value: 'sunda' },
+//   { label: 'Bahasa Sunda', value: 'sunda' },
-  { label: 'Bahasa Bali', value: 'bali' },
+//   { label: 'Bahasa Bali', value: 'bali' },
-  { label: 'Bahasa Jaksel', value: 'jaksel' },
+//   { label: 'Bahasa Jaksel', value: 'jaksel' },
-  { label: 'Bahasa Inggris', value: 'en' },
+//   { label: 'Bahasa Inggris', value: 'en' },
-  { label: 'Tidak Diketahui', value: 'unknown', priority: 100 },
+//   { 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="

app/components/app/patient/preview.vue

@@ -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>

app/components/app/person/entry-form-old.vue

@@ -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>

app/components/content/encounter/entry.vue

@@ -15,13 +15,14 @@ import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler
 // Props
 const props = defineProps<{
   id: number
-  classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
+  classCode?: 'ambulatory' | 'emergency' | 'inpatient'
-  subclassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
+  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

app/components/content/encounter/list.vue

@@ -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) {
+    if (props.subclassCode == 'regular') {
-      params['subclass-code'] = props.subclassCode
+      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"

app/components/content/patient/detail.vue

@@ -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>

app/components/content/patient/form.vue

@@ -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>

app/handlers/encounter-entry.handler.ts

@@ -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) {
-        if (unit == 'rehab') {
+      //   if (unit == 'rehab') {
-          filterParams['unit-code'] = 'rehab'
+      //     filterParams['unit-code'] = 'rehab'
-        } else {
+      //   } else {
-          filterParams['unit-code'] = 'rehab'
+      //     filterParams['unit-code'] = 'rehab'
-          filterParams['unit-code-opt'] = 'ne'
+      //     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) {
+    let enccounterRef = formValues
-      toast({
+    if (!formValues.encounter) {
-        title: 'Gagal',
+      if (!selectedPatient.value || !selectedPatientObject.value) {
-        description: 'Pasien harus dipilih terlebih dahulu',
+        toast({
-        variant: 'destructive',
+          title: 'Gagal',
-      })
+          description: 'Pasien harus dipilih terlebih dahulu',
-      return
+          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 registeredAtValue = enccounterRef.registeredAt || enccounterRef.registerDate || ''
-      const visitDateValue = formValues.visitDate || formValues.registeredAt || formValues.registerDate || ''
+      const visitDateValue = enccounterRef.visitDate || enccounterRef.registeredAt || enccounterRef.registerDate || ''
-      const memberNumber = formValues.member_number ?? formValues.cardNumber ?? formValues.memberNumber ?? null
+      const memberNumber = enccounterRef.member_number ?? enccounterRef.cardNumber ?? enccounterRef.memberNumber ?? null
-      const refNumber = formValues.ref_number ?? formValues.sepNumber ?? formValues.refNumber ?? null
+      const refNumber = enccounterRef.ref_number ?? enccounterRef.sepNumber ?? enccounterRef.refNumber ?? null
-      sepFile.value = formValues.sepFile || null
+      sepFile.value = enccounterRef.sepFile || null
-      sippFile.value = formValues.sippFile || 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,15 +562,16 @@ 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,
+        specialist_code: selectedDoctor.value?.specialist_code || '',
-        unit_code: formValues.unitCode ?? userStore?.user?.unit_code ?? null,
+        infra_id: enccounterRef.infra_id ?? null,
-        refSource_name: formValues.refSource_name ?? 'RSSA',
+        unit_code: enccounterRef.unitCode ?? userStore?.user?.unit_code ?? null,
-        refTypeCode: formValues.paymentType === 'jkn' ? 'bpjs' : '',
+        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),
       }
@@ -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 (enccounterRef.refTypeCode) payload.refTypeCode = enccounterRef.refTypeCode
-        if (formValues.vclaimReference) payload.vclaimReference = formValues.vclaimReference
+        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 })
+        // console.log('💾 [ADD MODE] Sending POST request:', { payload })
-        result = await createEncounter(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) {

app/models/encounter.ts

@@ -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: [],
+
     }
 }
 

app/models/ethnic.ts

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

app/models/language.ts

@@ -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: '',

app/pages/(features)/ambulatory/encounter/add.vue

@@ -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' ?
+    servicePosition == 'reg' ?
-      (user.installation_code == 'rehab' ? 'rehab' : 'reg') :
+      (user.installation_code == 'rehab' ? 'rehab' : 'regular') :
       undefined
   )
 </script>
 
 <template>
-  <div v-if="hasAccess">
+  <Content v-if="hasAccess"
-    <Content
+    :id="0"
-      :id="0"
+    class-code="ambulatory"
-      class-code="ambulatory"
+    :subclass-code="subClassCode"
-      :subclass-code="subClassCode"
+    form-type="add"
-      form-type="add"
+  />
-    />
+  <Error v-else
-  </div>
-  <Error
-    v-else
     :status-code="403"
   />
 </template>

app/pages/(features)/ambulatory/encounter/index.vue

@@ -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' ?
+    servicePosition == 'reg' ?
-      (user.installation_code == 'rehab' ? 'rehab' : '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"

app/schemas/integration-encounter.schema.ts

@@ -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 { IntegrationEncounterSchema, IntegrationEncounterWPSchema }
-export type { IntegrationEncounterFormData }
+export type { IntegrationEncounterFormData, IntegrationEncounterWPFormData }
 

app/schemas/patient.schema.ts

@@ -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
     },

app/services/encounter.service.ts

@@ -65,3 +65,16 @@ export async function checkIn(id: number, data: CheckInFormData) {
     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}`)
+  }
+}

app/services/ethnic.service.ts

@@ -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
+}

app/services/language.service.ts

@@ -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
+}

app/services/patient.service.ts

@@ -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 = {}

public/side-menu-items/emp-reg.json

@@ -21,11 +21,6 @@
           }
         ]
       },
-      {
-        "title": "IGD",
-        "icon": "i-lucide-zap",
-        "link": "/emergency/encounter"
-      },
       {
         "title": "Rawat Inap",
         "icon": "i-lucide-building-2",