From 5e1775d05750e673ec04894b0306e2bab69d9c88 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 29 Aug 2025 11:14:19 +0700
Subject: [PATCH] feat(unit): add unit management pages and form components

- Create new unit list and add pages under org-src feature
- Implement unit entry form with validation using zod
- Update error types to support readonly path property
- Refactor field component to use shared error type
---
 app/components/app/unit/entry-form.vue      | 105 +++++++++++---------
 app/components/flow/unit/entry.vue          |  98 ++++++++++++++++++
 app/components/pub/custom-ui/form/field.vue |   9 +-
 app/pages/(features)/org-src/unit/add.vue   |  41 ++++++++
 app/pages/(features)/org-src/unit/index.vue |  41 ++++++++
 app/types/error.ts                          |   2 +-
 6 files changed, 241 insertions(+), 55 deletions(-)
 create mode 100644 app/components/flow/unit/entry.vue
 create mode 100644 app/pages/(features)/org-src/unit/add.vue
 create mode 100644 app/pages/(features)/org-src/unit/index.vue

diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
index e13df315..c8581f4e 100644
--- a/app/components/app/unit/entry-form.vue
+++ b/app/components/app/unit/entry-form.vue
@@ -1,57 +1,66 @@
 <script setup lang="ts">
-// #region Props & Emits
+import type { FormErrors } from '~/types/error'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
 const props = defineProps<{
-  id: string
-  code: string
-  name: string
-  installationId: string
+  modelValue: any
+  installation: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  errors?: FormErrors
 }>()
+const emit = defineEmits(['update:modelValue', 'event'])
 
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
-
-// #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
-// #endregion
-
-// #region Lifecycle Hooks
-onMounted(() => {
-  // init code
-  fetchData()
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
 })
-// #endregion
-
-// #region Functions
-async function fetchData() {
-  console.log('fetched')
-}
-// #endregion region
-
-// #region Utilities & event handlers
-function increment() {
-  count.value++
-}
-// #endregion
-
-// #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
-})
-// #endregion
 </script>
 
 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
-  </div>
+  <form id="entry-form">
+    <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 :column="2">
+            <Label>Nama</Label>
+            <Field id="name" :errors="errors">
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode</Label>
+            <Field id="code" :errors="errors">
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Instalasi</Label>
+            <Field id="parentId" :errors="errors">
+              <Combobox
+                v-model="data.parentId"
+                :items="props.installation.items"
+                :placeholder="props.installation.msg.placeholder"
+                :search-placeholder="props.installation.msg.search"
+                :empty-message="props.installation.msg.empty"
+              />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/unit/entry.vue b/app/components/flow/unit/entry.vue
new file mode 100644
index 00000000..323e6649
--- /dev/null
+++ b/app/components/flow/unit/entry.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import Action from '~/components/pub/custom-ui/nav-footer/ba-su.vue'
+
+const { errors, setFromZodError, clearErrors } = useFormErrors()
+
+const data = ref({
+  code: '',
+  name: '',
+  parentId: '',
+})
+
+const installation = {
+  msg: {
+    placeholder: '---pilih instalasi utama',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
+    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
+    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
+    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
+    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
+    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
+    { value: '10', label: 'Instalasi SDM', code: 'HR' },
+    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
+    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
+    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
+    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
+    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
+    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
+    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
+    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
+    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
+    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
+  ],
+}
+
+const schema = z.object({
+  name: z.string().min(1, 'Nama unit harus diisi'),
+  code: z.string().min(1, 'Kode unit harus diisi'),
+  parentId: z.preprocess(
+    (input: unknown) => {
+      if (typeof input === 'string') {
+        // Handle empty string case
+        if (input.trim() === '') {
+          return 0
+        }
+        return Number(input)
+      }
+
+      return input
+    },
+    z.number().refine((num) => num > 0, 'Instalasi induk harus dipilih'),
+  ),
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/org-src/unit')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // Clear previous errors
+    clearErrors()
+
+    const requestData = schema.safeParse(data.value)
+    if (!requestData.success) {
+      // Set errors menggunakan composable
+      setFromZodError(requestData.error)
+
+      // Optional: tampilkan toast notification untuk error general
+      console.warn('Form validation failed:', requestData.error)
+      return
+    }
+
+    console.log('Form data valid:', requestData.data)
+    // do something with valid data
+  }
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Unit
+  </div>
+  <div>
+    <AppUnitEntryForm v-model="data" :errors="errors" :installation="installation" />
+  </div>
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/pub/custom-ui/form/field.vue b/app/components/pub/custom-ui/form/field.vue
index 977e66cd..96497be5 100644
--- a/app/components/pub/custom-ui/form/field.vue
+++ b/app/components/pub/custom-ui/form/field.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-export interface XError {
-  message: string
-  [key: string]: any
-}
+import type { XErrors } from '~/types/error'
 
 defineProps<{
   id?: string
-  errors?: Record<string, XError>
+  errors?: XErrors
 }>()
 </script>
 
@@ -14,7 +11,7 @@ defineProps<{
   <div class="grow">
     <slot />
     <div v-if="id && errors?.[id]" class="field-error-info">
-      {{ errors[id].message }}
+      {{ errors[id]?.message }}
     </div>
   </div>
 </template>
diff --git a/app/pages/(features)/org-src/unit/add.vue b/app/pages/(features)/org-src/unit/add.vue
new file mode 100644
index 00000000..195f4b24
--- /dev/null
+++ b/app/pages/(features)/org-src/unit/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  // roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah Unit Instalasi',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <FlowUnitEntry />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/unit/index.vue b/app/pages/(features)/org-src/unit/index.vue
new file mode 100644
index 00000000..40bd09be
--- /dev/null
+++ b/app/pages/(features)/org-src/unit/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'List Division',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      route unit list
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/types/error.ts b/app/types/error.ts
index e1405b0d..78b4ed50 100644
--- a/app/types/error.ts
+++ b/app/types/error.ts
@@ -11,7 +11,7 @@ export interface XError {
   /** Nilai yang diberikan (untuk validasi) */
   givenVal?: string
   /** Path field yang error (untuk form validation) */
-  path?: (string | number)[]
+  path?: readonly (string | number)[]
   /** Properties tambahan lainnya */
   [key: string]: any
 }