adserver-dashboard 1.0.0

package/client/src/contexts/sidebar-state.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface SidebarStateContextType {
+  isCollapsed: boolean;
+  toggleSidebar: () => void;
+  setCollapsed: (collapsed: boolean) => void;
+}
+
+const SidebarStateContext = createContext<SidebarStateContextType>({
+  isCollapsed: false,
+  toggleSidebar: () => {},
+  setCollapsed: () => {},
+});
+
+export function SidebarStateProvider({ children }: { children: ReactNode }) {
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem("sidebar-collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  const toggleSidebar = () => {
+    setIsCollapsed((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem("sidebar-collapsed", String(next));
+      } catch {}
+      return next;
+    });
+  };
+
+  const setCollapsed = (collapsed: boolean) => {
+    setIsCollapsed(collapsed);
+    try {
+      localStorage.setItem("sidebar-collapsed", String(collapsed));
+    } catch {}
+  };
+
+  return (
+    <SidebarStateContext.Provider value={{ isCollapsed, toggleSidebar, setCollapsed }}>
+      {children}
+    </SidebarStateContext.Provider>
+  );
+}
+
+export function useSidebarState() {
+  return useContext(SidebarStateContext);
+}

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

@@ -0,0 +1,66 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: "light" | "dark";
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window !== "undefined") {
+      return (localStorage.getItem("theme") as Theme) || "light";
+    }
+    return "light";
+  });
+
+  const resolvedTheme = theme === "system" ? getSystemTheme() : theme;
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem("theme", newTheme);
+  };
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolvedTheme);
+  }, [resolvedTheme]);
+
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const root = document.documentElement;
+      root.classList.remove("light", "dark");
+      root.classList.add(getSystemTheme());
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

package/client/src/data/campaign-data.json

@@ -0,0 +1,107 @@
+{
+  "goalTypes": [
+    {
+      "id": "sov",
+      "name": "SOV",
+      "description": "Share of Voice - Percentage of total impressions",
+      "unit": "%"
+    },
+    {
+      "id": "impressions",
+      "name": "Impressions",
+      "description": "Total number of ad impressions",
+      "unit": "count"
+    },
+    {
+      "id": "reach",
+      "name": "Reach",
+      "description": "Unique users reached",
+      "unit": "count"
+    },
+    {
+      "id": "attribution",
+      "name": "Attribution",
+      "description": "Attribution events tracked",
+      "unit": "events"
+    }
+  ],
+  "targetingOptions": {
+    "ageGroups": [
+      { "id": "18-24", "name": "18-24 years" },
+      { "id": "25-34", "name": "25-34 years" },
+      { "id": "35-44", "name": "35-44 years" },
+      { "id": "45-54", "name": "45-54 years" },
+      { "id": "55-64", "name": "55-64 years" },
+      { "id": "65+", "name": "65+ years" }
+    ],
+    "genders": [
+      { "id": "male", "name": "Male" },
+      { "id": "female", "name": "Female" },
+      { "id": "other", "name": "Other" },
+      { "id": "all", "name": "All" }
+    ],
+    "interests": [
+      { "id": "sports", "name": "Sports & Fitness" },
+      { "id": "technology", "name": "Technology" },
+      { "id": "fashion", "name": "Fashion & Beauty" },
+      { "id": "food", "name": "Food & Dining" },
+      { "id": "travel", "name": "Travel" },
+      { "id": "entertainment", "name": "Entertainment" },
+      { "id": "automotive", "name": "Automotive" },
+      { "id": "finance", "name": "Finance & Business" },
+      { "id": "health", "name": "Health & Wellness" },
+      { "id": "education", "name": "Education" }
+    ],
+    "deviceTypes": [
+      { "id": "mobile", "name": "Mobile" },
+      { "id": "tablet", "name": "Tablet" },
+      { "id": "desktop", "name": "Desktop" },
+      { "id": "tv", "name": "Connected TV" }
+    ]
+  },
+  "inventoryTypes": [
+    { "id": "billboard", "name": "Billboard", "icon": "billboard" },
+    { "id": "transit", "name": "Transit", "icon": "bus" },
+    { "id": "digital", "name": "Digital Screen", "icon": "monitor" },
+    { "id": "street", "name": "Street Furniture", "icon": "bench" }
+  ],
+  "pacingStrategies": [
+    {
+      "id": "even",
+      "name": "Even Distribution",
+      "description": "Distribute impressions evenly throughout the campaign"
+    },
+    {
+      "id": "asap",
+      "name": "As Soon As Possible",
+      "description": "Deliver impressions as quickly as possible"
+    },
+    {
+      "id": "front-loaded",
+      "name": "Front Loaded",
+      "description": "Deliver more impressions at the beginning"
+    },
+    {
+      "id": "back-loaded",
+      "name": "Back Loaded",
+      "description": "Deliver more impressions at the end"
+    }
+  ],
+  "optimizationGoals": [
+    {
+      "id": "max-reach",
+      "name": "Maximize Reach",
+      "description": "Reach as many unique users as possible"
+    },
+    {
+      "id": "max-frequency",
+      "name": "Maximize Frequency",
+      "description": "Show ads more frequently to the same users"
+    },
+    {
+      "id": "balanced",
+      "name": "Balanced",
+      "description": "Balance reach and frequency"
+    }
+  ]
+}

