49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
|
/**
|
||
|
|
* 採購單狀態標籤組件
|
||
|
|
*/
|
||
|
|
|
||
|
|
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" };
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|