96 lines
4.5 KiB
TypeScript
96 lines
4.5 KiB
TypeScript
|
/**
|
|||
|
|
* 狀態流程條組件
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { Check } from "lucide-react";
|
|||
|
|
import type { PurchaseOrderStatus } from "@/types/purchase-order";
|
|||
|
|
|
|||
|
|
interface StatusProgressBarProps {
|
|||
|
|
currentStatus: PurchaseOrderStatus;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 流程步驟定義
|
|||
|
|
const FLOW_STEPS: { key: PurchaseOrderStatus | "approved"; label: string }[] = [
|
|||
|
|
{ key: "draft", label: "草稿" },
|
|||
|
|
{ key: "pending", label: "待審核" },
|
|||
|
|
{ key: "processing", label: "處理中" },
|
|||
|
|
{ key: "shipping", label: "運送中" },
|
|||
|
|
{ key: "confirming", label: "待確認" },
|
|||
|
|
{ key: "completed", label: "已完成" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export function StatusProgressBar({ currentStatus }: StatusProgressBarProps) {
|
|||
|
|
// 對於 cancelled 狀態，進度條通常不顯示或顯示特殊樣式，這裡我們顯示到最後一個有效狀態
|
|||
|
|
const effectiveStatus = currentStatus === "cancelled" ? "pending" : currentStatus;
|
|||
|
|
|
|||
|
|
// 找到當前狀態在流程中的位置
|
|||
|
|
const currentIndex = FLOW_STEPS.findIndex((step) => step.key === effectiveStatus);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white rounded-lg border shadow-sm p-6">
|
|||
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-6">採購單處理進度</h3>
|
|||
|
|
<div className="relative px-4">
|
|||
|
|
{/* 進度條背景 */}
|
|||
|
|
<div className="absolute top-5 left-8 right-8 h-0.5 bg-gray-100" />
|
|||
|
|
|
|||
|
|
{/* 進度條進度 */}
|
|||
|
|
{currentIndex >= 0 && (
|
|||
|
|
<div
|
|||
|
|
className="absolute top-5 left-8 h-0.5 bg-primary transition-all duration-500"
|
|||
|
|
style={{
|
|||
|
|
width: `${(currentIndex / (FLOW_STEPS.length - 1)) * 100}%`,
|
|||
|
|
maxWidth: "calc(100% - 4rem)"
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 步驟標記 */}
|
|||
|
|
<div className="relative flex justify-between">
|
|||
|
|
{FLOW_STEPS.map((step, index) => {
|
|||
|
|
const isCompleted = index < currentIndex;
|
|||
|
|
const isCurrent = index === currentIndex;
|
|||
|
|
// 如果當前是 cancelled，且我們正在渲染 pending 步驟，可以加點提示
|
|||
|
|
const isRejectedAtThisStep = currentStatus === "cancelled" && step.key === "pending";
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={step.key} className="flex flex-col items-center flex-1">
|
|||
|
|
{/* 圓點 */}
|
|||
|
|
<div
|
|||
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center border-2 z-10 transition-all duration-300 ${isRejectedAtThisStep
|
|||
|
|
? "bg-red-500 border-red-500 text-white"
|
|||
|
|
: isCompleted
|
|||
|
|
? "bg-primary border-primary text-white"
|
|||
|
|
: isCurrent
|
|||
|
|
? "bg-white border-primary text-primary ring-4 ring-primary/10 font-bold"
|
|||
|
|
: "bg-white border-gray-200 text-gray-400"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{isCompleted && !isRejectedAtThisStep ? (
|
|||
|
|
<Check className="h-5 w-5" />
|
|||
|
|
) : (
|
|||
|
|
<span className="text-sm">{index + 1}</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 標籤 */}
|
|||
|
|
<div className="mt-3 text-center">
|
|||
|
|
<p
|
|||
|
|
className={`text-xs whitespace-nowrap transition-colors ${isRejectedAtThisStep
|
|||
|
|
? "text-red-600 font-bold"
|
|||
|
|
: isCompleted || isCurrent
|
|||
|
|
? "text-gray-900 font-bold"
|
|||
|
|
: "text-gray-400"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{isRejectedAtThisStep ? "已取消" : step.label}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|