vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace AlertDialog with DeleteConfirmation component for consistent delete confirmation across finance, manage, and master pages

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-23 14:12:25 +07:00
parent cb2c16f0c4
commit d4ba91fc0d
8 changed files with 225 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
resources/js/components/modal/delete-confirmation.tsx Normal file
View File

@ -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>
);
}

69
resources/js/pages/admin/finance/expense/index.tsx
View File

@ -20,6 +20,7 @@ import { Dialog, DialogContent } from "@/components/ui/dialog"
import { useExpenseIndex } from './hooks/use-expense-index'; import { useExpenseIndex } from './hooks/use-expense-index';
import { getColumns } from './partials/columns'; import { getColumns } from './partials/columns';
import { ExpenseFormModal } from './partials/expense-form-modal'; import { ExpenseFormModal } from './partials/expense-form-modal';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) { export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
const { const {
@ -108,58 +109,30 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
</Card> </Card>
{/* Single Delete Confirmation */} {/* Single Delete Confirmation */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title="Hapus pengeluaran?"
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus pengeluaran?</AlertDialogTitle>
<AlertDialogDescription>
Tindakan ini tidak dapat dibatalkan. Pengeluaran <strong>{expenseToDelete?.name}</strong> akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan. Pengeluaran <strong>{expenseToDelete?.name}</strong> akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmDelete}
<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>
{/* Bulk Delete Confirmation */} {/* Bulk Delete Confirmation */}
<AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isBulkDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsBulkDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title={`Hapus ${rowsToDelete.length} pengeluaran?`}
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus {rowsToDelete.length} pengeluaran?</AlertDialogTitle>
<AlertDialogDescription>
Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmBulkDelete}
<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>
</div> </div>
); );
} }

71
resources/js/pages/admin/finance/payroll/index.tsx
View File

