adserver-dashboard 1.0.0

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

@@ -0,0 +1,330 @@
+import { useState } from 'react';
+import { FolderList } from './folder-list';
+import { CreateFolderDialog, UpdateFolderDialog, DeleteFolderDialog } from './folder-dialogs';
+import { CreativeUpload } from './creative-upload';
+import { CreativeFilters } from './creative-filters';
+import { CreativeGrid } from './creative-grid';
+import { CreativeDetailSheet } from './creative-detail-sheet';
+import { BulkTranscodeDialog } from './bulk-transcode-dialog';
+import { Button } from '@moving-walls/design-system';
+import { Card } from '@moving-walls/design-system';
+import { useInfiniteCreatives, useTranscodeCreative } from '@/lib/content-hub-api';
+import { useToast } from '@/hooks/use-toast';
+import { Wand2 } from 'lucide-react';
+import { CreativeStatus, type Folder, type Creative, type CreativeFilters as CreativeFiltersType } from '@/types/content-hub';
+import type { TranscodeProfile, TranscodeFormat } from '@/types/transcoding';
+
+interface ContentHubManagerProps {
+  mode?: 'library' | 'selection';
+  selectedCreatives?: string[];
+  onSelectionChange?: (creativeIds: string[]) => void;
+  onSelectComplete?: (creatives: Creative[]) => void;
+  onUploadComplete?: (creative: Creative) => void;
+  defaultFolderId?: string;
+}
+
+export function ContentHubManager({
+  mode = 'library',
+  selectedCreatives = [],
+  onSelectionChange,
+  onSelectComplete,
+  onUploadComplete,
+  defaultFolderId,
+}: ContentHubManagerProps) {
+  const [selectedFolderId, setSelectedFolderId] = useState<string | undefined>(defaultFolderId);
+  const [filters, setFilters] = useState<CreativeFiltersType>({
+    page: 1,
+    limit: 20,
+    folder_id: defaultFolderId,
+    // In selection mode, only show approved creatives by default
+    ...(mode === 'selection' && { status: CreativeStatus.APPROVED }),
+  });
+
+  // Dialog states
+  const [createFolderOpen, setCreateFolderOpen] = useState(false);
+  const [updateFolderOpen, setUpdateFolderOpen] = useState(false);
+  const [deleteFolderOpen, setDeleteFolderOpen] = useState(false);
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [detailSheetOpen, setDetailSheetOpen] = useState(false);
+  const [bulkTranscodeOpen, setBulkTranscodeOpen] = useState(false);
+  const [selectedCreativeId, setSelectedCreativeId] = useState<string | null>(null);
+
+  // Selected folder for edit/delete
+  const [selectedFolder, setSelectedFolder] = useState<Folder | null>(null);
+
+  // Bulk transcode state
+  const [bulkSelectedIds, setBulkSelectedIds] = useState<string[]>([]);
+  const [isBulkMode, setIsBulkMode] = useState(false);
+
+  const { toast } = useToast();
+  const transcodeMutation = useTranscodeCreative();
+
+  const isSelectionMode = mode === 'selection';
+
+  const handleFolderSelect = (folderId: string | undefined) => {
+    setSelectedFolderId(folderId);
+    setFilters({
+      ...filters,
+      folder_id: folderId,
+      page: 1,
+    });
+  };
+
+  const handleEditFolder = (folder: Folder) => {
+    setSelectedFolder(folder);
+    setUpdateFolderOpen(true);
+  };
+
+  const handleDeleteFolder = (folder: Folder) => {
+    setSelectedFolder(folder);
+    setDeleteFolderOpen(true);
+  };
+
+  const handleFiltersChange = (newFilters: CreativeFiltersType) => {
+    setFilters(newFilters);
+  };
+
+  const handlePreview = (creative: Creative) => {
+    setSelectedCreativeId(creative.id);
+    setDetailSheetOpen(true);
+  };
+
+  // Fetch creatives in selection mode to get full objects
+  const { data: creativesData } = useInfiniteCreatives(filters);
+  const allCreatives = creativesData?.pages.flatMap(page => page.data) || [];
+
+  const handleConfirmSelection = () => {
+    if (!onSelectComplete || selectedCreatives.length === 0) return;
+
+    // Get full Creative objects for selected IDs
+    const selectedCreativeObjects = allCreatives.filter(creative =>
+      selectedCreatives.includes(creative.id)
+    );
+
+    onSelectComplete(selectedCreativeObjects);
+  };
+
+  const handleBulkTranscodeClick = () => {
+    if (bulkSelectedIds.length === 0) {
+      toast({
+        title: 'No creatives selected',
+        description: 'Please select at least one creative to transcode',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Filter to only video/audio creatives
+    const transcodableCreatives = allCreatives.filter(
+      c => bulkSelectedIds.includes(c.id) &&
+      (c.mime_type.startsWith('video/') || c.mime_type.startsWith('audio/'))
+    );
+
+    if (transcodableCreatives.length === 0) {
+      toast({
+        title: 'No transcodable creatives',
+        description: 'Please select video or audio files for transcoding',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (transcodableCreatives.length < bulkSelectedIds.length) {
+      toast({
+        title: 'Some creatives filtered',
+        description: `Only ${transcodableCreatives.length} of ${bulkSelectedIds.length} selected creatives can be transcoded (video/audio only)`,
+      });
+    }
+
+    setBulkTranscodeOpen(true);
+  };
+
+  const handleBulkTranscode = async (
+    creativeIds: string[],
+    profiles: TranscodeProfile[],
+    formats?: TranscodeFormat[]
+  ) => {
+    // This will be called for each creative by the BulkTranscodeDialog
+    for (const creativeId of creativeIds) {
+      await transcodeMutation.mutateAsync({
+        creativeId,
+        payload: {
+          profiles,
+          target_formats: formats,
+        },
+      });
+    }
+  };
+  
+  const toggleBulkMode = () => {
+    setIsBulkMode(!isBulkMode);
+    setBulkSelectedIds([]);
+  };
+
+  const bulkSelectedCreatives = allCreatives.filter(c => bulkSelectedIds.includes(c.id));
+
+  return (
+    <div className="flex h-full gap-4">
+      {/* Left Panel - Folders */}
+      {!isSelectionMode && (
+        <div className="w-64 flex-shrink-0">
+          <Card className="h-full">
+            <FolderList
+              selectedFolderId={selectedFolderId}
+              onSelectFolder={handleFolderSelect}
+              onCreateFolder={() => setCreateFolderOpen(true)}
+              onEditFolder={handleEditFolder}
+              onDeleteFolder={handleDeleteFolder}
+            />
+          </Card>
+        </div>
+      )}
+
+      {/* Main Content Area */}
+      <div className="flex-1 min-w-0 space-y-4">
+        {/* Filters */}
+        <Card className="p-4">
+          <CreativeFilters
+            filters={filters}
+            onFiltersChange={handleFiltersChange}
+            showSearch={true}
+          />
+        </Card>
+
+        {/* Creative Grid */}
+        <CreativeGrid
+          filters={filters}
+          selectionMode={isSelectionMode || isBulkMode}
+          selectedIds={isSelectionMode ? selectedCreatives : bulkSelectedIds}
+          onSelectionChange={isSelectionMode ? onSelectionChange : setBulkSelectedIds}
+          onPreview={isSelectionMode || isBulkMode ? undefined : handlePreview}
+          onUpload={() => setUploadOpen(true)}
+        />
+
+        {/* Selection Mode Actions */}
+        {isSelectionMode && onSelectComplete && selectedCreatives.length > 0 && (
+          <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
+            <Card className="p-4 shadow-lg border-2">
+              <div className="flex items-center gap-4">
+                <span className="text-sm font-medium">
+                  {selectedCreatives.length} creative(s) selected
+                </span>
+                <Button
+                  onClick={handleConfirmSelection}
+                  data-testid="button-confirm-selection"
+                >
+                  Add to Campaign
+                </Button>
+                <Button
+                  variant="ghost"
+                  onClick={() => onSelectionChange?.([])}
+                  data-testid="button-cancel-selection"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </Card>
+          </div>
+        )}
+
+        {/* Bulk Transcode Mode Actions */}
+        {!isSelectionMode && (
+          <>
+            {!isBulkMode ? (
+              <div className="fixed bottom-6 right-6 z-50">
+                <Button
+                  size="lg"
+                  onClick={toggleBulkMode}
+                  className="shadow-lg"
+                  data-testid="button-enable-bulk-mode"
+                >
+                  <Wand2 className="w-4 h-4 mr-2" />
+                  Bulk Transcode
+                </Button>
+              </div>
+            ) : (
+              <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
+                <Card className="p-4 shadow-lg border-2">
+                  <div className="flex items-center gap-4">
+                    <span className="text-sm font-medium">
+                      {bulkSelectedIds.length} creative(s) selected for transcoding
+                    </span>
+                    <Button
+                      onClick={handleBulkTranscodeClick}
+                      disabled={bulkSelectedIds.length === 0}
+                      data-testid="button-start-bulk-transcode"
+                    >
+                      <Wand2 className="w-4 h-4 mr-2" />
+                      Transcode Selected
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      onClick={toggleBulkMode}
+                      data-testid="button-cancel-bulk-mode"
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </Card>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Dialogs */}
+      <CreateFolderDialog
+        open={createFolderOpen}
+        onOpenChange={setCreateFolderOpen}
+      />
+
+      <UpdateFolderDialog
+        open={updateFolderOpen}
+        onOpenChange={setUpdateFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <DeleteFolderDialog
+        open={deleteFolderOpen}
+        onOpenChange={setDeleteFolderOpen}
+        folder={selectedFolder}
+      />
+
+      <CreativeUpload
+        open={uploadOpen}
+        onOpenChange={setUploadOpen}
+        defaultFolderId={selectedFolderId}
+        onUploadComplete={(creative) => {
+          // Refresh the creative list by invalidating the query
+          setUploadOpen(false);
+          // Notify parent component of upload completion
+          if (onUploadComplete) {
+            onUploadComplete(creative);
+          }
+        }}
+      />
+
+      {/* Creative Detail Sheet */}
+      <CreativeDetailSheet
+        creativeId={selectedCreativeId}
+        open={detailSheetOpen}
+        onOpenChange={setDetailSheetOpen}
+      />
+
+      {/* Bulk Transcode Dialog */}
+      <BulkTranscodeDialog
+        creatives={bulkSelectedCreatives}
+        open={bulkTranscodeOpen}
+        onOpenChange={(open) => {
+          setBulkTranscodeOpen(open);
+          if (!open) {
+            // Reset bulk selection after dialog closes
+            setBulkSelectedIds([]);
+            setIsBulkMode(false);
+          }
+        }}
+        onTranscode={handleBulkTranscode}
+      />
+    </div>
+  );
+}