feat(ui): add back navigation button to detail pages

- Implement reusable back button component
- Add back button to division and installation detail pages
- Improve navigation logic with additional state cleanup

app/components/app/division/detail/list.vue

@@ -32,4 +32,14 @@ function handlePageChange(page: number) {
       :skeleton-size="paginationMeta?.pageSize"
     />
   </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-division',
+        })
+      "
+    />
+  </div>
 </template>

app/components/app/installation/detail/list.vue

@@ -32,4 +32,14 @@ function handlePageChange(page: number) {
       :skeleton-size="paginationMeta?.pageSize"
     />
   </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-installation',
+        })
+      "
+    />
+  </div>
 </template>

app/components/content/division/list.vue

@@ -78,6 +78,7 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recAction.value = ''
       recItem.value = null
       recId.value = 0
       isFormEntryDialogOpen.value = true
@@ -104,12 +105,22 @@ const getCurrentDivisionDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
-        name: 'org-src-division-id',
-        params: {
-          id: Number(recId.value),
-        },
-      })
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-division-id',
+          params: {
+            id,
+          },
+        })
+      }
 
       break
     case ActionEvents.showEdit:

app/components/content/installation/detail.vue

@@ -9,7 +9,7 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { Installation } from '~/models/installation'
 import { getDetail as getDetailInstallation } from '~/services/installation.service'
 
-// #region division positions
+// #region installtaion positions
 import { config } from '~/components/app/installation/detail/list.cfg'
 
 // Helpers
@@ -174,7 +174,7 @@ watch([recId, recAction], () => {
   <AppInstallationDetail :installation="installation" />
   <div class="h-6"></div>
 
-  <LazyAppInstallationDetailList
+  <AppInstallationDetailList
     :data="dataMap"
     :pagination-meta="paginationMeta"
     @page-change="handlePageChange"

app/components/content/installation/list.vue

@@ -102,12 +102,22 @@ const getCurrentInstallationDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
-        name: 'org-src-installation-id',
-        params: {
-          id: recId.value,
-        },
-      })
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-installation-id',
+          params: {
+            id,
+          },
+        })
+      }
 
       break
     case ActionEvents.showEdit:

app/components/pub/my-ui/nav-footer/ba.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+function onClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button
+      class="bg-gray-400"
+      type="button"
+      @click="onClick"
+    >
+      <Icon
+        name="i-lucide-arrow-left"
+        class="me-2 align-middle"
+      />
+      Back
+    </Button>
+  </div>
+</template>