adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/creative-assignment.tsx

@@ -0,0 +1,526 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Plus,
+  Trash2,
+  Check,
+  X,
+  Image,
+  Video,
+  Code,
+  FileText,
+  AlertTriangle,
+  Search,
+  Loader2,
+} from "lucide-react";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { useToast } from "@/hooks/use-toast";
+import type { Creative, LineItemCreative } from "@shared/schema";
+
+interface AssignedCreativeWithDetails extends LineItemCreative {
+  creative: Creative;
+}
+
+interface CreativeAssignmentProps {
+  lineItemId: string;
+  lineItemCreativeType?: string;
+}
+
+const TYPE_ICONS: Record<string, typeof Image> = {
+  display: Image,
+  video: Video,
+  html: Code,
+  native: FileText,
+};
+
+const TIER2_STATUS_STYLES: Record<string, { variant: "default" | "secondary" | "destructive" | "outline"; className: string; label: string }> = {
+  pending: { variant: "outline", className: "border-yellow-500 text-yellow-600 dark:text-yellow-400", label: "Pending Review" },
+  approved: { variant: "default", className: "bg-green-500 hover:bg-green-500", label: "Approved" },
+  rejected: { variant: "destructive", className: "", label: "Rejected" },
+  changes_requested: { variant: "outline", className: "border-orange-500 text-orange-600 dark:text-orange-400", label: "Changes Requested" },
+};
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+export function CreativeAssignment({ lineItemId, lineItemCreativeType }: CreativeAssignmentProps) {
+  const { toast } = useToast();
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const [typeFilter, setTypeFilter] = useState<string>("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
+  const [creativeToRemove, setCreativeToRemove] = useState<AssignedCreativeWithDetails | null>(null);
+  const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
+  const [assignmentToReject, setAssignmentToReject] = useState<AssignedCreativeWithDetails | null>(null);
+  const [rejectionReason, setRejectionReason] = useState("");
+
+  const { data: assignedCreatives = [], isLoading: assignedLoading } = useQuery<AssignedCreativeWithDetails[]>({
+    queryKey: ["/api/line-items", lineItemId, "creatives"],
+    enabled: !!lineItemId,
+  });
+
+  const { data: assignableCreatives = [], isLoading: assignableLoading } = useQuery<Creative[]>({
+    queryKey: ["/api/creatives/assignable"],
+  });
+
+  const assignMutation = useMutation({
+    mutationFn: async (creativeId: string) => {
+      return apiRequest("POST", `/api/line-items/${lineItemId}/creatives`, { creativeId });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId, "creatives"] });
+      toast({ title: "Creative assigned successfully" });
+    },
+    onError: (error: Error) => {
+      toast({ title: "Failed to assign creative", description: error.message, variant: "destructive" });
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: async ({ creativeId }: { creativeId: string }) => {
+      return apiRequest("DELETE", `/api/line-items/${lineItemId}/creatives/${creativeId}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId, "creatives"] });
+      toast({ title: "Creative removed from line item" });
+      setRemoveDialogOpen(false);
+      setCreativeToRemove(null);
+    },
+    onError: (error: Error) => {
+      toast({ title: "Failed to remove creative", description: error.message, variant: "destructive" });
+    },
+  });
+
+  const approveMutation = useMutation({
+    mutationFn: async (assignmentId: string) => {
+      return apiRequest("POST", `/api/line-item-creatives/${assignmentId}/approve`, {});
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId, "creatives"] });
+      toast({ title: "Creative approved (Tier 2)" });
+    },
+    onError: (error: Error) => {
+      toast({ title: "Failed to approve creative", description: error.message, variant: "destructive" });
+    },
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: async ({ assignmentId, reason }: { assignmentId: string; reason: string }) => {
+      return apiRequest("POST", `/api/line-item-creatives/${assignmentId}/reject`, { reason });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId, "creatives"] });
+      toast({ title: "Creative rejected (Tier 2)" });
+      setRejectDialogOpen(false);
+      setAssignmentToReject(null);
+      setRejectionReason("");
+    },
+    onError: (error: Error) => {
+      toast({ title: "Failed to reject creative", description: error.message, variant: "destructive" });
+    },
+  });
+
+  const handleAssign = (creativeId: string) => {
+    assignMutation.mutate(creativeId);
+  };
+
+  const handleRemoveClick = (assignment: AssignedCreativeWithDetails) => {
+    setCreativeToRemove(assignment);
+    setRemoveDialogOpen(true);
+  };
+
+  const handleConfirmRemove = () => {
+    if (creativeToRemove) {
+      removeMutation.mutate({ creativeId: creativeToRemove.creativeId });
+    }
+  };
+
+  const handleApprove = (assignmentId: string) => {
+    approveMutation.mutate(assignmentId);
+  };
+
+  const handleRejectClick = (assignment: AssignedCreativeWithDetails) => {
+    setAssignmentToReject(assignment);
+    setRejectDialogOpen(true);
+  };
+
+  const handleConfirmReject = () => {
+    if (assignmentToReject && rejectionReason.trim()) {
+      rejectMutation.mutate({ assignmentId: assignmentToReject.id, reason: rejectionReason });
+    }
+  };
+
+  const filteredAssignableCreatives = assignableCreatives.filter((creative) => {
+    const matchesType = typeFilter === "all" || creative.type === typeFilter;
+    const matchesSearch = !searchQuery || 
+      creative.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (creative.tags && creative.tags.some(t => t.toLowerCase().includes(searchQuery.toLowerCase())));
+    const notAlreadyAssigned = !assignedCreatives.some(a => a.creativeId === creative.id);
+    return matchesType && matchesSearch && notAlreadyAssigned;
+  });
+
+  const checkFormatCompatibility = (creativeType: string) => {
+    if (!lineItemCreativeType) return true;
+    if (lineItemCreativeType === "display" && (creativeType === "display" || creativeType === "html" || creativeType === "native")) {
+      return true;
+    }
+    if (lineItemCreativeType === "video" && creativeType === "video") {
+      return true;
+    }
+    if (lineItemCreativeType === "audio") {
+      return false;
+    }
+    return lineItemCreativeType === creativeType;
+  };
+
+  return (
+    <>
+      <Card data-testid="card-assigned-creatives">
+        <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-4">
+          <div>
+            <CardTitle className="text-base font-medium">Assigned Creatives</CardTitle>
+            <CardDescription>
+              Manage creatives for this line item. Assigned creatives require Tier 2 approval from Media Owners.
+            </CardDescription>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setIsPickerOpen(true)}
+            data-testid="button-assign-creative"
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            Assign Creative
+          </Button>
+        </CardHeader>
+        <CardContent>
+          {assignedLoading ? (
+            <div className="space-y-3">
+              {[1, 2].map((i) => (
+                <div key={i} className="flex items-center gap-4 p-3 border rounded-md">
+                  <Skeleton className="h-16 w-24 rounded" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-48" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : assignedCreatives.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground" data-testid="text-no-creatives">
+              <Image className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <p className="text-sm">No creatives assigned to this line item</p>
+              <p className="text-xs mt-1">Click "Assign Creative" to add Tier 1 approved creatives</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {assignedCreatives.map((assignment) => {
+                const { creative } = assignment;
+                const TypeIcon = TYPE_ICONS[creative.type] || Image;
+                const statusStyle = TIER2_STATUS_STYLES[assignment.tier2Status] || TIER2_STATUS_STYLES.pending;
+                const isCompatible = checkFormatCompatibility(creative.type);
+
+                return (
+                  <div
+                    key={assignment.id}
+                    className="flex items-start gap-4 p-3 border rounded-md"
+                    data-testid={`card-assigned-creative-${creative.id}`}
+                  >
+                    <div className="relative h-16 w-24 rounded bg-muted flex items-center justify-center overflow-hidden flex-shrink-0">
+                      {creative.thumbnailUrl ? (
+                        <img
+                          src={creative.thumbnailUrl}
+                          alt={creative.name}
+                          className="h-full w-full object-cover"
+                        />
+                      ) : (
+                        <TypeIcon className="h-6 w-6 text-muted-foreground" />
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="font-medium text-sm truncate" data-testid={`text-creative-name-${creative.id}`}>
+                          {creative.name}
+                        </span>
+                        <Badge variant={statusStyle.variant} className={statusStyle.className} data-testid={`badge-tier2-status-${creative.id}`}>
+                          {statusStyle.label}
+                        </Badge>
+                      </div>
+                      
+                      <div className="flex items-center gap-2 mt-1 flex-wrap text-xs text-muted-foreground">
+                        <Badge variant="secondary" className="text-xs capitalize">
+                          {creative.type}
+                        </Badge>
+                        <span>{creative.format}</span>
+                        <span>{creative.width} x {creative.height}</span>
+                        <span>{formatFileSize(creative.fileSize)}</span>
+                        {creative.duration && <span>{creative.duration}s</span>}
+                      </div>
+
+                      {!isCompatible && (
+                        <div className="flex items-center gap-1 mt-2 text-xs text-amber-600 dark:text-amber-400" data-testid={`warning-format-mismatch-${creative.id}`}>
+                          <AlertTriangle className="h-3 w-3" />
+                          Creative type may not match line item format ({lineItemCreativeType})
+                        </div>
+                      )}
+
+                      {assignment.tier2RejectionReason && (
+                        <div className="mt-2 text-xs text-destructive" data-testid={`text-rejection-reason-${creative.id}`}>
+                          Rejection reason: {assignment.tier2RejectionReason}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex flex-col gap-1 flex-shrink-0">
+                      {assignment.tier2Status === "pending" && (
+                        <>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleApprove(assignment.id)}
+                            disabled={approveMutation.isPending}
+                            className="text-green-600 hover:text-green-700 hover:border-green-500"
+                            data-testid={`button-approve-${creative.id}`}
+                          >
+                            {approveMutation.isPending ? (
+                              <Loader2 className="h-3 w-3 animate-spin" />
+                            ) : (
+                              <Check className="h-3 w-3 mr-1" />
+                            )}
+                            Approve
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleRejectClick(assignment)}
+                            className="text-destructive hover:text-destructive hover:border-destructive"
+                            data-testid={`button-reject-${creative.id}`}
+                          >
+                            <X className="h-3 w-3 mr-1" />
+                            Reject
+                          </Button>
+                        </>
+                      )}
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleRemoveClick(assignment)}
+                        className="text-muted-foreground hover:text-destructive"
+                        data-testid={`button-remove-creative-${creative.id}`}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Sheet open={isPickerOpen} onOpenChange={setIsPickerOpen}>
+        <SheetContent className="w-full sm:max-w-lg overflow-y-auto" data-testid="sheet-creative-picker">
+          <SheetHeader className="mb-4">
+            <SheetTitle>Assign Creative</SheetTitle>
+            <SheetDescription>
+              Select from Tier 1 approved creatives to assign to this line item
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-4">
+            <div className="flex gap-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search creatives..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-8"
+                  data-testid="input-search-creatives"
+                />
+              </div>
+              <Select value={typeFilter} onValueChange={setTypeFilter}>
+                <SelectTrigger className="w-32" data-testid="select-type-filter">
+                  <SelectValue placeholder="Type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Types</SelectItem>
+                  <SelectItem value="display">Display</SelectItem>
+                  <SelectItem value="video">Video</SelectItem>
+                  <SelectItem value="html">HTML</SelectItem>
+                  <SelectItem value="native">Native</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {assignableLoading ? (
+              <div className="space-y-3">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="flex items-center gap-3 p-3 border rounded-md">
+                    <Skeleton className="h-14 w-20 rounded" />
+                    <div className="flex-1 space-y-2">
+                      <Skeleton className="h-4 w-28" />
+                      <Skeleton className="h-3 w-40" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : filteredAssignableCreatives.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <p className="text-sm">No assignable creatives found</p>
+                <p className="text-xs mt-1">Only Tier 1 approved creatives can be assigned</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filteredAssignableCreatives.map((creative) => {
+                  const TypeIcon = TYPE_ICONS[creative.type] || Image;
+                  const isCompatible = checkFormatCompatibility(creative.type);
+
+                  return (
+                    <button
+                      key={creative.id}
+                      type="button"
+                      onClick={() => handleAssign(creative.id)}
+                      disabled={assignMutation.isPending}
+                      className="w-full flex items-start gap-3 p-3 border rounded-md text-left hover-elevate active-elevate-2 disabled:opacity-50"
+                      data-testid={`button-select-creative-${creative.id}`}
+                    >
+                      <div className="relative h-14 w-20 rounded bg-muted flex items-center justify-center overflow-hidden flex-shrink-0">
+                        {creative.thumbnailUrl ? (
+                          <img
+                            src={creative.thumbnailUrl}
+                            alt={creative.name}
+                            className="h-full w-full object-cover"
+                          />
+                        ) : (
+                          <TypeIcon className="h-5 w-5 text-muted-foreground" />
+                        )}
+                      </div>
+
+                      <div className="flex-1 min-w-0">
+                        <div className="font-medium text-sm truncate">{creative.name}</div>
+                        <div className="flex items-center gap-2 mt-1 flex-wrap text-xs text-muted-foreground">
+                          <Badge variant="secondary" className="text-xs capitalize">
+                            {creative.type}
+                          </Badge>
+                          <span>{creative.format}</span>
+                          <span>{creative.width} x {creative.height}</span>
+                        </div>
+                        {!isCompatible && (
+                          <div className="flex items-center gap-1 mt-1 text-xs text-amber-600 dark:text-amber-400">
+                            <AlertTriangle className="h-3 w-3" />
+                            Format may not match
+                          </div>
+                        )}
+                      </div>
+
+                      {assignMutation.isPending && (
+                        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog open={removeDialogOpen} onOpenChange={setRemoveDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove Creative</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to remove "{creativeToRemove?.creative.name}" from this line item? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel data-testid="button-cancel-remove">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmRemove}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              data-testid="button-confirm-remove"
+            >
+              {removeMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Remove
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={rejectDialogOpen} onOpenChange={setRejectDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Reject Creative</AlertDialogTitle>
+            <AlertDialogDescription>
+              Please provide a reason for rejecting "{assignmentToReject?.creative.name}".
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="py-4">
+            <Label htmlFor="rejection-reason">Rejection Reason</Label>
+            <Textarea
+              id="rejection-reason"
+              value={rejectionReason}
+              onChange={(e) => setRejectionReason(e.target.value)}
+              placeholder="Enter the reason for rejection..."
+              className="mt-2"
+              data-testid="textarea-rejection-reason"
+            />
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel data-testid="button-cancel-reject">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmReject}
+              disabled={!rejectionReason.trim()}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              data-testid="button-confirm-reject"
+            >
+              {rejectMutation.isPending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Reject
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/data-table-toolbar.tsx

@@ -0,0 +1,148 @@
+import { Search, ArrowUpDown, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+export interface FilterConfig {
+  key: string;
+  label: string;
+  options: FilterOption[];
+  value: string;
+  onChange: (value: string) => void;
+  testId?: string;
+}
+
+export interface SortOption {
+  value: string;
+  label: string;
+}
+
+export interface DataTableToolbarProps {
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  searchPlaceholder?: string;
+  searchTestId?: string;
+  filters?: FilterConfig[];
+  sortOptions?: SortOption[];
+  sortValue?: string;
+  onSortChange?: (value: string) => void;
+  sortTestId?: string;
+  onClearFilters?: () => void;
+  showClearButton?: boolean;
+  clearButtonTestId?: string;
+}
+
+export function DataTableToolbar({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  searchTestId = "input-search",
+  filters = [],
+  sortOptions = [],
+  sortValue,
+  onSortChange,
+  sortTestId = "select-sort",
+  onClearFilters,
+  showClearButton = false,
+  clearButtonTestId = "button-clear-filters",
+}: DataTableToolbarProps) {
+  return (
+    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4">
+      <div className="flex flex-wrap items-center gap-2 flex-1">
+        <div className="relative flex-1 min-w-[200px] max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9"
+            data-testid={searchTestId}
+          />
+        </div>
+        {filters.map((filter) => (
+          <Select
+            key={filter.key}
+            value={filter.value}
+            onValueChange={filter.onChange}
+          >
+            <SelectTrigger
+              className="w-[140px]"
+              data-testid={filter.testId || `select-filter-${filter.key}`}
+            >
+              <SelectValue placeholder={filter.label} />
+            </SelectTrigger>
+            <SelectContent>
+              {filter.options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ))}
+        {showClearButton && onClearFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClearFilters}
+            data-testid={clearButtonTestId}
+          >
+            <X className="h-4 w-4 mr-1" />
+            Clear
+          </Button>
+        )}
+      </div>
+      {sortOptions.length > 0 && onSortChange && (
+        <div className="flex items-center gap-2">
+          <Select value={sortValue} onValueChange={onSortChange}>
+            <SelectTrigger className="w-[180px]" data-testid={sortTestId}>
+              <ArrowUpDown className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              {sortOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface EmptyFilterStateProps {
+  message?: string;
+  onClear?: () => void;
+  clearButtonText?: string;
+}
+
+export function EmptyFilterState({
+  message = "No results match your filters",
+  onClear,
+  clearButtonText = "Clear all filters",
+}: EmptyFilterStateProps) {
+  return (
+    <div className="text-center py-12">
+      <p className="text-muted-foreground">{message}</p>
+      {onClear && (
+        <Button variant="ghost" className="text-primary" onClick={onClear} data-testid="button-clear-all-filters">
+          {clearButtonText}
+        </Button>
+      )}
+    </div>
+  );
+}