diff --git a/resources/js/components/modal/delete-confirmation.tsx b/resources/js/components/modal/delete-confirmation.tsx
new file mode 100644
index 0000000..ae6de14
--- /dev/null
+++ b/resources/js/components/modal/delete-confirmation.tsx
@@ -0,0 +1,59 @@
+import { Trash2, X } from 'lucide-react';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogMedia,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import React from 'react';
+
+interface DeleteConfirmationProps {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    onDelete: () => void;
+    cancelText?: string;
+    deleteText?: string;
+}
+
+export function DeleteConfirmation({
+    isOpen,
+    onOpenChange,
+    title = "Hapus item?",
+    description = "Tindakan ini tidak dapat dibatalkan. Item ini akan dihapus secara permanen.",
+    onDelete,
+    cancelText = "Batal",
+    deleteText = "Hapus",
+}: DeleteConfirmationProps) {
+    return (
+        <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
+            <AlertDialogContent size="default">
+                <AlertDialogHeader>
+                    <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
+                        <Trash2 className="size-5" />
+                    </AlertDialogMedia>
+                    <AlertDialogTitle>{title}</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        {description}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel variant="outline" className="gap-2">
+                        <X className="size-4" />
+                        {cancelText}
+                    </AlertDialogCancel>
+                    <AlertDialogAction onClick={onDelete} variant="destructive" className="gap-2">
+                        <Trash2 className="size-4" />
+                        {deleteText}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}
diff --git a/resources/js/pages/admin/finance/expense/index.tsx b/resources/js/pages/admin/finance/expense/index.tsx
index fdc8182..947f20d 100644
--- a/resources/js/pages/admin/finance/expense/index.tsx
+++ b/resources/js/pages/admin/finance/expense/index.tsx
@@ -20,6 +20,7 @@ import { Dialog, DialogContent } from "@/components/ui/dialog"
 import { useExpenseIndex } from './hooks/use-expense-index';
 import { getColumns } from './partials/columns';
 import { ExpenseFormModal } from './partials/expense-form-modal';
+import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
 
 export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
     const {
@@ -108,58 +109,30 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
             </Card>
 
             {/* Single Delete Confirmation */}
-            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus pengeluaran?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. Pengeluaran <strong>{expenseToDelete?.name}</strong> akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={confirmDelete} variant="destructive" className="gap-2">
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                title="Hapus pengeluaran?"
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. Pengeluaran <strong>{expenseToDelete?.name}</strong> akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmDelete}
+            />
 
             {/* Bulk Delete Confirmation */}
-            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus {rowsToDelete.length} pengeluaran?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={confirmBulkDelete}
-                            variant="destructive"
-                            className="gap-2"
-                        >
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isBulkDeleteDialogOpen}
+                onOpenChange={setIsBulkDeleteDialogOpen}
+                title={`Hapus ${rowsToDelete.length} pengeluaran?`}
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmBulkDelete}
+            />
         </div>
     );
 }
diff --git a/resources/js/pages/admin/finance/payroll/index.tsx b/resources/js/pages/admin/finance/payroll/index.tsx
index 5b4b927..3542948 100644
--- a/resources/js/pages/admin/finance/payroll/index.tsx
+++ b/resources/js/pages/admin/finance/payroll/index.tsx
@@ -20,6 +20,7 @@ import { usePayrollIndex } from './hooks/use-payroll-index';
 import { Badge } from '@/components/ui/badge';
 import { getColumns } from './partials/columns';
 import { PayrollFormModal } from './partials/payroll-form-modal';
+import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
 
 export default function PayrollIndex({
     payrolls,
@@ -147,58 +148,30 @@ export default function PayrollIndex({
             </Card>
 
             {/* Single Delete Confirmation */}
-            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus data penggajian?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. Data penggajian untuk <strong>{payrollToDelete?.user?.name}</strong> periode <strong>{payrollToDelete?.period_month}</strong> akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={confirmDelete} variant="destructive" className="gap-2">
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                title="Hapus penggajian?"
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. Penggajian <strong>{payrollToDelete?.period_month_formatted}</strong> akan dihapus secara permanen dan stok akan dikembalikan.
+                    </>
+                }
+                onDelete={confirmDelete}
+            />
 
             {/* Bulk Delete Confirmation */}
-            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus {rowsToDelete.length} data penggajian?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={confirmBulkDelete}
-                            variant="destructive"
-                            className="gap-2"
-                        >
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isBulkDeleteDialogOpen}
+                onOpenChange={setIsBulkDeleteDialogOpen}
+                title={`Hapus ${rowsToDelete.length} penggajian?`}
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmBulkDelete}
+            />
         </div>
     );
 }