package/client/src/data/countries.json

@@ -0,0 +1,22 @@
+[
+  { "code": "US", "name": "United States", "region": "North America" },
+  { "code": "GB", "name": "United Kingdom", "region": "Europe" },
+  { "code": "CA", "name": "Canada", "region": "North America" },
+  { "code": "AU", "name": "Australia", "region": "Oceania" },
+  { "code": "DE", "name": "Germany", "region": "Europe" },
+  { "code": "FR", "name": "France", "region": "Europe" },
+  { "code": "JP", "name": "Japan", "region": "Asia" },
+  { "code": "CN", "name": "China", "region": "Asia" },
+  { "code": "IN", "name": "India", "region": "Asia" },
+  { "code": "BR", "name": "Brazil", "region": "South America" },
+  { "code": "SG", "name": "Singapore", "region": "Asia" },
+  { "code": "MY", "name": "Malaysia", "region": "Asia" },
+  { "code": "TH", "name": "Thailand", "region": "Asia" },
+  { "code": "ID", "name": "Indonesia", "region": "Asia" },
+  { "code": "PH", "name": "Philippines", "region": "Asia" },
+  { "code": "VN", "name": "Vietnam", "region": "Asia" },
+  { "code": "KR", "name": "South Korea", "region": "Asia" },
+  { "code": "AE", "name": "United Arab Emirates", "region": "Middle East" },
+  { "code": "SA", "name": "Saudi Arabia", "region": "Middle East" },
+  { "code": "ZA", "name": "South Africa", "region": "Africa" }
+]

package/client/src/hooks/use-approval.ts

