adserver-dashboard 1.0.0

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

@@ -0,0 +1,298 @@
+import { useState, useMemo, useRef, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Search, MapPin, Filter, X, Check, Plus } from "lucide-react";
+import mapboxgl from "mapbox-gl";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { POI_CATEGORIES } from "@shared/schema";
+import "mapbox-gl/dist/mapbox-gl.css";
+
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_PUBLIC_KEY || "";
+
+interface POI {
+  id: string;
+  name: string;
+  category: string;
+  latitude: number;
+  longitude: number;
+  address?: string;
+  source: "google_places" | "custom";
+}
+
+interface POITargetingDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedPOIs: string[];
+  selectedCategories: string[];
+  onPOISelectionChange: (ids: string[]) => void;
+  onCategorySelectionChange: (categories: string[]) => void;
+  mapCenter: { lng: number; lat: number; zoom: number };
+}
+
+const MOCK_POIS: POI[] = [
+  { id: "poi-1", name: "Suria KLCC", category: "Shopping", latitude: 3.1588, longitude: 101.7117, address: "Kuala Lumpur City Centre", source: "google_places" },
+  { id: "poi-2", name: "Pavilion KL", category: "Shopping", latitude: 3.1489, longitude: 101.7132, address: "Bukit Bintang", source: "google_places" },
+  { id: "poi-3", name: "Mid Valley Megamall", category: "Shopping", latitude: 3.1180, longitude: 101.6779, address: "Mid Valley City", source: "google_places" },
+  { id: "poi-4", name: "KLCC Twin Towers", category: "Office", latitude: 3.1579, longitude: 101.7116, address: "KLCC", source: "custom" },
+  { id: "poi-5", name: "KL Sentral", category: "Transit", latitude: 3.1343, longitude: 101.6864, address: "Brickfields", source: "google_places" },
+  { id: "poi-6", name: "Sunway Pyramid", category: "Entertainment", latitude: 3.0735, longitude: 101.6078, address: "Sunway City", source: "google_places" },
+  { id: "poi-7", name: "IOI City Mall", category: "Shopping", latitude: 2.9708, longitude: 101.7164, address: "Putrajaya", source: "custom" },
+  { id: "poi-8", name: "Bangsar Shopping Centre", category: "Retail", latitude: 3.1298, longitude: 101.6710, address: "Bangsar", source: "google_places" },
+];
+
+export function POITargetingDrawer({
+  open,
+  onOpenChange,
+  selectedPOIs,
+  selectedCategories,
+  onPOISelectionChange,
+  onCategorySelectionChange,
+  mapCenter,
+}: POITargetingDrawerProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeTab, setActiveTab] = useState<"pois" | "categories">("pois");
+  const [localPOISelection, setLocalPOISelection] = useState<string[]>(selectedPOIs);
+  const [localCategorySelection, setLocalCategorySelection] = useState<string[]>(selectedCategories);
+
+  useEffect(() => {
+    if (open) {
+      setLocalPOISelection(selectedPOIs);
+      setLocalCategorySelection(selectedCategories);
+    }
+  }, [open, selectedPOIs, selectedCategories]);
+  
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+  const markersRef = useRef<mapboxgl.Marker[]>([]);
+
+  const { data: customPOIs = [] } = useQuery<POI[]>({
+    queryKey: ["/api/custom-pois"],
+    enabled: open,
+  });
+
+  const allPOIs = useMemo(() => {
+    return [...MOCK_POIS, ...customPOIs];
+  }, [customPOIs]);
+
+  const filteredPOIs = useMemo(() => {
+    return allPOIs.filter((poi) => {
+      const matchesSearch = poi.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        poi.category.toLowerCase().includes(searchQuery.toLowerCase());
+      return matchesSearch;
+    });
+  }, [allPOIs, searchQuery]);
+
+  useEffect(() => {
+    if (!open || !mapContainerRef.current || !MAPBOX_TOKEN) return;
+
+    if (!mapRef.current) {
+      mapboxgl.accessToken = MAPBOX_TOKEN;
+      mapRef.current = new mapboxgl.Map({
+        container: mapContainerRef.current,
+        style: "mapbox://styles/mapbox/light-v11",
+        center: [mapCenter.lng, mapCenter.lat],
+        zoom: mapCenter.zoom,
+      });
+    }
+
+    return () => {
+      markersRef.current.forEach((m) => m.remove());
+      markersRef.current = [];
+    };
+  }, [open, mapCenter]);
+
+  useEffect(() => {
+    if (!mapRef.current || !open) return;
+
+    markersRef.current.forEach((m) => m.remove());
+    markersRef.current = [];
+
+    filteredPOIs.forEach((poi) => {
+      const isSelected = localPOISelection.includes(poi.id);
+      const el = document.createElement("div");
+      el.className = `w-6 h-6 rounded-full flex items-center justify-center cursor-pointer ${
+        isSelected ? "bg-primary" : "bg-muted-foreground"
+      }`;
+      el.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>`;
+
+      el.addEventListener("click", () => {
+        setLocalPOISelection((prev) =>
+          prev.includes(poi.id) ? prev.filter((x) => x !== poi.id) : [...prev, poi.id]
+        );
+      });
+
+      const marker = new mapboxgl.Marker({ element: el })
+        .setLngLat([poi.longitude, poi.latitude])
+        .setPopup(new mapboxgl.Popup().setHTML(`<strong>${poi.name}</strong><br/>${poi.category}`))
+        .addTo(mapRef.current!);
+
+      markersRef.current.push(marker);
+    });
+  }, [filteredPOIs, localPOISelection, open]);
+
+  const handleTogglePOI = (id: string) => {
+    setLocalPOISelection((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  };
+
+  const handleToggleCategory = (category: string) => {
+    setLocalCategorySelection((prev) =>
+      prev.includes(category) ? prev.filter((x) => x !== category) : [...prev, category]
+    );
+  };
+
+  const handleApply = () => {
+    onPOISelectionChange(localPOISelection);
+    onCategorySelectionChange(localCategorySelection);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setLocalPOISelection(selectedPOIs);
+    setLocalCategorySelection(selectedCategories);
+    onOpenChange(false);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-2xl flex flex-col">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <MapPin className="h-5 w-5" />
+            POI Targeting
+          </SheetTitle>
+          <SheetDescription>
+            Select specific POIs or target by category
+          </SheetDescription>
+        </SheetHeader>
+
+        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "pois" | "categories")} className="flex-1 flex flex-col mt-4">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="pois" data-testid="tab-pois">
+              POIs ({localPOISelection.length})
+            </TabsTrigger>
+            <TabsTrigger value="categories" data-testid="tab-categories">
+              Categories ({localCategorySelection.length})
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="pois" className="flex-1 flex flex-col space-y-3 mt-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search POIs..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+                data-testid="input-search-poi"
+              />
+            </div>
+
+            <div 
+              ref={mapContainerRef} 
+              className="h-48 rounded-md border overflow-hidden"
+              data-testid="poi-map"
+            />
+
+            <ScrollArea className="flex-1 border rounded-md">
+              <div className="p-3 space-y-1">
+                {filteredPOIs.map((poi) => (
+                  <label
+                    key={poi.id}
+                    className="flex items-center gap-3 p-2 rounded-md hover-elevate cursor-pointer"
+                    data-testid={`poi-${poi.id}`}
+                  >
+                    <Checkbox
+                      checked={localPOISelection.includes(poi.id)}
+                      onCheckedChange={() => handleTogglePOI(poi.id)}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium text-sm truncate flex items-center gap-2">
+                        {poi.name}
+                        {poi.source === "custom" && (
+                          <Badge variant="outline" className="text-xs">Custom</Badge>
+                        )}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {poi.category} - {poi.address || "N/A"}
+                      </div>
+                    </div>
+                    {localPOISelection.includes(poi.id) && (
+                      <Check className="h-4 w-4 text-primary flex-shrink-0" />
+                    )}
+                  </label>
+                ))}
+                {filteredPOIs.length === 0 && (
+                  <p className="text-sm text-muted-foreground text-center py-4">
+                    No POIs found
+                  </p>
+                )}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+          <TabsContent value="categories" className="flex-1 space-y-3 mt-4">
+            <p className="text-sm text-muted-foreground">
+              Select categories to target all POIs within those categories
+            </p>
+            <ScrollArea className="flex-1 border rounded-md">
+              <div className="p-3 grid grid-cols-2 gap-2">
+                {POI_CATEGORIES.map((category) => (
+                  <label
+                    key={category}
+                    className="flex items-center gap-3 p-3 rounded-md border hover-elevate cursor-pointer"
+                    data-testid={`category-${category.toLowerCase()}`}
+                  >
+                    <Checkbox
+                      checked={localCategorySelection.includes(category)}
+                      onCheckedChange={() => handleToggleCategory(category)}
+                    />
+                    <span className="text-sm flex-1">{category}</span>
+                    {localCategorySelection.includes(category) && (
+                      <Check className="h-4 w-4 text-primary" />
+                    )}
+                  </label>
+                ))}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+        </Tabs>
+
+        <div className="flex justify-between items-center pt-4 border-t mt-4">
+          <span className="text-sm text-muted-foreground">
+            {localPOISelection.length} POIs, {localCategorySelection.length} categories
+          </span>
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              data-testid="button-cancel-poi"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleApply}
+              data-testid="button-apply-poi"
+            >
+              Apply Selection
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/recommendation-score-badge.tsx

@@ -0,0 +1,102 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { RecommendationScoreComponents } from "@shared/schema";
+import { cn } from "@/lib/utils";
+
+interface RecommendationScoreBadgeProps {
+  score: number;
+  scoreComponents?: RecommendationScoreComponents;
+  showTooltip?: boolean;
+  size?: "sm" | "md" | "lg";
+}
+
+const scoreLabels: { key: keyof RecommendationScoreComponents; label: string }[] = [
+  { key: "measureFit", label: "Goal Fit" },
+  { key: "geoFit", label: "Location" },
+  { key: "availability", label: "Availability" },
+  { key: "budgetFit", label: "Budget" },
+  { key: "audienceFit", label: "Audience" },
+  { key: "brandFit", label: "Brand" },
+  { key: "qualityFit", label: "Quality" },
+  { key: "timeFit", label: "Time" },
+];
+
+function getScoreVariant(score: number): "default" | "secondary" | "destructive" | "outline" {
+  if (score >= 80) return "default";
+  if (score >= 60) return "secondary";
+  if (score >= 40) return "outline";
+  return "destructive";
+}
+
+function getProgressColor(score: number): string {
+  if (score >= 80) return "bg-primary";
+  if (score >= 60) return "bg-secondary";
+  if (score >= 40) return "bg-muted-foreground";
+  return "bg-destructive";
+}
+
+export function RecommendationScoreBadge({
+  score,
+  scoreComponents,
+  showTooltip = true,
+  size = "md",
+}: RecommendationScoreBadgeProps) {
+  const sizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+  };
+
+  const badge = (
+    <Badge
+      variant={getScoreVariant(score)}
+      className={cn(sizeClasses[size], "font-semibold")}
+      data-testid="badge-recommendation-score"
+    >
+      {score}
+    </Badge>
+  );
+
+  if (!showTooltip || !scoreComponents) {
+    return badge;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>{badge}</TooltipTrigger>
+        <TooltipContent side="right" className="w-64 p-3" data-testid="tooltip-score-breakdown">
+          <div className="space-y-3">
+            <div className="flex items-center justify-between border-b pb-2">
+              <span className="font-medium">Score Breakdown</span>
+              <span className="font-bold">{score}/100</span>
+            </div>
+            <div className="space-y-2">
+              {scoreLabels.map(({ key, label }) => (
+                <div key={key} className="space-y-1">
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-muted-foreground">{label}</span>
+                    <span className="font-medium">
+                      {scoreComponents[key]}
+                    </span>
+                  </div>
+                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                    <div
+                      className={cn("h-full rounded-full transition-all", getProgressColor(scoreComponents[key]))}
+                      style={{ width: `${Math.min(100, scoreComponents[key])}%` }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/recommended-inventories-panel.tsx

@@ -0,0 +1,248 @@
+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 { Skeleton } from "@/components/ui/skeleton";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { RecommendationScoreBadge } from "./recommendation-score-badge";
+import { Sparkles, MapPin, DollarSign, Eye, Check, Plus, AlertTriangle, Loader2, RefreshCw } from "lucide-react";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import type { RecommendationResponse, InventoryRecommendation, CampaignGoalType } from "@shared/schema";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+interface RecommendedInventoriesPanelProps {
+  dealId?: string;
+  startDate?: string;
+  endDate?: string;
+  budget?: number;
+  goalType?: CampaignGoalType;
+  goalValue?: number;
+  country?: string;
+  cities?: string[];
+  onSelectInventory?: (inventory: InventoryRecommendation) => void;
+  selectedInventoryIds?: string[];
+  maxHeight?: string;
+}
+
+export function RecommendedInventoriesPanel({
+  dealId,
+  startDate,
+  endDate,
+  budget,
+  goalType,
+  goalValue,
+  country,
+  cities,
+  onSelectInventory,
+  selectedInventoryIds = [],
+  maxHeight = "400px",
+}: RecommendedInventoriesPanelProps) {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const hasParams = !!(startDate && endDate);
+
+  const { data, isLoading, error, refetch } = useQuery<RecommendationResponse>({
+    queryKey: ["/api/recommendations", { dealId, startDate, endDate, budget, goalType, goalValue, country, cities }],
+    queryFn: async (): Promise<RecommendationResponse> => {
+      const response = await apiRequest("POST", "/api/recommendations", {
+        country: country || "US",
+        startDate,
+        endDate,
+        budget,
+        goalType,
+        goalValue,
+        geography: cities?.length ? { cities } : undefined,
+        limit: 10,
+      });
+      return response.json();
+    },
+    enabled: hasParams,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await refetch();
+    setIsRefreshing(false);
+  };
+
+  if (!hasParams) {
+    return (
+      <Card className="border-dashed" data-testid="card-recommendations-empty">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            <CardTitle className="text-base">AI Recommendations</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Set campaign dates to see AI-powered inventory recommendations.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Card data-testid="card-recommendations-loading">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary animate-pulse" />
+            <CardTitle className="text-base">Finding Best Inventory</CardTitle>
+          </div>
+          <CardDescription>Analyzing {goalType || "impressions"} optimization...</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-center gap-3 p-3 rounded-lg border">
+              <Skeleton className="h-10 w-10 rounded-full" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-3 w-1/2" />
+              </div>
+              <Skeleton className="h-8 w-12" />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="border-destructive/50" data-testid="card-recommendations-error">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+            <CardTitle className="text-base">Recommendation Error</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground mb-3">Failed to load recommendations.</p>
+          <Button size="sm" variant="outline" onClick={handleRefresh} data-testid="button-retry-recommendations">
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const recommendations = data?.recommendations || [];
+  const summary = data?.summary;
+
+  return (
+    <Card data-testid="card-recommendations">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            <CardTitle className="text-base">AI Recommendations</CardTitle>
+            {recommendations.length > 0 && (
+              <Badge variant="secondary" className="ml-2">
+                {recommendations.length} matches
+              </Badge>
+            )}
+          </div>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+            data-testid="button-refresh-recommendations"
+          >
+            <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
+          </Button>
+        </div>
+        {summary && (
+          <CardDescription className="flex items-center gap-4 mt-2">
+            <span className="flex items-center gap-1">
+              <Eye className="h-3.5 w-3.5" />
+              {(summary.estimatedTotalImpressions / 1000).toFixed(0)}K est. impressions
+            </span>
+            <span className="flex items-center gap-1">
+              <DollarSign className="h-3.5 w-3.5" />
+              ${summary.estimatedTotalCost.toFixed(0)} est. cost
+            </span>
+          </CardDescription>
+        )}
+      </CardHeader>
+      <CardContent className="pt-0">
+        {recommendations.length === 0 ? (
+          <div className="text-center py-6 text-muted-foreground">
+            <p className="text-sm">No matching inventory found.</p>
+            {data?.suggestions && data.suggestions.length > 0 && (
+              <ul className="mt-2 text-xs list-disc list-inside">
+                {data.suggestions.map((s: string, i: number) => (
+                  <li key={i}>{s}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ) : (
+          <ScrollArea style={{ maxHeight }}>
+            <div className="space-y-2 pr-3">
+              {recommendations.map((rec: InventoryRecommendation) => {
+                const isSelected = selectedInventoryIds.includes(rec.inventoryId);
+                return (
+                  <div
+                    key={rec.inventoryId}
+                    className={cn(
+                      "flex items-center gap-3 p-3 rounded-lg border transition-colors",
+                      isSelected ? "bg-primary/5 border-primary/30" : "hover-elevate"
+                    )}
+                    data-testid={`recommendation-item-${rec.inventoryId}`}
+                  >
+                    <div className="flex-shrink-0">
+                      <RecommendationScoreBadge
+                        score={rec.score}
+                        scoreComponents={rec.scoreComponents}
+                        size="lg"
+                      />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-sm truncate" title={rec.inventoryName}>
+                        {rec.inventoryName}
+                      </p>
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
+                        <MapPin className="h-3 w-3 flex-shrink-0" />
+                        <span className="truncate">{rec.location.city}, {rec.location.country}</span>
+                        <span className="text-muted-foreground/50">|</span>
+                        <span>{rec.format}</span>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-1 line-clamp-1">
+                        {rec.whyRecommended}
+                      </p>
+                    </div>
+                    <div className="flex-shrink-0 text-right">
+                      <div className="text-sm font-medium">
+                        ${rec.metrics.cpm.toFixed(2)} CPM
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {(rec.metrics.estimatedImpressions / 1000).toFixed(0)}K imp
+                      </div>
+                    </div>
+                    {onSelectInventory && (
+                      <Button
+                        size="icon"
+                        variant={isSelected ? "default" : "outline"}
+                        onClick={() => onSelectInventory(rec)}
+                        disabled={isSelected}
+                        data-testid={`button-select-inventory-${rec.inventoryId}`}
+                      >
+                        {isSelected ? <Check className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+                      </Button>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  );
+}