diff --git a/app/components/pub/nav/dropdown-action-du.vue b/app/components/pub/nav/dropdown-action-du.vue
new file mode 100644
index 00000000..4253a675
--- /dev/null
+++ b/app/components/pub/nav/dropdown-action-du.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ListItemDto, LinkItem } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showDetail'
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showEdit'
+  recItem.value = props.rec
+}
+
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+        >
+          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            v-slot="{ active }"
+            class="hover:bg-gray-100"
+            @click="item.onClick"
+          >
+            <Icon :name="item.icon" />
+            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/nav/dropdown-action-ducd.vue b/app/components/pub/nav/dropdown-action-ducd.vue
new file mode 100644
index 00000000..24f11fa8
--- /dev/null
+++ b/app/components/pub/nav/dropdown-action-ducd.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ListItemDto, LinkItem } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showDetail'
+  recItem.value = props.rec
+}
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showEdit'
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showConfirmDel'
+  recItem.value = props.rec
+}
+
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Batal',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-x',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+        >
+          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            v-slot="{ active }"
+            class="hover:bg-gray-100"
+            @click="item.onClick"
+          >
+            <Icon :name="item.icon" />
+            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/nav/dropdown-action-ud.vue b/app/components/pub/nav/dropdown-action-ud.vue
new file mode 100644
index 00000000..a3c4bac5
--- /dev/null
+++ b/app/components/pub/nav/dropdown-action-ud.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ListItemDto, LinkItem } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showEdit'
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'showConfirmDel'
+  recItem.value = props.rec
+}
+
+const linkItems: LinkItem[] = [
+  {
+    label: 'Edit',
+    onClick: () => {
+      edit()
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
+        >
+          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            v-slot="{ active }"
+            class="hover:bg-gray-100"
+            @click="item.onClick"
+          >
+            <Icon :name="item.icon" />
+            <span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>