adserver-dashboard 1.0.0

package/client/src/components/ui/hierarchical-venue-selector.tsx

@@ -0,0 +1,389 @@
+import { useState, useMemo, useRef, useEffect, forwardRef } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { ChevronRight, ChevronDown, Search, X, Minus } from "lucide-react";
+import { Input, cn } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+
+interface VenueTaxonomy {
+  taxonomyId: string;
+  version: string;
+  name: string;
+  path: string;
+  parentId?: string;
+  parentName?: string;
+}
+
+interface TreeNode {
+  id: string;
+  name: string;
+  description?: string;
+  parentId?: string;
+  children: TreeNode[];
+}
+
+interface HierarchicalVenueSelectorProps {
+  venues: VenueTaxonomy[];
+  selectedIds: string[];
+  onChange: (selectedIds: string[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  label?: string;
+}
+
+const VENUE_DESCRIPTION_KEYS: Record<string, string> = {
+  "Transit": "venueSelector.transit",
+  "Retail": "venueSelector.retail",
+  "Outdoor": "venueSelector.outdoor",
+  "Accommodation": "venueSelector.accommodation",
+  "Education": "venueSelector.education",
+  "Entertainment": "venueSelector.entertainment",
+  "Health": "venueSelector.health",
+  "Office": "venueSelector.office",
+  "Residential": "venueSelector.residential",
+  "Government": "venueSelector.government",
+};
+
+interface TreeCheckboxProps {
+  checked: boolean;
+  indeterminate?: boolean;
+  onChange: () => void;
+  className?: string;
+}
+
+function TreeCheckbox({ checked, indeterminate, onChange, className }: TreeCheckboxProps) {
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange();
+      }}
+      className={cn(
+        "h-4 w-4 rounded border flex items-center justify-center flex-shrink-0 transition-colors",
+        checked || indeterminate
+          ? "bg-mw-primary-500 border-mw-primary-500"
+          : "border-mw-neutral-300 dark:border-mw-neutral-600 bg-white dark:bg-mw-neutral-800",
+        className
+      )}
+    >
+      {checked && !indeterminate && (
+        <svg className="h-3 w-3 text-white" viewBox="0 0 12 12" fill="none">
+          <path d="M2 6L5 9L10 3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      )}
+      {indeterminate && (
+        <Minus className="h-3 w-3 text-white" strokeWidth={3} />
+      )}
+    </button>
+  );
+}
+
+function buildTree(venues: VenueTaxonomy[], t: (key: string) => string): TreeNode[] {
+  const nodeMap = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  venues.forEach(venue => {
+    const descKey = VENUE_DESCRIPTION_KEYS[venue.name];
+    nodeMap.set(venue.taxonomyId, {
+      id: venue.taxonomyId,
+      name: venue.name,
+      parentId: venue.parentId,
+      description: descKey ? t(descKey) : undefined,
+      children: [],
+    });
+  });
+
+  venues.forEach(venue => {
+    const node = nodeMap.get(venue.taxonomyId)!;
+    if (venue.parentId && nodeMap.has(venue.parentId)) {
+      const parent = nodeMap.get(venue.parentId)!;
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+
+  return roots;
+}
+
+function getAllDescendantIds(node: TreeNode): string[] {
+  const ids: string[] = [];
+  node.children.forEach(child => {
+    ids.push(child.id);
+    ids.push(...getAllDescendantIds(child));
+  });
+  return ids;
+}
+
+function TreeNodeItem({
+  node,
+  selectedIds,
+  onToggle,
+  onToggleWithChildren,
+  searchQuery,
+  level = 0,
+}: {
+  node: TreeNode;
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+  onToggleWithChildren: (id: string, childIds: string[], isSelected: boolean) => void;
+  searchQuery: string;
+  level?: number;
+}) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const hasChildren = node.children.length > 0;
+  const isSelected = selectedIds.includes(node.id);
+
+  const allChildIds = getAllDescendantIds(node);
+  const selectedChildCount = allChildIds.filter(id => selectedIds.includes(id)).length;
+  const isIndeterminate = hasChildren && selectedChildCount > 0 && selectedChildCount < allChildIds.length;
+  const allChildrenSelected = hasChildren && allChildIds.length > 0 && selectedChildCount === allChildIds.length;
+
+  const matchesSearch = !searchQuery || 
+    node.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+  const hasMatchingDescendants = (n: TreeNode): boolean => {
+    if (n.name.toLowerCase().includes(searchQuery?.toLowerCase() || '')) {
+      return true;
+    }
+    return n.children.some(hasMatchingDescendants);
+  };
+
+  if (searchQuery && !matchesSearch && !hasMatchingDescendants(node)) {
+    return null;
+  }
+
+  const handleCheckboxChange = () => {
+    if (hasChildren) {
+      const shouldSelect = !isSelected && !allChildrenSelected;
+      onToggleWithChildren(node.id, allChildIds, shouldSelect);
+    } else {
+      onToggle(node.id);
+    }
+  };
+
+  return (
+    <div className="select-none">
+      <div
+        className={cn(
+          "flex items-start gap-2 py-2 px-2 rounded-md hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800/50 cursor-pointer",
+        )}
+        style={{ paddingLeft: `${level * 20 + 8}px` }}
+      >
+        {hasChildren ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              setIsExpanded(!isExpanded);
+            }}
+            className="p-0.5 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-700 rounded mt-0.5 flex-shrink-0"
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4 text-mw-neutral-500" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-mw-neutral-500" />
+            )}
+          </button>
+        ) : (
+          <div className="w-5 flex-shrink-0" />
+        )}
+        <div className="flex items-start gap-2 flex-1" onClick={handleCheckboxChange}>
+          <TreeCheckbox
+            checked={isSelected || allChildrenSelected}
+            indeterminate={isIndeterminate}
+            onChange={handleCheckboxChange}
+            className="mt-0.5"
+          />
+          <div className="flex-1 min-w-0">
+            <label
+              htmlFor={`venue-${node.id}`}
+              className="text-sm font-normal cursor-pointer text-mw-neutral-700 dark:text-mw-neutral-300 block"
+            >
+              {node.name}
+            </label>
+            {node.description && level === 0 && (
+              <p className="text-xs font-normal text-mw-neutral-500 dark:text-mw-neutral-400 mt-0.5">
+                {node.description}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+      {hasChildren && isExpanded && (
+        <div>
+          {node.children.map(child => (
+            <TreeNodeItem
+              key={child.id}
+              node={child}
+              selectedIds={selectedIds}
+              onToggle={onToggle}
+              onToggleWithChildren={onToggleWithChildren}
+              searchQuery={searchQuery}
+              level={level + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function HierarchicalVenueSelector({
+  venues,
+  selectedIds,
+  onChange,
+  disabled = false,
+  placeholder,
+  label,
+}: HierarchicalVenueSelectorProps) {
+  const { t } = useTranslation('deals');
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const resolvedPlaceholder = placeholder || t('venueSelector.placeholder');
+
+  const tree = useMemo(() => buildTree(venues, t), [venues, t]);
+
+  const venueNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    venues.forEach(v => map.set(v.taxonomyId, v.name));
+    return map;
+  }, [venues]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleToggle = (id: string) => {
+    if (selectedIds.includes(id)) {
+      onChange(selectedIds.filter(selectedId => selectedId !== id));
+    } else {
+      onChange([...selectedIds, id]);
+    }
+  };
+
+  const handleToggleWithChildren = (id: string, childIds: string[], shouldSelect: boolean) => {
+    if (shouldSelect) {
+      const allIds = [id, ...childIds];
+      const newSelected = [...selectedIds];
+      allIds.forEach(itemId => {
+        if (!newSelected.includes(itemId)) {
+          newSelected.push(itemId);
+        }
+      });
+      onChange(newSelected);
+    } else {
+      const allIds = new Set([id, ...childIds]);
+      onChange(selectedIds.filter(itemId => !allIds.has(itemId)));
+    }
+  };
+
+  const removeSelection = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(selectedIds.filter(selectedId => selectedId !== id));
+  };
+
+  const selectedNames = selectedIds
+    .map(id => venueNameMap.get(id))
+    .filter(Boolean);
+
+  return (
+    <div ref={containerRef} className="relative">
+      {label && (
+        <label className="text-sm font-medium text-mw-neutral-900 dark:text-white mb-1.5 block">
+          {label}
+        </label>
+      )}
+      
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        className={cn(
+          "w-full min-h-[40px] px-3 py-2 text-left border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg bg-white dark:bg-mw-neutral-900",
+          "focus:outline-none focus:ring-2 focus:ring-mw-primary-500 focus:border-mw-primary-500",
+          "flex items-center flex-wrap gap-1.5",
+          disabled && "opacity-50 cursor-not-allowed",
+          !disabled && "cursor-pointer hover:border-mw-neutral-300 dark:hover:border-mw-neutral-600"
+        )}
+        disabled={disabled}
+      >
+        {selectedIds.length === 0 ? (
+          <span className="text-mw-neutral-400 dark:text-mw-neutral-500 text-sm">
+            {resolvedPlaceholder}
+          </span>
+        ) : (
+          <>
+            {selectedNames.slice(0, 3).map((name, index) => (
+              <Badge
+                key={selectedIds[index]}
+                variant="secondary"
+                className="text-xs h-6 px-2 bg-mw-neutral-100 dark:bg-mw-neutral-800 flex items-center gap-1"
+              >
+                {name}
+                <X 
+                  className="h-3 w-3 cursor-pointer hover:text-red-500" 
+                  onClick={(e) => removeSelection(selectedIds[index], e)}
+                />
+              </Badge>
+            ))}
+            {selectedIds.length > 3 && (
+              <Badge variant="secondary" className="text-xs h-6 px-2 bg-mw-primary-100 dark:bg-mw-primary-900 text-mw-primary-700 dark:text-mw-primary-300">
+                +{selectedIds.length - 3}
+              </Badge>
+            )}
+          </>
+        )}
+        <ChevronDown className={cn(
+          "h-4 w-4 ml-auto text-mw-neutral-400 transition-transform flex-shrink-0",
+          isOpen && "rotate-180"
+        )} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 w-full mt-1 bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg shadow-lg max-h-[400px] overflow-hidden">
+          <div className="p-3 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('venueSelector.searchPlaceholder')}
+                className="pl-9 h-9"
+                autoFocus
+              />
+            </div>
+          </div>
+          
+          <div className="overflow-y-auto max-h-[320px] py-1">
+            {tree.length === 0 ? (
+              <div className="text-sm text-mw-neutral-500 text-center py-4">
+                {t('venueSelector.noVenueTypes')}
+              </div>
+            ) : (
+              tree.map(node => (
+                <TreeNodeItem
+                  key={node.id}
+                  node={node}
+                  selectedIds={selectedIds}
+                  onToggle={handleToggle}
+                  onToggleWithChildren={handleToggleWithChildren}
+                  searchQuery={searchQuery}
+                />
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/ui/toaster.tsx

@@ -0,0 +1,111 @@
+import { useEffect } from "react"
+import { useToast } from "@/hooks/use-toast"
+import { Button, cn } from "@moving-walls/design-system"
+import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react"
+
+type ToastVariant = "default" | "destructive" | "success" | "warning" | "info"
+
+function getVariantStyles(variant: ToastVariant) {
+  switch (variant) {
+    case "destructive":
+      return {
+        container: "bg-mw-error-50 dark:bg-mw-error-900/20 border-mw-error-200 dark:border-mw-error-800",
+        icon: <AlertCircle className="h-5 w-5 text-mw-error-500 dark:text-mw-error-400 flex-shrink-0 mt-0.5" />,
+        title: "text-mw-error-900 dark:text-mw-error-100",
+        description: "text-mw-error-700 dark:text-mw-error-300",
+        close: "text-mw-error-500 dark:text-mw-error-400",
+      }
+    case "warning":
+      return {
+        container: "bg-mw-warning-50 dark:bg-mw-warning-900/20 border-mw-warning-200 dark:border-mw-warning-800",
+        icon: <AlertTriangle className="h-5 w-5 text-mw-warning-500 dark:text-mw-warning-400 flex-shrink-0 mt-0.5" />,
+        title: "text-mw-warning-900 dark:text-mw-warning-100",
+        description: "text-mw-warning-700 dark:text-mw-warning-300",
+        close: "text-mw-warning-500 dark:text-mw-warning-400",
+      }
+    case "info":
+      return {
+        container: "bg-mw-info-50 dark:bg-mw-info-900/20 border-mw-info-200 dark:border-mw-info-800",
+        icon: <Info className="h-5 w-5 text-mw-info-500 dark:text-mw-info-400 flex-shrink-0 mt-0.5" />,
+        title: "text-mw-info-900 dark:text-mw-info-100",
+        description: "text-mw-info-700 dark:text-mw-info-300",
+        close: "text-mw-info-500 dark:text-mw-info-400",
+      }
+    case "success":
+    default:
+      return {
+        container: "bg-mw-success-50 dark:bg-mw-success-900/20 border-mw-success-200 dark:border-mw-success-800",
+        icon: <CheckCircle className="h-5 w-5 text-mw-success-500 dark:text-mw-success-400 flex-shrink-0 mt-0.5" />,
+        title: "text-mw-success-900 dark:text-mw-success-100",
+        description: "text-mw-success-700 dark:text-mw-success-300",
+        close: "text-mw-success-500 dark:text-mw-success-400",
+      }
+  }
+}
+
+function ToastItem({ toast, onDismiss }: { toast: any; onDismiss: () => void }) {
+  const variant: ToastVariant = toast.variant || "default"
+  const styles = getVariantStyles(variant)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onDismiss()
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [onDismiss])
+
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 p-4 rounded-lg border shadow-lg animate-in slide-in-from-right-full duration-300",
+        styles.container
+      )}
+    >
+      {styles.icon}
+
+      <div className="flex-1 min-w-0">
+        {toast.title && (
+          <p className={cn("text-sm font-semibold", styles.title)}>
+            {toast.title}
+          </p>
+        )}
+        {toast.description && (
+          <p className={cn("text-sm mt-1", styles.description)}>
+            {toast.description}
+          </p>
+        )}
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        isIconOnly
+        onClick={onDismiss}
+        className={cn(
+          "flex-shrink-0",
+          styles.close
+        )}
+      >
+        <X className="h-4 w-4" />
+      </Button>
+    </div>
+  )
+}
+
+export function Toaster() {
+  const { toasts, dismiss } = useToast()
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[1700] flex flex-col gap-2 max-w-sm pointer-events-auto">
+      {toasts
+        .filter((toast) => toast.open !== false)
+        .map((toast) => (
+          <ToastItem
+            key={toast.id}
+            toast={toast}
+            onDismiss={() => dismiss(toast.id)}
+          />
+        ))}
+    </div>
+  )
+}

package/client/src/contexts/auth-context.tsx

@@ -0,0 +1,181 @@
+/**
+ * Authentication Context
+ * 
+ * Provides user authentication state and actions throughout the application
+ * Uses Direct Campaigns API OAuth with cookie-based token storage
+ */
+
+import { createContext, useContext, useState, useEffect, type ReactNode } from "react";
+import * as oauthService from "@/lib/oauth-service";
+
+interface AuthUser {
+  id: string;
+  email: string;
+  name?: string;
+  avatar_url?: string;
+  company_id?: string;
+  company_name?: string;
+  role_name?: string;
+  company_country?: string;
+}
+
+interface AuthContextType {
+  user: AuthUser | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: () => void;
+  logout: () => Promise<void>;
+  checkAuth: () => Promise<void>;
+  refreshToken: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const checkAuth = async () => {
+    try {
+      // Check if user has tokens in cookies
+      if (!oauthService.isAuthenticated()) {
+        setUser(null);
+        setIsLoading(false);
+        return;
+      }
+
+      // Check if token is expired
+      if (oauthService.isTokenExpired()) {
+        try {
+          await oauthService.refreshAccessToken();
+        } catch (error) {
+          console.error('Token refresh failed:', error);
+          oauthService.clearAuthStorage();
+          setUser(null);
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      // Get user from cookie or fetch from API
+      let userData = oauthService.getUser();
+      console.log('[Auth] Current user from cookies:', userData);
+      
+      if (!userData || !userData.company_id) {
+        console.log('[Auth] No company_id found, will fetch profile. userData:', userData);
+        // Fetch fresh user profile if missing or if company_id is not present
+        // Retry up to 3 times with exponential backoff
+        let retries = 0;
+        const maxRetries = 3;
+        while (retries < maxRetries) {
+          try {
+            userData = await oauthService.fetchUserProfile();
+            if (userData?.company_id) {
+              oauthService.storeUser(userData);
+              console.log('[Auth] User profile fetched successfully with company_id:', userData.company_id);
+              break;
+            }
+            console.warn('[Auth] Profile fetched but missing company_id, retrying...');
+          } catch (error) {
+            console.warn(`[Auth] Profile fetch attempt ${retries + 1}/${maxRetries} failed:`, error);
+          }
+          retries++;
+          if (retries < maxRetries) {
+            // Exponential backoff: 500ms, 1000ms, 2000ms
+            await new Promise(resolve => setTimeout(resolve, 500 * Math.pow(2, retries - 1)));
+          }
+        }
+        // If still no company_id after retries, use whatever we have
+        if (userData && !userData.company_id) {
+          console.warn('[Auth] Could not fetch company_id after retries');
+          oauthService.storeUser(userData);
+        }
+      }
+
+      // Fetch company addresses to get primary country if not already set
+      if (userData && userData.company_id && !userData.company_country) {
+        try {
+          const addresses = await oauthService.fetchCompanyAddresses(userData.company_id);
+          const primaryCountry = oauthService.getPrimaryAddressCountry(addresses);
+          if (primaryCountry) {
+            userData = { ...userData, company_country: primaryCountry };
+            oauthService.storeUser(userData);
+            console.log('[Auth] Company country set from primary address:', primaryCountry);
+          }
+        } catch (error) {
+          console.warn('[Auth] Could not fetch company addresses:', error);
+        }
+      }
+
+      setUser(userData);
+    } catch (error) {
+      console.error('Auth check failed:', error);
+      oauthService.clearAuthStorage();
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const login = () => {
+    // Initiate OAuth authorization flow
+    oauthService.authorize();
+  };
+
+  const logout = async () => {
+    try {
+      await oauthService.logout();
+      setUser(null);
+      window.location.href = '/login';
+    } catch (error) {
+      console.error('Logout failed:', error);
+      // Clear local state even if API call fails
+      oauthService.clearAuthStorage();
+      setUser(null);
+      window.location.href = '/login';
+    }
+  };
+
+  const refreshToken = async () => {
+    try {
+      await oauthService.refreshAccessToken();
+      // Optionally refresh user profile
+      const userData = await oauthService.fetchUserProfile();
+      oauthService.storeUser(userData);
+      setUser(userData);
+    } catch (error) {
+      console.error('Token refresh failed:', error);
+      oauthService.clearAuthStorage();
+      setUser(null);
+      throw error;
+    }
+  };
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isLoading,
+        isAuthenticated: !!user,
+        login,
+        logout,
+        checkAuth,
+        refreshToken,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}