Konfigurasi Delete

Silakan teman-teman buka file DeleteConfirmDialog.tsx kemudian sesuaikan menjadi seperti berikut ini:

components/
├── products/
│   ├── Breadcrumbs.tsx
│   ├── DeleteConfirmDialog.tsx <-----

Kode Lengkap

"use client"

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Product } from "@/services/products"

export function DeleteConfirmDialog({
  open,
  onOpenChange,
  product,
  onConfirm,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  product: Product | null
  onConfirm: () => void
}) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Konfirmasi Hapus</DialogTitle>
          <DialogDescription>
            Apakah Anda yakin ingin menghapus produk{" "}
            <span className="font-bold">{product?.name}</span>? Tindakan ini tidak dapat dibatalkan.
          </DialogDescription>
        </DialogHeader>
        <div className="flex justify-end gap-2 mt-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Batal
          </Button>
          <Button variant="destructive" onClick={onConfirm}>
            Ya, Hapus
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}

use client

Baris ini menunjukkan bahwa komponen ini adalah Client Component di Next.js (bukan Server Component). Kenapa? Karena komponen ini memakai state dan event handler (onOpenChange, onConfirm) yang berjalan di sisi browser.

Import

• Button → tombol dari shadcn/ui.
• Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle → komponen UI popup modal.
• Product → tipe data produk yang diimport dari services/products.

Props Komponen

Komponen DeleteConfirmDialog menerima beberapa props:

• open: boolean → menentukan apakah dialog ditampilkan atau tidak.
• onOpenChange: (open: boolean) => void → callback untuk mengubah state open/close dari dialog.
• product: Product | null → data produk yang akan dihapus (supaya bisa tampilkan nama produk di dialog).
• onConfirm: () => void → callback ketika user menekan tombol Ya, Hapus.

Struktur Dialog

• <Dialog> → container utama popup.
• <DialogContent> → isi dari popup.
• <DialogHeader> → bagian header yang berisi title dan description.
• <DialogTitle> → judul dialog → Konfirmasi Hapus.
• <DialogDescription> → teks konfirmasi → menampilkan nama produk ({product?.name}).

Tombol Aksi

Dua tombol dibuat dengan gaya berbeda:

• Batal → variant outline, menutup dialog dengan onOpenChange(false).
• Ya, Hapus → variant destructive, memanggil onConfirm untuk menjalankan logika hapus (biasanya request ke API).

Client Component

Kenapa disebut Client Component?

• Karena memakai event handler (click button, open/close dialog).
• Karena tergantung pada state UI yang dinamis.
• Dengan use client, Next.js memastikan komponen ini di-render di sisi klien, bukan server.