refactor(division): extract entry form to separate component and improve form handling

- Move form logic from list component to dedicated entry-form component
- Implement proper form submission and cancellation handlers
- Add type safety with DivisionFormData interface
- Improve form validation using vee-validate
- Refresh data after successful form submission

app/components/flow/division/list.vue

@@ -2,9 +2,8 @@
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
-import { toTypedSchema } from '@vee-validate/zod'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
-import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
+import AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
 import { division as divisionConf, schema as schemaConf } from './entry'
 import { defaultQuery, querySchema } from './schema.query'
@@ -73,8 +72,6 @@ const headerPrep: HeaderPrep = {
   },
 }
 
-const formSchema = toTypedSchema(schemaConf)
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -141,25 +138,16 @@ function handlePageChange(page: number) {
 
 // #endregion region
 
-// #region Utilities & event handlers
+// #region Form event handlers
 
-function clearForm(setValues: (values: Record<string, any>) => void) {
-  // Manually clear all form fields
-  setValues({
-    name: '',
-    code: '',
-    parentId: '',
-  })
-}
-
-function onCancelForm(setValues: (values: Record<string, any>) => void) {
+function onCancelForm(resetForm: () => void) {
   isDialogOpen.value = false
   setTimeout(() => {
-    clearForm(setValues)
+    resetForm()
   }, 500)
 }
 
-async function onSubmitForm(values: any, setValues: (values: Record<string, any>) => void) {
+async function onSubmitForm(values: any, resetForm: () => void) {
   let isSuccess = false
   try {
     // TODO: Implement form submission logic
@@ -175,6 +163,9 @@ async function onSubmitForm(values: any, setValues: (values: Record<string, any>
     isDialogOpen.value = false
     isSuccess = true
 
+    // Refresh data after successful submission
+    await getDivisionList()
+
     // TODO: Show success message
     console.log('Division created successfully')
   } catch (error: unknown) {
@@ -185,7 +176,7 @@ async function onSubmitForm(values: any, setValues: (values: Record<string, any>
   } finally {
     if (isSuccess) {
       setTimeout(() => {
-        clearForm(setValues)
+        resetForm()
       }, 500)
     }
   }
@@ -221,70 +212,30 @@ watch(debouncedSearch, (newValue) => {
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+    <div class="rounded-md border p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    <Form v-slot="{ handleSubmit, setValues }" as="" keep-values :validation-schema="formSchema">
-      <Dialog v-model:open="isDialogOpen">
-        <DialogContent
-class="sm:max-w-[425px]" @interact-outside="(e) => e.preventDefault()"
-          @pointer-down-outside="(e) => e.preventDefault()"
->
-          <DialogHeader>
-            <DialogTitle>Tambah Divisi</DialogTitle>
-            <DialogDescription></DialogDescription>
-          </DialogHeader>
 
-          <form id="dialogForm" @submit="handleSubmit($event, (values) => onSubmitForm(values, setValues))">
-            <FormField v-slot="{ componentField }" name="name">
-              <FormItem>
-                <FormLabel>Nama</FormLabel>
-                <FormControl>
-                  <Input
-type="text" placeholder="Masukkan nama divisi" autocomplete="organization"
-                    v-bind="componentField"
-/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
+    <Dialog v-model:open="isDialogOpen">
+      <DialogContent
+        class="sm:max-w-[425px]"
+        @interact-outside="(e) => e.preventDefault()"
+        @pointer-down-outside="(e) => e.preventDefault()"
+      >
+        <DialogHeader>
+          <DialogTitle>Tambah Divisi</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
 
-            <FormField v-slot="{ componentField }" name="code">
-              <FormItem>
-                <FormLabel>Kode</FormLabel>
-                <FormControl>
-                  <Input type="text" placeholder="Masukkan kode divisi" autocomplete="off" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-
-            <FormField v-slot="{ componentField }" name="parentId">
-              <FormItem>
-                <FormLabel>Kelompok</FormLabel>
-                <FormControl>
-                  <Combobox
-v-bind="componentField" :items="divisionConf.items"
-                    :placeholder="divisionConf.msg.placeholder" :search-placeholder="divisionConf.msg.search"
-                    :empty-message="divisionConf.msg.empty"
-/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            </FormField>
-          </form>
-
-          <DialogFooter>
-            <Button variant="outline" @click="onCancelForm(setValues)">
-              Batal
-            </Button>
-            <Button type="submit" form="dialogForm">
-              Simpan
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Form>
+        <AppDivisonEntryForm
+          :division="divisionConf"
+          :schema="schemaConf"
+          :initial-values="{ name: '', code: '', parentId: '' }"
+          @submit="onSubmitForm"
+          @cancel="onCancelForm"
+        />
+      </DialogContent>
+    </Dialog>
   </div>
 </template>