From d6b288404f390851ef21787f34f487bfe409d80b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 29 Aug 2025 10:42:07 +0700
Subject: [PATCH] feat(division): add division management pages and form
 validation

- Create new division list and add pages
- Implement form validation using zod and error handling
- Add useFormErrors composable for form error management
- Update division entry form with validation support
- Add error styling in main.css
---
 app/assets/css/main.css                       |  10 ++
 app/components/app/divison/entry-form.vue     |  41 ++++---
 app/components/flow/division/entry.vue        |  76 +++++++++++-
 app/composables/README-useFormErrors.md       |  73 +++++++++++
 app/composables/useFormErrors.ts              | 115 ++++++++++++++++++
 app/pages/(features)/org-src/division/add.vue |  41 +++++++
 .../(features)/org-src/division/index.vue     |  41 +++++++
 7 files changed, 375 insertions(+), 22 deletions(-)
 create mode 100644 app/composables/README-useFormErrors.md
 create mode 100644 app/composables/useFormErrors.ts
 create mode 100644 app/pages/(features)/org-src/division/add.vue
 create mode 100644 app/pages/(features)/org-src/division/index.vue

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 1c7eaef2..4c488385 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -327,4 +327,14 @@ body {
 .rounded-sm {
   border-radius: var(--radius-sm);
 }
+
+/* Form Error Styling */
+.field-error-info {
+  @apply text-xs ml-1;
+  color: hsl(var(--destructive));
+  /* font-size: 0.875rem; */
+  margin-top: 0.25rem;
+  line-height: 1.25;
+}
+
 /* .rounded-md { border-radius: var */
diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index c1b955b5..4057cc53 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -1,26 +1,33 @@
 <script setup lang="ts">
+import type { FormErrors } from '~/composables/useFormErrors'
 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<{ modelValue: any }>()
+const props = defineProps<{
+  modelValue: any
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  errors?: FormErrors
+}>()
 const emit = defineEmits(['update:modelValue', 'event'])
 
 const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
-
-const parentDivision = [
-  { value: '1', label: 'Medical', code: 'MED' },
-  { value: '2', label: 'Nursing', code: 'NUR' },
-  { value: '3', label: 'Admin', code: 'ADM' },
-  { value: '4', label: 'Support', code: 'SUP' },
-  { value: '5', label: 'Education', code: 'EDU' },
-]
-const defParentDivision = '---pilih divisi utama'
 </script>
 
 <template>
@@ -30,25 +37,25 @@ const defParentDivision = '---pilih divisi utama'
         <Block>
           <FieldGroup :column="2">
             <Label>Nama</Label>
-            <Field>
+            <Field id="name" :errors="errors">
               <Input v-model="data.name" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
             <Label>Kode</Label>
-            <Field>
+            <Field id="code" :errors="errors">
               <Input v-model="data.code" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
             <Label>Divisi</Label>
-            <Field>
+            <Field id="parentId" :errors="errors">
               <Combobox
                 v-model="data.parentId"
-                :items="parentDivision"
-                :placeholder="defParentDivision"
-                search-placeholder="kode, nama divisi"
-                empty-message="divisi tidak ditemukan."
+                :items="props.division.items"
+                :placeholder="props.division.msg.placeholder"
+                :search-placeholder="props.division.msg.search"
+                :empty-message="props.division.msg.empty"
               />
             </Field>
           </FieldGroup>
diff --git a/app/components/flow/division/entry.vue b/app/components/flow/division/entry.vue
index a3bf5f4b..cdd237ac 100644
--- a/app/components/flow/division/entry.vue
+++ b/app/components/flow/division/entry.vue
@@ -1,19 +1,85 @@
 <script setup lang="ts">
-import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+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: 0,
+  parentId: '',
+})
+
+const division = {
+  msg: {
+    placeholder: '---pilih divisi utama',
+    search: 'kode, nama divisi',
+    empty: 'divisi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Medical', code: 'MED' },
+    { value: '2', label: 'Nursing', code: 'NUR' },
+    { value: '3', label: 'Admin', code: 'ADM' },
+    { value: '4', label: 'Support', code: 'SUP' },
+    { value: '5', label: 'Education', code: 'EDU' },
+    { value: '6', label: 'Pharmacy', code: 'PHA' },
+    { value: '7', label: 'Radiology', code: 'RAD' },
+    { value: '8', label: 'Laboratory', code: 'LAB' },
+    { value: '9', label: 'Finance', code: 'FIN' },
+    { value: '10', label: 'Human Resources', code: 'HR' },
+    { value: '11', label: 'IT Services', code: 'ITS' },
+    { value: '12', label: 'Maintenance', code: 'MNT' },
+    { value: '13', label: 'Catering', code: 'CAT' },
+    { value: '14', label: 'Security', code: 'SEC' },
+    { value: '15', label: 'Emergency', code: 'EMR' },
+    { value: '16', label: 'Surgery', code: 'SUR' },
+    { value: '17', label: 'Outpatient', code: 'OUT' },
+    { value: '18', label: 'Inpatient', code: 'INP' },
+    { value: '19', label: 'Rehabilitation', code: 'REB' },
+    { value: '20', label: 'Research', code: 'RSH' },
+  ],
+}
+
+const schema = z.object({
+  name: z.string().min(1, 'Nama divisi harus diisi'),
+  code: z.string().min(1, 'Kode divisi 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, 'Divisi harus dipilih'),
+  ),
 })
 
 function onClick(type: string) {
   if (type === 'cancel') {
-    navigateTo('/human-src/user')
+    navigateTo('/org-src/division')
   } else if (type === 'draft') {
     // do something
   } else if (type === 'submit') {
-    // do something
+    // 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>
@@ -24,7 +90,7 @@ function onClick(type: string) {
     <span class="font-semibold">Tambah</span> Divisi
   </div>
   <div>
-    <AppDivisonEntryForm v-model="data" />
+    <AppDivisonEntryForm v-model="data" :errors="errors" :division="division" />
   </div>
   <div class="my-2 flex justify-end py-2">
     <Action @click="onClick" />
diff --git a/app/composables/README-useFormErrors.md b/app/composables/README-useFormErrors.md
new file mode 100644
index 00000000..48acdedb
--- /dev/null
+++ b/app/composables/README-useFormErrors.md
@@ -0,0 +1,73 @@
+# useFormErrors Composable
+
+Composable untuk menangani form validation errors seperti Laravel. Mengkonversi ZodError menjadi format yang mudah digunakan di template.
+
+## Penggunaan
+
+### Basic Usage
+
+```typescript
+// Di component parent (entry.vue)
+const { errors, setFromZodError, clearErrors } = useFormErrors()
+
+// Validasi dengan Zod
+const result = schema.safeParse(data.value)
+if (!result.success) {
+  setFromZodError(result.error)
+  return
+}
+```
+
+### Di Template
+
+```vue
+<!-- Pass errors ke form component -->
+<AppDivisonEntryForm v-model="data" :errors="errors" />
+```
+
+### Di Form Component
+
+```vue
+<script setup>
+import type { FormErrors } from '~/composables/useFormErrors'
+
+const props = defineProps<{ 
+  modelValue: any
+  errors?: FormErrors
+}>()
+</script>
+
+<template>
+  <!-- Setiap Field harus memiliki id yang sesuai dengan field name -->
+  <Field id="name" :errors="errors">
+    <Input v-model="data.name" />
+  </Field>
+</template>
+```
+
+## API Reference
+
+### Methods
+
+- `setFromZodError(zodError)` - Set errors dari ZodError
+- `setErrors(errors)` - Set errors manual
+- `setError(field, message)` - Set error untuk field tertentu
+- `clearError(field)` - Hapus error untuk field tertentu
+- `clearErrors()` - Hapus semua errors
+- `hasError(field)` - Cek apakah ada error untuk field
+- `getError(field)` - Ambil error message untuk field
+
+### Computed Properties
+
+- `hasErrors` - Boolean apakah ada error
+- `errorMessages` - Array semua error messages
+- `firstError` - Error pertama (untuk alert general)
+
+## Field Component
+
+Field component akan otomatis menampilkan error jika:
+1. Field memiliki `id` prop yang sesuai dengan field name
+2. Field menerima `errors` prop
+3. Ada error untuk field tersebut di dalam errors object
+
+Error akan ditampilkan dengan class `.field-error-info` yang sudah di-style dengan warna merah.
diff --git a/app/composables/useFormErrors.ts b/app/composables/useFormErrors.ts
new file mode 100644
index 00000000..03c95e97
--- /dev/null
+++ b/app/composables/useFormErrors.ts
@@ -0,0 +1,115 @@
+import type { ZodError } from 'zod'
+
+export interface XError {
+  message: string
+  [key: string]: any
+}
+
+export interface FormErrors {
+  [field: string]: XError
+}
+
+/**
+ * Composable untuk menangani form validation errors seperti Laravel
+ * Mengkonversi ZodError menjadi format yang mudah digunakan di template
+ */
+export function useFormErrors() {
+  const errors = ref<FormErrors>({})
+
+  /**
+   * Set errors dari ZodError
+   */
+  function setFromZodError(zodError: ZodError) {
+    const newErrors: FormErrors = {}
+
+    zodError.errors.forEach((error) => {
+      const field = error.path.join('.')
+      newErrors[field] = {
+        message: error.message,
+        code: error.code,
+        path: error.path,
+      }
+    })
+
+    errors.value = newErrors
+  }
+
+  /**
+   * Set errors manual (untuk error dari API response)
+   */
+  function setErrors(newErrors: FormErrors) {
+    errors.value = newErrors
+  }
+
+  /**
+   * Set error untuk field tertentu
+   */
+  function setError(field: string, message: string, extra: Record<string, any> = {}) {
+    errors.value[field] = {
+      message,
+      ...extra,
+    }
+  }
+
+  /**
+   * Hapus error untuk field tertentu
+   */
+  function clearError(field: string) {
+    delete errors.value[field]
+  }
+
+  /**
+   * Hapus semua errors
+   */
+  function clearErrors() {
+    errors.value = {}
+  }
+
+  /**
+   * Cek apakah ada error untuk field tertentu
+   */
+  function hasError(field: string): boolean {
+    return !!errors.value[field]
+  }
+
+  /**
+   * Ambil error message untuk field tertentu
+   */
+  function getError(field: string): string | null {
+    return errors.value[field]?.message || null
+  }
+
+  /**
+   * Cek apakah ada error apapun
+   */
+  const hasErrors = computed(() => Object.keys(errors.value).length > 0)
+
+  /**
+   * Ambil semua error messages sebagai array
+   */
+  const errorMessages = computed(() =>
+    Object.values(errors.value).map(error => error.message),
+  )
+
+  /**
+   * Ambil error pertama (untuk menampilkan alert general)
+   */
+  const firstError = computed(() => {
+    const firstKey = Object.keys(errors.value)[0]
+    return firstKey ? errors.value[firstKey] : null
+  })
+
+  return {
+    errors: readonly(errors),
+    setFromZodError,
+    setErrors,
+    setError,
+    clearError,
+    clearErrors,
+    hasError,
+    getError,
+    hasErrors,
+    errorMessages,
+    firstError,
+  }
+}
diff --git a/app/pages/(features)/org-src/division/add.vue b/app/pages/(features)/org-src/division/add.vue
new file mode 100644
index 00000000..122e6ce3
--- /dev/null
+++ b/app/pages/(features)/org-src/division/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 Divisi',
+  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">
+      <FlowDivisionEntry />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>
diff --git a/app/pages/(features)/org-src/division/index.vue b/app/pages/(features)/org-src/division/index.vue
new file mode 100644
index 00000000..6e08748b
--- /dev/null
+++ b/app/pages/(features)/org-src/division/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 division list
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>