diff --git a/resources/js/pages/admin/manage/order/index.tsx b/resources/js/pages/admin/manage/order/index.tsx
index 2bb1e2a..7083ed8 100644
--- a/resources/js/pages/admin/manage/order/index.tsx
+++ b/resources/js/pages/admin/manage/order/index.tsx
@@ -38,6 +38,7 @@ import { EscPosEncoder } from '@/lib/esc-pos-encoder';
 import { format } from 'date-fns';
 import { id } from 'date-fns/locale';
 import { toast } from 'sonner';
+import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
 
 export default function OrderIndex({ orders }: { orders: Order[] }) {
     const {
@@ -215,58 +216,30 @@ export default function OrderIndex({ orders }: { orders: Order[] }) {
             </Card>
 
             {/* Single Delete Confirmation */}
-            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus pesanan?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. Data pesanan dengan nomor invoice <strong>{orderToDelete?.invoice_number}</strong> akan dihapus secara permanen dan stok akan dikembalikan.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={confirmDelete} variant="destructive" className="gap-2">
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                title="Hapus pesanan?"
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. Pesanan <strong>{orderToDelete?.invoice_number}</strong> akan dihapus secara permanen dan stok akan dikembalikan.
+                    </>
+                }
+                onDelete={confirmDelete}
+            />
 
             {/* Bulk Delete Confirmation */}
-            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus {rowsToDelete.length} data pesanan?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> pesanan yang terpilih akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={confirmBulkDelete}
-                            variant="destructive"
-                            className="gap-2"
-                        >
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isBulkDeleteDialogOpen}
+                onOpenChange={setIsBulkDeleteDialogOpen}
+                title={`Hapus ${rowsToDelete.length} pesanan?`}
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmBulkDelete}
+            />
         </div>
     );
 }
diff --git a/resources/js/pages/admin/manage/purchase/index.tsx b/resources/js/pages/admin/manage/purchase/index.tsx
index 5273c88..3bd5d14 100644
--- a/resources/js/pages/admin/manage/purchase/index.tsx
+++ b/resources/js/pages/admin/manage/purchase/index.tsx
@@ -21,6 +21,8 @@ import {
 import purchaseRoutes from '@/routes/purchase';
 import { usePurchaseIndex } from './hooks/use-purchase-index';
 import { getColumns } from './partials/columns';
+import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
+import { formatDate } from '@/lib/formatters';
 
 export default function PurchaseIndex({ purchases }: { purchases: Purchase[] }) {
     const {
@@ -79,47 +81,32 @@ export default function PurchaseIndex({ purchases }: { purchases: Purchase[] })
             </Card>
 
             {/* Single Delete Confirmation */}
-            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus data belanja?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. Data belanja tanggal <strong>{purchaseToDelete && format(new Date(purchaseToDelete.purchase_date), 'dd MMMM yyyy', { locale: id })}</strong> akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline">Batal</AlertDialogCancel>
-                        <AlertDialogAction onClick={confirmDelete} variant="destructive">Hapus</AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                title="Hapus belanja?"
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. Belanja <strong>{purchaseToDelete?.purchase_date
+                            ? formatDate(purchaseToDelete?.purchase_date)
+                            : purchaseToDelete?.note || '-'}</strong> akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmDelete}
+            />
 
             {/* Bulk Delete Confirmation */}
-            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus {rowsToDelete.length} data belanja?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline">Batal</AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={confirmBulkDelete}
-                            variant="destructive"
-                        >
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isBulkDeleteDialogOpen}
+                onOpenChange={setIsBulkDeleteDialogOpen}
+                title={`Hapus ${rowsToDelete.length} belanja?`}
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmBulkDelete}
+            />
         </div>
     );
 }
diff --git a/resources/js/pages/admin/master/category/index.tsx b/resources/js/pages/admin/master/category/index.tsx
index 1e0cd97..35207db 100644
--- a/resources/js/pages/admin/master/category/index.tsx
+++ b/resources/js/pages/admin/master/category/index.tsx
@@ -4,21 +4,11 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Trash2, Plus, X } from 'lucide-react';
 import { DataTable } from '@/components/data-table';
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogMedia,
-    AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
 
 import { useCategoryIndex } from './hooks/use-category-index';
 import { getColumns } from './partials/columns';
 import { CategoryFormModal } from './partials/category-form-modal';
