From baf6ab1fda61f59f966949a1886c2399ac9e7551 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Wed, 19 Nov 2025 20:09:19 +0700
Subject: [PATCH] dev: hotfix, pubs + my-ui/confirmation/confirmation
 noTrueSlot from record-confirmation + my-ui/confirmation/confirmation
 additional message + my-ui/confirmation/record-confirmation  supplies
 noTrueSlot + my-ui/modal/modal text size + my-ui/doc-entry semicolon export

---
 .../pub/my-ui/confirmation/confirmation.vue   | 16 ++--
 .../confirmation/record-confirmation.vue      | 22 +++--
 .../pub/my-ui/data/dropdown-action-dsd.vue    | 95 +++++++++++++++++++
 app/components/pub/my-ui/data/types.ts        |  7 +-
 app/components/pub/my-ui/doc-entry/block.vue  |  2 +-
 app/components/pub/my-ui/doc-entry/index.ts   |  1 +
 app/components/pub/my-ui/modal/dialog.vue     |  6 +-
 7 files changed, 124 insertions(+), 25 deletions(-)
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dsd.vue

diff --git a/app/components/pub/my-ui/confirmation/confirmation.vue b/app/components/pub/my-ui/confirmation/confirmation.vue
index b5c328aa..928d7827 100644
--- a/app/components/pub/my-ui/confirmation/confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/confirmation.vue
@@ -8,6 +8,8 @@ interface ConfirmationProps {
   message?: string
   confirmText?: string
   cancelText?: string
+  noTrueSlot?: boolean
+  skipClosingMessage?: boolean
   variant?: 'default' | 'destructive' | 'warning'
   size?: 'sm' | 'md' | 'lg' | 'xl'
 }
