refactor: reformat code and update action buttons to use Tooltips for improved UI consistency

resources/js/components/admin/manage/cuttings/data-table-actions.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { Link, router, useForm } from '@inertiajs/vue3';
-import { Check, Pencil, RotateCcw, Scissors, Trash2, X } from '@lucide/vue';
-import { computed, ref, watch } from 'vue';
-import { toast } from 'vue-sonner';
 import ConfirmDialog from '@/components/ConfirmDialog.vue';
 import { Button } from '@/components/ui/button';
 import {
@@ -20,10 +16,18 @@ import {
     FieldSet,
 } from '@/components/ui/field';
 import { Textarea } from '@/components/ui/textarea';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useCan } from '@/composables/useCan';
 import { FIELD_LIMITS } from '@/lib/field-limits';
 import type { CuttingListItem, CuttingStatusAction } from '@/types/cutting';
+import { Link, router, useForm } from '@inertiajs/vue3';
+import { Check, Pencil, RotateCcw, Scissors, Trash2, X } from '@lucide/vue';
+import { computed, ref, watch } from 'vue';
+import { toast } from 'vue-sonner';
 
 const props = defineProps<{
     cutting: CuttingListItem;
@@ -45,8 +49,12 @@ const rejectForm = useForm({
 
 const availableActions = computed(() => props.cutting.available_actions ?? []);
 
-const canEdit = computed(() => props.cutting.is_editable && can('cuttings.update'));
+const canEdit = computed(
-const canDelete = computed(() => can('cuttings.delete') && props.cutting.status === 'in_progress');
+    () => props.cutting.is_editable && can('cuttings.update'),
+);
+const canDelete = computed(
+    () => can('cuttings.delete') && props.cutting.status === 'in_progress',
+);
 
 function canPerformAction(action: CuttingStatusAction): boolean {
     return can(action.permission);
@@ -88,23 +96,31 @@ function transitionStatus() {
 
     statusProcessing.value = true;
 
-    router.post(`/admin/manage/cuttings/${props.cutting.id}/status`, {
+    router.post(
-        status: pendingAction.value.status,
+        `/admin/manage/cuttings/${props.cutting.id}/status`,
-    }, {
+        {
-        preserveScroll: true,
+            status: pendingAction.value.status,
-        onSuccess: () => {
-            statusConfirmOpen.value = false;
-            pendingAction.value = null;
         },
-        onError: (errors) => {
+        {
-            const message = Object.values(errors)[0];
+            preserveScroll: true,
+            onSuccess: () => {
+                statusConfirmOpen.value = false;
+                pendingAction.value = null;
+            },
+            onError: (errors) => {
+                const message = Object.values(errors)[0];
 
-            toast.error(typeof message === 'string' ? message : 'Gagal memperbarui status cutting.');
+                toast.error(
+                    typeof message === 'string'
+                        ? message
+                        : 'Gagal memperbarui status cutting.',
+                );
+            },
+            onFinish: () => {
+                statusProcessing.value = false;
+            },
         },
-        onFinish: () => {
+    );
-            statusProcessing.value = false;
-        },
-    });
 }
 
 function submitReject() {
@@ -116,7 +132,11 @@ function submitReject() {
         onError: (errors) => {
             const message = Object.values(errors)[0];
 
-            toast.error(typeof message === 'string' ? message : 'Gagal menolak cutting.');
+            toast.error(
+                typeof message === 'string'
+                    ? message
+                    : 'Gagal menolak cutting.',
+            );
         },
     });
 }
@@ -165,12 +185,30 @@ function actionIcon(status: string) {
 <template>
     <div class="flex flex-wrap items-center justify-end gap-1">
         <template v-for="action in availableActions" :key="action.status">
-            <Button v-if="canPerformAction(action)" size="sm" :variant="action.destructive ? 'outline' : 'default'"
+            <Tooltip v-if="canPerformAction(action)">
-                :class="action.destructive ? 'text-destructive hover:text-destructive' : ''"
+                <TooltipTrigger as-child>
-                @click="openStatusConfirm(action)">
+                    <Button
-                <component :is="actionIcon(action.status)" class="size-3.5" />
+                        size="sm"
-                {{ action.label }}
+                        variant="ghost"
-            </Button>
+                        :class="
+                            action.destructive
+                                ? 'text-destructive hover:text-destructive'
+                                : ''
+                        "
+                        @click="openStatusConfirm(action)"
+                    >
+                        <component
+                            :is="actionIcon(action.status)"
+                            class="size-3.5"
+                        />
+                        <span class="sr-only">{{ action.label }}</span>
+                    </Button>
+                </TooltipTrigger>
+
+                <TooltipContent>
+                    {{ action.label }}
+                </TooltipContent>
+            </Tooltip>
         </template>
 
         <Tooltip v-if="canEdit">
@@ -187,8 +225,12 @@ function actionIcon(status: string) {
 
         <Tooltip v-if="canDelete">
             <TooltipTrigger as-child>
-                <Button variant="ghost" size="icon" class="text-destructive hover:text-destructive size-8"
+                <Button
-                    @click="deleteConfirmOpen = true">
+                    variant="ghost"
+                    size="icon"
+                    class="size-8 text-destructive hover:text-destructive"
+                    @click="deleteConfirmOpen = true"
+                >
                     <Trash2 class="size-4" />
                     <span class="sr-only">Hapus</span>
                 </Button>
@@ -197,15 +239,34 @@ function actionIcon(status: string) {
         </Tooltip>
     </div>
 
-    <ConfirmDialog v-model:open="statusConfirmOpen"
+    <ConfirmDialog
-        :title="pendingAction ? `${pendingAction.label} cutting?` : 'Ubah status cutting?'"
+        v-model:open="statusConfirmOpen"
-        :description="pendingAction ? statusConfirmDescription(pendingAction) : ''"
+        :title="
-        :confirm-label="pendingAction?.label ?? 'Konfirmasi'" cancel-label="Batal"
+            pendingAction
-        :destructive="pendingAction?.destructive ?? false" :loading="statusProcessing" @confirm="transitionStatus" />
+                ? `${pendingAction.label} cutting?`
+                : 'Ubah status cutting?'
+        "
+        :description="
+            pendingAction ? statusConfirmDescription(pendingAction) : ''
+        "
+        :confirm-label="pendingAction?.label ?? 'Konfirmasi'"
+        cancel-label="Batal"
+        :destructive="pendingAction?.destructive ?? false"
+        :loading="statusProcessing"
+        @confirm="transitionStatus"
+    />
 
-    <ConfirmDialog v-if="canDelete" v-model:open="deleteConfirmOpen" title="Hapus cutting?"
+    <ConfirmDialog
-        description="Data cutting ini akan dihapus permanen." confirm-label="Hapus" cancel-label="Batal" destructive
+        v-if="canDelete"
-        :loading="deleteProcessing" @confirm="destroyCutting" />
+        v-model:open="deleteConfirmOpen"
+        title="Hapus cutting?"
+        description="Data cutting ini akan dihapus permanen."
+        confirm-label="Hapus"
+        cancel-label="Batal"
+        destructive
+        :loading="deleteProcessing"
+        @confirm="destroyCutting"
+    />
 
     <Dialog v-model:open="rejectDialogOpen">
         <DialogContent class="sm:max-w-md">
@@ -217,21 +278,42 @@ function actionIcon(status: string) {
                 <FieldGroup>
                     <FieldSet class="grid gap-4">
                         <Field>
-                            <FieldLabel for="cutting-reject-reason" required>Alasan Penolakan</FieldLabel>
+                            <FieldLabel for="cutting-reject-reason" required
-                            <Textarea id="cutting-reject-reason" v-model="rejectForm.reason"
+                                >Alasan Penolakan</FieldLabel
-                                placeholder="Contoh: Jumlah barang yang diterima tidak sesuai" rows="3" autofocus
+                            >
-                                :maxlength="FIELD_LIMITS.reason" />
+                            <Textarea
-                            <FieldError :errors="rejectForm.errors.reason ? [rejectForm.errors.reason] : []" />
+                                id="cutting-reject-reason"
+                                v-model="rejectForm.reason"
+                                placeholder="Contoh: Jumlah barang yang diterima tidak sesuai"
+                                rows="3"
+                                autofocus
+                                :maxlength="FIELD_LIMITS.reason"
+                            />
+                            <FieldError
+                                :errors="
+                                    rejectForm.errors.reason
+                                        ? [rejectForm.errors.reason]
+                                        : []
+                                "
+                            />
                         </Field>
                     </FieldSet>
                 </FieldGroup>
 
                 <DialogFooter class="mt-6">
-                    <Button type="button" variant="outline" :disabled="rejectForm.processing"
+                    <Button
-                        @click="rejectDialogOpen = false">
+                        type="button"
+                        variant="outline"
+                        :disabled="rejectForm.processing"
+                        @click="rejectDialogOpen = false"
+                    >
                         Batal
                     </Button>
-                    <Button type="submit" variant="destructive" :disabled="rejectForm.processing">
+                    <Button
+                        type="submit"
+                        variant="destructive"
+                        :disabled="rejectForm.processing"
+                    >
                         {{ rejectForm.processing ? 'Menyimpan...' : 'Tolak' }}
                     </Button>
                 </DialogFooter>