adserver-dashboard 1.0.0

package/client/src/components/content-hub/creative-upload.tsx

@@ -0,0 +1,547 @@
+import React, { useState, useRef, useCallback } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { useUploadCreative, useFolders } from "@/lib/content-hub-api";
+import { type Creative } from "@/types/content-hub";
+import { Button } from "@moving-walls/design-system";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@moving-walls/design-system";
+import { FormLabel } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Progress } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Select } from "@moving-walls/design-system";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Upload,
+  File,
+  X,
+  Loader2,
+  CheckCircle2,
+  AlertCircle,
+  Image as ImageIcon,
+  Video,
+  Music,
+  FileCode,
+} from "lucide-react";
+
+interface FileUploadItem {
+  id: string;
+  file: File;
+  status: "pending" | "uploading" | "success" | "error";
+  progress: number;
+  error?: string;
+  result?: Creative;
+}
+
+interface CreativeUploadProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  defaultFolderId?: string;
+  onUploadComplete?: (creatives: Creative[]) => void;
+}
+
+export function CreativeUpload({
+  open,
+  onOpenChange,
+  defaultFolderId,
+  onUploadComplete,
+}: CreativeUploadProps) {
+  const { t } = useTranslation('contentHub');
+  const [files, setFiles] = useState<FileUploadItem[]>([]);
+  const [folderId, setFolderId] = useState<string | undefined>(defaultFolderId);
+  const [tags, setTags] = useState("");
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { toast } = useToast();
+
+  const uploadMutation = useUploadCreative();
+  const { data: foldersData } = useFolders({ page: 1, limit: 100 });
+  const folders = foldersData?.data || [];
+
+  const generateFileId = () =>
+    `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+  const getFileIcon = (mimeType: string) => {
+    if (mimeType.startsWith("image/")) return ImageIcon;
+    if (mimeType.startsWith("video/")) return Video;
+    if (mimeType.startsWith("audio/")) return Music;
+    if (mimeType.includes("html")) return FileCode;
+    return File;
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    addFiles(droppedFiles);
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = e.target.files;
+    if (selectedFiles) {
+      addFiles(Array.from(selectedFiles));
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const addFiles = useCallback((newFiles: File[]) => {
+    const newItems: FileUploadItem[] = newFiles.map((file) => ({
+      id: generateFileId(),
+      file,
+      status: "pending",
+      progress: 0,
+    }));
+    setFiles((prev) => [...prev, ...newItems]);
+  }, []);
+
+  const handleBrowseClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleRemoveFile = (fileId: string) => {
+    setFiles((prev) => prev.filter((f) => f.id !== fileId));
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+  };
+
+  const uploadSingleFile = async (
+    fileItem: FileUploadItem,
+  ): Promise<Creative | null> => {
+    const tagArray = tags
+      .split(",")
+      .map((tag) => tag.trim())
+      .filter((tag) => tag.length > 0);
+
+    setFiles((prev) =>
+      prev.map((f) =>
+        f.id === fileItem.id ? { ...f, status: "uploading", progress: 30 } : f,
+      ),
+    );
+
+    try {
+      const result = await uploadMutation.mutateAsync({
+        file: fileItem.file,
+        folder_id: folderId === "none" ? undefined : folderId,
+        tags: tagArray.length > 0 ? tagArray : undefined,
+      });
+
+      setFiles((prev) =>
+        prev.map((f) =>
+          f.id === fileItem.id
+            ? { ...f, status: "success", progress: 100, result: result.result }
+            : f,
+        ),
+      );
+
+      return result.result || null;
+    } catch (error: any) {
+      const errorMessage = error?.message || error?.error || t('common.uploadFailed');
+      setFiles((prev) =>
+        prev.map((f) =>
+          f.id === fileItem.id
+            ? { ...f, status: "error", progress: 0, error: errorMessage }
+            : f,
+        ),
+      );
+      return null;
+    }
+  };
+
+  const handleUploadAll = async () => {
+    const pendingFiles = files.filter((f) => f.status === "pending");
+
+    if (pendingFiles.length === 0) {
+      toast({
+        title: t('common.error'),
+        description: t('upload.selectFilesToUpload'),
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsUploading(true);
+    const uploadedCreatives: Creative[] = [];
+
+    for (const fileItem of pendingFiles) {
+      const result = await uploadSingleFile(fileItem);
+      if (result) {
+        uploadedCreatives.push(result);
+      }
+    }
+
+    setIsUploading(false);
+
+    const successCount = uploadedCreatives.length;
+    const failCount = pendingFiles.length - successCount;
+
+    if (successCount > 0) {
+      toast({
+        title: t('upload.uploadComplete'),
+        description:
+          failCount > 0
+            ? t('upload.filesUploadedWithErrors', { success: successCount, failed: failCount })
+            : t('upload.filesUploadedSuccess', { success: successCount }),
+        variant: failCount > 0 ? "default" : "success",
+      });
+
+      if (onUploadComplete) {
+        onUploadComplete(uploadedCreatives);
+      }
+    } else {
+      toast({
+        title: t('upload.uploadFailed'),
+        description: t('upload.allFilesFailed'),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleCancel = () => {
+    setFiles([]);
+    setTags("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    onOpenChange(false);
+  };
+
+  const handleClose = () => {
+    if (!isUploading) {
+      handleCancel();
+    }
+  };
+
+  const pendingCount = files.filter((f) => f.status === "pending").length;
+  const successCount = files.filter((f) => f.status === "success").length;
+  const errorCount = files.filter((f) => f.status === "error").length;
+  const allComplete = files.length > 0 && pendingCount === 0 && !isUploading;
+
+  return (
+    <Sheet open={open} onOpenChange={handleClose}>
+      <SheetContent
+        side="right"
+        className="flex flex-col p-0"
+        data-testid="sheet-upload-creative"
+      >
+        <SheetHeader className="pr-12">
+          <SheetTitle>{t('upload.title')}</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+          <div
+            className={`
+              relative border-2 border-dashed rounded-lg p-6 text-center transition-colors
+              ${isDragging ? "border-primary bg-accent" : "border-muted-foreground/25"}
+              ${files.length > 0 ? "py-4" : ""}
+            `}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            data-testid="dropzone-creative-upload"
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              className="hidden"
+              accept="image/*,video/*,audio/*,.html"
+              multiple
+              onChange={handleFileSelect}
+              data-testid="input-file-creative"
+            />
+
+            <Upload className="w-10 h-10 mx-auto mb-3 text-mw-gray-600 dark:text-mw-gray-400" />
+            <p className="text-sm text-mw-gray-600 dark:text-mw-gray-400 mb-2">
+              {t('upload.dragAndDrop')}
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleBrowseClick}
+              disabled={isUploading}
+              data-testid="button-browse-file"
+            >
+              {t('upload.browseFiles')}
+            </Button>
+            <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400 mt-3">
+              {t('upload.supportedFormats')}
+            </p>
+          </div>
+
+          {/* Creative Specifications Panel */}
+          <div className="border rounded-lg p-4 mt-4">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="font-medium text-sm">{t('upload.specifications')}</h3>
+              <Badge variant="outline" className="text-xs">
+                {t('upload.supportedFormats')}
+              </Badge>
+            </div>
+            
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              {/* Display/Image */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 font-medium">
+                  <ImageIcon className="h-4 w-4 text-blue-500" />
+                  <span>{t('upload.display')}</span>
+                </div>
+                <ul className="text-xs text-muted-foreground ml-6 space-y-0.5">
+                  <li>PNG, JPG, GIF, WebP</li>
+                  <li>Max 10MB</li>
+                  <li>Min 1920x1080</li>
+                </ul>
+              </div>
+              
+              {/* Video */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 font-medium">
+                  <Video className="h-4 w-4 text-purple-500" />
+                  <span>{t('upload.video')}</span>
+                </div>
+                <ul className="text-xs text-muted-foreground ml-6 space-y-0.5">
+                  <li>MP4, MOV, WebM</li>
+                  <li>Max 100MB</li>
+                  <li>5-60 seconds</li>
+                </ul>
+              </div>
+              
+              {/* HTML */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 font-medium">
+                  <FileCode className="h-4 w-4 text-green-500" />
+                  <span>{t('upload.html')}</span>
+                </div>
+                <ul className="text-xs text-muted-foreground ml-6 space-y-0.5">
+                  <li>HTML5, ZIP</li>
+                  <li>Max 5MB</li>
+                  <li>HTTPS assets only</li>
+                </ul>
+              </div>
+              
+              {/* Audio */}
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 font-medium">
+                  <Music className="h-4 w-4 text-orange-500" />
+                  <span>{t('upload.audio')}</span>
+                </div>
+                <ul className="text-xs text-muted-foreground ml-6 space-y-0.5">
+                  <li>MP3, WAV, AAC</li>
+                  <li>Max 20MB</li>
+                  <li>15-60 seconds</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {files.length > 0 && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <h4 className="text-sm font-medium">{t('upload.files')} ({files.length})</h4>
+                {files.length > 0 && (
+                  <div className="flex gap-1">
+                    {successCount > 0 && (
+                      <Badge
+                        variant="outline"
+                        className="bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-400 text-xs"
+                      >
+                        {successCount} {t('upload.uploaded')}
+                      </Badge>
+                    )}
+                    {errorCount > 0 && (
+                      <Badge
+                        variant="outline"
+                        className="bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-400 text-xs"
+                      >
+                        {errorCount} {t('upload.failed')}
+                      </Badge>
+                    )}
+                    {pendingCount > 0 && (
+                      <Badge variant="outline" className="text-xs">
+                        {pendingCount} {t('upload.pending')}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-2 max-h-[280px] overflow-y-auto pr-2">
+                {files.map((fileItem) => {
+                  const Icon = getFileIcon(fileItem.file.type);
+                  return (
+                    <div
+                      key={fileItem.id}
+                      className={`
+                        flex items-center gap-3 p-3 rounded-lg border transition-colors
+                        ${fileItem.status === "success" ? "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800" : ""}
+                        ${fileItem.status === "error" ? "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800" : ""}
+                        ${fileItem.status === "pending" ? "bg-muted/50" : ""}
+                        ${fileItem.status === "uploading" ? "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800" : ""}
+                      `}
+                      data-testid={`file-item-${fileItem.id}`}
+                    >
+                      <Icon className="w-8 h-8 text-mw-gray-600 dark:text-mw-gray-400 flex-shrink-0" />
+
+                      <div className="flex-1 min-w-0">
+                        <p
+                          className="text-sm font-medium truncate"
+                          title={fileItem.file.name}
+                        >
+                          {fileItem.file.name}
+                        </p>
+                        <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400">
+                          {formatFileSize(fileItem.file.size)}
+                        </p>
+
+                        {fileItem.status === "uploading" && (
+                          <Progress
+                            value={fileItem.progress}
+                            className="h-1 mt-1"
+                          />
+                        )}
+
+                        {fileItem.status === "error" && fileItem.error && (
+                          <p
+                            className="text-xs text-red-600 dark:text-red-400 mt-1 truncate"
+                            title={fileItem.error}
+                          >
+                            {fileItem.error}
+                          </p>
+                        )}
+                      </div>
+
+                      <div className="flex-shrink-0">
+                        {fileItem.status === "pending" && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRemoveFile(fileItem.id)}
+                            disabled={isUploading}
+                            className="p-1 h-8 w-8"
+                            data-testid={`button-remove-${fileItem.id}`}
+                          >
+                            <X className="w-4 h-4" />
+                          </Button>
+                        )}
+                        {fileItem.status === "uploading" && (
+                          <Loader2 className="w-5 h-5 animate-spin text-mw-primary-500" />
+                        )}
+                        {fileItem.status === "success" && (
+                          <CheckCircle2 className="w-5 h-5 text-green-600 dark:text-green-400" />
+                        )}
+                        {fileItem.status === "error" && (
+                          <div className="flex items-center gap-1">
+                            <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400" />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleRemoveFile(fileItem.id)}
+                              disabled={isUploading}
+                              className="p-1 h-8 w-8"
+                            >
+                              <X className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <FormLabel htmlFor="folder-select">{t('upload.folderOptional')}</FormLabel>
+            <Select
+              id="folder-select"
+              value={folderId || "none"}
+              onChange={(e) =>
+                setFolderId(
+                  e.target.value === "none" ? undefined : e.target.value,
+                )
+              }
+              disabled={isUploading}
+              className="block w-full rounded-md border px-3 py-2 text-sm border-mw-gray-300 dark:border-mw-gray-600 bg-white dark:bg-mw-gray-800 text-mw-gray-900 dark:text-mw-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              data-testid="select-folder"
+              options={[
+                { value: "none", label: t('folder.noFolder') },
+                ...folders
+                  .filter((folder: any) => folder.id && folder.id.trim() !== "")
+                  .map((folder: any) => ({ value: folder.id, label: folder.name })),
+              ]}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <FormLabel htmlFor="tags-input">{t('upload.tagsOptional')}</FormLabel>
+            <Input
+              id="tags-input"
+              placeholder={t('upload.enterTagsSeparated')}
+              value={tags}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setTags(e.target.value)
+              }
+              disabled={isUploading}
+              data-testid="input-tags"
+            />
+            <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400">
+              {t('upload.tagsExample')}
+            </p>
+          </div>
+        </div>
+
+        <SheetFooter>
+          <Button
+            variant="ghost"
+            onClick={handleCancel}
+            disabled={isUploading}
+            data-testid="button-cancel-upload"
+          >
+            {allComplete ? t('upload.close') : t('upload.cancel')}
+          </Button>
+          <Button
+            onClick={handleUploadAll}
+            disabled={pendingCount === 0 || isUploading}
+            data-testid="button-submit-upload"
+          >
+            {isUploading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+            {isUploading
+              ? t('upload.uploading')
+              : pendingCount > 0
+                ? pendingCount > 1 
+                  ? t('upload.uploadFilesPlural', { count: pendingCount })
+                  : t('upload.uploadFiles', { count: pendingCount })
+                : t('upload.upload')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}