From 370398412bac14197b88e572a57f7066dcb5fede Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 10 Jun 2026 02:05:26 +0700
Subject: [PATCH] Add category management actions component with edit and
 delete functionality. Integrate confirmation dialog for delete actions and
 implement permission checks for user actions. Introduce new dialog components
 for enhanced UI interactions.

---
 .../categories/data-table-actions.vue         | 70 +++++++++++++++++++
 resources/js/components/ui/dialog/Dialog.vue  | 19 +++++
 .../js/components/ui/dialog/DialogClose.vue   | 15 ++++
 .../js/components/ui/dialog/DialogContent.vue | 53 ++++++++++++++
 .../ui/dialog/DialogDescription.vue           | 23 ++++++
 .../js/components/ui/dialog/DialogFooter.vue  | 27 +++++++
 .../js/components/ui/dialog/DialogHeader.vue  | 17 +++++
 .../js/components/ui/dialog/DialogOverlay.vue | 21 ++++++
 .../ui/dialog/DialogScrollContent.vue         | 59 ++++++++++++++++
 .../js/components/ui/dialog/DialogTitle.vue   | 23 ++++++
 .../js/components/ui/dialog/DialogTrigger.vue | 15 ++++
 resources/js/components/ui/dialog/index.ts    | 10 +++
 12 files changed, 352 insertions(+)
 create mode 100644 resources/js/components/categories/data-table-actions.vue
 create mode 100644 resources/js/components/ui/dialog/Dialog.vue
 create mode 100644 resources/js/components/ui/dialog/DialogClose.vue
 create mode 100644 resources/js/components/ui/dialog/DialogContent.vue
 create mode 100644 resources/js/components/ui/dialog/DialogDescription.vue
 create mode 100644 resources/js/components/ui/dialog/DialogFooter.vue
 create mode 100644 resources/js/components/ui/dialog/DialogHeader.vue
 create mode 100644 resources/js/components/ui/dialog/DialogOverlay.vue
 create mode 100644 resources/js/components/ui/dialog/DialogScrollContent.vue
 create mode 100644 resources/js/components/ui/dialog/DialogTitle.vue
 create mode 100644 resources/js/components/ui/dialog/DialogTrigger.vue
 create mode 100644 resources/js/components/ui/dialog/index.ts

diff --git a/resources/js/components/categories/data-table-actions.vue b/resources/js/components/categories/data-table-actions.vue
new file mode 100644
index 0000000..25f8e99
--- /dev/null
+++ b/resources/js/components/categories/data-table-actions.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import { Pencil, Trash2 } from '@lucide/vue';
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+import ConfirmDialog from '@/components/ConfirmDialog.vue';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useCan } from '@/composables/useCan';
+import type { CategoryListItem } from '@/types/category';
+
+const props = defineProps<{
+    category: CategoryListItem;
+}>();
+
+const emit = defineEmits<{
+    edit: [category: CategoryListItem];
+}>();
+
+const { can } = useCan();
+
+const deleteConfirmOpen = ref(false);
+const deleteProcessing = ref(false);
+
+function destroyCategory() {
+    deleteProcessing.value = true;
+
+    router.delete(`/admin/master/categories/${props.category.id}`, {
+        preserveScroll: true,
+        onSuccess: () => {
+            deleteConfirmOpen.value = false;
+        },
+        onError: () => {
+            toast.error('Gagal menghapus kategori.');
+        },
+        onFinish: () => {
+            deleteProcessing.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <div class="flex items-center justify-end gap-1">
+        <Tooltip v-if="can('categories.update')">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="size-8" @click="emit('edit', category)">
+                    <Pencil class="size-4" />
+                    <span class="sr-only">Ubah</span>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Ubah</TooltipContent>
+        </Tooltip>
+
+        <Tooltip v-if="can('categories.delete')">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="text-destructive hover:text-destructive size-8"
+                    @click="deleteConfirmOpen = true">
+                    <Trash2 class="size-4" />
+                    <span class="sr-only">Hapus</span>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Hapus</TooltipContent>
+        </Tooltip>
+    </div>
+
+    <ConfirmDialog v-if="can('categories.delete')" v-model:open="deleteConfirmOpen" title="Hapus kategori?"
+        :description="`Kategori ${category.name} akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan.`"
+        confirm-label="Hapus" cancel-label="Batal" destructive :loading="deleteProcessing" @confirm="destroyCategory" />
+</template>
diff --git a/resources/js/components/ui/dialog/Dialog.vue b/resources/js/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..ade5260
--- /dev/null
+++ b/resources/js/components/ui/dialog/Dialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogClose.vue b/resources/js/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..c5fae04
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogContent.vue b/resources/js/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..05172f0
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogDescription.vue b/resources/js/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..f52e655
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogFooter.vue b/resources/js/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..c7500a9
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { DialogClose } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  showCloseButton?: boolean
+}>(), {
+  showCloseButton: false,
+})
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+    <DialogClose v-if="showCloseButton" as-child>
+      <Button variant="outline">
+        Close
+      </Button>
+    </DialogClose>
+  </div>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogHeader.vue b/resources/js/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..bfc3c64
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogOverlay.vue b/resources/js/components/ui/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..7790077
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogScrollContent.vue b/resources/js/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..abfb3a1
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogTitle.vue b/resources/js/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..860f01a
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/resources/js/components/ui/dialog/DialogTrigger.vue b/resources/js/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..49667e9
--- /dev/null
+++ b/resources/js/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/resources/js/components/ui/dialog/index.ts b/resources/js/components/ui/dialog/index.ts
new file mode 100644
index 0000000..6768b09
--- /dev/null
+++ b/resources/js/components/ui/dialog/index.ts
@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"