47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
|
/**
|
||
|
|
* 生產工單狀態標籤組件
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { Badge } from "@/Components/ui/badge";
|
||
|
|
import { ProductionOrderStatus, STATUS_CONFIG } from "@/constants/production-order";
|
||
|
|
|
||
|
|
interface ProductionOrderStatusBadgeProps {
|
||
|
|
status: ProductionOrderStatus;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ProductionOrderStatusBadge({
|
||
|
|
status,
|
||
|
|
className,
|
||
|
|
}: ProductionOrderStatusBadgeProps) {
|
||
|
|
const config = STATUS_CONFIG[status] || { label: "未知", variant: "outline" };
|
||
|
|
|
||
|
|
const getStatusStyles = (status: string) => {
|
||
|
|
switch (status) {
|
||
|
|
case 'draft':
|
||
|
|
return 'bg-gray-100 text-gray-600 border-gray-200';
|
||
|
|
case 'pending':
|
||
|
|
return 'bg-blue-50 text-blue-600 border-blue-200';
|
||
|
|
case 'approved':
|
||
|
|
return 'bg-primary text-primary-foreground border-transparent';
|
||
|
|
case 'in_progress':
|
||
|
|
return 'bg-amber-50 text-amber-600 border-amber-200';
|
||
|
|
case 'completed':
|
||
|
|
return 'bg-primary text-primary-foreground border-transparent transition-all shadow-sm';
|
||
|
|
case 'cancelled':
|
||
|
|
return 'bg-destructive text-destructive-foreground border-transparent';
|
||
|
|
default:
|
||
|
|
return 'bg-gray-50 text-gray-500 border-gray-200';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Badge
|
||
|
|
variant="outline"
|
||
|
|
className={`${className} ${getStatusStyles(status)} font-bold px-2.5 py-0.5 rounded-full border shadow-none`}
|
||
|
|
>
|
||
|
|
{config.label}
|
||
|
|
</Badge>
|
||
|
|
);
|
||
|
|
}
|