260322:1648 Correct Coresspondence / Doing RFA / Correct CI

frontend/components/custom/file-upload-zone.tsx

@@ -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>