251127:1700 Frontend Start Build

2025-11-27 17:08:49 +07:00
parent b42c8c0c9f
commit f725bd5d3e
1795 changed files with 893474 additions and 10 deletions
--- a/frontend/components/custom/workflow-visualizer.tsx
+++ b/frontend/components/custom/workflow-visualizer.tsx
@@ -0,0 +1,111 @@
+// File: components/custom/workflow-visualizer.tsx
+
+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 interface WorkflowStep {
+  id: string | number;
+  label: string;
+  subLabel?: string; // เช่น ชื่อองค์กร หรือ ชื่อผู้อนุมัติ
+  status: StepStatus;
+  date?: string; // วันที่ดำเนินการ (ถ้ามี)
+}
+
+interface WorkflowVisualizerProps {
+  steps: WorkflowStep[];
+  className?: string;
+}
+
+/**
+ * WorkflowVisualizer Component
+ * แสดงเส้นเวลา (Timeline) ของกระบวนการอนุมัติแบบแนวนอน
+ */
+export function WorkflowVisualizer({ steps, className }: WorkflowVisualizerProps) {
+  return (
+    <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 icon = <span className="text-xs">{index + 1}</span>;
+          let lineColor = "bg-muted";
+
+          switch (step.status) {
+            case "completed":
+              statusColor = "bg-green-600 text-white border-green-600";
+              icon = <Check className="w-4 h-4" />;
+              lineColor = "bg-green-600";
+              break;
+            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"; // เส้นต่อไปยังเป็นสีเทา
+              break;
+            case "rejected":
+              statusColor = "bg-destructive text-destructive-foreground border-destructive";
+              icon = <XCircle className="w-4 h-4" />;
+              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":
+            default:
+              // ใช้ default
+              break;
+          }
+
+          return (
+            <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'))} />
+              </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",
+                  statusColor
+                )}
+              >
+                {icon}
+              </div>
+
+              {/* 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>
+                {step.subLabel && (
+                  <p className="text-xs text-muted-foreground truncate" title={step.subLabel}>
+                    {step.subLabel}
+                  </p>
+                )}
+                {step.date && (
+                  <p className="text-[10px] text-muted-foreground bg-secondary px-1.5 py-0.5 rounded-full inline-block">
+                    {step.date}
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}