@@ -0,0 +1,366 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { InfluenceDealsAPI, influenceDealsRequest } from '@/lib/influence-deals-api';
+import type {
+  ApprovalRequestPayload,
+  ApprovalRequestResponse,
+  ApprovalHistoryResponse,
+  PublicCampaignDetails,
+  PublicLineItemsResponse,
+  PublicInventoriesResponse,
+  OtpRequestPayload,
+  OtpRequestResponse,
+  OtpVerifyPayload,
+  OtpVerifyResponse,
+  ApprovalDecisionPayload,
+  ApprovalDecisionResponse,
+} from '@/types/approval';
+
+export function useRequestApproval(dealId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation<ApprovalRequestResponse, Error, ApprovalRequestPayload>({
+    mutationFn: async (payload) => {
+      const url = InfluenceDealsAPI.approval.request(dealId);
+      return await influenceDealsRequest<ApprovalRequestResponse>(url, 'POST', payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['deal', dealId] });
+      queryClient.invalidateQueries({ queryKey: ['direct-campaigns'] });
+      queryClient.invalidateQueries({ queryKey: ['approval-history', dealId] });
+      // Also invalidate line items so their status is refreshed to PENDING
+      queryClient.invalidateQueries({ queryKey: ['line-items', dealId] });
+      queryClient.invalidateQueries({ queryKey: ['deal-line-items', dealId] });
+    },
+  });
+}
+
+export function useApprovalHistory(dealId: string) {
+  return useQuery<ApprovalHistoryResponse>({
+    queryKey: ['approval-history', dealId],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.approval.history(dealId);
+      return await influenceDealsRequest<ApprovalHistoryResponse>(url, 'GET');
+    },
+    enabled: !!dealId,
+  });
+}
+
+// Custom error class to handle "ALREADY_DECIDED" as a special case
+export class AlreadyDecidedError extends Error {
+  decision: 'APPROVED' | 'REJECTED';
+  
+  constructor(message: string, decision: 'APPROVED' | 'REJECTED') {
+    super(message);
+    this.name = 'AlreadyDecidedError';
+    this.decision = decision;
+  }
+}
+
+async function publicApprovalFetch<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      ...options?.headers,
+    },
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    // Check for ALREADY_DECIDED error - treat as special case, not a failure
+    const errorCode = typeof data.error === 'object' ? data.error?.code : null;
+    const errorMessage = 
+      data.message || 
+      (typeof data.error === 'object' ? data.error?.message : data.error) || 
+      'Request failed';
+    
+    if (errorCode === 'ALREADY_DECIDED') {
+      // Extract decision from message (e.g., "Approval already submitted: APPROVED")
+      const decisionMatch = errorMessage.match(/:\s*(APPROVED|REJECTED)/i);
+      const decision = decisionMatch ? decisionMatch[1].toUpperCase() as 'APPROVED' | 'REJECTED' : 'APPROVED';
+      
+      // Check if the API returned valid campaign data along with the error
+      // Only use result/campaign if it contains expected properties
+      const potentialData = data.result || data.campaign;
+      const hasValidCampaignData = potentialData && typeof potentialData === 'object' && 
+        (potentialData.dealId || potentialData.dealName || potentialData.campaign);
+      
+      if (hasValidCampaignData) {
+        return {
+          ...potentialData,
+          alreadyDecided: true,
+          existingDecision: decision,
+        } as T;
+      }
+      
+      throw new AlreadyDecidedError(errorMessage, decision);
+    }
+    
+    throw new Error(errorMessage);
+  }
+
+  return data.result || data;
+}
+
+export function usePublicCampaign(token: string) {
+  return useQuery<PublicCampaignDetails>({
+    queryKey: ['public-campaign', token],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.publicApproval.campaign(token);
+      return await publicApprovalFetch<PublicCampaignDetails>(url);
+    },
+    enabled: !!token,
+    retry: false,
+  });
+}
+
+export function usePublicLineItems(token: string) {
+  return useQuery<PublicLineItemsResponse>({
+    queryKey: ['public-line-items', token],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.publicApproval.lineItems(token);
+      return await publicApprovalFetch<PublicLineItemsResponse>(url);
+    },
+    enabled: !!token,
+    retry: false,
+  });
+}
+
+export function usePublicInventories(token: string) {
+  return useQuery<PublicInventoriesResponse>({
+    queryKey: ['public-inventories', token],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.publicApproval.inventories(token);
+      return await publicApprovalFetch<PublicInventoriesResponse>(url);
+    },
+    enabled: !!token,
+    retry: false,
+  });
+}
+
+export function usePublicLineItemInventories(token: string, lineItemId: string | null) {
+  return useQuery<PublicInventoriesResponse>({
+    queryKey: ['public-line-item-inventories', token, lineItemId],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.publicApproval.inventories(token, lineItemId!);
+      return await publicApprovalFetch<PublicInventoriesResponse>(url);
+    },
+    enabled: !!token && !!lineItemId,
+    retry: false,
+  });
+}
+
+export function useRequestOtp() {
+  return useMutation<OtpRequestResponse, Error, OtpRequestPayload>({
+    mutationFn: async (payload) => {
+      const url = InfluenceDealsAPI.publicApproval.requestOtp();
+      return await publicApprovalFetch<OtpRequestResponse>(url, {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+    },
+  });
+}
+
+export function useVerifyOtp(token: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation<OtpVerifyResponse, Error, OtpVerifyPayload>({
+    mutationFn: async (payload) => {
+      const url = InfluenceDealsAPI.publicApproval.verifyOtp();
+      return await publicApprovalFetch<OtpVerifyResponse>(url, {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['public-campaign', token] });
+      queryClient.invalidateQueries({ queryKey: ['public-line-items', token] });
+    },
+  });
+}
+
+export function useSubmitDecision(token: string) {
+  // Note: We intentionally don't invalidate queries on success here
+  // The UI will show the success state immediately after submission
+  // Refetching data would trigger an "ALREADY_DECIDED" error from the API
+  // If the user refreshes the page, the data will be fetched fresh
+  return useMutation<ApprovalDecisionResponse, Error, ApprovalDecisionPayload>({
+    mutationFn: async (payload) => {
+      const url = InfluenceDealsAPI.publicApproval.decision();
+      return await publicApprovalFetch<ApprovalDecisionResponse>(url, {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+    },
+  });
+}
+
+export interface ReopenDealPayload {
+  reason?: string;
+}
+
+export interface ReopenDealResponse {
+  id: string;
+  dealId: string;
+  previousStatus: string;
+  currentStatus: string;
+  reason?: string;
+  version: number;
+  updatedAt: string;
+  cascadedLineItems?: Array<{
+    lineItemId: string;
+    externalId: string;
+    previousStatus: string;
+    currentStatus: string;
+  }>;
+  skippedLineItems?: Array<{
+    lineItemId: string;
+    externalId: string;
+    reason: string;
+  }>;
+}
+
+export function useReopenDeal(dealId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation<ReopenDealResponse, Error, ReopenDealPayload>({
+    mutationFn: async (payload) => {
+      const url = InfluenceDealsAPI.reopen.reopen(dealId);
+      return await influenceDealsRequest<ReopenDealResponse>(url, 'POST', payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['deal', dealId] });
+      queryClient.invalidateQueries({ queryKey: ['direct-campaigns'] });
+      queryClient.invalidateQueries({ queryKey: ['deal-line-items', dealId] });
+      queryClient.invalidateQueries({ queryKey: ['approval-history', dealId] });
+    },
+  });
+}
+
+// ============================================================================
+// DEAL STATUS TRANSITIONS
+// ============================================================================
+
+export type DealStatus = 
+  | 'GENERATED' 
+  | 'REQUESTED' 
+  | 'PENDING' 
+  | 'APPROVED' 
+  | 'LIVE' 
+  | 'COMPLETED' 
+  | 'EXPIRED' 
+  | 'REJECTED' 
+  | 'ARCHIVED' 
+  | 'REOPENED';
+
+export type TransitionOwner = 'USER' | 'DSP' | 'MQ_WORKER' | 'SCHEDULER' | 'ADMIN';
+
+export interface StatusTransitionPayload {
+  status: DealStatus;
+  owner?: TransitionOwner;
+  reason?: string;
+}
+
+export interface StatusTransitionResponse {
+  id: string;
+  dealId: string;
+  previousStatus: string;
+  currentStatus: string;
+  workflow: string;
+  source: string;
+  transitionOwner: string;
+  reason?: string;
+  version: number;
+  updatedAt: string;
+}
+
+export interface StatusTransitionError {
+  code: string;
+  message: string;
+  errors?: Array<{ field?: string; message: string }>;
+  currentStatus: string;
+  requestedStatus: string;
+  allowedTransitions: string[];
+  workflow: string;
+  source: string;
+}
+
+export function useTransitionDealStatus(dealId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation<StatusTransitionResponse, Error, StatusTransitionPayload>({
+    mutationFn: async (payload) => {
+      const url = InfluenceDealsAPI.status.transition(dealId);
+      return await influenceDealsRequest<StatusTransitionResponse>(url, 'POST', payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['deal', dealId] });
+      queryClient.invalidateQueries({ queryKey: ['direct-campaigns'] });
+      queryClient.invalidateQueries({ queryKey: ['deal-line-items', dealId] });
+      queryClient.invalidateQueries({ queryKey: ['approval-history', dealId] });
+    },
+  });
+}
+
+export interface StatusDefinitionsResponse {
+  workflow: 'DIRECT' | 'PROGRAMMATIC';
+  statuses: Record<string, string>;
+  definitions: Record<string, string>;
+  transitionOwnership: Record<string, string>;
+  workflowRules: {
+    sameDayApproval?: {
+      description: string;
+      rules: string[];
+    };
+    externalSource?: {
+      description: string;
+      cannotModify: string[];
+      canModify: Record<string, string[]>;
+    };
+  };
+}
+
+export function useStatusDefinitions(workflow?: 'DIRECT' | 'PROGRAMMATIC') {
+  return useQuery<StatusDefinitionsResponse>({
+    queryKey: ['status-definitions', workflow],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.status.definitions(workflow);
+      return await influenceDealsRequest<StatusDefinitionsResponse>(url, 'GET');
+    },
+    staleTime: 1000 * 60 * 60, // Cache for 1 hour - definitions don't change often
+  });
+}
+
+// ============================================================================
+// RESEND APPROVAL EMAIL
+// ============================================================================
+
+export interface ResendApprovalPayload {
+  frontendUrl: string;
+  emails: string[];
+}
+
+export interface ResendApprovalResponse {
+  success: boolean;
+  message: string;
+  sentTo?: string[];
+}
+
+export function useResendApprovalEmail(dealId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation<ResendApprovalResponse, Error, ResendApprovalPayload>({
+    mutationFn: async (payload) => {
+      const baseUrl = import.meta.env.VITE_INFLUENCE_DEALS_API_URL;
+      const url = `${baseUrl}/deals/${dealId}/approval/resend`;
+      return await influenceDealsRequest<ResendApprovalResponse>(url, 'POST', payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['deal', dealId] });
+      queryClient.invalidateQueries({ queryKey: ['approval-history', dealId] });
+    },
+  });
+}