@@ -71,20 +73,22 @@ function handleCancel() {
   <Dialog v-model:open="isOpen" :title="title" :size="size">
     <div class="space-y-4">
       <!-- Icon dan pesan -->
-      <div class="flex items-center gap-3">
-        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
+      <div class="flex items-start gap-3">
+        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-4 h-4 2xl:h-5 2xl:h-6 flex-shrink-0" />
         <div class="flex-1">
-          <p class="text-sm text-muted-foreground leading-relaxed">
-            {{ message }}
-          </p>
+          {{ message }} {{ !noTrueSlot ? ' dengan informasi sebagai berikut:' : '.' }}
         </div>
       </div>
 
       <!-- Slot untuk konten custom -->
-      <div v-if="$slots.default">
+      <div>
         <slot />
       </div>
 
+      <div v-if="!skipClosingMessage" class="">
+        Lanjutkan Proses?
+      </div>
+
       <!-- Footer buttons -->
       <div class="flex justify-end gap-3 pt-4">
         <Button variant="outline" @click="handleCancel">
diff --git a/app/components/pub/my-ui/confirmation/record-confirmation.vue b/app/components/pub/my-ui/confirmation/record-confirmation.vue
index cff54b2b..87249635 100644
--- a/app/components/pub/my-ui/confirmation/record-confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/record-confirmation.vue
@@ -46,31 +46,31 @@ const actionConfig = computed(() => {
   const configs = {
     delete: {
       title: 'Hapus Data',
-      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
+      message: 'Akan dilakukan penghapusan data',
       confirmText: 'Hapus',
       variant: 'destructive' as const,
     },
     deactivate: {
       title: 'Nonaktifkan Data',
-      message: 'Apakah Anda yakin ingin menonaktifkan data ini?',
+      message: 'Akan dilakukan peng-nonaktifkan data',
       confirmText: 'Nonaktifkan',
       variant: 'warning' as const,
     },
     activate: {
       title: 'Aktifkan Data',
-      message: 'Apakah Anda yakin ingin mengaktifkan data ini?',
+      message: 'Akan dilakukan pengaktifkan data',
       confirmText: 'Aktifkan',
       variant: 'default' as const,
     },
     archive: {
       title: 'Arsipkan Data',
-      message: 'Apakah Anda yakin ingin mengarsipkan data ini?',
+      message: 'Akan dilakukan pengarsipan data',
       confirmText: 'Arsipkan',
       variant: 'warning' as const,
     },
     restore: {
       title: 'Pulihkan Data',
-      message: 'Apakah Anda yakin ingin memulihkan data ini?',
+      message: 'Akan dilakukan pemulihan data',
       confirmText: 'Pulihkan',
       variant: 'default' as const,
     },
@@ -107,6 +107,8 @@ const finalCancelText = computed(() => {
 function handleConfirm() {
   if (props.record) {
     emit('confirm', props.record, props.action)
+  } else {
+    emit('confirm', { id: 0 }, 'confirmed')
   }
   emit('update:open', false)
 }
@@ -119,11 +121,13 @@ function handleCancel() {
 
 <template>
   <Confirmation
-v-model:open="isOpen" :title="finalTitle" :message="finalMessage" :confirm-text="finalConfirmText"
-    :cancel-text="finalCancelText" :variant="actionConfig.variant" size="md" @confirm="handleConfirm"
+    v-model:open="isOpen" :variant="actionConfig.variant" size="md"
+    :title="finalTitle" :message="finalMessage"
+    :confirm-text="finalConfirmText" :cancel-text="finalCancelText"
+    :no-true-slot="$slots.default ? false : true"
+    @confirm="handleConfirm"
     @cancel="handleCancel"
->
-    <!-- Slot untuk informasi tambahan record -->
+  >
     <div v-if="record && $slots.default" class="mt-4 p-3 bg-muted rounded-md">
       <slot :record="record" :action="action" />
     </div>
diff --git a/app/components/pub/my-ui/data/dropdown-action-dsd.vue b/app/components/pub/my-ui/data/dropdown-action-dsd.vue
new file mode 100644
index 00000000..c2eca763
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-dsd.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+interface Props {
+  rec: ListItemDto
+  size?: 'default' | 'sm' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Submit',
+    onClick: () => {
+      submit()
+    },
+    icon: 'i-lucide-check',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function submit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmSubmit
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          :size="size"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <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 border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index f27a5578..cf251cc8 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -42,12 +42,6 @@ export interface RefSearchNav {
   onClear: () => void
 }
 
-export interface RefExportNav {
-  onExportPdf?: () => void
-  onExportCsv?: () => void
-  onExportExcel?: () => void
-}
-
 // prepared header for relatively common usage
 export interface HeaderPrep {
   title?: string
@@ -79,6 +73,7 @@ export interface LinkItem {
 }
 
 export const ActionEvents = {
+  showConfirmSubmit: 'showConfirmSubmit',
   showConfirmDelete: 'showConfirmDel',
   showEdit: 'showEdit',
   showDetail: 'showDetail',
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index bf76c327..b51ad72a 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -64,7 +64,7 @@ const settingClass = computed(() => {
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
-  cls += '[&_label]:md:text-xs [&_label]:md:text-xs [&_label]:2xl:!text-sm'
+  cls += '[&_label]:md:text-xs [&_label]:2xl:!text-sm '
   return cls
 })
 </script>
diff --git a/app/components/pub/my-ui/doc-entry/index.ts b/app/components/pub/my-ui/doc-entry/index.ts
index 8af74884..269f1b8d 100644
--- a/app/components/pub/my-ui/doc-entry/index.ts
+++ b/app/components/pub/my-ui/doc-entry/index.ts
@@ -1,4 +1,5 @@
 export { default as Block } from './block.vue'
+export { default as Colon } from './colon.vue'
 export { default as Cell } from './cell.vue'
 export { default as Label } from './label.vue'
 export { default as Field } from './field.vue'
diff --git a/app/components/pub/my-ui/modal/dialog.vue b/app/components/pub/my-ui/modal/dialog.vue
index 974013a2..d771924f 100644
--- a/app/components/pub/my-ui/modal/dialog.vue
+++ b/app/components/pub/my-ui/modal/dialog.vue
@@ -52,8 +52,8 @@ const isOpen = computed({
     >
       <DialogHeader>
         <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
-          <div class="me-2 pt-0.5">
-            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
+          <div v-if="props.titleIcon" class="me-2 pt-0.5">
+            <Icon :name="props.titleIcon" :class="`!pt-2`" />
           </div>
           <div>
             {{ props.title }}
@@ -61,7 +61,7 @@ const isOpen = computed({
         </DialogTitle>
         <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
       </DialogHeader>
-      <DialogDescription :class="sizeClass">
+      <DialogDescription :class="`${sizeClass} md:text-xs 2xl:text-sm`">
         <slot />
       </DialogDescription>
     </DialogContent>