adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/searchable-combobox.tsx

@@ -0,0 +1,134 @@
+import { useState, ReactNode } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+interface SearchableComboboxProps {
+  options: ComboboxOption[];
+  value?: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  disabled?: boolean;
+  className?: string;
+  "data-testid"?: string;
+  footer?: ReactNode;
+  onFooterClick?: () => void;
+}
+
+export function SearchableCombobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  disabled = false,
+  className,
+  "data-testid": testId,
+  footer,
+  onFooterClick,
+}: SearchableComboboxProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((option) => option.value === value);
+
+  const handleFooterClick = () => {
+    setOpen(false);
+    onFooterClick?.();
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "w-full justify-between font-normal",
+            !value && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+          data-testid={testId}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  disabled={option.disabled}
+                  onSelect={() => {
+                    if (!option.disabled) {
+                      onValueChange(option.value);
+                      setOpen(false);
+                    }
+                  }}
+                  className={cn(option.disabled && "opacity-50 cursor-not-allowed")}
+                  data-testid={`option-${option.value}`}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4 shrink-0",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span>{option.label}</span>
+                    {option.description && (
+                      <span className="text-xs text-muted-foreground">{option.description}</span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+          {footer && (
+            <>
+              <CommandSeparator />
+              <div 
+                className="p-2 cursor-pointer" 
+                onClick={handleFooterClick}
+                data-testid="combobox-footer"
+              >
+                {footer}
+              </div>
+            </>
+          )}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/signal-visualizations.tsx

@@ -0,0 +1,407 @@
+import { useState } from "react";
+import { Sun, Cloud, CloudRain, CloudSnow, Wind } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+
+interface RuleData {
+  id: string;
+  name: string;
+  conditionType: string;
+  parameters: Record<string, unknown>;
+}
+
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const HOURS = ["7AM", "8AM", "9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM", "10PM", "11PM"];
+
+function generateFootfallData(): number[][] {
+  return DAYS.map(() =>
+    HOURS.map(() => Math.floor(Math.random() * 3))
+  );
+}
+
+function getBusyColor(level: number): string {
+  switch (level) {
+    case 0:
+      return "#22c55e";
+    case 1:
+      return "#eab308";
+    case 2:
+      return "#ef4444";
+    default:
+      return "#22c55e";
+  }
+}
+
+function getBusyLabel(level: number): string {
+  switch (level) {
+    case 0:
+      return "Not Busy";
+    case 1:
+      return "Little Busy";
+    case 2:
+      return "Too Busy";
+    default:
+      return "Not Busy";
+  }
+}
+
+export function FootfallVisualization() {
+  const [data] = useState(generateFootfallData);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4 flex-wrap">
+        <Select defaultValue="all">
+          <SelectTrigger className="w-40" data-testid="select-footfall-location">
+            <SelectValue placeholder="All Locations" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Locations</SelectItem>
+            <SelectItem value="store1">Store 1</SelectItem>
+            <SelectItem value="store2">Store 2</SelectItem>
+          </SelectContent>
+        </Select>
+        <span className="text-sm text-muted-foreground">Jan 20 - Jan 26, 2026</span>
+      </div>
+
+      <h3 className="font-semibold text-center">Average weekly visitor forecast</h3>
+
+      <div className="overflow-x-auto">
+        <div className="min-w-[600px]">
+          <div className="flex">
+            <div className="w-12" />
+            <div className="flex-1 grid" style={{ gridTemplateColumns: `repeat(${HOURS.length}, minmax(0, 1fr))` }}>
+              {HOURS.map((hour, i) => (
+                <div key={i} className="text-xs text-muted-foreground text-center px-0.5">
+                  {i % 2 === 0 ? hour : ""}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {DAYS.map((day, dayIndex) => (
+            <div key={day} className="flex items-center">
+              <div className="w-12 text-xs text-muted-foreground">{day}</div>
+              <div className="flex-1 grid gap-0.5" style={{ gridTemplateColumns: `repeat(${HOURS.length}, minmax(0, 1fr))` }}>
+                {data[dayIndex].map((level, hourIndex) => (
+                  <div
+                    key={hourIndex}
+                    className="h-6 rounded-sm"
+                    style={{ backgroundColor: getBusyColor(level) }}
+                    title={`${day} ${HOURS[hourIndex]}: ${getBusyLabel(level)}`}
+                    data-testid={`heatmap-cell-${dayIndex}-${hourIndex}`}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-center gap-6 pt-2">
+        {[0, 1, 2].map((level) => (
+          <div key={level} className="flex items-center gap-2">
+            <div
+              className="w-4 h-4 rounded-sm"
+              style={{ backgroundColor: getBusyColor(level) }}
+            />
+            <span className="text-xs text-muted-foreground">{getBusyLabel(level)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const WEATHER_DATA = [
+  { time: "6AM", temp: 18, condition: "sunny" },
+  { time: "9AM", temp: 22, condition: "sunny" },
+  { time: "12PM", temp: 28, condition: "cloudy" },
+  { time: "3PM", temp: 32, condition: "sunny" },
+  { time: "6PM", temp: 26, condition: "cloudy" },
+  { time: "9PM", temp: 20, condition: "rainy" },
+];
+
+function getWeatherIcon(condition: string) {
+  switch (condition) {
+    case "sunny":
+      return <Sun className="h-4 w-4 text-yellow-500" />;
+    case "cloudy":
+      return <Cloud className="h-4 w-4 text-gray-400" />;
+    case "rainy":
+      return <CloudRain className="h-4 w-4 text-blue-400" />;
+    case "snowy":
+      return <CloudSnow className="h-4 w-4 text-blue-200" />;
+    default:
+      return <Wind className="h-4 w-4 text-gray-300" />;
+  }
+}
+
+function getTempColor(temp: number): string {
+  if (temp <= 15) return "#3b82f6";
+  if (temp <= 22) return "#22c55e";
+  if (temp <= 28) return "#eab308";
+  return "#ef4444";
+}
+
+export function WeatherVisualization() {
+  const [period, setPeriod] = useState("day");
+  const maxTemp = Math.max(...WEATHER_DATA.map((d) => d.temp));
+  const minTemp = Math.min(...WEATHER_DATA.map((d) => d.temp));
+  const tempRange = maxTemp - minTemp || 1;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4 flex-wrap">
+        <div className="flex gap-1">
+          {["Hour", "Day", "Week"].map((p) => (
+            <Button
+              key={p}
+              variant={period === p.toLowerCase() ? "default" : "outline"}
+              size="sm"
+              onClick={() => setPeriod(p.toLowerCase())}
+              data-testid={`button-period-${p.toLowerCase()}`}
+            >
+              {p}
+            </Button>
+          ))}
+        </div>
+        <Select defaultValue="current">
+          <SelectTrigger className="w-40" data-testid="select-weather-location">
+            <SelectValue placeholder="Location" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="current">Current Location</SelectItem>
+            <SelectItem value="new_york">New York</SelectItem>
+            <SelectItem value="london">London</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <h3 className="font-semibold text-center">Weather Forecast</h3>
+
+      <div className="relative h-48 border-b border-l border-border">
+        <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between text-xs text-muted-foreground py-2">
+          <span>{maxTemp}°</span>
+          <span>{Math.round((maxTemp + minTemp) / 2)}°</span>
+          <span>{minTemp}°</span>
+        </div>
+
+        <div className="ml-8 h-full relative">
+          <svg className="w-full h-full" preserveAspectRatio="none">
+            <defs>
+              <linearGradient id="tempGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#ef4444" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.1" />
+              </linearGradient>
+            </defs>
+            <path
+              d={`M 0 ${((maxTemp - WEATHER_DATA[0].temp) / tempRange) * 100}% ${WEATHER_DATA.map((d, i) => {
+                const x = (i / (WEATHER_DATA.length - 1)) * 100;
+                const y = ((maxTemp - d.temp) / tempRange) * 100;
+                return `L ${x}% ${y}%`;
+              }).join(" ")} L 100% 100% L 0 100% Z`}
+              fill="url(#tempGradient)"
+            />
+            <polyline
+              points={WEATHER_DATA.map((d, i) => {
+                const x = (i / (WEATHER_DATA.length - 1)) * 100;
+                const y = ((maxTemp - d.temp) / tempRange) * 100;
+                return `${x}%,${y}%`;
+              }).join(" ")}
+              fill="none"
+              stroke="#ef4444"
+              strokeWidth="2"
+            />
+          </svg>
+
+          {WEATHER_DATA.map((d, i) => {
+            const x = (i / (WEATHER_DATA.length - 1)) * 100;
+            const y = ((maxTemp - d.temp) / tempRange) * 100;
+            return (
+              <div
+                key={i}
+                className="absolute flex flex-col items-center"
+                style={{
+                  left: `${x}%`,
+                  top: `${y}%`,
+                  transform: "translate(-50%, -100%)",
+                }}
+              >
+                {getWeatherIcon(d.condition)}
+                <span className="text-xs font-medium" style={{ color: getTempColor(d.temp) }}>
+                  {d.temp}°
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex justify-between ml-8 text-xs text-muted-foreground">
+        {WEATHER_DATA.map((d, i) => (
+          <span key={i}>{d.time}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const AUDIENCE_SEGMENTS = [
+  { name: "High Intent Shoppers", percentage: 35, color: "#3b82f6" },
+  { name: "Frequent Visitors", percentage: 28, color: "#22c55e" },
+  { name: "New Customers", percentage: 22, color: "#eab308" },
+  { name: "Loyalty Members", percentage: 15, color: "#ef4444" },
+];
+
+export function AudiencesVisualization() {
+  return (
+    <div className="space-y-4">
+      <h3 className="font-semibold text-center">Audience Segment Analysis</h3>
+
+      <div className="space-y-3">
+        {AUDIENCE_SEGMENTS.map((segment, i) => (
+          <div key={i} className="space-y-1">
+            <div className="flex justify-between text-sm">
+              <span>{segment.name}</span>
+              <span className="font-medium">{segment.percentage}%</span>
+            </div>
+            <div className="h-6 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all duration-500"
+                style={{
+                  width: `${segment.percentage}%`,
+                  backgroundColor: segment.color,
+                }}
+                data-testid={`audience-bar-${i}`}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="pt-4 border-t">
+        <div className="text-sm text-muted-foreground text-center">
+          Total Audience Reach: <span className="font-semibold text-foreground">1.2M</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const SEARCH_TRENDS = [
+  { date: "Jan 20", value: 45 },
+  { date: "Jan 21", value: 52 },
+  { date: "Jan 22", value: 48 },
+  { date: "Jan 23", value: 68 },
+  { date: "Jan 24", value: 82 },
+  { date: "Jan 25", value: 75 },
+  { date: "Jan 26", value: 90 },
+];
+
+export function SearchVisualization() {
+  const maxValue = Math.max(...SEARCH_TRENDS.map((d) => d.value));
+  const minValue = Math.min(...SEARCH_TRENDS.map((d) => d.value));
+  const valueRange = maxValue - minValue || 1;
+
+  return (
+    <div className="space-y-4">
+      <h3 className="font-semibold text-center">Search Keyword Trends</h3>
+
+      <div className="relative h-48 border-b border-l border-border">
+        <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between text-xs text-muted-foreground py-2">
+          <span>{maxValue}</span>
+          <span>{Math.round((maxValue + minValue) / 2)}</span>
+          <span>{minValue}</span>
+        </div>
+
+        <div className="ml-8 h-full relative">
+          <svg className="w-full h-full" preserveAspectRatio="none">
+            <defs>
+              <linearGradient id="searchGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.05" />
+              </linearGradient>
+            </defs>
+            <path
+              d={`M 0 ${((maxValue - SEARCH_TRENDS[0].value) / valueRange) * 100}% ${SEARCH_TRENDS.map((d, i) => {
+                const x = (i / (SEARCH_TRENDS.length - 1)) * 100;
+                const y = ((maxValue - d.value) / valueRange) * 100;
+                return `L ${x}% ${y}%`;
+              }).join(" ")} L 100% 100% L 0 100% Z`}
+              fill="url(#searchGradient)"
+            />
+            <polyline
+              points={SEARCH_TRENDS.map((d, i) => {
+                const x = (i / (SEARCH_TRENDS.length - 1)) * 100;
+                const y = ((maxValue - d.value) / valueRange) * 100;
+                return `${x}%,${y}%`;
+              }).join(" ")}
+              fill="none"
+              stroke="#3b82f6"
+              strokeWidth="2"
+            />
+          </svg>
+
+          {SEARCH_TRENDS.map((d, i) => {
+            const x = (i / (SEARCH_TRENDS.length - 1)) * 100;
+            const y = ((maxValue - d.value) / valueRange) * 100;
+            return (
+              <div
+                key={i}
+                className="absolute w-3 h-3 bg-blue-500 rounded-full border-2 border-background"
+                style={{
+                  left: `${x}%`,
+                  top: `${y}%`,
+                  transform: "translate(-50%, -50%)",
+                }}
+                title={`${d.date}: Index ${d.value}`}
+                data-testid={`search-point-${i}`}
+              />
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex justify-between ml-8 text-xs text-muted-foreground">
+        {SEARCH_TRENDS.map((d, i) => (
+          <span key={i}>{d.date}</span>
+        ))}
+      </div>
+
+      <div className="pt-2 text-center text-sm text-muted-foreground">
+        Keyword Index Value: <span className="font-semibold text-foreground">{SEARCH_TRENDS[SEARCH_TRENDS.length - 1].value}</span>
+      </div>
+    </div>
+  );
+}
+
+interface SignalVisualizationProps {
+  type: string;
+  rules: RuleData[];
+}
+
+export function SignalVisualization({ type, rules }: SignalVisualizationProps) {
+  if (!type) {
+    return null;
+  }
+
+  switch (type) {
+    case "footfall":
+      return <FootfallVisualization />;
+    case "weather":
+      return <WeatherVisualization />;
+    case "audiences":
+      return <AudiencesVisualization />;
+    case "search":
+      return <SearchVisualization />;
+    default:
+      return null;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface StatusBadgeProps {
+  status: string;
+  className?: string;
+}
+
+const statusStyles: Record<string, string> = {
+  active: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  draft: "bg-slate-500/15 text-slate-600 dark:text-slate-400 border-slate-500/20",
+  pending: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  paused: "bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-500/20",
+  completed: "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20",
+  cancelled: "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20",
+  inactive: "bg-slate-500/15 text-slate-600 dark:text-slate-400 border-slate-500/20",
+  maintenance: "bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/20",
+};
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const style = statusStyles[status.toLowerCase()] || statusStyles.draft;
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "capitalize font-medium border",
+        style,
+        className
+      )}
+    >
+      {status}
+    </Badge>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/theme-provider.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "light",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

package/Influence-MW-AdServer-12-02-2026/client/src/components/theme-toggle.tsx

@@ -0,0 +1,37 @@
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<"light" | "dark">("dark");
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null;
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const initialTheme = savedTheme || (prefersDark ? "dark" : "light");
+    setTheme(initialTheme);
+    document.documentElement.classList.toggle("dark", initialTheme === "dark");
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    document.documentElement.classList.toggle("dark", newTheme === "dark");
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      data-testid="button-theme-toggle"
+    >
+      {theme === "light" ? (
+        <Moon className="h-4 w-4" />
+      ) : (
+        <Sun className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}