package/client/src/hooks/use-keyboard-shortcuts.ts

@@ -0,0 +1,74 @@
+import { useEffect, useCallback } from 'react';
+
+type KeyboardShortcut = {
+  key: string;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  shiftKey?: boolean;
+  altKey?: boolean;
+  handler: () => void;
+  description?: string;
+};
+
+export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[], enabled: boolean = true) {
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (!enabled) return;
+    
+    const target = event.target as HTMLElement;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return;
+    }
+
+    for (const shortcut of shortcuts) {
+      const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase();
+      const ctrlMatch = shortcut.ctrlKey ? (event.ctrlKey || event.metaKey) : !event.ctrlKey && !event.metaKey;
+      const shiftMatch = shortcut.shiftKey ? event.shiftKey : !event.shiftKey;
+      const altMatch = shortcut.altKey ? event.altKey : !event.altKey;
+
+      if (keyMatch && ctrlMatch && shiftMatch && altMatch) {
+        event.preventDefault();
+        shortcut.handler();
+        return;
+      }
+    }
+  }, [shortcuts, enabled]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+}
+
+export function useEscapeKey(handler: () => void, enabled: boolean = true) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handler();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handler, enabled]);
+}
+
+export function useEnterKey(handler: () => void, enabled: boolean = true) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        const target = event.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+          return;
+        }
+        handler();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handler, enabled]);
+}