np-dms/lcbp3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

260322:1648 Correct Coresspondence / Doing RFA / Correct CI
CI Pipeline / build (push) Failing after 12m41s
Details
Build and Deploy / deploy (push) Failing after 2m44s
Details

Browse Source
This commit is contained in:
admin
2026-03-22 16:48:12 +07:00
parent e5deedb42e
commit 11984bfa29
683 changed files with 105251 additions and 29068 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/custom/workflow-visualizer.tsx
+57 -32
View File
@@ -1,13 +1,13 @@
// File: components/custom/workflow-visualizer.tsx
import React from "react";
import { Check, Clock, XCircle, AlertCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import React from 'react';
import { Check, Clock, XCircle, AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';
/**
* สถานะของขั้นตอนใน Workflow
*/
export type StepStatus = "completed" | "current" | "pending" | "rejected" | "skipped";
export type StepStatus = 'completed' | 'current' | 'pending' | 'rejected' | 'skipped';
export interface WorkflowStep {
id: string | number;
@@ -28,38 +28,38 @@ interface WorkflowVisualizerProps {
*/
export function WorkflowVisualizer({ steps, className }: WorkflowVisualizerProps) {
return (
<div className={cn("w-full overflow-x-auto py-4 px-2", className)}>
<div className={cn('w-full overflow-x-auto py-4 px-2', className)}>
<div className="flex items-start min-w-max">
{steps.map((step, index) => {
const isLast = index === steps.length - 1;
// กำหนดสีตามสถานะ
let statusColor = "bg-muted text-muted-foreground border-muted"; // pending
let statusColor = 'bg-muted text-muted-foreground border-muted'; // pending
let icon = <span className="text-xs">{index + 1}</span>;
let lineColor = "bg-muted";
let lineColor = 'bg-muted';
switch (step.status) {
case "completed":
statusColor = "bg-green-600 text-white border-green-600";
case 'completed':
statusColor = 'bg-green-600 text-white border-green-600';
icon = <Check className="w-4 h-4" />;
lineColor = "bg-green-600";
lineColor = 'bg-green-600';
break;
case "current":
statusColor = "bg-blue-600 text-white border-blue-600 ring-4 ring-blue-100";
case 'current':
statusColor = 'bg-blue-600 text-white border-blue-600 ring-4 ring-blue-100';
icon = <Clock className="w-4 h-4 animate-pulse" />;
lineColor = "bg-muted"; // เส้นต่อไปยังเป็นสีเทา
lineColor = 'bg-muted'; // เส้นต่อไปยังเป็นสีเทา
break;
case "rejected":
statusColor = "bg-destructive text-destructive-foreground border-destructive";
case 'rejected':
statusColor = 'bg-destructive text-destructive-foreground border-destructive';
icon = <XCircle className="w-4 h-4" />;
lineColor = "bg-destructive";
lineColor = 'bg-destructive';
break;
case "skipped":
statusColor = "bg-orange-400 text-white border-orange-400";
icon = <AlertCircle className="w-4 h-4" />;
lineColor = "bg-orange-400";
break;
case "pending":
case 'skipped':
statusColor = 'bg-orange-400 text-white border-orange-400';
icon = <AlertCircle className="w-4 h-4" />;
lineColor = 'bg-orange-400';
break;
case 'pending':
default:
// ใช้ default
break;
@@ -69,17 +69,37 @@ export function WorkflowVisualizer({ steps, className }: WorkflowVisualizerProps
<div key={step.id} className="relative flex flex-col items-center flex-1 group">
{/* Connector Line (Left & Right) */}
<div className="flex items-center w-full absolute top-4 left-0 -z-10">
{/* Left Half Line (Previous step connection) */}
<div className={cn("h-1 w-1/2", index === 0 ? "bg-transparent" : (steps[index-1].status === 'completed' || steps[index-1].status === 'skipped' ? lineColor : (steps[index].status === 'completed' ? lineColor : 'bg-muted')))} />
{/* Right Half Line (Next step connection) */}
<div className={cn("h-1 w-1/2", isLast ? "bg-transparent" : (step.status === 'completed' || step.status === 'skipped' ? lineColor : 'bg-muted'))} />
{/* Left Half Line (Previous step connection) */}
<div
className={cn(
'h-1 w-1/2',
index === 0
? 'bg-transparent'
: steps[index - 1].status === 'completed' || steps[index - 1].status === 'skipped'
? lineColor
: steps[index].status === 'completed'
? lineColor
: 'bg-muted'
)}
/>
{/* Right Half Line (Next step connection) */}
<div
className={cn(
'h-1 w-1/2',
isLast
? 'bg-transparent'
: step.status === 'completed' || step.status === 'skipped'
? lineColor
: 'bg-muted'
)}
/>
</div>
{/* Step Circle */}
<div
className={cn(
"w-8 h-8 rounded-full flex items-center justify-center border-2 z-10 transition-all duration-300",
'w-8 h-8 rounded-full flex items-center justify-center border-2 z-10 transition-all duration-300',
statusColor
)}
>
@@ -88,8 +108,13 @@ export function WorkflowVisualizer({ steps, className }: WorkflowVisualizerProps
{/* Step Label */}
<div className="mt-3 text-center space-y-1 max-w-[120px]">
<p className={cn("text-sm font-semibold", step.status === 'current' ? 'text-blue-700' : 'text-foreground')}>
{step.label}
<p
className={cn(
'text-sm font-semibold',
step.status === 'current' ? 'text-blue-700' : 'text-foreground'
)}
>
{step.label}
</p>
{step.subLabel && (
<p className="text-xs text-muted-foreground truncate" title={step.subLabel}>
@@ -108,4 +133,4 @@ export function WorkflowVisualizer({ steps, className }: WorkflowVisualizerProps
</div>
</div>
);
}
}