adserver-dashboard 1.0.0

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

@@ -0,0 +1,217 @@
+import { useState, useMemo, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Search, Building, Filter, X, Check } from "lucide-react";
+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 {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { MediaOwner } from "@shared/schema";
+import { COUNTRIES, MEDIA_OWNER_BUSINESS_TYPES } from "@shared/schema";
+
+interface MediaOwnerDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedMediaOwners: string[];
+  onSelectionChange: (ids: string[]) => void;
+}
+
+export function MediaOwnerDrawer({
+  open,
+  onOpenChange,
+  selectedMediaOwners,
+  onSelectionChange,
+}: MediaOwnerDrawerProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [countryFilter, setCountryFilter] = useState<string>("all");
+  const [businessTypeFilter, setBusinessTypeFilter] = useState<string>("all");
+  const [localSelection, setLocalSelection] = useState<string[]>(selectedMediaOwners);
+
+  useEffect(() => {
+    if (open) {
+      setLocalSelection(selectedMediaOwners);
+    }
+  }, [open, selectedMediaOwners]);
+
+  const { data: mediaOwners = [] } = useQuery<MediaOwner[]>({
+    queryKey: ["/api/media-owners"],
+  });
+
+  const filteredMediaOwners = useMemo(() => {
+    return mediaOwners.filter((mo) => {
+      const matchesSearch = mo.name.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCountry = countryFilter === "all" || mo.country === countryFilter;
+      const matchesBusinessType = businessTypeFilter === "all" || 
+        (mo as any).businessType === businessTypeFilter;
+      return matchesSearch && matchesCountry && matchesBusinessType;
+    });
+  }, [mediaOwners, searchQuery, countryFilter, businessTypeFilter]);
+
+  const handleToggle = (id: string) => {
+    setLocalSelection((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  };
+
+  const handleApply = () => {
+    onSelectionChange(localSelection);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setLocalSelection(selectedMediaOwners);
+    onOpenChange(false);
+  };
+
+  const uniqueCountries = useMemo(() => {
+    const countries = new Set(mediaOwners.map((mo) => mo.country).filter(Boolean));
+    return Array.from(countries) as string[];
+  }, [mediaOwners]);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg flex flex-col">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <Building className="h-5 w-5" />
+            Select Media Owners
+          </SheetTitle>
+          <SheetDescription>
+            Search and filter media owners by country and business type
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="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 media owners..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+              data-testid="input-search-media-owner"
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <Select value={countryFilter} onValueChange={setCountryFilter}>
+              <SelectTrigger className="flex-1" data-testid="select-country-filter">
+                <SelectValue placeholder="All Countries" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Countries</SelectItem>
+                {uniqueCountries.map((country) => (
+                  <SelectItem key={country} value={country}>
+                    {country}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Select value={businessTypeFilter} onValueChange={setBusinessTypeFilter}>
+              <SelectTrigger className="flex-1" data-testid="select-business-type-filter">
+                <SelectValue placeholder="All Types" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                {MEDIA_OWNER_BUSINESS_TYPES.map((type) => (
+                  <SelectItem key={type} value={type}>
+                    {type}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {localSelection.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-3">
+            {localSelection.map((id) => {
+              const mo = mediaOwners.find((m) => m.id === id);
+              return mo ? (
+                <Badge key={id} variant="secondary" className="text-xs">
+                  {mo.name}
+                  <button
+                    type="button"
+                    onClick={() => handleToggle(id)}
+                    className="ml-1 hover:text-destructive"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </Badge>
+              ) : null;
+            })}
+          </div>
+        )}
+
+        <ScrollArea className="flex-1 mt-4 border rounded-md">
+          <div className="p-3 space-y-1">
+            {filteredMediaOwners.map((mo) => (
+              <label
+                key={mo.id}
+                className="flex items-center gap-3 p-2 rounded-md hover-elevate cursor-pointer"
+                data-testid={`media-owner-${mo.id}`}
+              >
+                <Checkbox
+                  checked={localSelection.includes(mo.id)}
+                  onCheckedChange={() => handleToggle(mo.id)}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sm truncate">{mo.name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {mo.country || "N/A"} - {(mo as any).businessType || "Media Owner"}
+                  </div>
+                </div>
+                {localSelection.includes(mo.id) && (
+                  <Check className="h-4 w-4 text-primary flex-shrink-0" />
+                )}
+              </label>
+            ))}
+            {filteredMediaOwners.length === 0 && (
+              <p className="text-sm text-muted-foreground text-center py-4">
+                No media owners found matching your criteria
+              </p>
+            )}
+          </div>
+        </ScrollArea>
+
+        <div className="flex justify-between items-center pt-4 border-t mt-4">
+          <span className="text-sm text-muted-foreground">
+            {localSelection.length} selected
+          </span>
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              data-testid="button-cancel-media-owner"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleApply}
+              data-testid="button-apply-media-owner"
+            >
+              Apply Selection
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/metric-card.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+
+interface MetricCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon: LucideIcon;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+  className?: string;
+}
+
+export function MetricCard({
+  title,
+  value,
+  subtitle,
+  icon: Icon,
+  trend,
+  className,
+}: MetricCardProps) {
+  return (
+    <Card className={cn("overflow-visible", className)}>
+      <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+        <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10">
+          <Icon className="h-4 w-4 text-primary" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {(subtitle || trend) && (
+          <div className="flex items-center gap-2 mt-1">
+            {trend && (
+              <span
+                className={cn(
+                  "text-xs font-medium",
+                  trend.isPositive ? "text-emerald-500" : "text-red-500"
+                )}
+              >
+                {trend.isPositive ? "+" : ""}
+                {trend.value}%
+              </span>
+            )}
+            {subtitle && (
+              <span className="text-xs text-muted-foreground">{subtitle}</span>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/page-header.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+
+interface PageHeaderProps {
+  title: React.ReactNode;
+  description?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between", className)}>
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+      {actions && <div className="flex items-center gap-2 mt-4 sm:mt-0">{actions}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,137 @@
+import { Wifi, WifiOff, HelpCircle } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { PlayerStatus } from "@shared/schema";
+
+interface PlayerStatusIndicatorProps {
+  status?: PlayerStatus;
+  showDetails?: boolean;
+  className?: string;
+}
+
+const STATUS_CONFIGS = {
+  online: {
+    icon: Wifi,
+    label: "Online",
+    className: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+    iconClassName: "text-green-600 dark:text-green-400",
+  },
+  offline: {
+    icon: WifiOff,
+    label: "Offline",
+    className: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+    iconClassName: "text-red-600 dark:text-red-400",
+  },
+  unknown: {
+    icon: HelpCircle,
+    label: "Unknown",
+    className: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400",
+    iconClassName: "text-gray-500 dark:text-gray-400",
+  },
+};
+
+export function PlayerStatusIndicator({ status, showDetails = false, className }: PlayerStatusIndicatorProps) {
+  const statusValue = (status?.status || "unknown") as keyof typeof STATUS_CONFIGS;
+  const config = STATUS_CONFIGS[statusValue] || STATUS_CONFIGS.unknown;
+
+  const Icon = config.icon;
+
+  if (!showDetails) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className={cn("flex items-center", className)}>
+            <Icon className={cn("h-4 w-4", config.iconClassName)} />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="font-medium">{config.label}</p>
+          {status?.lastHeartbeat && (
+            <p className="text-xs text-muted-foreground">
+              Last seen: {new Date(status.lastHeartbeat).toLocaleString()}
+            </p>
+          )}
+          {status?.currentContent && (
+            <p className="text-xs text-muted-foreground">
+              Playing: {status.currentContent}
+            </p>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Badge variant="secondary" className={cn(config.className, className)}>
+      <Icon className="h-3 w-3 mr-1" />
+      {config.label}
+    </Badge>
+  );
+}
+
+interface PlayerStatusSummaryProps {
+  online: number;
+  offline: number;
+  unknown: number;
+  className?: string;
+}
+
+export function PlayerStatusSummary({ online, offline, unknown, className }: PlayerStatusSummaryProps) {
+  const total = online + offline + unknown;
+  
+  if (total === 0) {
+    return (
+      <div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)} data-testid="player-status-empty">
+        <HelpCircle className="h-4 w-4" />
+        <span>No player data available</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center gap-3", className)} data-testid="player-status-summary">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="flex items-center gap-1.5" data-testid="status-online-count">
+            <div className="h-2 w-2 rounded-full bg-green-500" />
+            <span className="text-sm font-medium">{online}</span>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{online} player{online !== 1 ? 's' : ''} online</p>
+        </TooltipContent>
+      </Tooltip>
+      
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="flex items-center gap-1.5" data-testid="status-offline-count">
+            <div className="h-2 w-2 rounded-full bg-red-500" />
+            <span className="text-sm font-medium">{offline}</span>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{offline} player{offline !== 1 ? 's' : ''} offline</p>
+        </TooltipContent>
+      </Tooltip>
+      
+      {unknown > 0 && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center gap-1.5" data-testid="status-unknown-count">
+              <div className="h-2 w-2 rounded-full bg-gray-400" />
+              <span className="text-sm font-medium">{unknown}</span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{unknown} player{unknown !== 1 ? 's' : ''} with unknown status</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+      
+      <span className="text-xs text-muted-foreground">
+        of {total} total
+      </span>
+    </div>
+  );
+}