adserver-dashboard 1.0.0

package/client/src/components/creative-library/folder-card.tsx

@@ -0,0 +1,78 @@
+import { Folder, MoreVertical } from 'lucide-react';
+import { Button } from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem
+} from "@moving-walls/design-system";
+
+export interface FolderCardProps {
+  id: string;
+  name: string;
+  fileCount: number;
+  size: string;
+  onRename?: () => void;
+  onDelete?: () => void;
+  onClick?: () => void;
+}
+
+export function FolderCard({
+  name,
+  fileCount,
+  size,
+  onRename,
+  onDelete,
+  onClick,
+}: FolderCardProps) {
+  return (
+    <div
+      className="bg-white dark:bg-mw-gray-800 border border-mw-gray-200 dark:border-mw-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer px-3 py-2"
+      onClick={onClick}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <div className="flex-shrink-0">
+            <Folder className="w-6 h-6 text-blue-500" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h4 className="font-medium text-sm text-mw-gray-900 dark:text-white truncate">
+              {name}
+            </h4>
+            <p className="text-xs text-mw-gray-500 dark:text-mw-gray-400">
+              {fileCount} Files | {size}
+            </p>
+          </div>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex-shrink-0 p-1 h-8 w-8"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <MoreVertical className="w-5 h-5 text-mw-gray-500" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {onRename && (
+              <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onRename(); }}>
+                Rename
+              </DropdownMenuItem>
+            )}
+            {onDelete && (
+              <DropdownMenuItem
+                onClick={(e) => { e.stopPropagation(); onDelete(); }}
+                className="text-red-600 dark:text-red-400"
+              >
+                Delete
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}

package/client/src/components/creative-library/index.ts

@@ -0,0 +1,27 @@
+// Export all creative library components for reusability across products
+export { FolderCard } from "./folder-card";
+export type { FolderCardProps } from "./folder-card";
+
+export { CreativeStatusBadge } from "./creative-status-badge";
+export type {
+  CreativeStatusType,
+  CreativeStatusBadgeProps,
+} from "./creative-status-badge";
+
+export { NewCreativeCard } from "./new-creative-card";
+export type { NewCreativeCardProps } from "./new-creative-card";
+
+export { CreativeFiltersPanel } from "./creative-filters-panel";
+export type {
+  CreativeFilters,
+  CreativeFiltersPanelProps,
+} from "./creative-filters-panel";
+
+export { UploadCreativeDialog } from "./upload-creative-dialog";
+export type { UploadCreativeDialogProps } from "./upload-creative-dialog";
+
+export { CreativeDetailsView } from "./creative-details-view";
+export type {
+  CreativeDetails,
+  CreativeDetailsViewProps,
+} from "./creative-details-view";

package/client/src/components/creative-library/new-creative-card.tsx

@@ -0,0 +1,211 @@
+import { useTranslation } from '@/lib/i18n';
+import { MoreVertical, Download, Eye, Image as ImageIcon, Video, FileText, FolderInput, Trash2, FileEdit } from 'lucide-react';
+import { Card, CardContent } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator
+} from "@moving-walls/design-system";
+import { CreativeStatusBadge, type CreativeStatusType } from './creative-status-badge';
+
+export interface NewCreativeCardProps {
+  id: string;
+  filename: string;
+  type: 'image' | 'video' | 'document';
+  format: string;
+  size: string;
+  resolution?: string;
+  duration?: string;
+  thumbnail?: string;
+  status: CreativeStatusType;
+  tags?: string[];
+  uploadedBy: string;
+  onPreview?: () => void;
+  onDownload?: () => void;
+  onDelete?: () => void;
+  onMove?: () => void;
+  onTranscode?: () => void;
+}
+
+const typeIcons = {
+  image: ImageIcon,
+  video: Video,
+  document: FileText
+};
+
+export function NewCreativeCard({
+  filename,
+  type,
+  format,
+  size,
+  resolution,
+  duration,
+  thumbnail,
+  status,
+  tags = [],
+  uploadedBy,
+  onPreview,
+  onDownload,
+  onDelete,
+  onMove,
+  onTranscode,
+}: NewCreativeCardProps) {
+  const { t } = useTranslation('contentHub');
+  const TypeIcon = typeIcons[type];
+
+  return (
+    <Card className="overflow-hidden hover:shadow-md transition-shadow group bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-xl">
+      {/* Thumbnail - larger to match Figma (approx 200px height) */}
+      <div className="relative h-[200px] bg-muted overflow-hidden">
+        {thumbnail ? (
+          <img
+            src={thumbnail}
+            alt={filename}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center bg-mw-neutral-100 dark:bg-mw-neutral-800">
+            <TypeIcon className="w-20 h-20 text-mw-neutral-400" />
+          </div>
+        )}
+
+        {/* Status Badge - positioned top-right */}
+        <div className="absolute top-2 right-2">
+          <CreativeStatusBadge status={status} />
+        </div>
+
+        {/* Hover Actions */}
+        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+          {onPreview && (
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={onPreview}
+              className="bg-white/90 hover:bg-white"
+            >
+              <Eye className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      <CardContent className="p-4 space-y-3">
+        {/* Filename & Actions Row */}
+        <div className="flex items-center justify-between gap-2">
+          <h4 className="font-semibold text-sm text-mw-neutral-900 dark:text-mw-neutral-100 truncate flex-1" title={filename}>
+            {filename}
+          </h4>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="flex-shrink-0 h-7 w-7 p-0 rounded-full hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-800">
+                <MoreVertical className="w-4 h-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {onPreview && (
+                <DropdownMenuItem onClick={onPreview}>
+                  <Eye className="w-4 h-4 mr-2" />
+                  {t('card.view', 'View')}
+                </DropdownMenuItem>
+              )}
+              {onDownload && (
+                <DropdownMenuItem onClick={onDownload}>
+                  <Download className="w-4 h-4 mr-2" />
+                  {t('card.download', 'Download')}
+                </DropdownMenuItem>
+              )}
+              {onTranscode && (
+                <DropdownMenuItem onClick={onTranscode}>
+                  <FileEdit className="w-4 h-4 mr-2" />
+                  {t('card.transcode', 'Transcode')}
+                </DropdownMenuItem>
+              )}
+              {onMove && (
+                <DropdownMenuItem onClick={onMove}>
+                  <FolderInput className="w-4 h-4 mr-2" />
+                  {t('card.moveFile', 'Move File')}
+                </DropdownMenuItem>
+              )}
+              {onDelete && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={onDelete}
+                    className="text-red-600 dark:text-red-400"
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    {t('card.remove', 'Remove')}
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* File Type, Size & Duration/Resolution Row - with icon */}
+        <div className="flex items-center gap-1.5 text-sm text-mw-neutral-500 dark:text-mw-neutral-400">
+          <TypeIcon className="w-4 h-4 flex-shrink-0" />
+          <span className="text-mw-neutral-700 dark:text-mw-neutral-300">{format.toUpperCase()}</span>
+          <span className="w-1.5 h-1.5 rounded-full bg-mw-neutral-300 dark:bg-mw-neutral-600" />
+          <span>{size}</span>
+          {(duration || resolution) && (
+            <>
+              <span className="w-1.5 h-1.5 rounded-full bg-mw-neutral-300 dark:bg-mw-neutral-600" />
+              <span>{duration || resolution}</span>
+            </>
+          )}
+        </div>
+
+        {/* Tags Section */}
+        <div className="space-y-1.5">
+          <span className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">{t('card.tags', 'Tags')}</span>
+          <div className="flex flex-wrap gap-1.5">
+            {tags.length > 0 ? (
+              <>
+                {tags.slice(0, 3).map((tag, index) => (
+                  <Badge 
+                    key={index} 
+                    variant="outline" 
+                    className="text-xs px-2.5 py-1 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-mw-neutral-200 dark:border-mw-neutral-700 text-mw-neutral-700 dark:text-mw-neutral-300 rounded-full"
+                  >
+                    {tag}
+                  </Badge>
+                ))}
+                {tags.length > 3 && (
+                  <Badge 
+                    variant="outline" 
+                    className="text-xs px-2.5 py-1 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-mw-neutral-200 dark:border-mw-neutral-700 text-mw-neutral-700 dark:text-mw-neutral-300 rounded-full"
+                  >
+                    +{tags.length - 3}
+                  </Badge>
+                )}
+              </>
+            ) : (
+              <span className="text-sm text-mw-neutral-400">--</span>
+            )}
+          </div>
+        </div>
+
+        {/* Resolution Section */}
+        <div className="space-y-1">
+          <span className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">{t('card.resolution', 'Resolution')}</span>
+          <p className="text-sm font-medium text-mw-neutral-900 dark:text-mw-neutral-100">
+            {resolution || '--'}
+          </p>
+        </div>
+
+        {/* Uploaded By Section */}
+        <div className="space-y-1">
+          <span className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">{t('card.uploadedBy', 'Uploaded by')}</span>
+          <p className="text-sm font-medium text-mw-neutral-900 dark:text-mw-neutral-100">{uploadedBy}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/client/src/components/creative-library/upload-creative-dialog.tsx

@@ -0,0 +1,261 @@
+import { useState } from 'react';
+import { X, Upload as UploadIcon, File as FileIcon } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@moving-walls/design-system";
+import { Button } from "@moving-walls/design-system";
+import { SelectRoot } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Progress } from "@moving-walls/design-system";
+
+export interface UploadCreativeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  folders?: Array<{ id: string; name: string }>;
+  onUpload?: (data: {
+    files: File[];
+    folderId?: string;
+    tags: string[];
+  }) => Promise<void>;
+}
+
+export function UploadCreativeDialog({
+  open,
+  onOpenChange,
+  folders = [],
+  onUpload
+}: UploadCreativeDialogProps) {
+  const [selectedFolder, setSelectedFolder] = useState('general');
+  const [tags, setTags] = useState<string[]>(['Tag 01', 'Tag 02', 'Tag 03']);
+  const [tagInput, setTagInput] = useState('');
+  const [files, setFiles] = useState<File[]>([]);
+  const [uploadProgress, setUploadProgress] = useState<number>(0);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleFilesSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFiles(Array.from(e.target.files));
+    }
+  };
+
+  const handleAddTag = () => {
+    if (tagInput.trim() && !tags.includes(tagInput.trim())) {
+      setTags([...tags, tagInput.trim()]);
+      setTagInput('');
+    }
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    setTags(tags.filter(tag => tag !== tagToRemove));
+  };
+
+  const handleSave = async () => {
+    if (files.length === 0) return;
+
+    setIsUploading(true);
+    setUploadProgress(0);
+
+    try {
+      // Simulate upload progress
+      const interval = setInterval(() => {
+        setUploadProgress(prev => {
+          if (prev >= 100) {
+            clearInterval(interval);
+            return 100;
+          }
+          return prev + 10;
+        });
+      }, 200);
+
+      await onUpload?.({
+        files,
+        folderId: selectedFolder,
+        tags
+      });
+
+      // Reset form
+      setFiles([]);
+      setTags(['Tag 01', 'Tag 02', 'Tag 03']);
+      setSelectedFolder('general');
+      setIsUploading(false);
+      setUploadProgress(0);
+      onOpenChange(false);
+    } catch (error) {
+      setIsUploading(false);
+      setUploadProgress(0);
+    }
+  };
+
+  const handleRemoveFile = (indexToRemove: number) => {
+    setFiles(files.filter((_, index) => index !== indexToRemove));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader className="pb-4 border-b">
+          <div className="flex items-center justify-between">
+            <DialogTitle>Upload Creatives</DialogTitle>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              disabled={isUploading}
+            >
+              <X className="w-4 h-4" />
+            </Button>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* Save to Folder and Tags */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                Save to Folder
+              </label>
+              <SelectRoot
+                value={selectedFolder}
+                onValueChange={setSelectedFolder}
+                disabled={isUploading}
+              >
+                <option value="general">General</option>
+                {folders.map(folder => (
+                  <option key={folder.id} value={folder.id}>
+                    {folder.name}
+                  </option>
+                ))}
+              </SelectRoot>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                Tags
+              </label>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="Add tag..."
+                  value={tagInput}
+                  onChange={(e) => setTagInput(e.target.value)}
+                  onKeyPress={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleAddTag();
+                    }
+                  }}
+                  disabled={isUploading}
+                />
+                <Button
+                  variant="outline"
+                  onClick={handleAddTag}
+                  disabled={!tagInput.trim() || isUploading}
+                >
+                  Add
+                </Button>
+              </div>
+              <div className="flex flex-wrap gap-1 mt-2">
+                {tags.map((tag, index) => (
+                  <Badge
+                    key={index}
+                    variant="secondary"
+                    className="flex items-center gap-1"
+                  >
+                    {tag}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      isIconOnly
+                      onClick={() => handleRemoveTag(tag)}
+                      disabled={isUploading}
+                    >
+                      <X className="w-3 h-3" />
+                    </Button>
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* File Upload Area */}
+          <div className="border-2 border-dashed rounded-lg p-8">
+            <div className="text-center">
+              <UploadIcon className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+              <p className="text-sm font-medium mb-1">
+                Tap or Drag & Drop your file here
+              </p>
+              <p className="text-xs text-muted-foreground mb-4">
+                .jpg/.png/ or mp4 (max 10 files with 5MB each)
+              </p>
+              <Input
+                type="file"
+                multiple
+                accept="image/jpeg,image/png,video/mp4"
+                onChange={handleFilesSelected}
+                disabled={isUploading}
+                className="max-w-xs mx-auto"
+              />
+            </div>
+          </div>
+
+          {/* Uploaded Files List */}
+          {files.length > 0 && (
+            <div className="space-y-2">
+              {files.map((file, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    <FileIcon className="w-8 h-8 text-muted-foreground flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">
+                        {file.name}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {(file.size / (1024 * 1024)).toFixed(2)} MB
+                      </p>
+                    </div>
+                  </div>
+                  {isUploading ? (
+                    <div className="w-24">
+                      <Progress value={uploadProgress} className="h-1" />
+                      <p className="text-xs text-muted-foreground text-right mt-1">
+                        {uploadProgress}%
+                      </p>
+                    </div>
+                  ) : (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemoveFile(index)}
+                    >
+                      <X className="w-4 h-4 text-red-600" />
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer Actions */}
+        <div className="flex gap-2 pt-4 border-t">
+          <Button
+            variant="outline"
+            className="flex-1"
+            onClick={() => onOpenChange(false)}
+            disabled={isUploading}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="flex-1"
+            onClick={handleSave}
+            disabled={files.length === 0 || isUploading}
+          >
+            {isUploading ? 'Uploading...' : 'Save'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/client/src/components/dashboard-overview.tsx

@@ -0,0 +1,109 @@
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "@/lib/i18n";
+import { Monitor, TrendingUp, DollarSign, Eye } from "lucide-react";
+import { StatCard } from "./stat-card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@moving-walls/design-system";
+import { Skeleton } from "@moving-walls/design-system";
+import { PageHeader } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  ResponsiveContainer,
+} from "recharts";
+import type { Deal, LineItem, Billboard, Creative } from "@shared/schema";
+
+export function DashboardOverview() {
+  const { t } = useTranslation(['dashboard', 'common']);
+  const deals: Deal[] = [];
+  const { data: lineItems = [], isLoading: lineItemsLoading } = useQuery<
+    LineItem[]
+  >({ queryKey: ["/api/line-items"] });
+  const { data: billboards = [], isLoading: billboardsLoading } = useQuery<
+    Billboard[]
+  >({ queryKey: ["/api/billboards"] });
+  const { data: creatives = [], isLoading: creativesLoading } = useQuery<
+    Creative[]
+  >({ queryKey: ["/api/creatives"] });
+
+  const isLoading =
+    false || lineItemsLoading || billboardsLoading || creativesLoading;
+
+  const totalScreens = billboards.length;
+  const activeLineItems = lineItems.filter(
+    (li) => li.status === "ACTIVE",
+  ).length;
+  const totalRevenue = deals.reduce(
+    (sum, deal) => sum + (deal.spentBudget || 0),
+    0,
+  );
+  const totalImpressions = deals.reduce(
+    (sum, deal) => sum + (deal.impressionsDelivered || 0),
+    0,
+  );
+
+  const formatNumber = (num: number) => {
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+    return num.toString();
+  };
+
+  const formatCurrency = (num: number) => {
+    if (num >= 1000000) return `$${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `$${(num / 1000).toFixed(1)}K`;
+    return `$${num}`;
+  };
+
+  const chartData = [
+    { name: "Mon", value: Math.floor(totalImpressions * 0.12) },
+    { name: "Tue", value: Math.floor(totalImpressions * 0.11) },
+    { name: "Wed", value: Math.floor(totalImpressions * 0.15) },
+    { name: "Thu", value: Math.floor(totalImpressions * 0.14) },
+    { name: "Fri", value: Math.floor(totalImpressions * 0.18) },
+    { name: "Sat", value: Math.floor(totalImpressions * 0.16) },
+    { name: "Sun", value: Math.floor(totalImpressions * 0.14) },
+  ];
+
+  const recentLineItems = lineItems
+    .filter((li) => li.status === "ACTIVE" || li.status === "DRAFT")
+    .slice(0, 5);
+
+  const getStatusBadge = (status: LineItem["status"]) => {
+    const variants = {
+      DRAFT: "secondary",
+      READY: "outline",
+      ACTIVE: "default",
+      PAUSED: "outline",
+      COMPLETED: "secondary",
+    } as const;
+
+    return (
+      <Badge variant={variants[status]} className="text-xs capitalize">
+        {t(`common:status.${status.toLowerCase()}`)}
+      </Badge>
+    );
+  };
+
+  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('dashboard:title')}
+          subtitle={t('dashboard:subtitle')}
+          className="px-6 py-4 border-b border-mw-neutral-200"
+        />
+      </div>
+
+      <div className="flex-1 overflow-auto px-6 py-6 space-y-6"></div>
+    </div>
+  );
+}