From 2a74c0a2c7d6bb02f7ef85cf0a219fc5ee1d8713 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 28 Aug 2025 15:29:48 +0700
Subject: [PATCH] feat(division): add entry form and view components for
 division management

---
 app/components/app/divison/entry-form.vue | 98 ++++++++++++-----------
 app/components/flow/division/entry.vue    | 32 ++++++++
 2 files changed, 82 insertions(+), 48 deletions(-)
 create mode 100644 app/components/flow/division/entry.vue

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
index 179d5feb..c1b955b5 100644
--- a/app/components/app/divison/entry-form.vue
+++ b/app/components/app/divison/entry-form.vue
@@ -1,57 +1,59 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  id: string
-  code: string
-  name: string
-  parentId: string
-}>()
+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 emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
 
-// #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
+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>
-  <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>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Divisi</Label>
+            <Field>
+              <Combobox
+                v-model="data.parentId"
+                :items="parentDivision"
+                :placeholder="defParentDivision"
+                search-placeholder="kode, nama divisi"
+                empty-message="divisi tidak ditemukan."
+              />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>
-
-<style scoped>
-/* component style */
-</style>
diff --git a/app/components/flow/division/entry.vue b/app/components/flow/division/entry.vue
new file mode 100644
index 00000000..a3bf5f4b
--- /dev/null
+++ b/app/components/flow/division/entry.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+
+const data = ref({
+  code: '',
+  name: '',
+  parentId: 0,
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/user')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+</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> Divisi
+  </div>
+  <div>
+    <AppDivisonEntryForm v-model="data" />
+  </div>
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>