adserver-dashboard 1.0.0

package/client/src/components/content-hub/transcode-dialog.tsx

@@ -0,0 +1,226 @@
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from '@moving-walls/design-system';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@moving-walls/design-system";
+import { FormLabel } from '@moving-walls/design-system';
+import { Checkbox } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { RadioGroup, RadioGroupItem } from '@moving-walls/design-system';
+import { Wand2, Info } from "lucide-react";
+import {
+  TRANSCODE_PROFILES,
+  getSuggestedFormats,
+  getFormatLabel,
+  type TranscodeProfile,
+  type TranscodeFormat,
+} from "@/types/transcoding";
+import type { Creative } from "@/types/content-hub";
+import { Alert } from '@moving-walls/design-system';
+
+const AlertDescription = ({ children }: any) => <div>{children}</div>;
+
+interface TranscodeDialogProps {
+  creative: Creative;
+  onTranscode: (profiles: TranscodeProfile[], formats?: TranscodeFormat[]) => void;
+  isTranscoding?: boolean;
+  children?: React.ReactNode;
+}
+
+export function TranscodeDialog({
+  creative,
+  onTranscode,
+  isTranscoding = false,
+  children,
+}: TranscodeDialogProps) {
+  const { t } = useTranslation('contentHub');
+  const [open, setOpen] = useState(false);
+  const [selectedProfile, setSelectedProfile] = useState<TranscodeProfile>("medium");
+  const [selectedFormats, setSelectedFormats] = useState<TranscodeFormat[]>([]);
+  const [useAutoFormats, setUseAutoFormats] = useState(true);
+
+  const suggestedFormats = getSuggestedFormats(creative.mime_type);
+  const availableFormats: TranscodeFormat[] = creative.mime_type.startsWith("video/")
+    ? ["mp4", "webm"]
+    : creative.mime_type.startsWith("audio/")
+    ? ["mp3", "wav", "mpeg"]
+    : creative.mime_type.startsWith("image/")
+    ? ["jpeg", "png"]
+    : [];
+
+  const handleFormatToggle = (format: TranscodeFormat) => {
+    setSelectedFormats((prev) =>
+      prev.includes(format)
+        ? prev.filter((f) => f !== format)
+        : [...prev, format]
+    );
+  };
+
+  const handleTranscode = () => {
+    const formats = useAutoFormats ? undefined : selectedFormats;
+    onTranscode([selectedProfile], formats);
+    setOpen(false);
+    setSelectedProfile("medium");
+    setSelectedFormats([]);
+    setUseAutoFormats(true);
+  };
+
+  const estimatedJobs = useAutoFormats
+    ? suggestedFormats.length
+    : selectedFormats.length;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button size="sm" disabled={isTranscoding}>
+            <Wand2 className="h-4 w-4 mr-2" />
+            {t('transcode.transcode')}
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px] z-[100]">
+        <DialogHeader>
+          <DialogTitle>{t('transcode.title')}</DialogTitle>
+          <DialogDescription>
+            {t('transcode.configureSettings', { filename: creative.filename })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          <div className="space-y-3">
+            <FormLabel className="text-sm font-medium">{t('transcode.qualityProfile')}</FormLabel>
+            <RadioGroup
+              name="transcodeProfile"
+              value={selectedProfile}
+              onValueChange={(value) => setSelectedProfile(value as TranscodeProfile)}
+            >
+              {TRANSCODE_PROFILES.map((profile) => (
+                <div
+                  key={profile.value}
+                  className="flex items-start space-x-3 space-y-0"
+                >
+                  <RadioGroupItem value={profile.value} id={profile.value} />
+                  <div className="space-y-1 leading-none flex-1">
+                    <FormLabel
+                      htmlFor={profile.value}
+                      className="text-sm font-medium cursor-pointer"
+                    >
+                      {profile.label}
+                      {profile.value === "medium" && (
+                        <Badge variant="secondary" className="ml-2 text-xs">
+                          {t('transcode.recommended')}
+                        </Badge>
+                      )}
+                    </FormLabel>
+                    <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400">
+                      {profile.description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </RadioGroup>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <FormLabel className="text-sm font-medium">{t('transcode.outputFormats')}</FormLabel>
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="auto-formats"
+                  checked={useAutoFormats}
+                  onChange={(e) => setUseAutoFormats(e.target.checked)}
+                />
+                <FormLabel
+                  htmlFor="auto-formats"
+                  className="text-xs font-normal cursor-pointer"
+                >
+                  {t('transcode.autoDetect')}
+                </FormLabel>
+              </div>
+            </div>
+
+            {useAutoFormats ? (
+              <Alert>
+                <Info className="h-4 w-4" />
+                <AlertDescription className="text-xs">
+                  {t('transcode.autoDetectDescription')}{" "}
+                  {suggestedFormats.map(getFormatLabel).join(", ") || "None"}
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <div className="space-y-2">
+                {availableFormats.length > 0 ? (
+                  <div className="grid grid-cols-2 gap-2">
+                    {availableFormats.map((format) => (
+                      <div
+                        key={format}
+                        className="flex items-center space-x-2"
+                      >
+                        <Checkbox
+                          id={`format-${format}`}
+                          checked={selectedFormats.includes(format)}
+                          onChange={() => handleFormatToggle(format)}
+                        />
+                        <FormLabel
+                          htmlFor={`format-${format}`}
+                          className="text-sm font-normal cursor-pointer"
+                        >
+                          {getFormatLabel(format)}
+                          {suggestedFormats.includes(format) && (
+                            <Badge variant="outline" className="ml-1 text-xs">
+                              {t('transcode.suggested')}
+                            </Badge>
+                          )}
+                        </FormLabel>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400">
+                    {t('transcode.noFormatsAvailable')}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg bg-muted p-3 text-xs">
+            <div className="flex items-center justify-between">
+              <span className="text-mw-gray-600 dark:text-mw-gray-400">{t('transcode.estimatedJobs')}</span>
+              <span className="font-medium">
+                {estimatedJobs} {estimatedJobs === 1 ? t('transcode.job') : t('transcode.jobs')}
+              </span>
+            </div>
+            <p className="mt-1 text-mw-gray-600 dark:text-mw-gray-400">
+              {t('transcode.oneJobPerFormat')}
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {t('transcode.cancel')}
+          </Button>
+          <Button
+            onClick={handleTranscode}
+            disabled={
+              isTranscoding ||
+              (!useAutoFormats && selectedFormats.length === 0)
+            }
+          >
+            <Wand2 className="h-4 w-4 mr-2" />
+            {t('transcode.startTranscoding')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/client/src/components/creative-library/creative-details-view.tsx

@@ -0,0 +1,446 @@
+import { useState } from 'react';
+import { X, Download, Trash2, CheckCircle, XCircle, Wand2, Loader2 } from 'lucide-react';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } 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 { CreativeStatusBadge, type CreativeStatusType } from './creative-status-badge';
+import { useApproveCreative, useRejectCreative, useTranscodeCreative, useTranscodedVariants } from '@/lib/content-hub-api';
+import { ApproveDialog, RejectDialog } from '@/components/content-hub/review-dialogs';
+import { TranscodeDialog } from '@/components/content-hub/transcode-dialog';
+import { useToast } from '@/hooks/use-toast';
+import type { Creative } from '@/types/content-hub';
+import type { TranscodeProfile, TranscodeFormat } from '@/types/transcoding';
+
+export interface CreativeDetails {
+  id: string;
+  filename: string;
+  type: string;
+  resolution: string;
+  size: string;
+  duration?: string;
+  uploadedBy: string;
+  uploadedOn: string;
+  status: CreativeStatusType;
+  tags: string[];
+  thumbnail?: string;
+  cdn_path?: string;
+  mime_type?: string;
+  transcode_status?: string;
+  approvalDetails?: {
+    reviewedBy: string;
+    reviewedOn: string;
+    comments: string;
+  };
+}
+
+export interface CreativeDetailsViewProps {
+  creative: CreativeDetails | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDownload?: () => void;
+  onDelete?: () => void;
+  onRefresh?: () => void;
+}
+
+export function CreativeDetailsView({
+  creative,
+  open,
+  onOpenChange,
+  onDownload,
+  onDelete,
+  onRefresh
+}: CreativeDetailsViewProps) {
+  const { toast } = useToast();
+  const [showApproveDialog, setShowApproveDialog] = useState(false);
+  const [showRejectDialog, setShowRejectDialog] = useState(false);
+
+  const approveMutation = useApproveCreative();
+  const rejectMutation = useRejectCreative();
+  const transcodeMutation = useTranscodeCreative();
+  const { data: variantsResponse } = useTranscodedVariants(creative?.id || '');
+  const variants = (variantsResponse as any)?.result || (variantsResponse as any)?.variants || [];
+
+  if (!creative) return null;
+
+  const isVideo = creative.mime_type?.startsWith('video/') || creative.type === 'video';
+  const isAudio = creative.mime_type?.startsWith('audio/') || creative.type === 'audio';
+  const canTranscode = isVideo || isAudio;
+
+  const handleApprove = async (data: { reviewer_id: string; comments?: string }) => {
+    try {
+      await approveMutation.mutateAsync({
+        creativeId: creative.id,
+        payload: data,
+      });
+      toast({
+        title: 'Success',
+        description: 'Creative approved successfully',
+        variant: 'success',
+      });
+      setShowApproveDialog(false);
+      onRefresh?.();
+    } catch (error: any) {
+      toast({
+        title: 'Error',
+        description: error?.message || 'Failed to approve creative',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleReject = async (data: { reviewer_id: string; comments?: string }) => {
+    try {
+      await rejectMutation.mutateAsync({
+        creativeId: creative.id,
+        payload: data,
+      });
+      toast({
+        title: 'Success',
+        description: 'Creative rejected',
+        variant: 'success',
+      });
+      setShowRejectDialog(false);
+      onRefresh?.();
+    } catch (error: any) {
+      toast({
+        title: 'Error',
+        description: error?.message || 'Failed to reject creative',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleTranscode = (profiles: TranscodeProfile[], formats?: TranscodeFormat[]) => {
+    transcodeMutation.mutate(
+      {
+        creativeId: creative.id,
+        payload: {
+          profiles,
+          target_formats: formats,
+        }
+      },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Transcoding started',
+            description: 'The transcoding jobs have been queued.',
+            variant: 'success',
+          });
+          onRefresh?.();
+        },
+        onError: (error: any) => {
+          toast({
+            title: 'Transcoding failed',
+            description: error.message || 'Failed to start transcoding',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  const mockCreative: Creative = {
+    id: creative.id,
+    filename: creative.filename,
+    mime_type: creative.mime_type || 'video/mp4',
+    format: creative.type,
+    size_bytes: 0,
+    cdn_path: creative.cdn_path || creative.thumbnail || '',
+    status: creative.status === 'accepted' ? 'approved' : creative.status === 'inadequate' ? 'rejected' : 'draft',
+    created_at: creative.uploadedOn,
+    updated_at: creative.uploadedOn,
+    company_id: '',
+    tags: creative.tags,
+  };
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent side="right" className="w-[600px] p-0 overflow-y-auto">
+          <SheetHeader className="p-4 border-b sticky top-0 bg-background z-10">
+            <div className="flex items-center justify-between">
+              <SheetTitle className="text-base">{creative.filename}</SheetTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onOpenChange(false)}
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+          </SheetHeader>
+
+          <div className="w-full aspect-video bg-muted">
+            {creative.thumbnail ? (
+              creative.type === 'video' ? (
+                <video
+                  src={creative.cdn_path || creative.thumbnail}
+                  controls
+                  className="w-full h-full object-contain"
+                />
+              ) : (
+                <img
+                  src={creative.thumbnail}
+                  alt={creative.filename}
+                  className="w-full h-full object-contain"
+                />
+              )
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                No preview available
+              </div>
+            )}
+          </div>
+
+          <div className="p-6 space-y-6">
+            <div>
+              <h3 className="text-sm font-semibold mb-4">
+                Creative Informations
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                <InfoItem
+                  label="Creative Name"
+                  value={creative.filename}
+                />
+                <InfoItem
+                  label="Creative Type"
+                  value={creative.type}
+                />
+                <InfoItem
+                  label="Resolution"
+                  value={creative.resolution}
+                />
+                <InfoItem
+                  label="Size"
+                  value={creative.size}
+                />
+                {creative.duration && (
+                  <InfoItem
+                    label="Duration"
+                    value={creative.duration}
+                  />
+                )}
+                <InfoItem
+                  label="Uploaded By"
+                  value={creative.uploadedBy}
+                />
+                <InfoItem
+                  label="Uploaded on"
+                  value={creative.uploadedOn}
+                />
+                <div>
+                  <p className="text-xs text-muted-foreground mb-1">Status</p>
+                  <CreativeStatusBadge status={creative.status} />
+                </div>
+              </div>
+
+              {creative.tags.length > 0 && (
+                <div className="mt-4">
+                  <p className="text-xs text-muted-foreground mb-2">Tags</p>
+                  <div className="flex flex-wrap gap-2">
+                    {creative.tags.map((tag, index) => (
+                      <Badge key={index} variant="secondary">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {creative.approvalDetails && (
+              <>
+                <Separator />
+                <div>
+                  <h3 className="text-sm font-semibold mb-4">
+                    Creative Acceptance details
+                  </h3>
+                  <div className="grid grid-cols-2 gap-4">
+                    <InfoItem
+                      label="Reviewed By"
+                      value={creative.approvalDetails.reviewedBy}
+                    />
+                    <InfoItem
+                      label="Reviewed on"
+                      value={creative.approvalDetails.reviewedOn}
+                    />
+                  </div>
+                  {creative.approvalDetails.comments && (
+                    <div className="mt-4">
+                      <p className="text-xs text-muted-foreground mb-1">
+                        Comments
+                      </p>
+                      <p className="text-sm">
+                        {creative.approvalDetails.comments}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            <Separator />
+
+            <div>
+              <h3 className="text-sm font-semibold mb-4">Review Actions</h3>
+              <div className="grid grid-cols-2 gap-2">
+                <Button
+                  variant="outline"
+                  className="text-green-600 border-green-300 hover:bg-green-50 dark:text-green-400 dark:border-green-700 dark:hover:bg-green-900/20"
+                  onClick={() => setShowApproveDialog(true)}
+                  disabled={creative.status === 'accepted' || approveMutation.isPending}
+                >
+                  {approveMutation.isPending ? (
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  ) : (
+                    <CheckCircle className="w-4 h-4 mr-2" />
+                  )}
+                  Approve
+                </Button>
+                <Button
+                  variant="outline"
+                  className="text-red-600 border-red-300 hover:bg-red-50 dark:text-red-400 dark:border-red-700 dark:hover:bg-red-900/20"
+                  onClick={() => setShowRejectDialog(true)}
+                  disabled={creative.status === 'inadequate' || rejectMutation.isPending}
+                >
+                  {rejectMutation.isPending ? (
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  ) : (
+                    <XCircle className="w-4 h-4 mr-2" />
+                  )}
+                  Reject
+                </Button>
+              </div>
+            </div>
+
+            {canTranscode && (
+              <>
+                <Separator />
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-sm font-semibold">Transcoding</h3>
+                    {creative.transcode_status && (
+                      <Badge variant={
+                        creative.transcode_status === 'COMPLETED' ? 'default' :
+                        creative.transcode_status === 'PROCESSING' ? 'secondary' :
+                        creative.transcode_status === 'FAILED' ? 'error' : 'outline'
+                      }>
+                        {creative.transcode_status === 'PROCESSING' && (
+                          <Loader2 className="w-3 h-3 mr-1 animate-spin" />
+                        )}
+                        {creative.transcode_status}
+                      </Badge>
+                    )}
+                  </div>
+                  
+                  <TranscodeDialog
+                    creative={mockCreative}
+                    onTranscode={handleTranscode}
+                    isTranscoding={transcodeMutation.isPending || creative.transcode_status === 'PROCESSING'}
+                  >
+                    <Button
+                      variant="outline"
+                      className="w-full"
+                      disabled={transcodeMutation.isPending || creative.transcode_status === 'PROCESSING'}
+                    >
+                      {transcodeMutation.isPending || creative.transcode_status === 'PROCESSING' ? (
+                        <>
+                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          Processing...
+                        </>
+                      ) : (
+                        <>
+                          <Wand2 className="w-4 h-4 mr-2" />
+                          {creative.transcode_status === 'COMPLETED' ? 'Retranscode' : 'Start Transcoding'}
+                        </>
+                      )}
+                    </Button>
+                  </TranscodeDialog>
+
+                  {variants && variants.length > 0 && (
+                    <div className="mt-4 space-y-2">
+                      <p className="text-xs text-muted-foreground">Transcoded Variants</p>
+                      {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 items-center gap-2">
+                            <Badge variant="outline" className="text-xs">
+                              {variant.format?.toUpperCase()}
+                            </Badge>
+                            <Badge variant="secondary" className="text-xs">
+                              {variant.profile}
+                            </Badge>
+                          </div>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => variant.cdn_path && window.open(variant.cdn_path, '_blank')}
+                          >
+                            <Download className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            <Separator />
+
+            <div className="flex gap-2">
+              {onDownload && (
+                <Button
+                  variant="outline"
+                  className="flex-1"
+                  onClick={onDownload}
+                >
+                  <Download className="w-4 h-4 mr-2" />
+                  Download
+                </Button>
+              )}
+              {onDelete && (
+                <Button
+                  variant="outline"
+                  className="flex-1 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
+                  onClick={onDelete}
+                >
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  Delete
+                </Button>
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <ApproveDialog
+        open={showApproveDialog}
+        onOpenChange={setShowApproveDialog}
+        creativeFilename={creative.filename}
+        onConfirm={handleApprove}
+        isPending={approveMutation.isPending}
+      />
+
+      <RejectDialog
+        open={showRejectDialog}
+        onOpenChange={setShowRejectDialog}
+        creativeFilename={creative.filename}
+        onConfirm={handleReject}
+        isPending={rejectMutation.isPending}
+      />
+    </>
+  );
+}
+
+function InfoItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <p className="text-xs text-muted-foreground mb-1">{label}</p>
+      <p className="text-sm font-medium">{value}</p>
+    </div>
+  );
+}