adserver-dashboard 1.0.0

package/client/src/components/content-hub/content-hub-manager-v2.tsx

@@ -0,0 +1,574 @@
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { useLocation } from "wouter";
+import {
+  Plus,
+  Upload as UploadIcon,
+  LayoutGrid,
+  List,
+  Search,
+  Package,
+} from "lucide-react";
+import { Button } from "@moving-walls/design-system";
+import {
+  Container,
+  FlexContainer,
+  HStack,
+  Stack,
+} from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Heading, Text } from "@moving-walls/design-system";
+import { PageHeader } from "@moving-walls/design-system";
+import { Pagination } from "@moving-walls/design-system";
+import { Select } from "@moving-walls/design-system";
+import { useFolders, useCreatives, useDeleteCreative } from "@/lib/content-hub-api";
+import { FolderCard } from "@/components/creative-library/folder-card";
+import { NewCreativeCard } from "@/components/creative-library/new-creative-card";
+import { CreativeList } from "@/components/creative-library/creative-list";
+import {
+  CreativeFiltersPanel,
+  type CreativeFilters as UICreativeFilters,
+} from "@/components/creative-library/creative-filters-panel";
+import {
+  CreativeDetailsView,
+  type CreativeDetails,
+} from "@/components/creative-library/creative-details-view";
+import {
+  type CreativeFilters as APICreativeFilters,
+  type Creative,
+  CreativeStatus,
+} from "@/types/content-hub";
+import {
+  CreateFolderDialog,
+  UpdateFolderDialog,
+  DeleteFolderDialog,
+} from "./folder-dialogs";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@moving-walls/design-system";
+import { CreativeUpload } from "./creative-upload";
+import type { Folder } from "@/types/content-hub";
+
+interface ContentHubManagerV2Props {
+  mode?: "library" | "selection";
+  selectedCreatives?: string[];
+  onSelectionChange?: (creativeIds: string[]) => void;
+  onSelectComplete?: (creatives: Creative[]) => void;
+  onUploadComplete?: (creative: Creative) => void;
+  defaultFolderId?: string;
+}
+
+function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+}: {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  action?: { label: string; onClick: () => void };
+}) {
+  return (
+    <Stack
+      spacing={4}
+      className="items-center justify-center py-16 text-center"
+    >
+      {icon && <div className="mb-4">{icon}</div>}
+      <Heading level={4}>{title}</Heading>
+      {description && (
+        <Text size="sm" variant="muted" className="max-w-sm">
+          {description}
+        </Text>
+      )}
+      {action && <Button onClick={action.onClick}>{action.label}</Button>}
+    </Stack>
+  );
+}
+
+export function ContentHubManagerV2({
+  mode = "library",
+  defaultFolderId,
+  onUploadComplete,
+}: ContentHubManagerV2Props) {
+  const { t } = useTranslation(['contentHub', 'creatives', 'common']);
+  const [, setLocation] = useLocation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [selectedFolderId, setSelectedFolderId] = useState<string | undefined>(
+    defaultFolderId,
+  );
+  const [uiFilters, setUiFilters] = useState<UICreativeFilters>({});
+
+  const [apiFilters, setApiFilters] = useState<APICreativeFilters>({
+    page: 1,
+    limit: 20,
+    folder_id: defaultFolderId,
+    ...(mode === "selection" && { status: CreativeStatus.APPROVED }),
+  });
+
+  const [createFolderOpen, setCreateFolderOpen] = useState(false);
+  const [updateFolderOpen, setUpdateFolderOpen] = useState(false);
+  const [deleteFolderOpen, setDeleteFolderOpen] = useState(false);
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [detailsViewOpen, setDetailsViewOpen] = useState(false);
+  const [selectedCreative, setSelectedCreative] =
+    useState<CreativeDetails | null>(null);
+  const [selectedFolder, setSelectedFolder] = useState<Folder | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [creativeToDelete, setCreativeToDelete] = useState<Creative | null>(null);
+
+  const deleteCreativeMutation = useDeleteCreative();
+
+  const { data: foldersData } = useFolders({ page: 1, limit: 100 });
+  const folders = foldersData?.data || [];
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const {
+    data: creativesData,
+    isLoading,
+    refetch: refetchCreatives,
+  } = useCreatives({ ...apiFilters, page: currentPage, limit: pageSize });
+  const allCreatives = creativesData?.data || [];
+  const totalPages = (creativesData?.pagination as any)?.total_pages || (creativesData?.pagination as any)?.pages || 1;
+
+  const hasCreatives = allCreatives.length > 0;
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handlePageSizeChange = (newSize: number) => {
+    setPageSize(newSize);
+    setCurrentPage(1);
+  };
+
+  const convertToUICreative = (creative: Creative) => {
+    const mimeType = creative.mime_type;
+    let type: "image" | "video" | "document" = "document";
+    if (mimeType.startsWith("image/")) type = "image";
+    else if (mimeType.startsWith("video/")) type = "video";
+
+    let status: "accepted" | "processing" | "inadequate" = "processing";
+    if (creative.status === "approved") status = "accepted";
+    else if (creative.status === "rejected") status = "inadequate";
+
+    return {
+      id: creative.id,
+      filename: creative.filename,
+      type,
+      format: creative.format,
+      size: formatBytes(creative.size_bytes),
+      resolution:
+        creative.width && creative.height
+          ? `${creative.width}x${creative.height}`
+          : undefined,
+      duration: creative.duration_seconds
+        ? `${Math.round(creative.duration_seconds)}s`
+        : undefined,
+      thumbnail: creative.thumbnail || creative.cdn_path,
+      status,
+      tags: creative.tags || [],
+      uploadedBy: (creative as any).created_by || t('contentHub:common.user'),
+    };
+  };
+
+  const convertToDetails = (creative: Creative): CreativeDetails => {
+    const uiCreative = convertToUICreative(creative);
+    return {
+      ...uiCreative,
+      resolution: uiCreative.resolution || "Unknown",
+      uploadedOn: new Date(creative.created_at).toLocaleString(),
+      cdn_path: creative.cdn_path,
+      mime_type: creative.mime_type,
+      transcode_status: creative.transcode_status,
+      approvalDetails: creative.approved_at
+        ? {
+            reviewedBy: creative.approved_by || t('contentHub:common.admin'),
+            reviewedOn: new Date(creative.approved_at).toLocaleString(),
+            comments: t('contentHub:common.approvedForCampaigns'),
+          }
+        : undefined,
+    };
+  };
+
+  const handleUIFiltersChange = (newUiFilters: UICreativeFilters) => {
+    setUiFilters(newUiFilters);
+
+    const newApiFilters: APICreativeFilters = {
+      ...apiFilters,
+      page: 1,
+    };
+
+    if (newUiFilters.duration) {
+      newApiFilters.min_duration = newUiFilters.duration[0];
+      newApiFilters.max_duration = newUiFilters.duration[1];
+    }
+
+    if (newUiFilters.resolution && newUiFilters.resolution.length > 0) {
+      newApiFilters.resolution = newUiFilters.resolution[0];
+    }
+
+    if (newUiFilters.status && newUiFilters.status.length > 0) {
+      const statusMap: Record<string, CreativeStatus> = {
+        accepted: CreativeStatus.APPROVED,
+        processing: CreativeStatus.DRAFT,
+        inadequate: CreativeStatus.REJECTED,
+      };
+      newApiFilters.status = statusMap[newUiFilters.status[0]];
+    }
+
+    setApiFilters(newApiFilters);
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    setApiFilters({
+      ...apiFilters,
+      search: query || undefined,
+      page: 1,
+    });
+  };
+
+  const handleFolderClick = (folderId: string) => {
+    setLocation(`/contenthub/folder/${folderId}`);
+  };
+
+  const handlePreviewCreative = (creative: any) => {
+    const fullCreative = allCreatives.find((c) => c.id === creative.id);
+    if (fullCreative) {
+      setSelectedCreative(convertToDetails(fullCreative));
+      setDetailsViewOpen(true);
+    }
+  };
+
+  const handleDeleteCreative = (creativeId: string) => {
+    const creative = allCreatives.find((c) => c.id === creativeId);
+    if (creative) {
+      setCreativeToDelete(creative);
+      setDeleteDialogOpen(true);
+    }
+  };
+
+  const confirmDeleteCreative = async () => {
+    if (!creativeToDelete) return;
+    
+    try {
+      await deleteCreativeMutation.mutateAsync({
+        creativeId: creativeToDelete.id,
+        performerId: creativeToDelete.id,
+      });
+      setDeleteDialogOpen(false);
+      setCreativeToDelete(null);
+      if (selectedCreative?.id === creativeToDelete.id) {
+        setDetailsViewOpen(false);
+        setSelectedCreative(null);
+      }
+    } catch (error) {
+      console.error('Failed to delete creative:', error);
+    }
+  };
+
+  function formatBytes(bytes: number): string {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "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 getFolderSize = (folder: Folder): string => {
+    const totalFiles = folder.no_of_creatives;
+    const avgSize = 2;
+    return `${totalFiles * avgSize} MB`;
+  };
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-mw-neutral-50 dark:bg-mw-neutral-900 overflow-hidden">
+      <div className="flex-shrink-0">
+        <PageHeader
+          title={t('contentHub:manager.title')}
+          subtitle={t('contentHub:manager.subtitle')}
+          className="px-6 py-4 border-b border-mw-neutral-200"
+          actions={
+            <>
+              <Button variant="outline" onClick={() => setCreateFolderOpen(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                {t('contentHub:folder.createFolder')}
+              </Button>
+              <Button variant="primary" onClick={() => setUploadDialogOpen(true)}>
+                <UploadIcon className="w-4 h-4 mr-2" />
+                {t('contentHub:upload.title')}
+              </Button>
+            </>
+          }
+        />
+      </div>
+
+      <div className="flex-1 flex flex-col overflow-hidden px-6 py-6">
+        <Stack spacing={4} className="mb-6 pt-3 px-4 bg-white dark:bg-mw-neutral-900">
+          <HStack className="items-center justify-between">
+            <Heading level={6}>{t('creatives:folders.title')}</Heading>
+            <HStack spacing={3} className="flex-1 max-w-md ml-auto">
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-mw-gray-600 dark:text-mw-gray-400" />
+                <Input
+                  placeholder={t('common:actions.search') + '...'}
+                  value={searchQuery}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleSearchChange(e.target.value)
+                  }
+                  className="pl-10 max-w-xs"
+                />
+              </div>
+              <CreativeFiltersPanel
+                filters={uiFilters}
+                onFiltersChange={handleUIFiltersChange}
+                onClear={() => {
+                  setUiFilters({});
+                  setApiFilters({
+                    page: 1,
+                    limit: 20,
+                    folder_id: selectedFolderId,
+                  });
+                }}
+              />
+            </HStack>
+          </HStack>
+
+          <div className="flex items-center gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 flex-1">
+              {folders.slice(0, 4).map((folder) => (
+                <FolderCard
+                  key={folder.id}
+                  id={folder.id}
+                  name={folder.name}
+                  fileCount={folder.no_of_creatives}
+                  size={getFolderSize(folder)}
+                  onClick={() => handleFolderClick(folder.id)}
+                  onRename={() => {
+                    setSelectedFolder(folder);
+                    setUpdateFolderOpen(true);
+                  }}
+                  onDelete={() => {
+                    setSelectedFolder(folder);
+                    setDeleteFolderOpen(true);
+                  }}
+                />
+              ))}
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setLocation("/contenthub/folders")}
+              className="text-mw-primary-500 dark:text-mw-primary-400 p-0 h-auto hover:underline whitespace-nowrap"
+            >
+              {t('creatives:folders.viewAll')}
+            </Button>
+          </div>
+        </Stack>
+
+        <div className="flex-1 flex flex-col min-h-0 px-4" style={{ height: 'calc(100vh - 350px)' }}>
+          <HStack className="items-center justify-between mb-4 sticky top-0 z-10 bg-white dark:bg-mw-neutral-900 py-2">
+            <Heading level={6}>{t('creatives:creatives.recentActivity')}</Heading>
+            <HStack spacing={2}>
+              
+              <Button
+                variant={viewMode === "list" ? "primary" : "outline"}
+                size="sm"
+                onClick={() => setViewMode("list")}
+              >
+                <List className="w-4 h-4" />
+              </Button>
+              <Button
+                variant={viewMode === "grid" ? "primary" : "outline"}
+                size="sm"
+                onClick={() => setViewMode("grid")}
+              >
+                <LayoutGrid className="w-4 h-4" />
+              </Button>
+            </HStack>
+          </HStack>
+
+          <div className="flex-1 overflow-auto">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-16">
+                <Text variant="muted">{t('common:actions.loading')}</Text>
+              </div>
+            ) : !hasCreatives ? (
+              <EmptyState
+                title={t('contentHub:grid.noCreativesFound')}
+                description={t('contentHub:grid.uploadFirstCreative')}
+                action={{
+                  label: t('contentHub:upload.title'),
+                  onClick: () => setUploadDialogOpen(true),
+                }}
+                icon={
+                  <Package className="w-16 h-16 text-mw-gray-600 dark:text-mw-gray-400" />
+                }
+              />
+            ) : viewMode === "grid" ? (
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3 pb-6">
+                {allCreatives.map((creative) => (
+                  <NewCreativeCard
+                    key={creative.id}
+                    {...convertToUICreative(creative)}
+                    onPreview={() =>
+                      handlePreviewCreative(convertToUICreative(creative))
+                    }
+                    onDownload={() => window.open(creative.cdn_path, "_blank")}
+                    onDelete={() => handleDeleteCreative(creative.id)}
+                    onMove={() => console.log("Move", creative.id)}
+                    onTranscode={() => console.log("Transcode", creative.id)}
+                  />
+                ))}
+              </div>
+            ) : (
+              <CreativeList
+                items={allCreatives.map((creative) => ({
+                  ...convertToUICreative(creative),
+                  thumbnail: creative.thumbnail || creative.cdn_path,
+                  onPreview: () =>
+                    handlePreviewCreative(convertToUICreative(creative)),
+                  onDownload: () => window.open(creative.cdn_path, "_blank"),
+                  onDelete: () => handleDeleteCreative(creative.id),
+                  onMove: () => console.log("Move", creative.id),
+                  onTranscode: () => console.log("Transcode", creative.id),
+                }))}
+                currentPage={currentPage}
+                pageSize={pageSize}
+              />
+            )}
+          </div>
+
+          {hasCreatives && (
+            <div className="pt-4 mt-4 border-t border-mw-gray-200 dark:border-mw-gray-700 sticky bottom-0 z-10 bg-white dark:bg-mw-neutral-900 pb-4">
+              <div className="flex items-center justify-end gap-6">
+                <div className="flex items-center gap-2">
+                  <Text size="sm" variant="muted">{t('common:pagination.rowsPerPage')}:</Text>
+                  <Select
+                    className="border border-mw-gray-200 dark:border-mw-gray-600 rounded px-2 py-1 text-sm bg-white dark:bg-mw-gray-800"
+                    value={String(pageSize)}
+                    onChange={(e) => handlePageSizeChange(Number(e.target.value))}
+                    options={[
+                      { value: "10", label: "10" },
+                      { value: "20", label: "20" },
+                      { value: "50", label: "50" },
+                      { value: "100", label: "100" },
+                    ]}
+                  />
+                </div>
+                <Text size="sm" variant="muted">
+                  {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, creativesData?.pagination?.total || allCreatives.length)} of {creativesData?.pagination?.total || allCreatives.length}
+                </Text>
+                <div className="flex items-center gap-2">
+                  <Pagination
+                    currentPage={currentPage}
+                    totalPages={Math.max(1, totalPages)}
+                    onPageChange={handlePageChange}
+                    showFirstLast={true}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <CreateFolderDialog
+        open={createFolderOpen}
+        onOpenChange={setCreateFolderOpen}
+      />
+
+      <UpdateFolderDialog
+        open={updateFolderOpen}
+        onOpenChange={setUpdateFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <DeleteFolderDialog
+        open={deleteFolderOpen}
+        onOpenChange={setDeleteFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <CreativeUpload
+        open={uploadDialogOpen}
+        onOpenChange={setUploadDialogOpen}
+        defaultFolderId={selectedFolderId}
+        onUploadComplete={(creatives) => {
+          setUploadDialogOpen(false);
+          if (onUploadComplete && creatives.length > 0) {
+            onUploadComplete(creatives[0]);
+          }
+        }}
+      />
+
+      <CreativeDetailsView
+        creative={selectedCreative}
+        open={detailsViewOpen}
+        onOpenChange={setDetailsViewOpen}
+        onDownload={() => {
+          if (selectedCreative?.id) {
+            const creative = allCreatives.find(
+              (c) => c.id === selectedCreative.id,
+            );
+            if (creative) window.open(creative.cdn_path, "_blank");
+          }
+        }}
+        onDelete={() => selectedCreative && handleDeleteCreative(selectedCreative.id)}
+        onRefresh={() => {
+          refetchCreatives();
+          if (selectedCreative?.id) {
+            const updatedCreative = allCreatives.find(
+              (c) => c.id === selectedCreative.id,
+            );
+            if (updatedCreative) {
+              setSelectedCreative(convertToDetails(updatedCreative));
+            }
+          }
+        }}
+      />
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('contentHub:deleteCreative.title')}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <Text>
+              {t('contentHub:deleteCreative.confirmMessage')} <strong>{creativeToDelete?.filename}</strong>?
+            </Text>
+            <Text size="sm" variant="muted" className="mt-2">
+              {t('contentHub:deleteCreative.cannotBeUndone')}
+            </Text>
+          </div>
+          <DialogFooter>
+            <Button 
+              variant="outline" 
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setCreativeToDelete(null);
+              }}
+            >
+              {t('contentHub:common.cancel')}
+            </Button>
+            <Button 
+              variant="destructive" 
+              onClick={confirmDeleteCreative}
+              disabled={deleteCreativeMutation.isPending}
+            >
+              {deleteCreativeMutation.isPending ? t('common:actions.loading') : t('contentHub:common.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}