first commit

resources/js/Components/PurchaseOrder/PurchaseOrderStatusBadge.tsx

@@ -0,0 +1,48 @@
+/**
+ * 採購單狀態標籤組件
+ */
+
+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>
+    );
+}