adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/venue-type-selector.tsx

@@ -0,0 +1,436 @@
+import { useState, useMemo, useCallback } from "react";
+import { ChevronRight, ChevronDown, Search, X, Building2, Train, ShoppingBag, TreeDeciduous, Film, Heart, Stethoscope, Briefcase, GraduationCap } from "lucide-react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { VENUE_TAXONOMY, VenueTypeNode } from "@shared/schema";
+
+interface VenueTypeSelectorProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const CATEGORY_ICONS: Record<string, typeof Building2> = {
+  transit: Train,
+  retail: ShoppingBag,
+  outdoor: TreeDeciduous,
+  entertainment: Film,
+  health_beauty: Heart,
+  point_of_care: Stethoscope,
+  office: Briefcase,
+  education: GraduationCap,
+};
+
+const COLOR_CLASSES = {
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  pink: "bg-pink-500",
+};
+
+const LEVEL_BADGES = {
+  category: { label: "Category", className: "bg-muted text-muted-foreground" },
+  sub: { label: "Sub", className: "bg-muted text-muted-foreground" },
+  product: { label: "Product", className: "bg-primary text-primary-foreground" },
+};
+
+function getAllDescendantIds(node: VenueTypeNode): string[] {
+  const ids: string[] = [node.id];
+  if (node.children) {
+    for (const child of node.children) {
+      ids.push(...getAllDescendantIds(child));
+    }
+  }
+  return ids;
+}
+
+function findNodeById(nodes: VenueTypeNode[], id: string): VenueTypeNode | null {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    if (node.children) {
+      const found = findNodeById(node.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+function getNodePath(nodes: VenueTypeNode[], targetId: string, path: VenueTypeNode[] = []): VenueTypeNode[] | null {
+  for (const node of nodes) {
+    const newPath = [...path, node];
+    if (node.id === targetId) return newPath;
+    if (node.children) {
+      const found = getNodePath(node.children, targetId, newPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+function matchesSearch(node: VenueTypeNode, query: string): boolean {
+  const lowerQuery = query.toLowerCase();
+  if (node.label.toLowerCase().includes(lowerQuery)) return true;
+  if (node.description?.toLowerCase().includes(lowerQuery)) return true;
+  if (node.children) {
+    return node.children.some(child => matchesSearch(child, query));
+  }
+  return false;
+}
+
+interface TreeNodeProps {
+  node: VenueTypeNode;
+  selectedIds: Set<string>;
+  expandedIds: Set<string>;
+  onToggleExpand: (id: string) => void;
+  onToggleSelect: (node: VenueTypeNode) => void;
+  depth: number;
+  searchQuery: string;
+}
+
+function TreeNode({ node, selectedIds, expandedIds, onToggleExpand, onToggleSelect, depth, searchQuery }: TreeNodeProps) {
+  const hasChildren = node.children && node.children.length > 0;
+  const isExpanded = expandedIds.has(node.id);
+  const isSelected = selectedIds.has(node.id);
+  const Icon = depth === 0 ? CATEGORY_ICONS[node.id] || Building2 : null;
+
+  if (searchQuery && !matchesSearch(node, searchQuery)) {
+    return null;
+  }
+
+  const visibleChildren = hasChildren && (isExpanded || searchQuery);
+
+  return (
+    <div>
+      <div
+        className={`flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover-elevate ${isSelected ? "bg-primary/10" : ""}`}
+        style={{ paddingLeft: `${depth * 20 + 8}px` }}
+        onClick={() => onToggleSelect(node)}
+        data-testid={`venue-node-${node.id}`}
+      >
+        {hasChildren ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleExpand(node.id);
+            }}
+            className="p-0.5 hover:bg-muted rounded"
+            data-testid={`venue-expand-${node.id}`}
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
+        ) : (
+          <div className="w-5" />
+        )}
+
+        <div className={`w-2.5 h-2.5 rounded-full ${COLOR_CLASSES[node.color]}`} />
+
+        {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+
+        <div className="flex-1 min-w-0">
+          <div className="font-medium text-sm">{node.label}</div>
+          {node.description && depth === 0 && (
+            <div className="text-xs text-muted-foreground">{node.description}</div>
+          )}
+        </div>
+
+        {isSelected && (
+          <span className="text-xs text-primary font-medium flex items-center gap-1">
+            <span className="w-1.5 h-1.5 rounded-full bg-primary" />
+            Selected
+          </span>
+        )}
+
+        <Badge variant="secondary" className={LEVEL_BADGES[node.level].className}>
+          {LEVEL_BADGES[node.level].label}
+        </Badge>
+      </div>
+
+      {visibleChildren && node.children && (
+        <div>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.id}
+              node={child}
+              selectedIds={selectedIds}
+              expandedIds={expandedIds}
+              onToggleExpand={onToggleExpand}
+              onToggleSelect={onToggleSelect}
+              depth={depth + 1}
+              searchQuery={searchQuery}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SelectedItemDisplayProps {
+  node: VenueTypeNode;
+  path: VenueTypeNode[];
+  onRemove: (id: string) => void;
+}
+
+function SelectedItemDisplay({ node, path, onRemove }: SelectedItemDisplayProps) {
+  const Icon = CATEGORY_ICONS[path[0]?.id] || Building2;
+
+  return (
+    <div className="border rounded-lg p-3 mb-2">
+      <div className="flex items-start gap-2">
+        <div className={`w-2.5 h-2.5 rounded-full mt-1.5 ${COLOR_CLASSES[node.color]}`} />
+        {node.level === "category" && <Icon className="h-4 w-4 text-muted-foreground mt-1" />}
+        <div className="flex-1 min-w-0">
+          {node.level === "category" ? (
+            <div className="font-medium">{node.label}</div>
+          ) : (
+            <div>
+              {path.length > 1 && (
+                <div className="flex items-center gap-1 text-muted-foreground text-xs mb-1">
+                  {path.slice(0, -1).map((p, i) => (
+                    <span key={p.id} className="flex items-center gap-1">
+                      <span className={`w-1.5 h-1.5 rounded-full ${COLOR_CLASSES[p.color]}`} />
+                      {p.label}
+                      {i < path.length - 2 && <span className="mx-1">/</span>}
+                    </span>
+                  ))}
+                </div>
+              )}
+              <div className="font-medium">{node.label}</div>
+            </div>
+          )}
+          <div className="text-xs text-muted-foreground mt-0.5">
+            Level {path.length} - {node.level.charAt(0).toUpperCase() + node.level.slice(1)}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={() => onRemove(node.id)}
+          className="text-muted-foreground hover:text-destructive p-1"
+          data-testid={`remove-venue-${node.id}`}
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function VenueTypeSelector({ value, onChange, open, onOpenChange }: VenueTypeSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  const selectedIds = useMemo(() => new Set(value), [value]);
+
+  const handleToggleExpand = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleToggleSelect = useCallback((node: VenueTypeNode) => {
+    const descendantIds = getAllDescendantIds(node);
+    
+    if (selectedIds.has(node.id)) {
+      const filtered = value.filter(id => !descendantIds.includes(id));
+      onChange(filtered);
+    } else {
+      const toRemove = new Set<string>();
+      for (const id of value) {
+        if (descendantIds.includes(id)) {
+          toRemove.add(id);
+        }
+      }
+      const path = getNodePath(VENUE_TAXONOMY, node.id);
+      if (path) {
+        for (const ancestor of path.slice(0, -1)) {
+          toRemove.add(ancestor.id);
+        }
+      }
+      const filtered = value.filter(id => !toRemove.has(id));
+      filtered.push(node.id);
+      onChange(filtered);
+    }
+  }, [value, selectedIds, onChange]);
+
+  const handleRemove = useCallback((id: string) => {
+    onChange(value.filter(v => v !== id));
+  }, [value, onChange]);
+
+  const handleClearAll = useCallback(() => {
+    onChange([]);
+  }, [onChange]);
+
+  const selectedNodes = useMemo(() => {
+    return value.map(id => {
+      const node = findNodeById(VENUE_TAXONOMY, id);
+      const path = getNodePath(VENUE_TAXONOMY, id);
+      return { node, path };
+    }).filter((item): item is { node: VenueTypeNode; path: VenueTypeNode[] } => 
+      item.node !== null && item.path !== null
+    );
+  }, [value]);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[600px] sm:max-w-[600px] flex flex-col p-0">
+        <SheetHeader className="px-6 py-4 border-b">
+          <SheetTitle>Select Venue Types</SheetTitle>
+          <SheetDescription>
+            Choose from OpenOOH venue taxonomy standards
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <div className="p-3 border-b">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search venue types..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+                data-testid="input-venue-search"
+              />
+            </div>
+          </div>
+          
+          <ScrollArea className="flex-1">
+            <div className="p-2">
+              {VENUE_TAXONOMY.map((node) => (
+                <TreeNode
+                  key={node.id}
+                  node={node}
+                  selectedIds={selectedIds}
+                  expandedIds={expandedIds}
+                  onToggleExpand={handleToggleExpand}
+                  onToggleSelect={handleToggleSelect}
+                  depth={0}
+                  searchQuery={searchQuery}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+
+          {value.length > 0 && (
+            <div className="border-t bg-muted/30">
+              <div className="p-3 border-b">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold text-sm">Selected Venues</h3>
+                    <p className="text-xs text-muted-foreground">{value.length} selections</p>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                    onClick={handleClearAll}
+                    data-testid="button-clear-all-venues"
+                  >
+                    Clear All
+                  </Button>
+                </div>
+              </div>
+              <ScrollArea className="max-h-48 p-3">
+                {selectedNodes.map(({ node, path }) => (
+                  <SelectedItemDisplay
+                    key={node.id}
+                    node={node}
+                    path={path}
+                    onRemove={handleRemove}
+                  />
+                ))}
+              </ScrollArea>
+            </div>
+          )}
+        </div>
+
+        <div className="px-6 py-4 border-t flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">
+            {value.length} venue type(s) selected
+          </span>
+          <Button onClick={() => onOpenChange(false)} data-testid="button-venue-done">
+            Done
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+interface VenueTypeTriggerProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+}
+
+export function VenueTypeTrigger({ value, onChange }: VenueTypeTriggerProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedLabels = useMemo(() => {
+    return value.map(id => {
+      const node = findNodeById(VENUE_TAXONOMY, id);
+      return node?.label ?? id;
+    });
+  }, [value]);
+
+  const handleRemove = (id: string) => {
+    onChange(value.filter(v => v !== id));
+  };
+
+  return (
+    <div>
+      <div
+        className="min-h-10 border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
+        onClick={() => setOpen(true)}
+        data-testid="trigger-venue-types"
+      >
+        {value.length === 0 ? (
+          <span className="text-muted-foreground text-sm">Select venue types...</span>
+        ) : (
+          <div className="flex flex-wrap gap-1.5">
+            {value.slice(0, 5).map((id) => {
+              const node = findNodeById(VENUE_TAXONOMY, id);
+              return (
+                <Badge
+                  key={id}
+                  variant="secondary"
+                  className="cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleRemove(id);
+                  }}
+                  data-testid={`badge-venue-${id}`}
+                >
+                  {node?.label ?? id}
+                  <X className="h-3 w-3 ml-1" />
+                </Badge>
+              );
+            })}
+            {value.length > 5 && (
+              <Badge variant="outline">+{value.length - 5} more</Badge>
+            )}
+          </div>
+        )}
+      </div>
+      <VenueTypeSelector
+        value={value}
+        onChange={onChange}
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </div>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/Influence-MW-AdServer-12-02-2026/client/src/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }