star-erp/resources/js/Components/Inventory/GoodsReceiptActions.tsx

import { useState } from "react";
import { Eye, Pencil, Trash2 } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Link, useForm } from "@inertiajs/react";
import { toast } from "sonner";
import { Can } from "@/Components/Permission/Can";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";

export interface GoodsReceipt {
    id: number;
    code: string;
    warehouse_id: number;
    warehouse?: { name: string };
    vendor_id?: number;
    vendor?: { name: string };
    received_date: string;
    status: string;
    type?: string;
    items_sum_total_amount?: number;
    user?: { name: string };
}

export default function GoodsReceiptActions({
    receipt,
}: { receipt: GoodsReceipt }) {
    const [showDeleteDialog, setShowDeleteDialog] = useState(false);

    const { delete: destroy, processing } = useForm({});

    const handleConfirmDelete = () => {
        // @ts-ignore
        destroy(route('goods-receipts.destroy', receipt.id), {
            onSuccess: () => {
                toast.success("進貨單已成功刪除");
                setShowDeleteDialog(false);
            },
            onError: (errors: any) => toast.error(errors.error || "刪除過程中發生錯誤"),
        });
    };



    return (
        <div className="flex justify-center gap-2">
            <Link href={route('goods-receipts.show', receipt.id)}>
                <Button
                    variant="outline"
                    size="sm"
                    className="button-outlined-primary"
                    title="查看詳情"
                >
                    <Eye className="h-4 w-4" />
                </Button>
            </Link>

            {/* 草稿或退回狀態才可編輯 */}
            {(receipt.status === 'draft' || receipt.status === 'rejected') && (
                <Can permission="goods_receipts.edit">
                    <Link href={route('goods-receipts.edit', receipt.id)}>
                        <Button
                            variant="outline"
                            size="sm"
                            className="button-outlined-primary"
                            title="編輯"
                        >
                            <Pencil className="h-4 w-4" />
                        </Button>
                    </Link>
                </Can>
            )}

            {/* 只允許刪除草稿或已退回的進貨單 */}
            {(receipt.status === 'draft' || receipt.status === 'rejected') && (
                <Can permission="goods_receipts.delete">
                    <Button
                        variant="outline"
                        size="sm"
                        className="button-outlined-error"
                        title="刪除"
                        onClick={() => setShowDeleteDialog(true)}
                        disabled={processing}
                    >
                        <Trash2 className="h-4 w-4" />
                    </Button>
                </Can>
            )}

            <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>確認刪除進貨單</AlertDialogTitle>
                        <AlertDialogDescription>
                            確定要刪除進貨單 「{receipt.code}」 嗎？
                            <br />
                            <span className="text-red-500 font-bold mt-2 block">
                                注意：刪除動作無法復原！
                            </span>
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
                        <AlertDialogAction
                            onClick={handleConfirmDelete}
                            className="button-filled-error"
                        >
                            確認刪除
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

        </div>
    );
}