From 06e313d1687a32b628ca4be49d97514e16f911cc Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 23 Jun 2026 08:27:42 +0700
Subject: [PATCH] feat: introduce reusable DataTableEmpty component to
 standardize empty state handling across tables

---
 .../js/components/data-table/DataTable.vue    | 14 +------
 .../components/data-table/DataTableEmpty.vue  | 40 +++++++++++++++++++
 resources/js/components/data-table/index.ts   |  2 +
 .../cuttings/table/CuttingGroupedTable.vue    | 18 +--------
 .../products/table/ProductGroupedTable.vue    | 18 +--------
 .../table/RawMaterialGroupedTable.vue         | 18 +--------
 6 files changed, 50 insertions(+), 60 deletions(-)
 create mode 100644 resources/js/components/data-table/DataTableEmpty.vue

diff --git a/resources/js/components/data-table/DataTable.vue b/resources/js/components/data-table/DataTable.vue
index 3a39647..b0de179 100644
--- a/resources/js/components/data-table/DataTable.vue
+++ b/resources/js/components/data-table/DataTable.vue
@@ -5,10 +5,7 @@ import { FlexRender, getCoreRowModel, useVueTable } from '@tanstack/vue-table';
 import { computed, provide } from 'vue';
 import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
 import { Button } from '@/components/ui/button';
-import {
-    Empty, EmptyDescription,
-    EmptyHeader, EmptyTitle
-} from '@/components/ui/empty';
+import DataTableEmpty from './DataTableEmpty.vue';
 import {
     Table,
     TableBody,
@@ -199,14 +196,7 @@ function resolveRowSpan(row: TData, columnId: string): number | undefined {
                         </TableRow>
                     </template>
                     <TableEmpty v-else :colspan="resolvedColumns.length">
-                        <Empty>
-                            <EmptyHeader>
-                                <EmptyTitle>Data tidak ditemukan</EmptyTitle>
-                                <EmptyDescription>
-                                    Silakan lakukan pencarian atau filter untuk menemukan data yang Anda cari.
-                                </EmptyDescription>
-                            </EmptyHeader>
-                        </Empty>
+                        <DataTableEmpty plain />
                     </TableEmpty>
                 </TableBody>
             </Table>
diff --git a/resources/js/components/data-table/DataTableEmpty.vue b/resources/js/components/data-table/DataTableEmpty.vue
new file mode 100644
index 0000000..15aa531
--- /dev/null
+++ b/resources/js/components/data-table/DataTableEmpty.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import {
+    Empty,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyTitle,
+} from '@/components/ui/empty';
+
+withDefaults(
+    defineProps<{
+        title?: string;
+        description?: string;
+        plain?: boolean;
+        class?: HTMLAttributes['class'];
+    }>(),
+    {
+        title: 'Data tidak ditemukan',
+        description: 'Silakan lakukan pencarian atau filter untuk menemukan data yang Anda cari.',
+        plain: false,
+    }
+);
+</script>
+
+<template>
+    <div :class="cn(!plain && 'rounded-md border px-6 py-10', $props.class)">
+        <Empty>
+            <EmptyHeader>
+                <EmptyTitle>
+                    <slot name="title">{{ title }}</slot>
+                </EmptyTitle>
+                <EmptyDescription>
+                    <slot name="description">{{ description }}</slot>
+                </EmptyDescription>
+            </EmptyHeader>
+            <slot />
+        </Empty>
+    </div>
+</template>
diff --git a/resources/js/components/data-table/index.ts b/resources/js/components/data-table/index.ts
index bfe57e5..ae40bbb 100644
--- a/resources/js/components/data-table/index.ts
+++ b/resources/js/components/data-table/index.ts
@@ -1,3 +1,5 @@
 export { default as DataTable } from './DataTable.vue';
 export { default as DataTableColumnHeader } from './DataTableColumnHeader.vue';
 export { default as DataTableToolbar } from './DataTableToolbar.vue';
+export { default as DataTableEmpty } from './DataTableEmpty.vue';
+
diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
index 3ef3733..50d2e81 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
@@ -6,12 +6,7 @@ import { CuttingStatus } from '@/constants/cutting-status';
 import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-    Empty,
-    EmptyDescription,
-    EmptyHeader,
-    EmptyTitle,
-} from '@/components/ui/empty';
+import { DataTableEmpty } from '@/components/data-table';
 import {
     Table,
     TableBody,
@@ -299,16 +294,7 @@ function getGroupedMaterialUsage(materials: any[]): MaterialUsageGroup[] {
             </div>
         </div>
 
-        <div v-else class="rounded-md border px-6 py-10">
-            <Empty>
-                <EmptyHeader>
-                    <EmptyTitle>Data tidak ditemukan</EmptyTitle>
-                    <EmptyDescription>
-                        Silakan lakukan pencarian untuk menemukan data yang Anda cari.
-                    </EmptyDescription>
-                </EmptyHeader>
-            </Empty>
-        </div>
+        <DataTableEmpty v-else description="Silakan lakukan pencarian untuk menemukan data yang Anda cari." />
 
         <div v-if="pagination" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <p class="text-muted-foreground text-sm">
diff --git a/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue b/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue
index 006f0c8..1e32251 100644
--- a/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue
+++ b/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue
@@ -6,12 +6,7 @@ import { formatRupiah } from '@/lib/rupiah';
 import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-    Empty,
-    EmptyDescription,
-    EmptyHeader,
-    EmptyTitle,
-} from '@/components/ui/empty';
+import { DataTableEmpty } from '@/components/data-table';
 import {
     Table,
     TableBody,
@@ -172,16 +167,7 @@ function rowNumber(index: number): number {
             </div>
         </div>
 
-        <div v-else class="rounded-md border px-6 py-10">
-            <Empty>
-                <EmptyHeader>
-                    <EmptyTitle>Data tidak ditemukan</EmptyTitle>
-                    <EmptyDescription>
-                        Silakan lakukan pencarian atau filter untuk menemukan data yang Anda cari.
-                    </EmptyDescription>
-                </EmptyHeader>
-            </Empty>
-        </div>
+        <DataTableEmpty v-else />
 
         <div v-if="pagination" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <p class="text-muted-foreground text-sm">
diff --git a/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue b/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue
index 2243ba4..db0c5fe 100644
--- a/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue
+++ b/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue
@@ -5,12 +5,7 @@ import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
 import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-    Empty,
-    EmptyDescription,
-    EmptyHeader,
-    EmptyTitle,
-} from '@/components/ui/empty';
+import { DataTableEmpty } from '@/components/data-table';
 import {
     Table,
     TableBody,
@@ -148,16 +143,7 @@ function rowNumber(index: number): number {
             </div>
         </div>
 
-        <div v-else class="rounded-md border px-6 py-10">
-            <Empty>
-                <EmptyHeader>
-                    <EmptyTitle>Data tidak ditemukan</EmptyTitle>
-                    <EmptyDescription>
-                        Silakan lakukan pencarian atau filter untuk menemukan data yang Anda cari.
-                    </EmptyDescription>
-                </EmptyHeader>
-            </Empty>
-        </div>
+        <DataTableEmpty v-else />
 
         <div v-if="pagination" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <p class="text-muted-foreground text-sm">