adserver-dashboard 1.0.0

package/client/src/components/creative-library/creative-filters-panel.tsx

@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import { SlidersHorizontal } from 'lucide-react';
+import { Button } from "@moving-walls/design-system";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@moving-walls/design-system";
+import { Slider } from "@moving-walls/design-system";
+import { SelectRoot } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+
+export interface CreativeFilters {
+  duration?: [number, number];
+  resolution?: string[];
+  uploadedBy?: string[];
+  status?: string[];
+}
+
+export interface CreativeFiltersPanelProps {
+  filters: CreativeFilters;
+  onFiltersChange: (filters: CreativeFilters) => void;
+  onClear: () => void;
+}
+
+const resolutionOptions = [
+  { value: '1920x1080', label: '1920x1080 (Full HD)' },
+  { value: '1280x720', label: '1280x720 (HD)' },
+  { value: '3840x2160', label: '3840x2160 (4K)' },
+  { value: 'multiple', label: 'Multiple' }
+];
+
+const statusOptions = [
+  { value: 'accepted', label: 'Accepted' },
+  { value: 'processing', label: 'Processing' },
+  { value: 'inadequate', label: 'Inadequate' }
+];
+
+export function CreativeFiltersPanel({
+  filters,
+  onFiltersChange,
+  onClear
+}: CreativeFiltersPanelProps) {
+  const [open, setOpen] = useState(false);
+  const [localFilters, setLocalFilters] = useState<CreativeFilters>(filters);
+
+  const activeFilterCount = Object.values(filters).filter(
+    v => v !== undefined && (Array.isArray(v) ? v.length > 0 : true)
+  ).length;
+
+  const handleApply = () => {
+    onFiltersChange(localFilters);
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    setLocalFilters(filters);
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    setLocalFilters({});
+    onClear();
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm" className="relative">
+          <SlidersHorizontal className="w-4 h-4 mr-2" />
+          Filter
+          {activeFilterCount > 0 && (
+            <Badge
+              className="ml-2"
+            >
+              {activeFilterCount}
+            </Badge>
+          )}
+        </Button>
+      </SheetTrigger>
+
+      <SheetContent side="right" className="w-[400px] flex flex-col">
+        <SheetHeader className="pb-4 border-b">
+          <SheetTitle>Filters</SheetTitle>
+        </SheetHeader>
+
+        <div className="p-6 space-y-6 flex-1 overflow-y-auto">
+          {/* Duration Slider */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium">
+                Duration
+              </label>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs text-blue-600 dark:text-blue-400 h-auto p-0"
+                onClick={() => setLocalFilters({ ...localFilters, duration: undefined })}
+              >
+                Clear
+              </Button>
+            </div>
+            <div className="px-2">
+              <Slider
+                min={0}
+                max={80}
+                step={8}
+                value={localFilters.duration || [0, 80]}
+                onValueChange={(value) =>
+                  setLocalFilters({ ...localFilters, duration: value as [number, number] })
+                }
+              />
+              <div className="flex justify-between text-xs text-muted-foreground mt-2">
+                <span>0</span>
+                <span>40</span>
+                <span>80</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Resolution Select */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium">
+                Resolution
+              </label>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs text-blue-600 dark:text-blue-400 h-auto p-0"
+                onClick={() => setLocalFilters({ ...localFilters, resolution: undefined })}
+              >
+                Clear
+              </Button>
+            </div>
+            <SelectRoot
+              value={localFilters.resolution?.[0] || ''}
+              onValueChange={(value) =>
+                setLocalFilters({
+                  ...localFilters,
+                  resolution: value ? [value] : undefined
+                })
+              }
+            >
+              <option value="">Select Options</option>
+              {resolutionOptions.map(option => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </SelectRoot>
+          </div>
+
+          {/* Status Select */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label className="text-sm font-medium">
+                Status
+              </label>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs text-blue-600 dark:text-blue-400 h-auto p-0"
+                onClick={() => setLocalFilters({ ...localFilters, status: undefined })}
+              >
+                Clear
+              </Button>
+            </div>
+            <SelectRoot
+              value={localFilters.status?.[0] || ''}
+              onValueChange={(value) =>
+                setLocalFilters({
+                  ...localFilters,
+                  status: value ? [value] : undefined
+                })
+              }
+            >
+              <option value="">Select Status</option>
+              {statusOptions.map(option => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </SelectRoot>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="p-6 border-t bg-background flex gap-3 mt-auto">
+          <Button
+            variant="outline"
+            className="flex-1"
+            onClick={handleCancel}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="flex-1"
+            onClick={handleApply}
+          >
+            Apply Filters
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/client/src/components/creative-library/creative-list.tsx

@@ -0,0 +1,360 @@
+import { useState, useMemo } from 'react';
+import { Download, Eye, FolderInput, Trash2, Settings2, MoreHorizontal } from 'lucide-react';
+import { Button } from "@moving-walls/design-system";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@moving-walls/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@moving-walls/design-system";
+import { Switch } from "@moving-walls/design-system";
+import { CreativeStatusBadge, type CreativeStatusType } from './creative-status-badge';
+import { AgGridTable } from '@moving-walls/design-system';
+import type { ColDef } from '@moving-walls/design-system';
+
+
+export interface CreativeListItem {
+  id: string;
+  filename: string;
+  type: 'image' | 'video' | 'document';
+  format: string;
+  size: string;
+  status: CreativeStatusType;
+  uploadedBy: string;
+  resolution?: string;
+  duration?: string;
+  tags?: string[];
+  thumbnail?: string;
+  onPreview?: () => void;
+  onDownload?: () => void;
+  onDelete?: () => void;
+  onMove?: () => void;
+  onTranscode?: () => void;
+}
+
+interface ColumnConfig {
+  id: string;
+  label: string;
+  enabled: boolean;
+}
+
+const defaultColumns: ColumnConfig[] = [
+  { id: 'sno', label: 'S.No', enabled: true },
+  { id: 'name', label: 'Creative name', enabled: true },
+  { id: 'type', label: 'Creative Type', enabled: true },
+  { id: 'resolution', label: 'Resolution', enabled: true },
+  { id: 'size', label: 'Size', enabled: true },
+  { id: 'tags', label: 'Tags', enabled: true },
+  { id: 'uploadedBy', label: 'Uploaded By', enabled: true },
+  { id: 'status', label: 'Status', enabled: true },
+];
+
+function getTypeIcon(type: string): string {
+  switch (type) {
+    case 'image': return '🖼️';
+    case 'video': return '🎬';
+    case 'document': return '📄';
+    default: return '📁';
+  }
+}
+
+function getFormatLabel(type: string, format: string): string {
+  return `${type.charAt(0).toUpperCase() + type.slice(1)}/${format.toLowerCase()}`;
+}
+
+type CreativeListRow = CreativeListItem & { index: number };
+
+interface CreativeListProps {
+  items: CreativeListItem[];
+  currentPage?: number;
+  pageSize?: number;
+  totalItems?: number;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+}
+
+export function CreativeList({
+  items,
+  currentPage = 1,
+  pageSize = 10,
+  totalItems,
+  onPageChange,
+  onPageSizeChange
+}: CreativeListProps) {
+  const [columns, setColumns] = useState<ColumnConfig[]>(defaultColumns);
+  const [tempColumns, setTempColumns] = useState<ColumnConfig[]>(defaultColumns);
+  const [customizeOpen, setCustomizeOpen] = useState(false);
+
+  const handleOpenCustomize = () => {
+    setTempColumns([...columns]);
+    setCustomizeOpen(true);
+  };
+
+  const handleToggleColumn = (id: string) => {
+    setTempColumns(prev => prev.map(col =>
+      col.id === id ? { ...col, enabled: !col.enabled } : col
+    ));
+  };
+
+  const handleToggleAll = () => {
+    const allEnabled = tempColumns.every(col => col.enabled);
+    setTempColumns(prev => prev.map(col => ({ ...col, enabled: !allEnabled })));
+  };
+
+  const handleApplyChanges = () => {
+    setColumns(tempColumns);
+    setCustomizeOpen(false);
+  };
+
+  const handleCancelChanges = () => {
+    setTempColumns(columns);
+    setCustomizeOpen(false);
+  };
+
+  const allEnabled = tempColumns.every(col => col.enabled);
+
+  const hiddenColumns = useMemo(() => {
+    return columns.filter(c => !c.enabled).map(c => c.id);
+  }, [columns]);
+
+  const columnDefs = useMemo((): ColDef<CreativeListRow>[] => {
+    return [
+      {
+        colId: 'sno',
+        headerName: 'S.No',
+        width: 60,
+        sortable: false,
+        cellRenderer: (params: { data: CreativeListRow }) => (
+          <span className="text-[var(--color-mw-neutral-500)]">
+            {String(params.data.index).padStart(2, '0')}
+          </span>
+        ),
+      },
+      {
+        colId: 'name',
+        headerName: 'Creative Name',
+        field: 'filename',
+        sortable: true,
+        headerComponent: () => (
+          <div className="flex items-center gap-1">
+            Creative Name
+            <Button variant="ghost" size="sm" isIconOnly onClick={handleOpenCustomize} className="ml-auto">
+              <Settings2 className="w-4 h-4 text-[var(--color-mw-neutral-400)]" />
+            </Button>
+          </div>
+        ),
+        cellRenderer: (params: { value: string; data: CreativeListRow }) => (
+          <div className="flex items-center gap-3">
+            {params.data.thumbnail ? (
+              <img
+                src={params.data.thumbnail}
+                alt={params.data.filename}
+                className="w-8 h-8 rounded object-cover bg-[var(--color-mw-neutral-100)]"
+              />
+            ) : (
+              <div className="w-8 h-8 rounded bg-[var(--color-mw-neutral-100)] flex items-center justify-center text-sm">
+                {getTypeIcon(params.data.type)}
+              </div>
+            )}
+            <span className="font-medium truncate max-w-[200px]">{params.value}</span>
+          </div>
+        ),
+      },
+      {
+        colId: 'type',
+        headerName: 'Creative Type',
+        sortable: true,
+        valueGetter: (params: { data: CreativeListRow | undefined }) => params.data ? getFormatLabel(params.data.type, params.data.format) : '',
+        cellRenderer: (params: { value: string }) => (
+          <span className="text-[var(--color-mw-neutral-600)]">{params.value}</span>
+        ),
+      },
+      {
+        colId: 'resolution',
+        headerName: 'Resolution',
+        field: 'resolution',
+        sortable: true,
+        cellRenderer: (params: { value: string | undefined }) => (
+          <span className="text-[var(--color-mw-neutral-600)]">{params.value || '--'}</span>
+        ),
+      },
+      {
+        colId: 'size',
+        headerName: 'Size',
+        field: 'size',
+        sortable: true,
+        cellRenderer: (params: { value: string }) => (
+          <span className="text-[var(--color-mw-neutral-600)]">{params.value}</span>
+        ),
+      },
+      {
+        colId: 'tags',
+        headerName: 'Tags',
+        field: 'tags',
+        sortable: true,
+        cellRenderer: (params: { value: string[] | undefined }) => {
+          const value = params.value;
+          if (!value || value.length === 0) {
+            return <span className="text-[var(--color-mw-neutral-400)]">--</span>;
+          }
+          return (
+            <div className="flex items-center gap-1">
+              {value.slice(0, 2).map((tag, i) => (
+                <span
+                  key={i}
+                  className="px-2 py-0.5 text-xs bg-[var(--color-mw-neutral-100)] rounded text-[var(--color-mw-neutral-600)]"
+                >
+                  {tag}
+                </span>
+              ))}
+              {value.length > 2 && (
+                <span className="text-xs text-[var(--color-mw-neutral-500)]">+{value.length - 2}</span>
+              )}
+            </div>
+          );
+        },
+      },
+      {
+        colId: 'uploadedBy',
+        headerName: 'Uploaded By',
+        field: 'uploadedBy',
+        sortable: false,
+        cellRenderer: (params: { value: string }) => (
+          <span className="text-[var(--color-mw-neutral-600)]">{params.value}</span>
+        ),
+      },
+      {
+        colId: 'status',
+        headerName: 'Status',
+        field: 'status',
+        sortable: true,
+        cellRenderer: (params: { value: CreativeStatusType }) => <CreativeStatusBadge status={params.value} />,
+      },
+      {
+        colId: 'actions',
+        headerName: '',
+        width: 60,
+        sortable: false,
+        resizable: false,
+        cellRenderer: (params: { data: CreativeListRow }) => {
+          const row = params.data;
+          const actions = [
+            { label: 'View', icon: <Eye className="w-4 h-4" />, onClick: () => row.onPreview?.(), hidden: !row.onPreview },
+            { label: 'Download', icon: <Download className="w-4 h-4" />, onClick: () => row.onDownload?.(), hidden: !row.onDownload },
+            {
+              label: 'Transcode',
+              icon: (
+                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                </svg>
+              ),
+              onClick: () => row.onTranscode?.(),
+              hidden: !row.onTranscode,
+            },
+            { label: 'Move File', icon: <FolderInput className="w-4 h-4" />, onClick: () => row.onMove?.(), hidden: !row.onMove },
+            { label: 'Remove', icon: <Trash2 className="w-4 h-4" />, onClick: () => row.onDelete?.(), hidden: !row.onDelete, destructive: true },
+          ].filter(a => !a.hidden);
+
+          if (actions.length === 0) return null;
+
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {actions.map((action) => (
+                  <DropdownMenuItem
+                    key={action.label}
+                    onClick={action.onClick}
+                    className={action.destructive ? 'text-destructive' : ''}
+                  >
+                    {action.icon}
+                    <span className="ml-2">{action.label}</span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        },
+      },
+    ];
+  }, []);
+
+  const dataWithIndex = items.map((item, idx) => ({
+    ...item,
+    index: (currentPage - 1) * pageSize + idx + 1,
+  }));
+
+  const total = totalItems ?? items.length;
+
+  const hasPagination = !!(onPageChange && onPageSizeChange);
+
+  return (
+    <>
+      <div style={{ height: '500px' }}>
+        <AgGridTable
+          rowData={dataWithIndex}
+          columnDefs={columnDefs}
+          getRowId={(row) => row.id}
+          hiddenColumns={hiddenColumns}
+          emptyMessage="No creatives found"
+          pagination={hasPagination}
+          serverSidePagination={hasPagination}
+          serverSideConfig={hasPagination ? {
+            totalCount: total,
+            currentPage,
+            pageSize,
+            onPageChange: (page) => onPageChange!(page),
+            onPageSizeChange: (size) => onPageSizeChange!(size),
+            pageSizeSelector: [10, 25, 50, 100],
+          } : undefined}
+        />
+      </div>
+
+      <Dialog open={customizeOpen} onOpenChange={setCustomizeOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Customise Table Elements</DialogTitle>
+          </DialogHeader>
+          <div className="py-4 space-y-4">
+            <div className="flex items-center justify-between py-2 border-b border-[var(--color-mw-neutral-200)]">
+              <span className="font-medium">Enable all fields</span>
+              <Switch
+                checked={allEnabled}
+                onChange={handleToggleAll}
+              />
+            </div>
+            {tempColumns.map((col) => (
+              <div key={col.id} className="flex items-center justify-between py-2">
+                <span className="text-[var(--color-mw-neutral-700)]">{col.label}</span>
+                <Switch
+                  checked={col.enabled}
+                  onChange={() => handleToggleColumn(col.id)}
+                />
+              </div>
+            ))}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={handleCancelChanges}>
+              Cancel Changes
+            </Button>
+            <Button variant="primary" onClick={handleApplyChanges}>
+              Apply Changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/client/src/components/creative-library/creative-status-badge.tsx

@@ -0,0 +1,71 @@
+import { Badge } from "@moving-walls/design-system";
+import { Check, X, Clock, HelpCircle } from 'lucide-react';
+
+export type CreativeStatusType = 'approved' | 'processing' | 'inadequate' | 'accepted' | 'draft' | 'rejected' | 'pending' | string;
+
+export interface CreativeStatusBadgeProps {
+  status: CreativeStatusType;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function CreativeStatusBadge({ status, size = 'sm' }: CreativeStatusBadgeProps) {
+  const statusConfig: Record<string, { variant: 'default' | 'error' | 'secondary'; className: string; icon: React.ReactNode; label: string }> = {
+    approved: {
+      variant: 'default',
+      className: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300',
+      icon: <Check className="w-3 h-3" />,
+      label: 'Approved'
+    },
+    accepted: {
+      variant: 'default',
+      className: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300',
+      icon: <Check className="w-3 h-3" />,
+      label: 'Accepted'
+    },
+    processing: {
+      variant: 'default',
+      className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
+      icon: <Clock className="w-3 h-3" />,
+      label: 'Processing'
+    },
+    pending: {
+      variant: 'default',
+      className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
+      icon: <Clock className="w-3 h-3" />,
+      label: 'Pending'
+    },
+    inadequate: {
+      variant: 'error',
+      className: '',
+      icon: <X className="w-3 h-3" />,
+      label: 'Inadequate'
+    },
+    rejected: {
+      variant: 'error',
+      className: '',
+      icon: <X className="w-3 h-3" />,
+      label: 'Rejected'
+    },
+    draft: {
+      variant: 'secondary',
+      className: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300',
+      icon: <HelpCircle className="w-3 h-3" />,
+      label: 'Draft'
+    }
+  };
+
+  const normalizedStatus = status?.toLowerCase() || 'draft';
+  const config = statusConfig[normalizedStatus] || {
+    variant: 'secondary' as const,
+    className: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-300',
+    icon: <HelpCircle className="w-3 h-3" />,
+    label: status || 'Unknown'
+  };
+
+  return (
+    <Badge variant={config.variant} className={`flex items-center gap-1 ${config.className}`}>
+      {config.icon}
+      {config.label}
+    </Badge>
+  );
+}