nextjs-cleo-minimarket/app/(dashboard)/master/pelanggan/_components/hapus-pelanggan-button.tsx

"use client";

import { useActionState, useEffect, useState } from "react";
import { Loader2Icon, Trash2Icon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { hapusPelanggan, type HapusPelangganState } from "../action";

type HapusPelangganButtonProps = {
  kdCustomer: string;
  nama: string;
};

const initial: HapusPelangganState = { ok: false };

export function HapusPelangganButton({
  kdCustomer,
  nama,
}: HapusPelangganButtonProps) {
  const [open, setOpen] = useState(false);
  const [state, formAction, pending] = useActionState(hapusPelanggan, initial);

  useEffect(() => {
    if (state.ok) setOpen(false);
  }, [state.ok]);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <Button
        variant="ghost"
        size="icon-sm"
        onClick={() => setOpen(true)}
        className="text-destructive hover:bg-destructive/10"
        title="Hapus pelanggan"
      >
        <Trash2Icon />
        <span className="sr-only">Hapus</span>
      </Button>

      <SheetContent
        side="top"
        className="data-[side=top]:inset-x-4 data-[side=top]:top-24 data-[side=top]:mx-auto data-[side=top]:w-full data-[side=top]:max-w-sm data-[side=top]:rounded-lg data-[side=top]:border data-[side=top]:border-t"
      >
        <SheetHeader>
          <SheetTitle>Hapus {nama}?</SheetTitle>
          <SheetDescription>
            Data pelanggan {kdCustomer} akan dihapus permanen.
          </SheetDescription>
        </SheetHeader>

        <form action={formAction} className="p-4 pt-0">
          <input type="hidden" name="kdCustomer" value={kdCustomer} />
          {state.error && (
            <p className="mb-2 text-sm text-destructive">{state.error}</p>
          )}
          <SheetFooter className="flex-row justify-end px-0">
            <Button
              type="button"
              variant="outline"
              onClick={() => setOpen(false)}
              disabled={pending}
            >
              Batal
            </Button>
            <Button type="submit" variant="destructive" disabled={pending}>
              {pending && <Loader2Icon className="size-4 animate-spin" />}
              Hapus
            </Button>
          </SheetFooter>
        </form>
      </SheetContent>
    </Sheet>
  );
}