adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/auto-optimize-button.tsx

@@ -0,0 +1,184 @@
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Sparkles, Loader2 } from "lucide-react";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { useToast } from "@/hooks/use-toast";
+import type { AutoOptimizeResult } from "@shared/schema";
+
+interface AutoOptimizeButtonProps {
+  lineItemId: string;
+  lineItemName: string;
+  disabled?: boolean;
+  variant?: "default" | "outline" | "ghost";
+  size?: "default" | "sm" | "lg" | "icon";
+}
+
+export function AutoOptimizeButton({
+  lineItemId,
+  lineItemName,
+  disabled = false,
+  variant = "outline",
+  size = "sm",
+}: AutoOptimizeButtonProps) {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [result, setResult] = useState<AutoOptimizeResult | null>(null);
+  const [resultOpen, setResultOpen] = useState(false);
+  const { toast } = useToast();
+
+  const autoOptimizeMutation = useMutation({
+    mutationFn: async (): Promise<AutoOptimizeResult> => {
+      const response = await apiRequest("POST", `/api/line-items/${lineItemId}/auto-optimize`, {
+        maxInventories: 5,
+      });
+      return response.json();
+    },
+    onSuccess: (data) => {
+      setConfirmOpen(false);
+      setResult(data);
+      setResultOpen(true);
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items", lineItemId] });
+      toast({
+        title: "Optimization Complete",
+        description: `Added ${data.summary.inventoriesAdded} recommended inventories`,
+      });
+    },
+    onError: (error: Error) => {
+      setConfirmOpen(false);
+      toast({
+        title: "Optimization Failed",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleOptimize = () => {
+    autoOptimizeMutation.mutate();
+  };
+
+  return (
+    <>
+      <Button
+        variant={variant}
+        size={size}
+        onClick={() => setConfirmOpen(true)}
+        disabled={disabled || autoOptimizeMutation.isPending}
+        data-testid={`button-auto-optimize-${lineItemId}`}
+      >
+        {autoOptimizeMutation.isPending ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <Sparkles className="h-4 w-4" />
+        )}
+        {size !== "icon" && <span className="ml-1">Auto-Optimize</span>}
+      </Button>
+
+      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <Sparkles className="h-5 w-5 text-primary" />
+              Auto-Optimize Line Item
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Use AI recommendations to automatically select the best-performing inventory for "{lineItemName}"?
+              <br /><br />
+              The system will analyze available inventory based on your campaign goals, budget, and targeting 
+              to recommend the optimal screens.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={autoOptimizeMutation.isPending} data-testid="button-cancel-optimize">
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(e) => {
+                e.preventDefault();
+                handleOptimize();
+              }}
+              disabled={autoOptimizeMutation.isPending}
+              data-testid="button-confirm-optimize"
+            >
+              {autoOptimizeMutation.isPending ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Optimizing...
+                </>
+              ) : (
+                <>
+                  <Sparkles className="h-4 w-4 mr-2" />
+                  Optimize Now
+                </>
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={resultOpen} onOpenChange={setResultOpen}>
+        <AlertDialogContent className="max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2 text-green-600">
+              <Sparkles className="h-5 w-5" />
+              Optimization Complete
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="space-y-4">
+                <p>AI recommendations have been applied to your line item.</p>
+                
+                {result && (
+                  <div className="bg-muted p-4 rounded-lg space-y-3">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm text-muted-foreground">Inventories Added</span>
+                      <Badge variant="secondary">{result.summary.inventoriesAdded}</Badge>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm text-muted-foreground">Est. Impressions</span>
+                      <span className="font-medium">{(result.summary.estimatedImpressions / 1000).toFixed(0)}K</span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm text-muted-foreground">Est. Cost</span>
+                      <span className="font-medium">${result.summary.estimatedCost.toFixed(2)}</span>
+                    </div>
+                    {result.summary.budgetRemaining > 0 && (
+                      <div className="flex justify-between items-center border-t pt-2">
+                        <span className="text-sm text-muted-foreground">Budget Remaining</span>
+                        <span className="font-medium text-green-600">${result.summary.budgetRemaining.toFixed(2)}</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {result?.warnings && result.warnings.length > 0 && (
+                  <div className="text-sm text-amber-600">
+                    {result.warnings.map((w, i) => (
+                      <p key={i}>{w}</p>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction data-testid="button-close-result">
+              Done
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/availability-drawer.tsx

@@ -0,0 +1,385 @@
+import { useState, useMemo, useRef } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Input } from "@/components/ui/input";
+import { 
+  Search, 
+  Monitor, 
+  ZoomIn, 
+  ZoomOut, 
+  ChevronLeft, 
+  ChevronRight,
+  Calendar,
+  Inbox
+} from "lucide-react";
+import { format, addMonths, startOfMonth, endOfMonth, eachMonthOfInterval, differenceInDays, addDays, parseISO } from "date-fns";
+import type { Screen } from "@shared/schema";
+
+type AvailabilityStatus = "available" | "booked" | "hold" | "maintenance" | "pending" | "unavailable";
+
+interface Booking {
+  id: string;
+  screenId: string;
+  advertiser: string;
+  startDate: string;
+  endDate: string;
+  status: AvailabilityStatus;
+}
+
+interface AvailabilityDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  screens: Screen[];
+  selectedScreenIds: string[];
+  lineItemStartDate?: string;
+  lineItemEndDate?: string;
+}
+
+const STATUS_COLORS: Record<AvailabilityStatus, string> = {
+  available: "bg-green-500",
+  booked: "bg-red-500",
+  hold: "bg-amber-500",
+  maintenance: "bg-gray-500",
+  pending: "bg-blue-500",
+  unavailable: "bg-gray-400",
+};
+
+const ADVERTISERS = ["BMW", "Apple", "Nike", "Samsung", "Coca-Cola", "Netflix", "Microsoft", "Tudor", "Ray-Ban", "Americana"];
+
+function seededRandom(seed: string, index: number): number {
+  let hash = 0;
+  const fullSeed = seed + index.toString();
+  for (let i = 0; i < fullSeed.length; i++) {
+    const char = fullSeed.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash % 100) / 100;
+}
+
+function generateMockBookings(screenIds: string[]): Booking[] {
+  const bookings: Booking[] = [];
+  const today = new Date();
+  
+  screenIds.forEach((screenId, screenIndex) => {
+    const numBookings = Math.floor(seededRandom(screenId, 0) * 6) + 2;
+    let currentDate = addMonths(today, -1);
+    
+    for (let i = 0; i < numBookings; i++) {
+      const gapDays = Math.floor(seededRandom(screenId, i * 3 + 1) * 20) + 5;
+      const durationDays = Math.floor(seededRandom(screenId, i * 3 + 2) * 45) + 7;
+      const startDate = addDays(currentDate, gapDays);
+      const endDate = addDays(startDate, durationDays);
+      
+      const statusRand = seededRandom(screenId, i * 3 + 3);
+      let status: AvailabilityStatus;
+      if (statusRand < 0.7) status = "booked";
+      else if (statusRand < 0.85) status = "hold";
+      else if (statusRand < 0.95) status = "pending";
+      else status = "maintenance";
+      
+      bookings.push({
+        id: `booking-${screenId}-${i}`,
+        screenId,
+        advertiser: ADVERTISERS[(screenIndex + i) % ADVERTISERS.length],
+        startDate: format(startDate, "yyyy-MM-dd"),
+        endDate: format(endDate, "yyyy-MM-dd"),
+        status,
+      });
+      
+      currentDate = endDate;
+    }
+  });
+  
+  return bookings;
+}
+
+export function AvailabilityDrawer({
+  open,
+  onOpenChange,
+  screens,
+  selectedScreenIds,
+  lineItemStartDate,
+  lineItemEndDate,
+}: AvailabilityDrawerProps) {
+  const [search, setSearch] = useState("");
+  const [viewMode, setViewMode] = useState<"month" | "week">("month");
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [startMonth, setStartMonth] = useState(() => startOfMonth(new Date()));
+  const timelineRef = useRef<HTMLDivElement>(null);
+  
+  const selectedScreens = useMemo(() => {
+    return screens.filter(s => selectedScreenIds.includes(s.id));
+  }, [screens, selectedScreenIds]);
+  
+  const filteredScreens = useMemo(() => {
+    if (!search) return selectedScreens;
+    const lowerSearch = search.toLowerCase();
+    return selectedScreens.filter(s => 
+      s.name.toLowerCase().includes(lowerSearch) ||
+      s.city?.toLowerCase().includes(lowerSearch)
+    );
+  }, [selectedScreens, search]);
+  
+  const bookings = useMemo(() => {
+    return generateMockBookings(selectedScreenIds);
+  }, [selectedScreenIds]);
+  
+  const months = useMemo(() => {
+    const monthCount = viewMode === "month" ? 12 : 3;
+    return eachMonthOfInterval({
+      start: startMonth,
+      end: addMonths(startMonth, monthCount - 1),
+    });
+  }, [startMonth, viewMode]);
+  
+  const totalDays = useMemo(() => {
+    return differenceInDays(endOfMonth(months[months.length - 1]), startMonth) + 1;
+  }, [months, startMonth]);
+  
+  const dayWidth = viewMode === "month" ? 3 * zoomLevel : 12 * zoomLevel;
+  const timelineWidth = totalDays * dayWidth;
+  
+  const getBookingPosition = (booking: Booking) => {
+    const bookingStart = parseISO(booking.startDate);
+    const bookingEnd = parseISO(booking.endDate);
+    const timelineStart = startMonth;
+    const timelineEnd = endOfMonth(months[months.length - 1]);
+    
+    if (bookingEnd < timelineStart || bookingStart > timelineEnd) {
+      return null;
+    }
+    
+    const effectiveStart = bookingStart < timelineStart ? timelineStart : bookingStart;
+    const effectiveEnd = bookingEnd > timelineEnd ? timelineEnd : bookingEnd;
+    
+    const startOffset = differenceInDays(effectiveStart, timelineStart);
+    const duration = differenceInDays(effectiveEnd, effectiveStart) + 1;
+    
+    return {
+      left: startOffset * dayWidth,
+      width: Math.max(duration * dayWidth - 2, dayWidth),
+    };
+  };
+  
+  const navigatePrev = () => {
+    setStartMonth(prev => addMonths(prev, viewMode === "month" ? -6 : -1));
+  };
+  
+  const navigateNext = () => {
+    setStartMonth(prev => addMonths(prev, viewMode === "month" ? 6 : 1));
+  };
+  
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-[90vw] p-0 flex flex-col">
+        <SheetHeader className="p-4 border-b shrink-0">
+          <div className="flex items-center justify-between">
+            <SheetTitle className="flex items-center gap-2">
+              <Calendar className="h-5 w-5" />
+              Inventory Availability
+            </SheetTitle>
+            <div className="flex items-center gap-2">
+              <Button
+                variant={viewMode === "month" ? "default" : "outline"}
+                size="sm"
+                onClick={() => setViewMode("month")}
+                data-testid="button-view-month"
+              >
+                Month
+              </Button>
+              <Button
+                variant={viewMode === "week" ? "default" : "outline"}
+                size="sm"
+                onClick={() => setViewMode("week")}
+                data-testid="button-view-week"
+              >
+                Week
+              </Button>
+              <div className="h-4 w-px bg-border mx-1" />
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setZoomLevel(z => Math.max(0.5, z - 0.25))}
+                data-testid="button-zoom-out"
+              >
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setZoomLevel(z => Math.min(2, z + 0.25))}
+                data-testid="button-zoom-in"
+              >
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </SheetHeader>
+        
+        <div className="p-4 border-b shrink-0">
+          <div className="flex items-center gap-4">
+            <div className="relative flex-1 max-w-xs">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search screens..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-9"
+                data-testid="input-search-screens"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="ghost" size="icon" onClick={navigatePrev}>
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="text-sm font-medium min-w-[120px] text-center">
+                {format(startMonth, "MMM yyyy")}
+              </span>
+              <Button variant="ghost" size="icon" onClick={navigateNext}>
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="text-sm text-muted-foreground">
+              {filteredScreens.length} screen{filteredScreens.length !== 1 ? 's' : ''}
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex-1 flex overflow-hidden">
+          <div className="w-64 border-r shrink-0 flex flex-col">
+            <div className="h-10 border-b bg-muted/30 px-3 flex items-center">
+              <span className="text-xs font-medium text-muted-foreground">Inventory</span>
+            </div>
+            <ScrollArea className="flex-1">
+              {filteredScreens.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+                  <Inbox className="h-8 w-8 text-muted-foreground mb-2" />
+                  <p className="text-sm text-muted-foreground">
+                    {search ? "No screens match your search" : "No screens selected"}
+                  </p>
+                </div>
+              ) : (
+                <div className="divide-y">
+                  {filteredScreens.map((screen) => (
+                    <div
+                      key={screen.id}
+                      className="px-3 py-2 hover-elevate cursor-pointer"
+                      data-testid={`row-screen-${screen.id}`}
+                    >
+                      <div className="flex items-center gap-2">
+                        <Monitor className="h-4 w-4 text-muted-foreground shrink-0" />
+                        <div className="min-w-0">
+                          <div className="text-sm font-medium truncate">{screen.name}</div>
+                          <div className="text-xs text-muted-foreground truncate">
+                            {screen.city}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </div>
+          
+          <div className="flex-1 overflow-auto" ref={timelineRef}>
+            <div style={{ minWidth: timelineWidth + 20 }}>
+              <div className="h-10 border-b bg-muted/30 flex sticky top-0 z-10">
+                {months.map((month) => {
+                  const daysInMonth = differenceInDays(endOfMonth(month), month) + 1;
+                  const monthWidth = daysInMonth * dayWidth;
+                  return (
+                    <div
+                      key={month.toISOString()}
+                      className="border-r text-xs font-medium text-muted-foreground flex items-center justify-center"
+                      style={{ width: monthWidth }}
+                    >
+                      {format(month, "MMM yy")}
+                    </div>
+                  );
+                })}
+              </div>
+              
+              <div className="divide-y">
+                {filteredScreens.map((screen) => {
+                  const screenBookings = bookings.filter(b => b.screenId === screen.id);
+                  return (
+                    <div
+                      key={screen.id}
+                      className="h-10 relative bg-muted/10"
+                      style={{ width: timelineWidth }}
+                    >
+                      {lineItemStartDate && lineItemEndDate && (
+                        <div
+                          className="absolute top-0 bottom-0 bg-primary/10 border-l border-r border-primary/30"
+                          style={{
+                            left: Math.max(0, differenceInDays(parseISO(lineItemStartDate), startMonth)) * dayWidth,
+                            width: (differenceInDays(parseISO(lineItemEndDate), parseISO(lineItemStartDate)) + 1) * dayWidth,
+                          }}
+                        />
+                      )}
+                      
+                      {screenBookings.map((booking) => {
+                        const pos = getBookingPosition(booking);
+                        if (!pos) return null;
+                        return (
+                          <div
+                            key={booking.id}
+                            className={`absolute top-1 bottom-1 rounded text-[10px] text-white font-medium flex items-center justify-center overflow-hidden px-1 ${STATUS_COLORS[booking.status]}`}
+                            style={{ left: pos.left, width: pos.width }}
+                            title={`${booking.advertiser} - ${booking.status}`}
+                          >
+                            {pos.width > 40 && <span className="truncate">{booking.advertiser}</span>}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div className="p-4 border-t shrink-0 bg-muted/30">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <span className="text-xs text-muted-foreground">Availability Status:</span>
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-1">
+                  <span className="w-3 h-3 rounded bg-green-500" />
+                  <span className="text-xs">Available</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="w-3 h-3 rounded bg-red-500" />
+                  <span className="text-xs">Booked</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="w-3 h-3 rounded bg-amber-500" />
+                  <span className="text-xs">Hold</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="w-3 h-3 rounded bg-gray-500" />
+                  <span className="text-xs">Maintenance</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="w-3 h-3 rounded bg-blue-500" />
+                  <span className="text-xs">Pending</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="w-3 h-3 rounded bg-gray-400" />
+                  <span className="text-xs">Unavailable</span>
+                </div>
+              </div>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              Ctrl + Scroll to zoom
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/brand-insights-panel.tsx

@@ -0,0 +1,87 @@
+import { Tag } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import type { Brand } from "@shared/schema";
+
+const IAB_CATEGORY_CODES: Record<string, string> = {
+  "Automotive": "IAB2",
+  "Business": "IAB3",
+  "Careers": "IAB4",
+  "Education": "IAB5",
+  "Family & Parenting": "IAB6",
+  "Health & Fitness": "IAB7",
+  "Food & Drink": "IAB8",
+  "Hobbies & Interests": "IAB9",
+  "Home & Garden": "IAB10",
+  "Law, Gov't & Politics": "IAB11",
+  "News": "IAB12",
+  "Personal Finance": "IAB13",
+  "Society": "IAB14",
+  "Science": "IAB15",
+  "Pets": "IAB16",
+  "Sports": "IAB17",
+  "Style & Fashion": "IAB18",
+  "Technology & Computing": "IAB19",
+  "Travel": "IAB20",
+  "Real Estate": "IAB21",
+  "Shopping": "IAB22",
+  "Religion & Spirituality": "IAB23",
+  "Uncategorized": "IAB24",
+  "Non-Standard Content": "IAB25",
+  "Illegal Content": "IAB26",
+  "Television": "IAB1",
+};
+
+interface BrandInsightsPanelProps {
+  brand: Brand | null | undefined;
+}
+
+export function BrandInsightsPanel({ brand }: BrandInsightsPanelProps) {
+  if (!brand) {
+    return null;
+  }
+
+  const iabCode = brand.iabCategory ? IAB_CATEGORY_CODES[brand.iabCategory] || "IAB24" : "IAB24";
+  const category = brand.iabCategory || "Uncategorized";
+
+  return (
+    <Card data-testid="panel-brand-insights">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-medium flex items-center gap-2" data-testid="title-brand-insights">
+          <Tag className="h-4 w-4 text-blue-500" />
+          Brand Selected
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="space-y-4">
+          <div className="flex items-center gap-4 p-3 rounded-lg bg-muted/50">
+            <Avatar className="h-14 w-14 rounded-lg">
+              {brand.logoUrl ? (
+                <AvatarImage src={brand.logoUrl} alt={brand.name} />
+              ) : null}
+              <AvatarFallback className="rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 text-white text-xl font-bold">
+                {brand.name.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1 min-w-0">
+              <div className="font-semibold text-base truncate" data-testid="text-brand-name">{brand.name}</div>
+              <div className="flex items-center gap-2 mt-1">
+                <Badge variant="secondary" className="text-xs" data-testid="text-brand-category">
+                  {category}
+                </Badge>
+                <Badge variant="outline" className="text-xs font-mono" data-testid="text-brand-iab-code">
+                  {iabCode}
+                </Badge>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-sm text-muted-foreground p-2 rounded bg-blue-50 dark:bg-blue-950/30 border border-blue-100 dark:border-blue-900" data-testid="text-brand-insight-recommendation">
+            Brand selection helps with better targeting and inventory recommendations
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}