adserver-dashboard 1.0.0

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

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { Link } from "wouter";
+import {
+  ChevronDown,
+  User,
+  Settings,
+  LogOut,
+  Sun,
+  Moon,
+  Monitor,
+  Check,
+  Globe,
+  LayoutGrid,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useTheme } from "@/components/theme-provider";
+
+const companies = [
+  { id: "1", name: "Planner Company" },
+  { id: "2", name: "Media Agency" },
+  { id: "3", name: "Brand Direct" },
+];
+
+const languages = [
+  { code: "en", name: "English", short: "ENG" },
+  { code: "es", name: "Spanish", short: "ESP" },
+  { code: "fr", name: "French", short: "FRA" },
+  { code: "de", name: "German", short: "DEU" },
+];
+
+export function HeaderUserMenu() {
+  const { theme, setTheme } = useTheme();
+  const [currentCompany, setCurrentCompany] = useState("1");
+  const [currentLanguage, setCurrentLanguage] = useState("en");
+
+  const selectedCompany = companies.find((c) => c.id === currentCompany);
+  const selectedLanguage = languages.find((l) => l.code === currentLanguage);
+
+  return (
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="gap-1" data-testid="button-language-switcher">
+            <Globe className="h-4 w-4" />
+            <span>{selectedLanguage?.short}</span>
+            <ChevronDown className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {languages.map((lang) => (
+            <DropdownMenuItem
+              key={lang.code}
+              onClick={() => setCurrentLanguage(lang.code)}
+              data-testid={`language-${lang.code}`}
+            >
+              <span className="flex-1">{lang.name}</span>
+              {currentLanguage === lang.code && <Check className="h-4 w-4" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Button variant="ghost" size="icon" data-testid="button-product-switcher">
+        <LayoutGrid className="h-4 w-4" />
+      </Button>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="gap-2 px-2" data-testid="button-user-menu">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-medium">
+              AU
+            </div>
+            <div className="flex flex-col items-start text-left">
+              <span className="text-sm font-medium">Admin User</span>
+              <span className="text-xs text-muted-foreground">Tenant Admin</span>
+            </div>
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-64">
+          <DropdownMenuLabel className="flex items-center gap-3 py-3">
+            <User className="h-4 w-4" />
+            <span>Profile</span>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          
+          <div className="px-2 py-2">
+            <div className="text-xs text-muted-foreground mb-1.5">Company</div>
+            <Select value={currentCompany} onValueChange={setCurrentCompany}>
+              <SelectTrigger className="w-full" data-testid="select-company">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {companies.map((company) => (
+                  <SelectItem key={company.id} value={company.id} data-testid={`company-${company.id}`}>
+                    {company.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="px-2 py-2">
+            <div className="text-xs text-muted-foreground mb-1.5">Role</div>
+            <div className="text-sm bg-muted px-3 py-2 rounded-md">Tenant Admin</div>
+          </div>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem asChild>
+            <Link href="/settings" className="flex items-center gap-2 cursor-pointer" data-testid="menu-settings">
+              <Settings className="h-4 w-4" />
+              <span>Settings</span>
+            </Link>
+          </DropdownMenuItem>
+
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger data-testid="menu-theme">
+              {theme === "dark" ? (
+                <Moon className="h-4 w-4 mr-2" />
+              ) : theme === "light" ? (
+                <Sun className="h-4 w-4 mr-2" />
+              ) : (
+                <Monitor className="h-4 w-4 mr-2" />
+              )}
+              <span>Theme</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem onClick={() => setTheme("light")} data-testid="theme-light">
+                  <Sun className="h-4 w-4 mr-2" />
+                  <span>Light</span>
+                  {theme === "light" && <Check className="h-4 w-4 ml-auto" />}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")} data-testid="theme-dark">
+                  <Moon className="h-4 w-4 mr-2" />
+                  <span>Dark</span>
+                  {theme === "dark" && <Check className="h-4 w-4 ml-auto" />}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")} data-testid="theme-system">
+                  <Monitor className="h-4 w-4 mr-2" />
+                  <span>System</span>
+                  {theme === "system" && <Check className="h-4 w-4 ml-auto" />}
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem className="text-destructive focus:text-destructive" data-testid="menu-logout">
+            <LogOut className="h-4 w-4 mr-2" />
+            <span>Logout</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

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

@@ -0,0 +1,313 @@
+import { useState, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { ChangeLog, ChangeLogEntityType } from "@shared/schema";
+
+interface HistoryDrawerProps {
+  entityType: ChangeLogEntityType;
+  entityId: string;
+  entityName?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  hierarchical?: boolean;
+}
+
+const ACTION_COLORS: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+  created: "default",
+  updated: "secondary",
+  deleted: "destructive",
+  status_changed: "outline",
+  approved: "default",
+  rejected: "destructive",
+};
+
+const ENTITY_TYPE_LABELS: Record<string, string> = {
+  deal: "Deal",
+  order: "Order",
+  line_item: "Line Item",
+  creative: "Creative",
+};
+
+const ENTITY_TYPE_COLORS: Record<string, string> = {
+  deal: "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20",
+  order: "bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/20",
+  line_item: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  creative: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+};
+
+export function HistoryDrawer({
+  entityType,
+  entityId,
+  entityName,
+  open,
+  onOpenChange,
+  hierarchical = true,
+}: HistoryDrawerProps) {
+  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set(["deal", "order", "line_item", "creative"])
+  );
+
+  const { data: logs = [], isLoading } = useQuery<ChangeLog[]>({
+    queryKey: hierarchical 
+      ? ["/api/change-logs/hierarchy", entityType, entityId]
+      : ["/api/change-logs", entityType, entityId],
+    enabled: open,
+  });
+
+  const toggleExpanded = (logId: string) => {
+    const newExpanded = new Set(expandedLogs);
+    if (newExpanded.has(logId)) {
+      newExpanded.delete(logId);
+    } else {
+      newExpanded.add(logId);
+    }
+    setExpandedLogs(newExpanded);
+  };
+
+  const toggleSection = (section: string) => {
+    const newExpanded = new Set(expandedSections);
+    if (newExpanded.has(section)) {
+      newExpanded.delete(section);
+    } else {
+      newExpanded.add(section);
+    }
+    setExpandedSections(newExpanded);
+  };
+
+  const formatDateTime = (dateString: string): string => {
+    try {
+      const date = new Date(dateString);
+      return format(date, "MMM dd, yyyy HH:mm");
+    } catch {
+      return dateString;
+    }
+  };
+
+  const getChangesSummary = (changes: Record<string, any> | undefined): string => {
+    if (!changes || typeof changes !== "object") return "No field changes";
+    const fieldCount = Object.keys(changes).length;
+    return `${fieldCount} field${fieldCount === 1 ? "" : "s"} changed`;
+  };
+
+  const groupedLogs = useMemo(() => {
+    const groups: Record<string, ChangeLog[]> = {
+      deal: [],
+      order: [],
+      line_item: [],
+      creative: [],
+    };
+    logs.forEach((log) => {
+      if (groups[log.entityType]) {
+        groups[log.entityType].push(log);
+      }
+    });
+    return groups;
+  }, [logs]);
+
+  const entityOrder: ChangeLogEntityType[] = ["deal", "order", "line_item", "creative"];
+
+  const renderLogItem = (log: ChangeLog) => (
+    <Card
+      key={log.id}
+      className="hover-elevate"
+      data-testid={`card-history-log-${log.id}`}
+    >
+      <CardContent className="pt-4 pb-3 space-y-2">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 space-y-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <Badge
+                variant="outline"
+                className={ENTITY_TYPE_COLORS[log.entityType]}
+                data-testid={`badge-entity-type-${log.id}`}
+              >
+                {ENTITY_TYPE_LABELS[log.entityType]}
+              </Badge>
+              <Badge
+                variant={ACTION_COLORS[log.action] || "outline"}
+                data-testid={`badge-action-${log.id}`}
+              >
+                {log.action.replace(/_/g, " ")}
+              </Badge>
+            </div>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span data-testid={`text-changedby-${log.id}`}>
+                by {log.changedBy}
+              </span>
+              <span>•</span>
+              <span data-testid={`text-changedat-${log.id}`}>
+                {formatDateTime(log.changedAt)}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {log.description && (
+          <p
+            className="text-sm text-foreground"
+            data-testid={`text-description-${log.id}`}
+          >
+            {log.description}
+          </p>
+        )}
+
+        {log.changes && Object.keys(log.changes).length > 0 ? (
+          <Collapsible
+            open={expandedLogs.has(log.id)}
+            onOpenChange={() => toggleExpanded(log.id)}
+            data-testid={`collapsible-changes-${log.id}`}
+          >
+            <CollapsibleTrigger
+              className="flex items-center gap-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors py-1"
+              data-testid={`button-expand-changes-${log.id}`}
+            >
+              <ChevronDown
+                className={`h-3 w-3 transition-transform ${
+                  expandedLogs.has(log.id) ? "rotate-180" : ""
+                }`}
+              />
+              {getChangesSummary(log.changes)}
+            </CollapsibleTrigger>
+
+            <CollapsibleContent
+              className="mt-2 pt-2 border-t space-y-2"
+              data-testid={`section-field-changes-${log.id}`}
+            >
+              {(() => {
+                const entries = Object.entries(log.changes || {}) as Array<[string, any]>;
+                return entries.map(([field, change]) => (
+                  <div
+                    key={`${log.id}-${field}`}
+                    className="space-y-1 text-sm"
+                    data-testid={`field-change-${log.id}-${field}`}
+                  >
+                    <div className="font-medium text-foreground">
+                      {field.replace(/_/g, " ")}
+                    </div>
+                    <div className="grid grid-cols-2 gap-2 text-xs">
+                      <div data-testid={`old-value-${log.id}-${field}`}>
+                        <span className="text-muted-foreground">From: </span>
+                        <span className="text-foreground font-mono">
+                          {typeof change.old === "object"
+                            ? JSON.stringify(change.old)
+                            : String(change.old || "-")}
+                        </span>
+                      </div>
+                      <div data-testid={`new-value-${log.id}-${field}`}>
+                        <span className="text-muted-foreground">To: </span>
+                        <span className="text-foreground font-mono">
+                          {typeof change.new === "object"
+                            ? JSON.stringify(change.new)
+                            : String(change.new || "-")}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ));
+              })()}
+            </CollapsibleContent>
+          </Collapsible>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg flex flex-col" data-testid="drawer-history">
+        <SheetHeader data-testid="header-history">
+          <SheetTitle data-testid="title-history">
+            {entityName || "Entity"} - History
+          </SheetTitle>
+        </SheetHeader>
+
+        <ScrollArea className="flex-1 -mx-6 px-6" data-testid="list-history-logs">
+          <div className="flex flex-col gap-4 pb-6">
+            {isLoading ? (
+              <div className="space-y-3" data-testid="skeleton-history-loading">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <Card key={`skeleton-${i}`}>
+                    <CardContent className="pt-6 pb-4 space-y-3">
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1 space-y-2">
+                          <Skeleton className="h-4 w-24" />
+                          <Skeleton className="h-3 w-32" />
+                        </div>
+                        <Skeleton className="h-6 w-20" />
+                      </div>
+                      <Skeleton className="h-3 w-40" />
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ) : logs.length === 0 ? (
+              <Card data-testid="empty-history-state">
+                <CardContent className="pt-6 pb-4 text-center text-muted-foreground">
+                  No history available
+                </CardContent>
+              </Card>
+            ) : hierarchical ? (
+              <div className="space-y-4">
+                {entityOrder.map((type) => {
+                  const typeLogs = groupedLogs[type];
+                  if (typeLogs.length === 0) return null;
+
+                  return (
+                    <Collapsible
+                      key={type}
+                      open={expandedSections.has(type)}
+                      onOpenChange={() => toggleSection(type)}
+                      data-testid={`section-${type}-changes`}
+                    >
+                      <CollapsibleTrigger
+                        className="flex items-center gap-2 w-full py-2 px-3 bg-muted/50 rounded-md hover-elevate"
+                        data-testid={`button-toggle-${type}-section`}
+                      >
+                        {expandedSections.has(type) ? (
+                          <ChevronDown className="h-4 w-4" />
+                        ) : (
+                          <ChevronRight className="h-4 w-4" />
+                        )}
+                        <span className="font-medium">
+                          {ENTITY_TYPE_LABELS[type]} Changes
+                        </span>
+                        <Badge variant="secondary" className="ml-auto">
+                          {typeLogs.length}
+                        </Badge>
+                      </CollapsibleTrigger>
+
+                      <CollapsibleContent className="mt-2 space-y-2">
+                        {typeLogs.map(renderLogItem)}
+                      </CollapsibleContent>
+                    </Collapsible>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {logs.map(renderLogItem)}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,176 @@
+import { useMemo } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Calendar, Eye, CheckCircle, Clock, AlertTriangle, XCircle, Wrench } from "lucide-react";
+
+export type AvailabilityStatus = "available" | "booked" | "hold" | "maintenance" | "pending" | "unavailable";
+
+export interface ScreenAvailability {
+  screenId: string;
+  status: AvailabilityStatus;
+  bookedBy?: string;
+  bookedUntil?: string;
+}
+
+interface InventoryAvailabilitySectionProps {
+  selectedScreenIds: string[];
+  startDate?: string;
+  endDate?: string;
+  onViewDetails: () => void;
+}
+
+const STATUS_CONFIG: Record<AvailabilityStatus, { label: string; color: string; icon: typeof CheckCircle }> = {
+  available: { label: "Available", color: "bg-green-500", icon: CheckCircle },
+  booked: { label: "Booked", color: "bg-red-500", icon: XCircle },
+  hold: { label: "Hold", color: "bg-amber-500", icon: Clock },
+  maintenance: { label: "Maintenance", color: "bg-gray-500", icon: Wrench },
+  pending: { label: "Pending", color: "bg-blue-500", icon: Clock },
+  unavailable: { label: "Unavailable", color: "bg-gray-400", icon: AlertTriangle },
+};
+
+function seededRandom(seed: string): number {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    const char = seed.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash % 100) / 100;
+}
+
+function generateMockAvailability(screenIds: string[]): ScreenAvailability[] {
+  const advertisers = ["BMW", "Apple", "Nike", "Samsung", "Coca-Cola", "Netflix", "Microsoft", "Tudor"];
+  return screenIds.map((screenId, index) => {
+    const rand = seededRandom(screenId);
+    let status: AvailabilityStatus;
+    if (rand < 0.6) status = "available";
+    else if (rand < 0.75) status = "booked";
+    else if (rand < 0.85) status = "hold";
+    else if (rand < 0.92) status = "pending";
+    else if (rand < 0.96) status = "maintenance";
+    else status = "unavailable";
+
+    return {
+      screenId,
+      status,
+      bookedBy: status === "booked" ? advertisers[index % advertisers.length] : undefined,
+      bookedUntil: status === "booked" ? "2026-03-15" : undefined,
+    };
+  });
+}
+
+export function InventoryAvailabilitySection({
+  selectedScreenIds,
+  startDate,
+  endDate,
+  onViewDetails,
+}: InventoryAvailabilitySectionProps) {
+  const availability = useMemo(() => {
+    return generateMockAvailability(selectedScreenIds);
+  }, [selectedScreenIds]);
+
+  const statusCounts = useMemo(() => {
+    const counts: Record<AvailabilityStatus, number> = {
+      available: 0,
+      booked: 0,
+      hold: 0,
+      maintenance: 0,
+      pending: 0,
+      unavailable: 0,
+    };
+    availability.forEach((a) => {
+      counts[a.status]++;
+    });
+    return counts;
+  }, [availability]);
+
+  const totalScreens = selectedScreenIds.length;
+  const availableCount = statusCounts.available;
+  const availabilityPercent = totalScreens > 0 ? Math.round((availableCount / totalScreens) * 100) : 0;
+
+  if (totalScreens === 0) {
+    return null;
+  }
+
+  return (
+    <Card data-testid="section-inventory-availability">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+            Inventory Availability
+          </CardTitle>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onViewDetails}
+            data-testid="button-view-availability-details"
+          >
+            <Eye className="h-4 w-4 mr-1" />
+            View Details
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0 space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <div className="text-2xl font-semibold" data-testid="text-availability-percent">
+              {availabilityPercent}%
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {availableCount} of {totalScreens} screens available
+              {startDate && endDate && (
+                <span className="ml-1">for selected dates</span>
+              )}
+            </div>
+          </div>
+          <div className="h-16 w-16 relative">
+            <svg viewBox="0 0 36 36" className="h-16 w-16 transform -rotate-90">
+              <path
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                className="text-muted"
+              />
+              <path
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeDasharray={`${availabilityPercent}, 100`}
+                className="text-green-500"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {Object.entries(statusCounts).map(([status, count]) => {
+            if (count === 0) return null;
+            const config = STATUS_CONFIG[status as AvailabilityStatus];
+            return (
+              <Badge
+                key={status}
+                variant="secondary"
+                className="text-xs"
+                data-testid={`badge-status-${status}`}
+              >
+                <span className={`w-2 h-2 rounded-full mr-1.5 ${config.color}`} />
+                {config.label}: {count}
+              </Badge>
+            );
+          })}
+        </div>
+
+        {statusCounts.booked > 0 && (
+          <div className="text-xs text-muted-foreground border-t pt-3">
+            <span className="font-medium text-amber-600">{statusCounts.booked} screen{statusCounts.booked !== 1 ? 's' : ''}</span>
+            {" "}currently booked. Consider adjusting dates or selecting alternatives.
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}