From 71dfd6545c0ce58f39620d57e8786a3358d42d76 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 28 Aug 2025 12:13:36 +0700
Subject: [PATCH] feat: add new components for unit, division and installation

Add list and entry-form components for unit, division and installation modules
---
 app/components/app/divison/entry-form.vue     | 57 +++++++++++++++++++
 app/components/app/divison/list.vue           | 54 ++++++++++++++++++
 .../app/installation/entry-form.vue           | 57 +++++++++++++++++++
 app/components/app/installation/list.vue      | 54 ++++++++++++++++++
 app/components/app/unit/entry-form.vue        | 57 +++++++++++++++++++
 app/components/app/unit/list.vue              | 54 ++++++++++++++++++
 app/components/flow/division/list.vue         | 54 ++++++++++++++++++
 app/components/flow/installation/list.vue     | 54 ++++++++++++++++++
 app/components/flow/unit/list.vue             | 54 ++++++++++++++++++
 9 files changed, 495 insertions(+)
 create mode 100644 app/components/app/divison/entry-form.vue
 create mode 100644 app/components/app/divison/list.vue
 create mode 100644 app/components/app/installation/entry-form.vue
 create mode 100644 app/components/app/installation/list.vue
 create mode 100644 app/components/app/unit/entry-form.vue
 create mode 100644 app/components/app/unit/list.vue
 create mode 100644 app/components/flow/division/list.vue
 create mode 100644 app/components/flow/installation/list.vue
 create mode 100644 app/components/flow/unit/list.vue

diff --git a/app/components/app/divison/entry-form.vue b/app/components/app/divison/entry-form.vue
new file mode 100644
index 00000000..179d5feb
--- /dev/null
+++ b/app/components/app/divison/entry-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  id: string
+  code: string
+  name: string
+  parentId: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/app/divison/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/installation/entry-form.vue b/app/components/app/installation/entry-form.vue
new file mode 100644
index 00000000..60f45f85
--- /dev/null
+++ b/app/components/app/installation/entry-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  id: string
+  code: string
+  name: string
+  encounterClassCode: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/app/installation/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/unit/entry-form.vue b/app/components/app/unit/entry-form.vue
new file mode 100644
index 00000000..e13df315
--- /dev/null
+++ b/app/components/app/unit/entry-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  id: string
+  code: string
+  name: string
+  installationId: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/app/unit/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/flow/division/list.vue b/app/components/flow/division/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/flow/division/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/flow/installation/list.vue b/app/components/flow/installation/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/flow/installation/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>
diff --git a/app/components/flow/unit/list.vue b/app/components/flow/unit/list.vue
new file mode 100644
index 00000000..d3a63407
--- /dev/null
+++ b/app/components/flow/unit/list.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// #region Props & Emits
+const props = defineProps<{
+  title: string
+}>()
+
+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()
+})
+// #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>
+</template>
+
+<style scoped>
+/* component style */
+</style>