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>