260322:1648 Correct Coresspondence / Doing RFA / Correct CI

2026-03-22 16:48:12 +07:00
parent e5deedb42e
commit 11984bfa29
683 changed files with 105251 additions and 29068 deletions
@@ -1,13 +1,13 @@
 // File: components/custom/file-upload-zone.tsx

-"use client";
+'use client';

-import React, { useCallback, useState } from "react";
-import { UploadCloud, File as FileIcon, X, AlertTriangle, CheckCircle } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import React, { useCallback, useState } from 'react';
+import { UploadCloud, File as FileIcon, X, AlertTriangle, CheckCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';

 export interface FileWithMeta extends File {
  preview?: string;
@@ -32,10 +32,10 @@ interface FileUploadZoneProps {
 * Helper: แปลง Bytes เป็นหน่วยที่อ่านง่าย
 */
 const formatBytes = (bytes: number, decimals = 2) => {
-  if (!+bytes) return "0 Bytes";
+  if (!Number(bytes)) return '0 Bytes';
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 };
@@ -46,7 +46,7 @@ const formatBytes = (bytes: number, decimals = 2) => {
 */
 export function FileUploadZone({
  onFilesChanged,
-  accept = [".pdf", ".dwg", ".docx", ".xlsx", ".zip"],
+  accept = ['.pdf', '.dwg', '.docx', '.xlsx', '.zip'],
  maxSize = 50 * 1024 * 1024, // 50MB Default
  multiple = true,
  initialFiles = [],
@@ -56,18 +56,18 @@ export function FileUploadZone({
  const [isDragging, setIsDragging] = useState(false);

  // ตรวจสอบไฟล์
-  const validateFile = (file: File): string | undefined => {
+  const validateFile = useCallback((file: File): string | undefined => {
    // 1. Check Size
    if (file.size > maxSize) {
      return `ขนาดไฟล์เกินกำหนด (${formatBytes(maxSize)})`;
    }
    // 2. Check Type (Extension based validation for simplicity on client)
-    const fileExtension = "." + file.name.split(".").pop()?.toLowerCase();
+    const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
    if (accept.length > 0 && !accept.includes(fileExtension)) {
-      return `ประเภทไฟล์ไม่รองรับ (อนุญาต: ${accept.join(", ")})`;
+      return `ประเภทไฟล์ไม่รองรับ (อนุญาต: ${accept.join(', ')})`;
    }
    return undefined;
-  };
+  }, [maxSize, accept]);

  const handleFileSelect = useCallback(
    (newFiles: File[]) => {
@@ -85,7 +85,7 @@ export function FileUploadZone({
        return updated;
      });
    },
-    [maxSize, accept, multiple, onFilesChanged]
+    [multiple, onFilesChanged, validateFile]
  );

  // Drag Events
@@ -114,27 +114,25 @@ export function FileUploadZone({
  };

  return (
-    <div className={cn("w-full space-y-4", className)}>
+    <div className={cn('w-full space-y-4', className)}>
      {/* Drop Zone */}
      <div
        className={cn(
-          "border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer flex flex-col items-center justify-center gap-2",
-          isDragging
-            ? "border-primary bg-primary/10"
-            : "border-muted-foreground/25 hover:border-primary/50",
-          "h-48"
+          'border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer flex flex-col items-center justify-center gap-2',
+          isDragging ? 'border-primary bg-primary/10' : 'border-muted-foreground/25 hover:border-primary/50',
+          'h-48'
        )}
        onDragOver={onDragOver}
        onDragLeave={onDragLeave}
        onDrop={onDrop}
-        onClick={() => document.getElementById("file-input")?.click()}
+        onClick={() => document.getElementById('file-input')?.click()}
      >
        <input
          id="file-input"
          type="file"
          className="hidden"
          multiple={multiple}
-          accept={accept.join(",")}
+          accept={accept.join(',')}
          onChange={(e) => {
            if (e.target.files) handleFileSelect(Array.from(e.target.files));
          }}
@@ -143,11 +141,9 @@ export function FileUploadZone({
          <UploadCloud className="w-8 h-8 text-muted-foreground" />
        </div>
        <div className="space-y-1">
-          <p className="text-sm font-medium">
-            คลิกเพื่อเลือกไฟล์ หรือ ลากไฟล์มาวางที่นี่
-          </p>
+          <p className="text-sm font-medium">คลิกเพื่อเลือกไฟล์ หรือ ลากไฟล์มาวางที่นี่</p>
          <p className="text-xs text-muted-foreground">
-            รองรับ: {accept.join(", ")} (สูงสุด {formatBytes(maxSize)})
+            รองรับ: {accept.join(', ')} (สูงสุด {formatBytes(maxSize)})
          </p>
        </div>
      </div>
@@ -166,22 +162,21 @@ export function FileUploadZone({
                    <FileIcon className="w-5 h-5 text-primary" />
                  </div>
                  <div className="min-w-0">
-                    <p className="text-sm font-medium truncate max-w-[200px] sm:max-w-md">
-                      {file.name}
-                    </p>
+                    <p className="text-sm font-medium truncate max-w-[200px] sm:max-w-md">{file.name}</p>
                    <div className="flex items-center gap-2">
-                        <span className="text-xs text-muted-foreground">
-                        {formatBytes(file.size)}
-                        </span>
-                        {file.validationError ? (
-                             <Badge variant="destructive" className="text-[10px] px-1 h-5 flex gap-1">
-                                <AlertTriangle className="w-3 h-3" /> {file.validationError}
-                             </Badge>
-                        ) : (
-                            <Badge variant="outline" className="text-[10px] px-1 h-5 text-green-600 bg-green-50 border-green-200 flex gap-1">
-                                <CheckCircle className="w-3 h-3" /> Ready
-                            </Badge>
-                        )}
+                      <span className="text-xs text-muted-foreground">{formatBytes(file.size)}</span>
+                      {file.validationError ? (
+                        <Badge variant="destructive" className="text-[10px] px-1 h-5 flex gap-1">
+                          <AlertTriangle className="w-3 h-3" /> {file.validationError}
+                        </Badge>
+                      ) : (
+                        <Badge
+                          variant="outline"
+                          className="text-[10px] px-1 h-5 text-green-600 bg-green-50 border-green-200 flex gap-1"
+                        >
+                          <CheckCircle className="w-3 h-3" /> Ready
+                        </Badge>
+                      )}
                    </div>
                  </div>
                </div>
@@ -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>
  );
-}
+}