adserver-dashboard 1.0.0

package/client/src/components/content-hub/creative-filters.tsx

@@ -0,0 +1,457 @@
+import { useState } from 'react';
+import { useTranslation } from '@/lib/i18n';
+import { Button } from '@moving-walls/design-system';
+import { Input } from '@moving-walls/design-system';
+import { FormLabel } from '@moving-walls/design-system';
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { Search, Filter, X, SlidersHorizontal } from 'lucide-react';
+import { CreativeStatus, JobStatus, type CreativeFilters as CreativeFiltersType } from '@/types/content-hub';
+
+interface CreativeFiltersProps {
+  filters: CreativeFiltersType;
+  onFiltersChange: (filters: CreativeFiltersType) => void;
+  showSearch?: boolean;
+}
+
+const FORMAT_OPTIONS = [
+  'jpeg', 'jpg', 'png', 'gif', 'webp',
+  'mp4', 'webm', 'mov', 'avi',
+  'mp3', 'wav', 'aac', 'ogg',
+  'html',
+];
+
+const RESOLUTION_OPTIONS = [
+  '1920x1080',
+  '1280x720',
+  '3840x2160',
+  '2560x1440',
+  '1080x1920',
+  '720x1280',
+];
+
+export function CreativeFilters({
+  filters,
+  onFiltersChange,
+  showSearch = true,
+}: CreativeFiltersProps) {
+  const { t } = useTranslation('contentHub');
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+
+  const MIME_TYPE_OPTIONS = [
+    { label: t('mimeTypes.allTypes'), value: 'all' },
+    { label: t('mimeTypes.images'), value: 'image/*' },
+    { label: t('mimeTypes.videos'), value: 'video/*' },
+    { label: t('mimeTypes.audio'), value: 'audio/*' },
+    { label: t('mimeTypes.html5'), value: 'text/html' },
+    { label: t('mimeTypes.jpeg'), value: 'image/jpeg' },
+    { label: t('mimeTypes.png'), value: 'image/png' },
+    { label: t('mimeTypes.mp4'), value: 'video/mp4' },
+    { label: t('mimeTypes.webm'), value: 'video/webm' },
+    { label: t('mimeTypes.mp3'), value: 'audio/mp3' },
+  ];
+
+  const FILE_SIZE_PRESETS = [
+    { label: t('fileSizePresets.under1MB'), max: 1048576 },
+    { label: t('fileSizePresets.under5MB'), max: 5242880 },
+    { label: t('fileSizePresets.under10MB'), max: 10485760 },
+    { label: t('fileSizePresets.under50MB'), max: 52428800 },
+    { label: t('fileSizePresets.over50MB'), min: 52428800 },
+  ];
+
+  const DURATION_PRESETS = [
+    { label: t('durationPresets.under10s'), max: 10 },
+    { label: t('durationPresets.10to30s'), min: 10, max: 30 },
+    { label: t('durationPresets.30to60s'), min: 30, max: 60 },
+    { label: t('durationPresets.over60s'), min: 60 },
+  ];
+
+  const updateFilter = <K extends keyof CreativeFiltersType>(
+    key: K,
+    value: CreativeFiltersType[K]
+  ) => {
+    onFiltersChange({
+      ...filters,
+      [key]: value || undefined,
+      page: 1,
+    });
+  };
+
+  const clearAllFilters = () => {
+    onFiltersChange({
+      page: 1,
+      limit: filters.limit || 20,
+    });
+  };
+
+  const activeFilterCount = Object.keys(filters).filter(
+    key => !['page', 'limit', 'company_id', 'folder_id'].includes(key) && 
+           filters[key as keyof CreativeFiltersType] !== undefined &&
+           filters[key as keyof CreativeFiltersType] !== ''
+  ).length;
+
+  const applyFileSizePreset = (preset: typeof FILE_SIZE_PRESETS[0]) => {
+    onFiltersChange({
+      ...filters,
+      min_size_bytes: preset.min,
+      max_size_bytes: preset.max,
+      page: 1,
+    });
+    setIsAdvancedOpen(false);
+  };
+
+  const applyDurationPreset = (preset: typeof DURATION_PRESETS[0]) => {
+    onFiltersChange({
+      ...filters,
+      min_duration: preset.min,
+      max_duration: preset.max,
+      page: 1,
+    });
+    setIsAdvancedOpen(false);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        {showSearch && (
+          <div className="relative flex-1 min-w-[200px]">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-mw-gray-600 dark:text-mw-gray-400" />
+            <Input
+              placeholder={t('filters.searchCreatives')}
+              value={filters.search || ''}
+              onChange={(e) => updateFilter('search', e.target.value)}
+              className="pl-9"
+              data-testid="input-search-creatives"
+            />
+          </div>
+        )}
+
+        <SelectRoot
+          value={filters.status || 'all'}
+          onValueChange={(value) => updateFilter('status', value === 'all' ? undefined : value as CreativeStatus)}
+        >
+          <SelectTrigger className="w-[150px]" data-testid="select-status">
+            <SelectValue placeholder={t('filters.status')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('filters.allStatus')}</SelectItem>
+            <SelectItem value={CreativeStatus.DRAFT}>{t('filters.draft')}</SelectItem>
+            <SelectItem value={CreativeStatus.APPROVED}>{t('filters.approved')}</SelectItem>
+            <SelectItem value={CreativeStatus.REJECTED}>{t('filters.rejected')}</SelectItem>
+          </SelectContent>
+        </SelectRoot>
+
+        <SelectRoot
+          value={filters.mime_type || 'all'}
+          onValueChange={(value) => updateFilter('mime_type', value === 'all' ? undefined : value)}
+        >
+          <SelectTrigger className="w-[150px]" data-testid="select-mime-type">
+            <SelectValue placeholder={t('filters.mediaType')} />
+          </SelectTrigger>
+          <SelectContent>
+            {MIME_TYPE_OPTIONS.map(option => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </SelectRoot>
+
+        <Popover open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" data-testid="button-advanced-filters">
+              <SlidersHorizontal className="w-4 h-4 mr-2" />
+              {t('filters.filters')}
+              {activeFilterCount > 0 && (
+                <Badge variant="secondary" className="ml-2">
+                  {activeFilterCount}
+                </Badge>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80" align="end">
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium text-sm">{t('filters.advancedFilters')}</h4>
+                {activeFilterCount > 0 && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={clearAllFilters}
+                    data-testid="button-clear-filters"
+                  >
+                    {t('filters.clearAll')}
+                  </Button>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <FormLabel>{t('filters.fileFormat')}</FormLabel>
+                <SelectRoot
+                  value={filters.format || 'all'}
+                  onValueChange={(value) => updateFilter('format', value === 'all' ? undefined : value)}
+                >
+                  <SelectTrigger data-testid="select-format">
+                    <SelectValue placeholder={t('filters.selectFormat')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">{t('filters.allFormats')}</SelectItem>
+                    {FORMAT_OPTIONS.map(format => (
+                      <SelectItem key={format} value={format}>
+                        {format.toUpperCase()}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </SelectRoot>
+              </div>
+
+              <div className="space-y-2">
+                <FormLabel>{t('table.resolution')}</FormLabel>
+                <SelectRoot
+                  value={filters.resolution || 'all'}
+                  onValueChange={(value) => updateFilter('resolution', value === 'all' ? undefined : value)}
+                >
+                  <SelectTrigger data-testid="select-resolution">
+                    <SelectValue placeholder={t('filters.selectResolution')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">{t('filters.allResolutions')}</SelectItem>
+                    {RESOLUTION_OPTIONS.map(res => (
+                      <SelectItem key={res} value={res}>
+                        {res}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </SelectRoot>
+              </div>
+
+              <div className="space-y-2">
+                <FormLabel>{t('filters.fileSize')}</FormLabel>
+                <div className="flex flex-wrap gap-2">
+                  {FILE_SIZE_PRESETS.map((preset, index) => (
+                    <Button
+                      key={index}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => applyFileSizePreset(preset)}
+                      data-testid={`button-filesize-${index}`}
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div className="space-y-2">
+                  <FormLabel className="text-xs">{t('filters.minSize')}</FormLabel>
+                  <Input
+                    type="number"
+                    placeholder="0"
+                    value={filters.min_size_bytes || ''}
+                    onChange={(e) => updateFilter('min_size_bytes', e.target.value ? parseInt(e.target.value) : undefined)}
+                    data-testid="input-min-size"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <FormLabel className="text-xs">{t('filters.maxSize')}</FormLabel>
+                  <Input
+                    type="number"
+                    placeholder="∞"
+                    value={filters.max_size_bytes || ''}
+                    onChange={(e) => updateFilter('max_size_bytes', e.target.value ? parseInt(e.target.value) : undefined)}
+                    data-testid="input-max-size"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <FormLabel>{t('filters.duration')}</FormLabel>
+                <div className="flex flex-wrap gap-2">
+                  {DURATION_PRESETS.map((preset, index) => (
+                    <Button
+                      key={index}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => applyDurationPreset(preset)}
+                      data-testid={`button-duration-${index}`}
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div className="space-y-2">
+                  <FormLabel className="text-xs">{t('filters.minDuration')}</FormLabel>
+                  <Input
+                    type="number"
+                    placeholder="0"
+                    value={filters.min_duration || ''}
+                    onChange={(e) => updateFilter('min_duration', e.target.value ? parseInt(e.target.value) : undefined)}
+                    data-testid="input-min-duration"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <FormLabel className="text-xs">{t('filters.maxDuration')}</FormLabel>
+                  <Input
+                    type="number"
+                    placeholder="∞"
+                    value={filters.max_duration || ''}
+                    onChange={(e) => updateFilter('max_duration', e.target.value ? parseInt(e.target.value) : undefined)}
+                    data-testid="input-max-duration"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <FormLabel>{t('filters.transcodeStatus')}</FormLabel>
+                <SelectRoot
+                  value={filters.transcode_status || 'all'}
+                  onValueChange={(value) => updateFilter('transcode_status', value === 'all' ? undefined : value as JobStatus)}
+                >
+                  <SelectTrigger data-testid="select-transcode-status">
+                    <SelectValue placeholder={t('filters.allStatus')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">{t('filters.allStatus')}</SelectItem>
+                    <SelectItem value={JobStatus.PENDING}>{t('filters.pending')}</SelectItem>
+                    <SelectItem value={JobStatus.PROCESSING}>{t('filters.processing')}</SelectItem>
+                    <SelectItem value={JobStatus.COMPLETED}>{t('filters.completed')}</SelectItem>
+                    <SelectItem value={JobStatus.FAILED}>{t('filters.failed')}</SelectItem>
+                  </SelectContent>
+                </SelectRoot>
+              </div>
+
+              <div className="space-y-2">
+                <FormLabel>{t('filters.tag')}</FormLabel>
+                <Input
+                  placeholder={t('filters.enterTagToFilter')}
+                  value={filters.tag || ''}
+                  onChange={(e) => updateFilter('tag', e.target.value)}
+                  data-testid="input-tag-filter"
+                />
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        {activeFilterCount > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearAllFilters}
+            data-testid="button-clear-all-filters"
+          >
+            <X className="w-4 h-4 mr-2" />
+            {t('filters.clear')} ({activeFilterCount})
+          </Button>
+        )}
+      </div>
+
+      {activeFilterCount > 0 && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-xs text-mw-gray-600 dark:text-mw-gray-400">{t('filters.activeFilters')}</span>
+          
+          {filters.search && (
+            <Badge variant="secondary" className="gap-1">
+              {t('filters.search')}: {filters.search}
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => updateFilter('search', '')}
+              />
+            </Badge>
+          )}
+          
+          {filters.status && (
+            <Badge variant="secondary" className="gap-1">
+              {t('filters.status')}: {filters.status}
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => updateFilter('status', undefined)}
+              />
+            </Badge>
+          )}
+          
+          {filters.mime_type && (
+            <Badge variant="secondary" className="gap-1">
+              {t('table.type')}: {filters.mime_type}
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => updateFilter('mime_type', '')}
+              />
+            </Badge>
+          )}
+          
+          {filters.format && (
+            <Badge variant="secondary" className="gap-1">
+              {t('table.format')}: {filters.format.toUpperCase()}
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => updateFilter('format', '')}
+              />
+            </Badge>
+          )}
+          
+          {filters.resolution && (
+            <Badge variant="secondary" className="gap-1">
+              {t('table.resolution')}: {filters.resolution}
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => updateFilter('resolution', '')}
+              />
+            </Badge>
+          )}
+          
+          {(filters.min_size_bytes || filters.max_size_bytes) && (
+            <Badge variant="secondary" className="gap-1">
+              {t('table.size')}: {filters.min_size_bytes || 0} - {filters.max_size_bytes || '∞'} bytes
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => {
+                  updateFilter('min_size_bytes', undefined);
+                  updateFilter('max_size_bytes', undefined);
+                }}
+              />
+            </Badge>
+          )}
+          
+          {(filters.min_duration || filters.max_duration) && (
+            <Badge variant="secondary" className="gap-1">
+              {t('filters.duration')}: {filters.min_duration || 0} - {filters.max_duration || '∞'}s
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => {
+                  updateFilter('min_duration', undefined);
+                  updateFilter('max_duration', undefined);
+                }}
+              />
+            </Badge>
+          )}
+          
+          {filters.tag && (
+            <Badge variant="secondary" className="gap-1">
+              {t('filters.tag')}: {filters.tag}
+              <X
+                className="w-3 h-3 cursor-pointer"
+                onClick={() => updateFilter('tag', '')}
+              />
+            </Badge>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}