adserver-dashboard 1.0.0

package/client/src/components/content-hub/creative-detail-sheet.tsx

@@ -0,0 +1,685 @@
+import { useState, useEffect } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '@moving-walls/design-system';
+import { Button } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { Separator } from '@moving-walls/design-system';
+import { ScrollArea } from '@moving-walls/design-system';
+import { useCreative, useTranscodeCreative, useDeleteCreative, useApproveCreative, useRejectCreative, useTranscodedVariants } from '@/lib/content-hub-api';
+import { ApproveDialog, RejectDialog, DeleteDialog } from './review-dialogs';
+import { TranscodeDialog } from './transcode-dialog';
+import { useToast } from '@/hooks/use-toast';
+import {
+  Download,
+  Trash2,
+  CheckCircle,
+  XCircle,
+  FileVideo,
+  Loader2,
+  Clock,
+  CheckCircle2,
+  AlertCircle,
+  PlayCircle,
+  ExternalLink,
+} from 'lucide-react';
+import type { Creative, CreativeStatus, JobStatus } from '@/types/content-hub';
+import type { TranscodeProfile, TranscodeFormat } from '@/types/transcoding';
+
+interface CreativeDetailSheetProps {
+  creativeId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CreativeDetailSheet({
+  creativeId,
+  open,
+  onOpenChange,
+}: CreativeDetailSheetProps) {
+  const { toast } = useToast();
+  const [showApproveDialog, setShowApproveDialog] = useState(false);
+  const [showRejectDialog, setShowRejectDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const { data: creativeResponse, isLoading, refetch } = useCreative(creativeId || '');
+  // Handle both wrapped (ApiResponse) and direct response formats
+  const creative = (creativeResponse as any)?.result ||
+                   ((creativeResponse as any)?.id ? creativeResponse : null) as Creative | null;
+
+  const { data: variantsResponse, refetch: refetchVariants } = useTranscodedVariants(creativeId || '');
+  const variants = (variantsResponse as any)?.result || (variantsResponse as any)?.variants || [];
+
+  const approveMutation = useApproveCreative();
+  const rejectMutation = useRejectCreative();
+
+  const transcodeMutation = useTranscodeCreative();
+  const deleteMutation = useDeleteCreative();
+
+  const handleApprove = (data: { reviewer_id: string; comments?: string }) => {
+    if (!creative) return;
+
+    approveMutation.mutate(
+      { creativeId: creative.id, payload: data },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Creative approved',
+            description: 'The creative has been approved successfully.',
+            className: 'bg-emerald-500 text-white',
+          });
+          setShowApproveDialog(false);
+          refetch();
+        },
+        onError: (error: any) => {
+          toast({
+            title: 'Approval failed',
+            description: error.message || 'Failed to approve creative',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  const handleReject = (data: { reviewer_id: string; comments?: string }) => {
+    if (!creative) return;
+
+    rejectMutation.mutate(
+      { creativeId: creative.id, payload: data },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Creative rejected',
+            description: 'The creative has been rejected.',
+            className: 'bg-emerald-500 text-white',
+          });
+          setShowRejectDialog(false);
+          refetch();
+        },
+        onError: (error: any) => {
+          toast({
+            title: 'Rejection failed',
+            description: error.message || 'Failed to reject creative',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  // Auto-refresh when transcode status is processing
+  useEffect(() => {
+    if (!creative) return;
+
+    if (creative.transcode_status === 'PROCESSING' || creative.transcode_status === 'PENDING') {
+      const interval = setInterval(() => {
+        refetch();
+        refetchVariants();
+      }, 3000);
+      return () => clearInterval(interval);
+    }
+  }, [creative, refetch, refetchVariants]);
+
+  const handleDownload = async () => {
+    if (!creative) return;
+    
+    try {
+      toast({
+        title: 'Download starting...',
+        description: creative.filename,
+      });
+
+      // Fetch the file as a blob
+      const response = await fetch(creative.cdn_path);
+      if (!response.ok) throw new Error('Download failed');
+      
+      const blob = await response.blob();
+      
+      // Create a blob URL and trigger download
+      const blobUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = creative.filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      
+      // Clean up the blob URL
+      window.URL.revokeObjectURL(blobUrl);
+      
+      toast({
+        title: 'Download complete',
+        description: creative.filename,
+        className: 'bg-emerald-500 text-white',
+      });
+    } catch (error) {
+      toast({
+        title: 'Download failed',
+        description: 'Failed to download the creative file',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleTranscode = (profiles: TranscodeProfile[], formats?: TranscodeFormat[]) => {
+    if (!creative) return;
+
+    transcodeMutation.mutate(
+      {
+        creativeId: creative.id,
+        payload: {
+          profiles,
+          target_formats: formats,
+        }
+      },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Transcoding started',
+            description: 'The transcoding jobs have been queued.',
+            className: 'bg-emerald-500 text-white',
+          });
+          refetch();
+          refetchVariants();
+        },
+        onError: (error: any) => {
+          toast({
+            title: 'Transcoding failed',
+            description: error.message || 'Failed to start transcoding',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  const handleDelete = () => {
+    if (!creative) return;
+
+    deleteMutation.mutate(creative.id, {
+      onSuccess: () => {
+        toast({
+          title: 'Creative deleted',
+          description: 'The creative has been deleted successfully.',
+          className: 'bg-emerald-500 text-white',
+        });
+        setShowDeleteDialog(false);
+        onOpenChange(false);
+      },
+      onError: (error: any) => {
+        toast({
+          title: 'Delete failed',
+          description: error.message || 'Failed to delete creative',
+          variant: 'destructive',
+        });
+      },
+    });
+  };
+
+  const getStatusBadge = (status: CreativeStatus) => {
+    switch (status) {
+      case 'approved':
+        return (
+          <Badge variant="outline" className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20">
+            <CheckCircle className="h-3 w-3 mr-1" />
+            Approved
+          </Badge>
+        );
+      case 'rejected':
+        return (
+          <Badge variant="outline" className="bg-red-500/10 text-red-600 border-red-500/20">
+            <XCircle className="h-3 w-3 mr-1" />
+            Rejected
+          </Badge>
+        );
+      default:
+        return (
+          <Badge variant="outline" className="bg-mw-primary-500/10 text-mw-primary-600 border-mw-primary-500/20">
+            <Clock className="h-3 w-3 mr-1" />
+            Draft
+          </Badge>
+        );
+    }
+  };
+
+  const getTranscodeStatusBadge = (status?: JobStatus) => {
+    if (!status) return null;
+
+    switch (status) {
+      case 'PENDING':
+        return (
+          <Badge variant="outline" className="bg-yellow-500/10 text-yellow-600 border-yellow-500/20">
+            <Clock className="h-3 w-3 mr-1" />
+            Pending
+          </Badge>
+        );
+      case 'PROCESSING':
+        return (
+          <Badge variant="outline" className="bg-mw-primary-500/10 text-mw-primary-600 border-mw-primary-500/20">
+            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+            Processing
+          </Badge>
+        );
+      case 'COMPLETED':
+        return (
+          <Badge variant="outline" className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20">
+            <CheckCircle2 className="h-3 w-3 mr-1" />
+            Completed
+          </Badge>
+        );
+      case 'FAILED':
+        return (
+          <Badge variant="outline" className="bg-red-500/10 text-red-600 border-red-500/20">
+            <AlertCircle className="h-3 w-3 mr-1" />
+            Failed
+          </Badge>
+        );
+      default:
+        return null;
+    }
+  };
+
+  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 formatDuration = (seconds?: number): string => {
+    if (!seconds) return 'N/A';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const isVideo = creative?.mime_type?.startsWith('video/');
+  const isImage = creative?.mime_type?.startsWith('image/');
+  const isAudio = creative?.mime_type?.startsWith('audio/');
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent side="right" className="w-full sm:max-w-2xl">
+          <SheetHeader>
+            <SheetTitle>Creative Details</SheetTitle>
+            <SheetDescription>
+              View and manage creative asset
+            </SheetDescription>
+          </SheetHeader>
+
+          {isLoading ? (
+            <div className="flex items-center justify-center h-96">
+              <Loader2 className="h-8 w-8 animate-spin text-mw-gray-600 dark:text-mw-gray-400" />
+            </div>
+          ) : creative ? (
+            <ScrollArea className="h-[calc(100vh-8rem)] pr-4">
+              <div className="space-y-6 py-4">
+                {/* Preview Section */}
+                <div className="space-y-2">
+                  <h3 className="text-sm font-semibold">Preview</h3>
+                  <div className="rounded-md border bg-muted/50 overflow-hidden">
+                    {isImage && (
+                      <img
+                        src={creative.cdn_path}
+                        alt={creative.filename}
+                        className="w-full h-auto"
+                        data-testid="img-creative-preview"
+                      />
+                    )}
+                    {isVideo && (
+                      <video
+                        src={creative.cdn_path}
+                        controls
+                        className="w-full h-auto"
+                        data-testid="video-creative-preview"
+                      >
+                        Your browser does not support the video tag.
+                      </video>
+                    )}
+                    {isAudio && (
+                      <div className="p-8 flex items-center justify-center">
+                        <audio
+                          src={creative.cdn_path}
+                          controls
+                          className="w-full"
+                          data-testid="audio-creative-preview"
+                        >
+                          Your browser does not support the audio tag.
+                        </audio>
+                      </div>
+                    )}
+                    {!isImage && !isVideo && !isAudio && (
+                      <div className="p-8 flex items-center justify-center text-mw-gray-600 dark:text-mw-gray-400">
+                        <FileVideo className="h-12 w-12" />
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <Separator />
+
+                {/* Basic Info */}
+                <div className="space-y-3">
+                  <h3 className="text-sm font-semibold">Basic Information</h3>
+                  <div className="grid grid-cols-3 gap-2 text-sm">
+                    <div className="text-mw-gray-600 dark:text-mw-gray-400">Filename</div>
+                    <div className="col-span-2 font-medium" data-testid="text-filename">
+                      {creative.filename}
+                    </div>
+
+                    <div className="text-mw-gray-600 dark:text-mw-gray-400">Status</div>
+                    <div className="col-span-2" data-testid="badge-status">
+                      {getStatusBadge(creative.status)}
+                    </div>
+
+                    <div className="text-mw-gray-600 dark:text-mw-gray-400">Format</div>
+                    <div className="col-span-2 font-medium" data-testid="text-format">
+                      {creative.format.toUpperCase()}
+                    </div>
+
+                    <div className="text-mw-gray-600 dark:text-mw-gray-400">File Size</div>
+                    <div className="col-span-2 font-medium" data-testid="text-filesize">
+                      {creative.size_bytes ? formatFileSize(creative.size_bytes) : 'N/A'}
+                    </div>
+
+                    <div className="text-mw-gray-600 dark:text-mw-gray-400">MIME Type</div>
+                    <div className="col-span-2 font-medium" data-testid="text-mimetype">
+                      {creative.mime_type}
+                    </div>
+
+                    {creative.tags && creative.tags.length > 0 && (
+                      <>
+                        <div className="text-mw-gray-600 dark:text-mw-gray-400">Tags</div>
+                        <div className="col-span-2 flex flex-wrap gap-1">
+                          {creative.tags.map((tag: string) => (
+                            <Badge key={tag} variant="secondary" className="text-xs">
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {/* Metadata */}
+                {((creative.width && creative.height) || creative.duration_seconds || (creative.metadata && Object.keys(creative.metadata).length > 0)) && (
+                  <>
+                    <Separator />
+                    <div className="space-y-3">
+                      <h3 className="text-sm font-semibold">Metadata</h3>
+                      <div className="grid grid-cols-3 gap-2 text-sm">
+                        {creative.width && creative.height && (
+                          <>
+                            <div className="text-mw-gray-600 dark:text-mw-gray-400">Dimensions</div>
+                            <div className="col-span-2 font-medium" data-testid="text-dimensions">
+                              {creative.width} × {creative.height}
+                            </div>
+                          </>
+                        )}
+
+                        {creative.duration_seconds && (
+                          <>
+                            <div className="text-mw-gray-600 dark:text-mw-gray-400">Duration</div>
+                            <div className="col-span-2 font-medium" data-testid="text-duration">
+                              {formatDuration(creative.duration_seconds)}
+                            </div>
+                          </>
+                        )}
+
+                        {creative.metadata?.frame_rate && (
+                          <>
+                            <div className="text-mw-gray-600 dark:text-mw-gray-400">Frame Rate</div>
+                            <div className="col-span-2 font-medium" data-testid="text-framerate">
+                              {creative.metadata.frame_rate} fps
+                            </div>
+                          </>
+                        )}
+
+                        {creative.metadata?.codec && (
+                          <>
+                            <div className="text-mw-gray-600 dark:text-mw-gray-400">Codec</div>
+                            <div className="col-span-2 font-medium" data-testid="text-codec">
+                              {creative.metadata.codec}
+                            </div>
+                          </>
+                        )}
+
+                        {creative.metadata?.bitrate && (
+                          <>
+                            <div className="text-mw-gray-600 dark:text-mw-gray-400">Bitrate</div>
+                            <div className="col-span-2 font-medium" data-testid="text-bitrate">
+                              {Math.round(creative.metadata.bitrate / 1000)} kbps
+                            </div>
+                          </>
+                        )}
+
+                        {creative.metadata?.aspect_ratio && (
+                          <>
+                            <div className="text-mw-gray-600 dark:text-mw-gray-400">Aspect Ratio</div>
+                            <div className="col-span-2 font-medium" data-testid="text-aspectratio">
+                              {creative.metadata.aspect_ratio}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+
+                {/* Transcoding Section */}
+                {(isVideo || isAudio) && (
+                  <>
+                    <Separator />
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between">
+                        <h3 className="text-sm font-semibold">Transcoding</h3>
+                        {creative.transcode_status && getTranscodeStatusBadge(creative.transcode_status)}
+                      </div>
+
+                      <TranscodeDialog
+                        creative={creative}
+                        onTranscode={handleTranscode}
+                        isTranscoding={transcodeMutation.isPending || creative.transcode_status === 'PROCESSING'}
+                      >
+                        <Button
+                          disabled={transcodeMutation.isPending || creative.transcode_status === 'PROCESSING'}
+                          variant="outline"
+                          className="w-full"
+                          data-testid="button-transcode"
+                        >
+                          {transcodeMutation.isPending ? (
+                            <>
+                              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                              Starting...
+                            </>
+                          ) : creative.transcode_status === 'PROCESSING' ? (
+                            <>
+                              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                              Processing...
+                            </>
+                          ) : (
+                            <>
+                              <PlayCircle className="h-4 w-4 mr-2" />
+                              {creative.transcode_status === 'COMPLETED' ? 'Retranscode' : 'Start Transcoding'}
+                            </>
+                          )}
+                        </Button>
+                      </TranscodeDialog>
+
+                      {/* Transcoded Variants */}
+                      {variants && variants.length > 0 && (
+                        <div className="space-y-2 mt-4">
+                          <h4 className="text-xs font-semibold text-mw-gray-600 dark:text-mw-gray-400">Transcoded Variants</h4>
+                          <div className="space-y-2">
+                            {variants.map((variant: any) => (
+                              <div
+                                key={variant.id}
+                                className="flex items-center justify-between p-2 rounded-md border bg-muted/30"
+                              >
+                                <div className="flex-1 min-w-0">
+                                  <div className="flex items-center gap-2">
+                                    <Badge variant="outline" className="text-xs">
+                                      {variant.format?.toUpperCase()}
+                                    </Badge>
+                                    <Badge variant="secondary" className="text-xs">
+                                      {variant.profile}
+                                    </Badge>
+                                  </div>
+                                  {variant.file_size_bytes && (
+                                    <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400 mt-1">
+                                      {formatFileSize(variant.file_size_bytes)}
+                                      {variant.width && variant.height && ` • ${variant.width}×${variant.height}`}
+                                    </p>
+                                  )}
+                                </div>
+                                <Button
+                                  size="sm"
+                                  variant="ghost"
+                                  onClick={() => {
+                                    if (variant.cdn_path) {
+                                      window.open(variant.cdn_path, '_blank');
+                                    }
+                                  }}
+                                >
+                                  <ExternalLink className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </>
+                )}
+
+                {/* Actions */}
+                <Separator />
+                <div className="space-y-3">
+                  <h3 className="text-sm font-semibold">Actions</h3>
+                  <div className="grid grid-cols-2 gap-2">
+                    <Button
+                      onClick={() => setShowApproveDialog(true)}
+                      disabled={creative.status === 'approved'}
+                      variant="outline"
+                      className="w-full"
+                      data-testid="button-approve"
+                    >
+                      <CheckCircle className="h-4 w-4 mr-2" />
+                      Approve
+                    </Button>
+                    <Button
+                      onClick={() => setShowRejectDialog(true)}
+                      disabled={creative.status === 'rejected'}
+                      variant="outline"
+                      className="w-full"
+                      data-testid="button-reject"
+                    >
+                      <XCircle className="h-4 w-4 mr-2" />
+                      Reject
+                    </Button>
+                    <Button
+                      onClick={handleDownload}
+                      variant="outline"
+                      className="w-full"
+                      data-testid="button-download"
+                    >
+                      <Download className="h-4 w-4 mr-2" />
+                      Download
+                    </Button>
+                    <Button
+                      onClick={() => setShowDeleteDialog(true)}
+                      disabled={deleteMutation.isPending}
+                      variant="outline"
+                      className="w-full text-destructive hover:bg-destructive/10"
+                      data-testid="button-delete"
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Timestamps */}
+                <Separator />
+                <div className="space-y-2">
+                  <h3 className="text-sm font-semibold">Timestamps</h3>
+                  <div className="grid grid-cols-3 gap-2 text-xs text-mw-gray-600 dark:text-mw-gray-400">
+                    <div>Created</div>
+                    <div className="col-span-2" data-testid="text-created">
+                      {new Date(creative.created_at).toLocaleString()}
+                    </div>
+
+                    {creative.updated_at && (
+                      <>
+                        <div>Updated</div>
+                        <div className="col-span-2" data-testid="text-updated">
+                          {new Date(creative.updated_at).toLocaleString()}
+                        </div>
+                      </>
+                    )}
+
+                    {creative.approved_at && (
+                      <>
+                        <div>Approved</div>
+                        <div className="col-span-2" data-testid="text-approved">
+                          {new Date(creative.approved_at).toLocaleString()}
+                        </div>
+                      </>
+                    )}
+
+                    {creative.rejected_at && (
+                      <>
+                        <div>Rejected</div>
+                        <div className="col-span-2" data-testid="text-rejected">
+                          {new Date(creative.rejected_at).toLocaleString()}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </ScrollArea>
+          ) : (
+            <div className="flex items-center justify-center h-96">
+              <p className="text-mw-gray-600 dark:text-mw-gray-400">Creative not found</p>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      {creative && (
+        <>
+          <ApproveDialog
+            creativeFilename={creative.filename}
+            open={showApproveDialog}
+            onOpenChange={setShowApproveDialog}
+            onConfirm={handleApprove}
+            isPending={approveMutation.isPending}
+          />
+          <RejectDialog
+            creativeFilename={creative.filename}
+            open={showRejectDialog}
+            onOpenChange={setShowRejectDialog}
+            onConfirm={handleReject}
+            isPending={rejectMutation.isPending}
+          />
+          <DeleteDialog
+            creativeFilename={creative.filename}
+            open={showDeleteDialog}
+            onOpenChange={setShowDeleteDialog}
+            onConfirm={handleDelete}
+            isPending={deleteMutation.isPending}
+          />
+        </>
+      )}
+    </>
+  );
+}