@ -20,6 +20,7 @@ import { usePayrollIndex } from './hooks/use-payroll-index';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { getColumns } from './partials/columns'; import { getColumns } from './partials/columns';
import { PayrollFormModal } from './partials/payroll-form-modal'; import { PayrollFormModal } from './partials/payroll-form-modal';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
export default function PayrollIndex({ export default function PayrollIndex({
payrolls, payrolls,
@ -147,58 +148,30 @@ export default function PayrollIndex({
</Card> </Card>
{/* Single Delete Confirmation */} {/* Single Delete Confirmation */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title="Hapus penggajian?"
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus data penggajian?</AlertDialogTitle> Tindakan ini tidak dapat dibatalkan. Penggajian <strong>{payrollToDelete?.period_month_formatted}</strong> akan dihapus secara permanen dan stok akan dikembalikan.
<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> onDelete={confirmDelete}
</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>
{/* Bulk Delete Confirmation */} {/* Bulk Delete Confirmation */}
<AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isBulkDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsBulkDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title={`Hapus ${rowsToDelete.length} penggajian?`}
<Trash2 className="size-5" /> description={
</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. Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmBulkDelete}
<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>
</div> </div>
); );
} }

73
resources/js/pages/admin/manage/order/index.tsx
View File

@ -38,6 +38,7 @@ import { EscPosEncoder } from '@/lib/esc-pos-encoder';
import { format } from 'date-fns'; import { format } from 'date-fns';
import { id } from 'date-fns/locale'; import { id } from 'date-fns/locale';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
export default function OrderIndex({ orders }: { orders: Order[] }) { export default function OrderIndex({ orders }: { orders: Order[] }) {
const { const {
@ -215,58 +216,30 @@ export default function OrderIndex({ orders }: { orders: Order[] }) {
</Card> </Card>
{/* Single Delete Confirmation */} {/* Single Delete Confirmation */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title="Hapus pesanan?"
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus pesanan?</AlertDialogTitle> Tindakan ini tidak dapat dibatalkan. Pesanan <strong>{orderToDelete?.invoice_number}</strong> akan dihapus secara permanen dan stok akan dikembalikan.
<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> onDelete={confirmDelete}
</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>
{/* Bulk Delete Confirmation */} {/* Bulk Delete Confirmation */}
<AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isBulkDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsBulkDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title={`Hapus ${rowsToDelete.length} pesanan?`}
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus {rowsToDelete.length} data pesanan?</AlertDialogTitle> Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
<AlertDialogDescription> </>
Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> pesanan yang terpilih akan dihapus secara permanen. }
</AlertDialogDescription> onDelete={confirmBulkDelete}
</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>
</div> </div>
); );
} }

63
resources/js/pages/admin/manage/purchase/index.tsx
View File

@ -21,6 +21,8 @@ import {
import purchaseRoutes from '@/routes/purchase'; import purchaseRoutes from '@/routes/purchase';
import { usePurchaseIndex } from './hooks/use-purchase-index'; import { usePurchaseIndex } from './hooks/use-purchase-index';
import { getColumns } from './partials/columns'; import { getColumns } from './partials/columns';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
import { formatDate } from '@/lib/formatters';
export default function PurchaseIndex({ purchases }: { purchases: Purchase[] }) { export default function PurchaseIndex({ purchases }: { purchases: Purchase[] }) {
const { const {
@ -79,47 +81,32 @@ export default function PurchaseIndex({ purchases }: { purchases: Purchase[] })
</Card> </Card>
{/* Single Delete Confirmation */} {/* Single Delete Confirmation */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title="Hapus belanja?"
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus data belanja?</AlertDialogTitle> Tindakan ini tidak dapat dibatalkan. Belanja <strong>{purchaseToDelete?.purchase_date
<AlertDialogDescription> ? formatDate(purchaseToDelete?.purchase_date)
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. : purchaseToDelete?.note || '-'}</strong> akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmDelete}
<AlertDialogCancel variant="outline">Batal</AlertDialogCancel> />
<AlertDialogAction onClick={confirmDelete} variant="destructive">Hapus</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* Bulk Delete Confirmation */} {/* Bulk Delete Confirmation */}
<AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isBulkDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsBulkDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title={`Hapus ${rowsToDelete.length} belanja?`}
<Trash2 className="size-5" /> description={
</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. Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmBulkDelete}
<AlertDialogCancel variant="outline">Batal</AlertDialogCancel> />
<AlertDialogAction
onClick={confirmBulkDelete}
variant="destructive"
>
Hapus
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div> </div>
); );
} }

80
resources/js/pages/admin/master/category/index.tsx
View File

@ -4,21 +4,11 @@ import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Trash2, Plus, X } from 'lucide-react'; import { Trash2, Plus, X } from 'lucide-react';
import { DataTable } from '@/components/data-table'; 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 { useCategoryIndex } from './hooks/use-category-index';
import { getColumns } from './partials/columns'; import { getColumns } from './partials/columns';
import { CategoryFormModal } from './partials/category-form-modal'; import { CategoryFormModal } from './partials/category-form-modal';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
export default function CategoryIndex({ categories }: { categories: Category[] }) { export default function CategoryIndex({ categories }: { categories: Category[] }) {
const { const {
@ -97,58 +87,30 @@ export default function CategoryIndex({ categories }: { categories: Category[] }
</Card> </Card>
{/* Single Delete Confirmation */} {/* Single Delete Confirmation */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title="Hapus kategori?"
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus kategori?</AlertDialogTitle>
<AlertDialogDescription>
Tindakan ini tidak dapat dibatalkan. Kategori <strong>{categoryToDelete?.name}</strong> akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan. Kategori <strong>{categoryToDelete?.name}</strong> akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmDelete}
<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>
{/* Bulk Delete Confirmation */} {/* Bulk Delete Confirmation */}
<AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isBulkDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsBulkDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title={`Hapus ${rowsToDelete.length} kategori?`}
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus {rowsToDelete.length} kategori?</AlertDialogTitle>
<AlertDialogDescription>
Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmBulkDelete}
<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>
</div> </div>
); );
} }

69
resources/js/pages/admin/master/product/index.tsx
View File

@ -20,6 +20,7 @@ import productRoutes from '@/routes/product';
import { useProductIndex } from './hooks/use-product-index'; import { useProductIndex } from './hooks/use-product-index';
import { getColumns } from './partials/columns'; import { getColumns } from './partials/columns';
import { ImagePreviewDialog } from './partials/image-preview-dialog'; import { ImagePreviewDialog } from './partials/image-preview-dialog';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) { export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) {
const { const {
@ -100,58 +101,30 @@ export default function ProductIndex({ products, categories }: { products: Produ
</Card> </Card>
{/* Single Delete Confirmation */} {/* Single Delete Confirmation */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title="Hapus produk?"
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus produk?</AlertDialogTitle>
<AlertDialogDescription>
Tindakan ini tidak dapat dibatalkan. Produk <strong>{productToDelete?.name}</strong> akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan. Produk <strong>{productToDelete?.name}</strong> akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmDelete}
<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>
{/* Bulk Delete Confirmation */} {/* Bulk Delete Confirmation */}
<AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isBulkDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsBulkDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title={`Hapus ${rowsToDelete.length} produk?`}
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus {rowsToDelete.length} produk?</AlertDialogTitle>
<AlertDialogDescription>
Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
</AlertDialogDescription> </>
</AlertDialogHeader> }
<AlertDialogFooter> onDelete={confirmBulkDelete}
<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>
<ImagePreviewDialog <ImagePreviewDialog
imageUrl={selectedImage} imageUrl={selectedImage}

77
resources/js/pages/admin/master/user/index.tsx
View File

@ -19,6 +19,7 @@ import {
import userRoutes from '@/routes/user'; import userRoutes from '@/routes/user';
import { useUserIndex } from './hooks/use-user-index'; import { useUserIndex } from './hooks/use-user-index';
import { getColumns } from './partials/columns'; import { getColumns } from './partials/columns';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
export default function UserIndex({ users, defaultPassword }: { users: User[], defaultPassword: string }) { export default function UserIndex({ users, defaultPassword }: { users: User[], defaultPassword: string }) {
const { const {
@ -81,31 +82,6 @@ export default function UserIndex({ users, defaultPassword }: { users: User[], d
</CardContent> </CardContent>
</Card> </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 */} {/* Reset Password Confirmation */}
<AlertDialog open={isResetPasswordOpen} onOpenChange={setIsResetPasswordOpen}> <AlertDialog open={isResetPasswordOpen} onOpenChange={setIsResetPasswordOpen}>
<AlertDialogContent size="default"> <AlertDialogContent size="default">
@ -131,34 +107,31 @@ export default function UserIndex({ users, defaultPassword }: { users: User[], d
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </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 */} {/* Bulk Delete Confirmation */}
<AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}> <DeleteConfirmation
<AlertDialogContent size="default"> isOpen={isBulkDeleteDialogOpen}
<AlertDialogHeader> onOpenChange={setIsBulkDeleteDialogOpen}
<AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"> title={`Hapus ${rowsToDelete.length} pegawai?`}
<Trash2 className="size-5" /> description={
</AlertDialogMedia> <>
<AlertDialogTitle>Hapus {rowsToDelete.length} pegawai?</AlertDialogTitle> Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
<AlertDialogDescription> </>
Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> pegawai yang terpilih akan dihapus secara permanen. }
</AlertDialogDescription> onDelete={confirmBulkDelete}
</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>
</div> </div>
); );
} }