star-erp/resources/js/Components/PurchaseOrder/PurchaseOrderStatusBadge.tsx

/**
 * 採購單狀態標籤組件
 */

import { Badge } from "@/Components/ui/badge";
import { PurchaseOrderStatus } from "@/types/purchase-order";

interface PurchaseOrderStatusBadgeProps {
    status: PurchaseOrderStatus;
    className?: string;
}

export default function PurchaseOrderStatusBadge({
    status,
    className,
}: PurchaseOrderStatusBadgeProps) {
    const getStatusConfig = (status: PurchaseOrderStatus) => {
        switch (status) {
            case "draft":
                return { label: "草稿", className: "bg-gray-100 text-gray-700 border-gray-200" };
            case "pending":
                return { label: "待審核", className: "bg-blue-100 text-blue-700 border-blue-200" };
            case "processing":
                return { label: "處理中", className: "bg-yellow-100 text-yellow-700 border-yellow-200" };
            case "shipping":
                return { label: "運送中", className: "bg-purple-100 text-purple-700 border-purple-200" };
            case "confirming":
                return { label: "待確認", className: "bg-orange-100 text-orange-700 border-orange-200" };
            case "completed":
                return { label: "已完成", className: "bg-green-100 text-green-700 border-green-200" };
            case "cancelled":
                return { label: "已取消", className: "bg-red-100 text-red-700 border-red-200" };
            case "partial":
                return { label: "部分進貨", className: "bg-blue-50 text-blue-600 border-blue-100" };
            default:
                return { label: "未知", className: "bg-gray-100 text-gray-700 border-gray-200" };
        }
    };

    const config = getStatusConfig(status);

    return (
        <Badge
            variant="outline"
            className={`${config.className} ${className} font-medium px-2.5 py-0.5 rounded-full`}
        >
            {config.label}
        </Badge>
    );
}