adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/ai-recommendation-panel.tsx

@@ -0,0 +1,379 @@
+import { useState, useMemo } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Sparkles, Monitor, MapPin, TrendingUp, AlertCircle, Plus, Loader2, Info, ChevronDown, ChevronUp, Edit2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Progress } from "@/components/ui/progress";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { apiRequest } from "@/lib/queryClient";
+import type { InventoryRecommendation, RecommendationScoreComponents, CampaignGoalType } from "@shared/schema";
+
+interface AIRecommendationPanelProps {
+  dealId?: string;
+  startDate?: string;
+  endDate?: string;
+  budget?: number;
+  goalType?: CampaignGoalType;
+  goalValue?: number;
+  country?: string;
+  selectedScreens: string[];
+  onAddScreens: (screenIds: string[]) => void;
+  onOpenManualEdit: () => void;
+}
+
+const SCORE_LABELS: { key: keyof RecommendationScoreComponents; label: string; description: string }[] = [
+  { key: "measureFit", label: "Goal Fit", description: "How well the inventory aligns with your campaign goal" },
+  { key: "geoFit", label: "Location", description: "Geographic relevance to target audience" },
+  { key: "availability", label: "Availability", description: "Inventory availability during campaign period" },
+  { key: "budgetFit", label: "Budget", description: "Cost efficiency relative to your budget" },
+  { key: "audienceFit", label: "Audience", description: "Match with target demographic" },
+  { key: "brandFit", label: "Brand", description: "Brand safety and content alignment" },
+  { key: "qualityFit", label: "Quality", description: "Screen quality and visibility" },
+  { key: "timeFit", label: "Time", description: "Optimal timing for ad delivery" },
+];
+
+function getScoreColor(score: number): string {
+  if (score >= 80) return "bg-primary";
+  if (score >= 60) return "bg-blue-500";
+  if (score >= 40) return "bg-yellow-500";
+  return "bg-destructive";
+}
+
+function getScoreLabel(score: number): string {
+  if (score >= 80) return "Excellent";
+  if (score >= 60) return "Good";
+  if (score >= 40) return "Fair";
+  return "Low";
+}
+
+function ScoreBreakdown({ scores }: { scores: RecommendationScoreComponents }) {
+  return (
+    <div className="space-y-2 p-3 bg-muted/30 rounded-md">
+      <div className="text-xs font-medium mb-2">Score Breakdown</div>
+      {SCORE_LABELS.map(({ key, label, description }) => (
+        <TooltipProvider key={key}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="space-y-1">
+                <div className="flex justify-between text-xs">
+                  <span className="text-muted-foreground">{label}</span>
+                  <span className="font-medium">{scores[key]}</span>
+                </div>
+                <Progress value={Math.min(100, scores[key])} className="h-1" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              <p className="text-xs">{description}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ))}
+    </div>
+  );
+}
+
+export function AIRecommendationPanel({
+  dealId,
+  startDate,
+  endDate,
+  budget,
+  goalType,
+  goalValue,
+  country = "Malaysia",
+  selectedScreens,
+  onAddScreens,
+  onOpenManualEdit,
+}: AIRecommendationPanelProps) {
+  const [recommendations, setRecommendations] = useState<InventoryRecommendation[]>([]);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const [hasGenerated, setHasGenerated] = useState(false);
+
+  const canGenerate = startDate && endDate;
+
+  const generateMutation = useMutation({
+    mutationFn: async () => {
+      const response = await apiRequest("POST", "/api/recommendations", {
+        country: country || "US",
+        startDate: startDate || "",
+        endDate: endDate || "",
+        budget,
+        goalType,
+        goalValue,
+        limit: 10,
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to generate recommendations");
+      }
+      return response.json();
+    },
+    onSuccess: (data: any) => {
+      // API returns { recommendations: [], summary: {}, ... } object
+      const recs = Array.isArray(data) ? data : (data?.recommendations || []);
+      setRecommendations(recs);
+      setHasGenerated(true);
+    },
+    onError: (error: Error) => {
+      console.error("Recommendation error:", error.message);
+    },
+  });
+
+  const toggleExpanded = (id: string) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleAddAll = () => {
+    const newIds = recommendations
+      .filter((r) => !selectedScreens.includes(r.inventoryId))
+      .map((r) => r.inventoryId);
+    onAddScreens(newIds);
+  };
+
+  const handleAddSingle = (id: string) => {
+    if (!selectedScreens.includes(id)) {
+      onAddScreens([id]);
+    }
+  };
+
+  const alreadySelectedCount = recommendations.filter((r) => selectedScreens.includes(r.inventoryId)).length;
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Sparkles className="h-4 w-4 text-primary" />
+            AI Inventory Recommendations
+          </CardTitle>
+          {hasGenerated && recommendations.length > 0 && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={onOpenManualEdit}
+              data-testid="button-manual-edit"
+            >
+              <Edit2 className="h-4 w-4 mr-1" />
+              Manual Edit
+            </Button>
+          )}
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Get AI-powered inventory suggestions based on your campaign parameters
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {!hasGenerated ? (
+          <div className="text-center py-6">
+            {!canGenerate ? (
+              <div className="space-y-2">
+                <AlertCircle className="h-8 w-8 mx-auto text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  Set start and end dates to generate recommendations
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Sparkles className="h-10 w-10 mx-auto text-primary" />
+                  <p className="text-sm font-medium">Ready to generate recommendations</p>
+                  <p className="text-xs text-muted-foreground">
+                    Our AI will analyze your campaign parameters and suggest optimal inventory
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  onClick={() => generateMutation.mutate()}
+                  disabled={generateMutation.isPending}
+                  data-testid="button-generate-recommendations"
+                >
+                  {generateMutation.isPending ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Analyzing inventory...
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles className="h-4 w-4 mr-2" />
+                      Generate Recommendations
+                    </>
+                  )}
+                </Button>
+                {generateMutation.isError && (
+                  <div className="mt-3 p-3 rounded-md bg-destructive/10 border border-destructive/20">
+                    <p className="text-sm text-destructive">
+                      {generateMutation.error?.message || "Failed to generate recommendations. Please try again."}
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Badge variant="secondary" data-testid="badge-recommendation-count">
+                  {recommendations.length} recommendations
+                </Badge>
+                {alreadySelectedCount > 0 && (
+                  <Badge variant="outline" className="text-xs">
+                    {alreadySelectedCount} already added
+                  </Badge>
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => generateMutation.mutate()}
+                  disabled={generateMutation.isPending}
+                  data-testid="button-refresh-recommendations"
+                >
+                  {generateMutation.isPending ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    "Refresh"
+                  )}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  onClick={handleAddAll}
+                  disabled={alreadySelectedCount === recommendations.length}
+                  data-testid="button-add-all-recommendations"
+                >
+                  <Plus className="h-4 w-4 mr-1" />
+                  Add All
+                </Button>
+              </div>
+            </div>
+
+            <ScrollArea className="h-[400px] border rounded-md">
+              <div className="p-3 space-y-2">
+                {recommendations.map((rec) => {
+                  const isSelected = selectedScreens.includes(rec.inventoryId);
+                  const isExpanded = expandedItems.has(rec.inventoryId);
+
+                  return (
+                    <Collapsible
+                      key={rec.inventoryId}
+                      open={isExpanded}
+                      onOpenChange={() => toggleExpanded(rec.inventoryId)}
+                    >
+                      <div
+                        className={`p-3 rounded-md border ${isSelected ? "bg-primary/5 border-primary/30" : "hover-elevate"}`}
+                        data-testid={`recommendation-${rec.inventoryId}`}
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1">
+                              <span className="font-medium text-sm truncate">{rec.inventoryName}</span>
+                              <Badge
+                                variant={rec.score >= 80 ? "default" : rec.score >= 60 ? "secondary" : "outline"}
+                                className="text-xs"
+                              >
+                                {rec.score}
+                              </Badge>
+                              {isSelected && (
+                                <Badge variant="outline" className="text-xs text-primary">
+                                  Added
+                                </Badge>
+                              )}
+                            </div>
+                            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                              <span className="flex items-center gap-1">
+                                <MapPin className="h-3 w-3" />
+                                {rec.location?.city || "N/A"}, {rec.location?.country}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                <Monitor className="h-3 w-3" />
+                                {rec.inventoryType}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                <TrendingUp className="h-3 w-3" />
+                                {rec.metrics?.estimatedImpressions?.toLocaleString() || "N/A"} impr
+                              </span>
+                            </div>
+                            {rec.whyRecommended && (
+                              <p className="text-xs text-muted-foreground mt-1 italic">
+                                "{rec.whyRecommended}"
+                              </p>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <CollapsibleTrigger asChild>
+                              <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
+                                {isExpanded ? (
+                                  <ChevronUp className="h-4 w-4" />
+                                ) : (
+                                  <ChevronDown className="h-4 w-4" />
+                                )}
+                              </Button>
+                            </CollapsibleTrigger>
+                            {!isSelected && (
+                              <Button
+                                type="button"
+                                size="sm"
+                                onClick={() => handleAddSingle(rec.inventoryId)}
+                                data-testid={`button-add-${rec.inventoryId}`}
+                              >
+                                <Plus className="h-4 w-4" />
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+
+                        <CollapsibleContent className="mt-3">
+                          {rec.scoreComponents && (
+                            <ScoreBreakdown scores={rec.scoreComponents} />
+                          )}
+                          <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
+                            <div className="p-2 bg-muted/30 rounded">
+                              <div className="text-muted-foreground">CPM</div>
+                              <div className="font-medium">${rec.metrics?.cpm?.toFixed(2) || "N/A"}</div>
+                            </div>
+                            <div className="p-2 bg-muted/30 rounded">
+                              <div className="text-muted-foreground">Est. Cost</div>
+                              <div className="font-medium">${rec.metrics?.estimatedCost?.toLocaleString() || "N/A"}</div>
+                            </div>
+                          </div>
+                        </CollapsibleContent>
+                      </div>
+                    </Collapsible>
+                  );
+                })}
+                {recommendations.length === 0 && (
+                  <p className="text-sm text-muted-foreground text-center py-4">
+                    No recommendations available
+                  </p>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/app-sidebar.tsx

@@ -0,0 +1,183 @@
+import { Link, useLocation } from "wouter";
+import { useState } from "react";
+import {
+  LayoutDashboard,
+  Megaphone,
+  Package,
+  Plug,
+  BarChart3,
+  ExternalLink,
+  Images,
+  Zap,
+  Play,
+  Settings,
+  ChevronDown,
+  MapPin,
+  Tag,
+  Wrench,
+} from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+} from "@/components/ui/sidebar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+const navItems = [
+  {
+    title: "Dashboard",
+    url: "/",
+    icon: LayoutDashboard,
+  },
+  {
+    title: "Deals",
+    url: "/deals",
+    icon: Megaphone,
+  },
+  {
+    title: "Content Hub",
+    url: "/content-hub",
+    icon: Images,
+  },
+  {
+    title: "Inventory",
+    url: "https://inventory-stg.movingwalls.com/",
+    icon: Package,
+    external: true,
+  },
+  {
+    title: "Proof of Play",
+    url: "/proof-of-play",
+    icon: Play,
+  },
+  {
+    title: "Integrations",
+    url: "/integrations",
+    icon: Plug,
+  },
+  {
+    title: "Measure",
+    url: import.meta.env.MODE === 'production' 
+      ? "https://measure.movingwalls.com" 
+      : "https://staging-measure.movingwalls.com/dashboard",
+    icon: BarChart3,
+    external: true,
+  },
+];
+
+const configurationItems = [
+  {
+    title: "Signals",
+    url: "/signals",
+    icon: Zap,
+  },
+  {
+    title: "Custom POIs",
+    url: "/custom-pois",
+    icon: MapPin,
+  },
+  {
+    title: "Tags",
+    url: "/tags",
+    icon: Tag,
+  },
+  {
+    title: "Settings",
+    url: "/settings",
+    icon: Settings,
+  },
+];
+
+export function AppSidebar() {
+  const [location] = useLocation();
+  const [configOpen, setConfigOpen] = useState(false);
+
+  const isConfigActive = configurationItems.some(item => location === item.url);
+
+  return (
+    <Sidebar>
+      <SidebarHeader className="p-4 border-b border-sidebar-border">
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground font-bold text-lg">
+            I
+          </div>
+          <div className="flex flex-col">
+            <span className="font-semibold text-lg leading-none">Influence</span>
+            <span className="text-xs text-sidebar-foreground/60">DOOH Adserver</span>
+          </div>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  {item.external ? (
+                    <SidebarMenuButton asChild>
+                      <a 
+                        href={item.url} 
+                        target="_blank" 
+                        rel="noopener noreferrer"
+                        data-testid={`nav-${item.title.toLowerCase().replace(/\s+/g, '-')}`}
+                      >
+                        <item.icon className="h-4 w-4" />
+                        <span className="flex-1">{item.title}</span>
+                        <ExternalLink className="h-3 w-3 text-muted-foreground" />
+                      </a>
+                    </SidebarMenuButton>
+                  ) : (
+                    <SidebarMenuButton asChild isActive={location === item.url}>
+                      <Link href={item.url} data-testid={`nav-${item.title.toLowerCase().replace(/\s+/g, '-')}`}>
+                        <item.icon className="h-4 w-4" />
+                        <span>{item.title}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  )}
+                </SidebarMenuItem>
+              ))}
+
+              <Collapsible open={configOpen || isConfigActive} onOpenChange={setConfigOpen}>
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton data-testid="nav-configuration">
+                      <Wrench className="h-4 w-4" />
+                      <span className="flex-1">Configuration</span>
+                      <ChevronDown className={`h-4 w-4 transition-transform ${configOpen || isConfigActive ? 'rotate-180' : ''}`} />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {configurationItems.map((item) => (
+                        <SidebarMenuSubItem key={item.title}>
+                          <SidebarMenuSubButton asChild isActive={location === item.url}>
+                            <Link href={item.url} data-testid={`nav-${item.title.toLowerCase().replace(/\s+/g, '-')}`}>
+                              <item.icon className="h-4 w-4" />
+                              <span>{item.title}</span>
+                            </Link>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}