+import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
 
 export default function CategoryIndex({ categories }: { categories: Category[] }) {
     const {
@@ -97,58 +87,30 @@ export default function CategoryIndex({ categories }: { categories: Category[] }
             </Card>
 
             {/* Single Delete Confirmation */}
-            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus kategori?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. Kategori <strong>{categoryToDelete?.name}</strong> akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={confirmDelete} variant="destructive" className="gap-2">
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                title="Hapus kategori?"
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. Kategori <strong>{categoryToDelete?.name}</strong> akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmDelete}
+            />
 
             {/* Bulk Delete Confirmation */}
-            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus {rowsToDelete.length} kategori?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={confirmBulkDelete}
-                            variant="destructive"
-                            className="gap-2"
-                        >
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isBulkDeleteDialogOpen}
+                onOpenChange={setIsBulkDeleteDialogOpen}
+                title={`Hapus ${rowsToDelete.length} kategori?`}
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmBulkDelete}
+            />
         </div>
     );
 }
diff --git a/resources/js/pages/admin/master/product/index.tsx b/resources/js/pages/admin/master/product/index.tsx
index 1af3e46..09f267b 100644
--- a/resources/js/pages/admin/master/product/index.tsx
+++ b/resources/js/pages/admin/master/product/index.tsx
@@ -20,6 +20,7 @@ import productRoutes from '@/routes/product';
 import { useProductIndex } from './hooks/use-product-index';
 import { getColumns } from './partials/columns';
 import { ImagePreviewDialog } from './partials/image-preview-dialog';
+import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
 
 export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) {
     const {
@@ -100,58 +101,30 @@ export default function ProductIndex({ products, categories }: { products: Produ
             </Card>
 
             {/* Single Delete Confirmation */}
-            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus produk?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. Produk <strong>{productToDelete?.name}</strong> akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={confirmDelete} variant="destructive" className="gap-2">
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                title="Hapus produk?"
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. Produk <strong>{productToDelete?.name}</strong> akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmDelete}
+            />
 
             {/* Bulk Delete Confirmation */}
-            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus {rowsToDelete.length} produk?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={confirmBulkDelete}
-                            variant="destructive"
-                            className="gap-2"
-                        >
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isBulkDeleteDialogOpen}
+                onOpenChange={setIsBulkDeleteDialogOpen}
+                title={`Hapus ${rowsToDelete.length} produk?`}
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmBulkDelete}
+            />
 
             <ImagePreviewDialog
                 imageUrl={selectedImage}
diff --git a/resources/js/pages/admin/master/user/index.tsx b/resources/js/pages/admin/master/user/index.tsx
index 503343f..85d3bed 100644
--- a/resources/js/pages/admin/master/user/index.tsx
+++ b/resources/js/pages/admin/master/user/index.tsx
@@ -19,6 +19,7 @@ import {
 import userRoutes from '@/routes/user';
 import { useUserIndex } from './hooks/use-user-index';
 import { getColumns } from './partials/columns';
+import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
 
 export default function UserIndex({ users, defaultPassword }: { users: User[], defaultPassword: string }) {
     const {
@@ -81,31 +82,6 @@ export default function UserIndex({ users, defaultPassword }: { users: User[], d
                 </CardContent>
             </Card>
 
-            {/* Single Delete Confirmation */}
-            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus pegawai?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. Pegawai <strong>{userToDelete?.name}</strong> akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={confirmDelete} variant="destructive" className="gap-2">
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-
             {/* Reset Password Confirmation */}
             <AlertDialog open={isResetPasswordOpen} onOpenChange={setIsResetPasswordOpen}>
                 <AlertDialogContent size="default">
@@ -131,34 +107,31 @@ export default function UserIndex({ users, defaultPassword }: { users: User[], d
                 </AlertDialogContent>
             </AlertDialog>
 
+            {/* Single Delete Confirmation */}
+            <DeleteConfirmation
+                isOpen={isDeleteDialogOpen}
+                onOpenChange={setIsDeleteDialogOpen}
+                title="Hapus pegawai?"
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. Pegawai <strong>{userToDelete?.name}</strong> akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmDelete}
+            />
+
             {/* Bulk Delete Confirmation */}
-            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
-                <AlertDialogContent size="default">
-                    <AlertDialogHeader>
-                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-                            <Trash2 className="size-5" />
-                        </AlertDialogMedia>
-                        <AlertDialogTitle>Hapus {rowsToDelete.length} pegawai?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> pegawai yang terpilih akan dihapus secara permanen.
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel variant="outline" className="gap-2">
-                            <X className="size-4" />
-                            Batal
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={confirmBulkDelete}
-                            variant="destructive"
-                            className="gap-2"
-                        >
-                            <Trash2 className="size-4" />
-                            Hapus
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
+            <DeleteConfirmation
+                isOpen={isBulkDeleteDialogOpen}
+                onOpenChange={setIsBulkDeleteDialogOpen}
+                title={`Hapus ${rowsToDelete.length} pegawai?`}
+                description={
+                    <>
+                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
+                    </>
+                }
+                onDelete={confirmBulkDelete}
+            />
         </div>
     );
 }