UI優化: 全系統狀態標籤 (StatusBadge) 統一化重構完成 (Phase 3 & 4)

resources/js/Components/shared/StatusBadge.tsx

@@ -0,0 +1,34 @@
+import { Badge } from "@/Components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export type StatusVariant =
+    | "neutral"
+    | "info"
+    | "warning"
+    | "success"
+    | "destructive";
+
+interface StatusBadgeProps {
+    variant: StatusVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+
+const variantStyles: Record<StatusVariant, string> = {
+    neutral: "bg-gray-100 text-gray-800 border-gray-200 hover:bg-gray-100", // Draft, Cancelled(sometimes), Closed
+    info: "bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-100", // Processing, Active
+    warning: "bg-amber-100 text-amber-800 border-amber-200 hover:bg-amber-100", // Pending, Review
+    success: "bg-green-100 text-green-800 border-green-200 hover:bg-green-100", // Completed, Approved
+    destructive: "bg-red-100 text-red-800 border-red-200 hover:bg-red-100", // Voided, Rejected, High Risk
+};
+
+export function StatusBadge({ variant, children, className }: StatusBadgeProps) {
+    return (
+        <Badge
+            variant="outline"
+            className={cn(variantStyles[variant], "font-medium border", className)}
+        >
+            {children}
+        </Badge>
+    );
+}