adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/signals.tsx

@@ -0,0 +1,366 @@
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Link } from "wouter";
+import { PageHeader } from "@/components/page-header";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { DataTable } from "@/components/data-table";
+import { FilterDrawer, FilterField, FilterValues } from "@/components/filter-drawer";
+import { Plus, Pencil, Trash2, Search, Filter } from "lucide-react";
+import { queryClient, apiRequest } from "@/lib/queryClient";
+import { useToast } from "@/hooks/use-toast";
+import type { Signal, SignalRule } from "@shared/schema";
+import { SIGNAL_TYPES } from "@shared/schema";
+
+const STATUS_OPTIONS = [
+  { value: "active", label: "Active" },
+  { value: "inactive", label: "Inactive" },
+];
+
+const TYPE_OPTIONS = SIGNAL_TYPES.map((t) => ({ value: t.value, label: t.label }));
+
+const initialFilterValues: FilterValues = {
+  status: [],
+  signalType: [],
+};
+
+function getTypeLabel(type: string): string {
+  const found = SIGNAL_TYPES.find((t) => t.value === type);
+  return found ? found.label : type;
+}
+
+function getTypeColor(type: string): string {
+  switch (type) {
+    case "weather":
+      return "bg-blue-500 hover:bg-blue-500";
+    case "audiences":
+      return "bg-purple-500 hover:bg-purple-500";
+    case "footfall":
+      return "bg-green-500 hover:bg-green-500";
+    case "search":
+      return "bg-orange-500 hover:bg-orange-500";
+    default:
+      return "";
+  }
+}
+
+export default function Signals() {
+  const { toast } = useToast();
+  const [deleteSignalId, setDeleteSignalId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState<string>("name");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [filterValues, setFilterValues] = useState<FilterValues>(initialFilterValues);
+  const [appliedFilters, setAppliedFilters] = useState<FilterValues>(initialFilterValues);
+
+  const { data: signals = [], isLoading } = useQuery<Signal[]>({
+    queryKey: ["/api/signals"],
+  });
+
+  const { data: rulesMap = {} } = useQuery<Record<string, SignalRule[]>>({
+    queryKey: ["/api/signals/rules-map"],
+    queryFn: async () => {
+      const map: Record<string, SignalRule[]> = {};
+      for (const signal of signals) {
+        try {
+          const res = await fetch(`/api/signals/${signal.id}/rules`);
+          if (res.ok) {
+            map[signal.id] = await res.json();
+          }
+        } catch {
+          map[signal.id] = [];
+        }
+      }
+      return map;
+    },
+    enabled: signals.length > 0,
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("DELETE", `/api/signals/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/signals"] });
+      toast({ title: "Signal deleted successfully" });
+      setDeleteSignalId(null);
+    },
+    onError: () => {
+      toast({ title: "Failed to delete signal", variant: "destructive" });
+    },
+  });
+
+  const handleDelete = () => {
+    if (deleteSignalId) {
+      deleteMutation.mutate(deleteSignalId);
+    }
+  };
+
+  const handleApplyFilters = () => {
+    setAppliedFilters(filterValues);
+    setFilterOpen(false);
+  };
+
+  const handleClearFilters = () => {
+    setFilterValues(initialFilterValues);
+    setAppliedFilters(initialFilterValues);
+    setFilterOpen(false);
+  };
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    const statuses = appliedFilters.status as string[];
+    const types = appliedFilters.signalType as string[];
+    if (statuses?.length > 0) count++;
+    if (types?.length > 0) count++;
+    return count;
+  }, [appliedFilters]);
+
+  const handleSort = (key: string) => {
+    if (sortBy === key) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortOrder("asc");
+    }
+  };
+
+  const filterFields: FilterField[] = [
+    {
+      key: "status",
+      label: "Status",
+      type: "multi-select",
+      options: STATUS_OPTIONS,
+    },
+    {
+      key: "signalType",
+      label: "Type",
+      type: "multi-select",
+      options: TYPE_OPTIONS,
+    },
+  ];
+
+  const filteredSignals = useMemo(() => {
+    let result = signals || [];
+
+    if (searchQuery) {
+      result = result.filter((signal) =>
+        signal.name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    const statuses = appliedFilters.status as string[];
+    if (statuses?.length > 0) {
+      result = result.filter((signal) => statuses.includes(signal.status));
+    }
+
+    const types = appliedFilters.signalType as string[];
+    if (types?.length > 0) {
+      result = result.filter((signal) => types.includes(signal.signalType));
+    }
+
+    result = [...result].sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case "name":
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case "status":
+          comparison = a.status.localeCompare(b.status);
+          break;
+        case "signalType":
+          comparison = a.signalType.localeCompare(b.signalType);
+          break;
+        default:
+          comparison = 0;
+      }
+      return sortOrder === "asc" ? comparison : -comparison;
+    });
+
+    return result;
+  }, [signals, searchQuery, appliedFilters, sortBy, sortOrder]);
+
+  const columns = [
+    {
+      key: "name",
+      header: "Name",
+      sortable: true,
+      render: (signal: Signal) => (
+        <span className="font-medium">{signal.name}</span>
+      ),
+    },
+    {
+      key: "signalType",
+      header: "Type",
+      sortable: true,
+      render: (signal: Signal) => (
+        <Badge className={getTypeColor(signal.signalType)} data-testid={`badge-type-${signal.id}`}>
+          {getTypeLabel(signal.signalType)}
+        </Badge>
+      ),
+    },
+    {
+      key: "status",
+      header: "Status",
+      sortable: true,
+      render: (signal: Signal) => (
+        <Badge
+          variant={signal.status === "active" ? "default" : "secondary"}
+          className={signal.status === "active" ? "bg-green-500 hover:bg-green-500" : ""}
+          data-testid={`badge-status-${signal.id}`}
+        >
+          {signal.status === "active" ? "Active" : "Inactive"}
+        </Badge>
+      ),
+    },
+    {
+      key: "rules",
+      header: "Rules",
+      sortable: false,
+      render: (signal: Signal) => (
+        <span>{rulesMap[signal.id]?.length ?? 0} rule{(rulesMap[signal.id]?.length ?? 0) !== 1 ? "s" : ""}</span>
+      ),
+    },
+    {
+      key: "actions",
+      header: "",
+      sortable: false,
+      className: "text-right w-24",
+      render: (signal: Signal) => (
+        <div className="flex items-center justify-end gap-2">
+          <Link href={`/signals/${signal.id}/edit`}>
+            <Button size="icon" variant="ghost" data-testid={`button-edit-${signal.id}`}>
+              <Pencil className="h-4 w-4" />
+            </Button>
+          </Link>
+          <Button
+            size="icon"
+            variant="ghost"
+            onClick={() => setDeleteSignalId(signal.id)}
+            data-testid={`button-delete-${signal.id}`}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="p-6 space-y-6">
+      <PageHeader
+        title="Signals"
+        description="Manage conditional signals for line item automation"
+        actions={
+          <Link href="/signals/create">
+            <Button data-testid="button-create-signal">
+              <Plus className="h-4 w-4 mr-2" />
+              Create Signal
+            </Button>
+          </Link>
+        }
+      />
+
+      <div className="flex items-center gap-3 mb-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search signals..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 bg-white dark:bg-background border"
+            data-testid="input-search"
+          />
+        </div>
+        <Button
+          variant="outline"
+          onClick={() => setFilterOpen(true)}
+          className="bg-white dark:bg-background"
+          data-testid="button-open-filters"
+        >
+          <Filter className="h-4 w-4 mr-2" />
+          Filters
+          {activeFilterCount > 0 && (
+            <Badge variant="secondary" className="ml-2">{activeFilterCount}</Badge>
+          )}
+        </Button>
+      </div>
+
+      <Card>
+        <CardContent className="pt-6">
+          {filteredSignals.length === 0 && !isLoading && signals.length > 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">No signals match your filters</p>
+              <Button
+                variant="ghost"
+                className="text-primary"
+                onClick={() => {
+                  setSearchQuery("");
+                  setAppliedFilters(initialFilterValues);
+                }}
+                data-testid="button-clear-all-filters"
+              >
+                Clear all filters
+              </Button>
+            </div>
+          ) : (
+            <DataTable
+              columns={columns}
+              data={filteredSignals}
+              isLoading={isLoading}
+              emptyMessage="No signals found. Create your first signal to get started."
+              sortKey={sortBy}
+              sortOrder={sortOrder}
+              onSort={handleSort}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      <FilterDrawer
+        open={filterOpen}
+        onOpenChange={setFilterOpen}
+        fields={filterFields}
+        values={filterValues}
+        onChange={setFilterValues}
+        onApply={handleApplyFilters}
+        onClear={handleClearFilters}
+        title="Filter Signals"
+      />
+
+      <AlertDialog open={!!deleteSignalId} onOpenChange={(open) => !open && setDeleteSignalId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Signal</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this signal? This action cannot be undone and will remove all associated rules.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel data-testid="button-cancel-delete">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              data-testid="button-confirm-delete"
+            >
+              {deleteMutation.isPending ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/pages/tags.tsx

@@ -0,0 +1,332 @@
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { PageHeader } from "@/components/page-header";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tag,
+  Plus,
+  Search,
+  MoreHorizontal,
+  Trash2,
+  Edit,
+  Link2,
+  Palette,
+} from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+interface TagItem {
+  id: string;
+  name: string;
+  color: string;
+  description: string;
+  usageCount: {
+    deals: number;
+    creatives: number;
+    lineItems: number;
+  };
+  createdAt: string;
+  createdBy: string;
+}
+
+const mockTags: TagItem[] = [
+  {
+    id: "tag-1",
+    name: "Premium",
+    color: "#3B82F6",
+    description: "High-value premium campaigns and creatives",
+    usageCount: { deals: 12, creatives: 45, lineItems: 28 },
+    createdAt: "2025-01-15",
+    createdBy: "John Doe",
+  },
+  {
+    id: "tag-2",
+    name: "Automotive",
+    color: "#EF4444",
+    description: "Automotive industry campaigns",
+    usageCount: { deals: 8, creatives: 22, lineItems: 15 },
+    createdAt: "2025-01-10",
+    createdBy: "Jane Smith",
+  },
+  {
+    id: "tag-3",
+    name: "Q1 2025",
+    color: "#10B981",
+    description: "Campaigns running in Q1 2025",
+    usageCount: { deals: 25, creatives: 78, lineItems: 52 },
+    createdAt: "2025-01-01",
+    createdBy: "Mike Johnson",
+  },
+  {
+    id: "tag-4",
+    name: "Retail",
+    color: "#F59E0B",
+    description: "Retail sector campaigns",
+    usageCount: { deals: 18, creatives: 56, lineItems: 34 },
+    createdAt: "2024-12-20",
+    createdBy: "Sarah Wilson",
+  },
+  {
+    id: "tag-5",
+    name: "Airport",
+    color: "#8B5CF6",
+    description: "Airport and travel-related campaigns",
+    usageCount: { deals: 6, creatives: 18, lineItems: 12 },
+    createdAt: "2024-12-15",
+    createdBy: "John Doe",
+  },
+];
+
+const colorPresets = [
+  "#3B82F6",
+  "#EF4444",
+  "#10B981",
+  "#F59E0B",
+  "#8B5CF6",
+  "#EC4899",
+  "#06B6D4",
+  "#84CC16",
+];
+
+export default function Tags() {
+  const { toast } = useToast();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [tags] = useState<TagItem[]>(mockTags);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [selectedColor, setSelectedColor] = useState(colorPresets[0]);
+
+  const filteredTags = tags.filter(
+    (tag) =>
+      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      tag.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleCreate = () => {
+    setShowCreateDialog(false);
+    toast({
+      title: "Tag created",
+      description: "Your tag has been created and synced to Admin Console.",
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader
+        title="Tags"
+        description="Create and manage tags for organizing your deals and creatives across platforms"
+        actions={
+          <Button onClick={() => setShowCreateDialog(true)} data-testid="button-create-tag">
+            <Plus className="h-4 w-4 mr-2" />
+            Create Tag
+          </Button>
+        }
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Tag className="h-5 w-5" />
+            Tag Library
+          </CardTitle>
+          <CardDescription>
+            Tags are stored in Admin Console and shared across all Moving Walls platforms (Influence, Planner, Measure, etc.)
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4 mb-6">
+            <div className="relative flex-1 max-w-md">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="Search tags..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+                data-testid="input-search-tags"
+              />
+            </div>
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Tag</TableHead>
+                <TableHead>Description</TableHead>
+                <TableHead>Usage</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead className="w-[50px]"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredTags.map((tag) => (
+                <TableRow key={tag.id} data-testid={`row-tag-${tag.id}`}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: tag.color }}
+                      />
+                      <Badge
+                        variant="outline"
+                        style={{
+                          borderColor: tag.color,
+                          color: tag.color,
+                        }}
+                      >
+                        {tag.name}
+                      </Badge>
+                    </div>
+                  </TableCell>
+                  <TableCell className="max-w-xs">
+                    <p className="text-sm text-muted-foreground truncate">
+                      {tag.description}
+                    </p>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-3 text-xs text-muted-foreground">
+                      <span>{tag.usageCount.deals} deals</span>
+                      <span>{tag.usageCount.creatives} creatives</span>
+                      <span>{tag.usageCount.lineItems} line items</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="text-sm">
+                      <div>{tag.createdAt}</div>
+                      <div className="text-muted-foreground text-xs">{tag.createdBy}</div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          data-testid={`button-actions-${tag.id}`}
+                        >
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem data-testid={`action-edit-${tag.id}`}>
+                          <Edit className="h-4 w-4 mr-2" />
+                          Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuItem data-testid={`action-view-usage-${tag.id}`}>
+                          <Link2 className="h-4 w-4 mr-2" />
+                          View Usage
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-destructive"
+                          data-testid={`action-delete-${tag.id}`}
+                        >
+                          <Trash2 className="h-4 w-4 mr-2" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          {filteredTags.length === 0 && (
+            <div className="text-center py-12 text-muted-foreground">
+              <Tag className="h-12 w-12 mx-auto mb-4 opacity-50" />
+              <p>No tags found matching your search.</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Tag</DialogTitle>
+            <DialogDescription>
+              Create a new tag that will be synced to Admin Console and available across all platforms.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="tag-name">Tag Name</Label>
+              <Input id="tag-name" placeholder="Enter tag name" data-testid="input-tag-name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="tag-description">Description</Label>
+              <Textarea
+                id="tag-description"
+                placeholder="Describe the purpose of this tag"
+                data-testid="input-tag-description"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Color</Label>
+              <div className="flex items-center gap-2">
+                {colorPresets.map((color) => (
+                  <button
+                    key={color}
+                    type="button"
+                    className={`w-8 h-8 rounded-full border-2 transition-all ${
+                      selectedColor === color
+                        ? "border-foreground scale-110"
+                        : "border-transparent"
+                    }`}
+                    style={{ backgroundColor: color }}
+                    onClick={() => setSelectedColor(color)}
+                    data-testid={`color-preset-${color.replace("#", "")}`}
+                  />
+                ))}
+                <div className="flex items-center gap-2 ml-2">
+                  <Palette className="h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="color"
+                    value={selectedColor}
+                    onChange={(e) => setSelectedColor(e.target.value)}
+                    className="w-12 h-8 p-0 border-0"
+                    data-testid="input-custom-color"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="text-xs text-muted-foreground bg-muted p-3 rounded-md">
+              Tags are stored in Admin Console and will be available across all Moving Walls platforms including Influence, Planner, and Measure.
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowCreateDialog(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreate} data-testid="button-confirm-create-tag">
+              Create Tag
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}