adserver-dashboard 1.0.0

package/client/src/components/app-sidebar.tsx

@@ -0,0 +1,312 @@
+import { useState, useRef, useEffect } from "react";
+import {
+  LayoutDashboard,
+  Calendar,
+  Monitor,
+  Users,
+  ChevronDown,
+  Settings,
+  Zap,
+  Play,
+  Link2,
+  BarChart3,
+  ExternalLink,
+  MapPin,
+  Tag,
+  FolderOpen,
+  Cog,
+} from "lucide-react";
+import { useLocation, Link } from "wouter";
+import { useTranslation } from "@/lib/i18n";
+import { useSidebarState } from "@/contexts/sidebar-state";
+import { createPortal } from "react-dom";
+
+interface MenuItem {
+  id: string;
+  title: string;
+  url: string;
+  icon: React.ComponentType<{ className?: string }>;
+  external?: boolean;
+}
+
+const configMenuItems: MenuItem[] = [
+  { id: "signals", title: "Signals", url: "/signals", icon: Zap },
+  { id: "custom-pois", title: "Custom POIs", url: "/custom-pois", icon: MapPin },
+  { id: "tags", title: "Tags", url: "/tags", icon: Tag },
+  { id: "settings", title: "Settings", url: "/settings", icon: Cog },
+];
+
+const CONFIG_CHILD_PATHS = ["/signals", "/custom-pois", "/tags", "/settings"];
+
+export function AppSidebar() {
+  const [location] = useLocation();
+  const { t } = useTranslation();
+  const { isCollapsed } = useSidebarState();
+
+  const [configOpen, setConfigOpen] = useState(false);
+  const [configFlyoutOpen, setConfigFlyoutOpen] = useState(false);
+  const [flyoutPosition, setFlyoutPosition] = useState({ top: 0, left: 0 });
+  const configButtonRef = useRef<HTMLButtonElement>(null);
+  const flyoutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isConfigChildActive = CONFIG_CHILD_PATHS.some((p) =>
+    location.startsWith(p),
+  );
+
+  // Auto-expand config when a child is active
+  useEffect(() => {
+    if (isConfigChildActive && !configOpen) {
+      setConfigOpen(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConfigChildActive]);
+
+  // Update flyout position
+  useEffect(() => {
+    if (configFlyoutOpen && configButtonRef.current) {
+      const rect = configButtonRef.current.getBoundingClientRect();
+      setFlyoutPosition({ top: rect.top, left: rect.right + 8 });
+    }
+  }, [configFlyoutOpen]);
+
+  const handleFlyoutMouseEnter = () => {
+    if (flyoutTimeoutRef.current) {
+      clearTimeout(flyoutTimeoutRef.current);
+      flyoutTimeoutRef.current = null;
+    }
+    setConfigFlyoutOpen(true);
+  };
+
+  const handleFlyoutMouseLeave = () => {
+    flyoutTimeoutRef.current = setTimeout(() => {
+      setConfigFlyoutOpen(false);
+    }, 150);
+  };
+
+  const isActive = (url: string) =>
+    url === "/" ? location === "/" : location.startsWith(url);
+
+  const navItemClass = (active: boolean) =>
+    `flex p-2 rounded justify-start items-center gap-2 hover:bg-mw-primary-50 hover:text-mw-primary-500 transition-colors w-full min-w-0 ${
+      active
+        ? "bg-mw-primary-50 dark:bg-mw-neutral-800 text-mw-primary-500"
+        : "text-mw-neutral-700 dark:text-mw-neutral-200"
+    }`;
+
+  const iconClass = (active: boolean) =>
+    `w-4 h-4 flex-shrink-0 ${active ? "text-mw-primary-500" : ""}`;
+
+  // Flyout portal for collapsed config menu
+  const FlyoutMenu = () => {
+    if (!configFlyoutOpen || !isCollapsed) return null;
+    return createPortal(
+      <div
+        className="fixed bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg shadow-lg py-2 min-w-48"
+        style={{ top: flyoutPosition.top, left: flyoutPosition.left, zIndex: 9999 }}
+        onMouseEnter={handleFlyoutMouseEnter}
+        onMouseLeave={handleFlyoutMouseLeave}
+      >
+        <div className="px-3 py-2 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+          <span className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-200">
+            Configuration
+          </span>
+        </div>
+        <div className="py-1">
+          {configMenuItems.map((item) => {
+            const active = isActive(item.url);
+            return (
+              <Link
+                key={item.id}
+                href={item.url}
+                onClick={() => setConfigFlyoutOpen(false)}
+                className={`flex px-3 py-2 justify-start items-center gap-2 hover:bg-mw-primary-50 hover:text-mw-primary-500 transition-colors ${
+                  active
+                    ? "bg-mw-primary-50 dark:bg-mw-neutral-800 text-mw-primary-500"
+                    : "text-mw-neutral-700 dark:text-mw-neutral-200"
+                }`}
+              >
+                <item.icon className={iconClass(active)} />
+                <span className="text-sm leading-none">{item.title}</span>
+              </Link>
+            );
+          })}
+        </div>
+      </div>,
+      document.body,
+    );
+  };
+
+  return (
+    <aside
+      id="app-sidebar"
+      className={`bg-white dark:bg-mw-neutral-900 border-r border-container-border dark:border-mw-neutral-800 inline-flex flex-col ${
+        isCollapsed ? "w-16 p-2" : "w-56 p-2"
+      } transition-all duration-300 h-full overflow-hidden justify-start gap-2 flex-shrink-0`}
+    >
+      <nav id="sidebar-nav" className="mt-2 space-y-1 px-2">
+
+        {/* Dashboard */}
+        <Link href="/" className={navItemClass(isActive("/") && location === "/")}>
+          <LayoutDashboard className={iconClass(location === "/")} />
+          {!isCollapsed && (
+            <span className="text-sm leading-none flex-1">
+              {t("navigation:sidebar.dashboard")}
+            </span>
+          )}
+        </Link>
+
+        {/* Deals */}
+        <Link href="/deals" className={navItemClass(isActive("/deals"))}>
+          <Calendar className={iconClass(isActive("/deals"))} />
+          {!isCollapsed && (
+            <span className="text-sm leading-none flex-1">
+              {t("navigation:sidebar.deals")}
+            </span>
+          )}
+        </Link>
+
+        {/* Content Hub */}
+        <Link href="/creatives" className={navItemClass(isActive("/creatives") || isActive("/contenthub"))}>
+          <FolderOpen className={iconClass(isActive("/creatives") || isActive("/contenthub"))} />
+          {!isCollapsed && (
+            <span className="text-sm leading-none flex-1">Content Hub</span>
+          )}
+        </Link>
+
+        {/* Inventory – External */}
+        <button
+          id="sidebar-nav-inventory"
+          onClick={() =>
+            window.open(
+              import.meta.env.VITE_INVENTORY_URL || "/inventory",
+              "_blank",
+              "noopener,noreferrer",
+            )
+          }
+          className={`${navItemClass(false)} group`}
+        >
+          <Monitor className="w-4 h-4 flex-shrink-0" />
+          {!isCollapsed && (
+            <>
+              <span className="text-sm leading-none flex-1 text-left">Inventory</span>
+              <ExternalLink className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity text-mw-neutral-400" />
+            </>
+          )}
+        </button>
+
+        {/* Proof of Play */}
+        <Link href="/proof-of-play" className={navItemClass(isActive("/proof-of-play"))}>
+          <Play className={iconClass(isActive("/proof-of-play"))} />
+          {!isCollapsed && (
+            <span className="text-sm leading-none flex-1">
+              {t("navigation:sidebar.proofOfPlay") || "Proof of Play"}
+            </span>
+          )}
+        </Link>
+
+        {/* Integrations */}
+        <Link href="/integrations" className={navItemClass(isActive("/integrations"))}>
+          <Link2 className={iconClass(isActive("/integrations"))} />
+          {!isCollapsed && (
+            <span className="text-sm leading-none flex-1">
+              {t("navigation:sidebar.integrations") || "Integrations"}
+            </span>
+          )}
+        </Link>
+
+        {/* Manage Buyer */}
+        <Link href="/buyers" className={navItemClass(isActive("/buyers"))}>
+          <Users className={iconClass(isActive("/buyers"))} />
+          {!isCollapsed && (
+            <span className="text-sm leading-none flex-1">
+              {t("navigation:sidebar.manageBuyers") || "Manage Buyer"}
+            </span>
+          )}
+        </Link>
+
+        {/* Measure – External */}
+        <button
+          id="sidebar-nav-measure"
+          onClick={() =>
+            window.open(
+              import.meta.env.VITE_MEASURE_URL || "/reports",
+              "_blank",
+              "noopener,noreferrer",
+            )
+          }
+          className={`${navItemClass(false)} group`}
+        >
+          <BarChart3 className="w-4 h-4 flex-shrink-0" />
+          {!isCollapsed && (
+            <>
+              <span className="text-sm leading-none flex-1 text-left">Measure</span>
+              <ExternalLink className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity text-mw-neutral-400" />
+            </>
+          )}
+        </button>
+
+        {/* Configuration – Collapsible */}
+        <div
+          className="relative"
+          onMouseEnter={isCollapsed ? handleFlyoutMouseEnter : undefined}
+          onMouseLeave={isCollapsed ? handleFlyoutMouseLeave : undefined}
+        >
+          <button
+            ref={configButtonRef}
+            id="sidebar-nav-configurations"
+            onClick={() => !isCollapsed && setConfigOpen(!configOpen)}
+            className={`flex p-2 rounded justify-start items-center gap-2 hover:bg-mw-primary-50 hover:text-mw-primary-500 transition-colors w-full min-w-0 ${
+              configOpen || isConfigChildActive || configFlyoutOpen
+                ? "bg-mw-primary-50 dark:bg-mw-neutral-800"
+                : ""
+            }`}
+          >
+            <Settings
+              className={`w-4 h-4 flex-shrink-0 ${isConfigChildActive ? "text-mw-primary-500" : "text-mw-neutral-700 dark:text-mw-neutral-200"}`}
+            />
+            {!isCollapsed && (
+              <>
+                <span
+                  className={`text-sm leading-none flex-1 text-left ${
+                    isConfigChildActive
+                      ? "text-mw-primary-500"
+                      : "text-mw-neutral-700 dark:text-mw-neutral-200"
+                  }`}
+                >
+                  Configuration
+                </span>
+                <ChevronDown
+                  className={`w-4 h-4 transition-transform text-mw-neutral-400 ${
+                    configOpen ? "rotate-180" : ""
+                  }`}
+                />
+              </>
+            )}
+          </button>
+
+          {/* Inline submenu (sidebar expanded) */}
+          {!isCollapsed && configOpen && (
+            <div className="ml-4 mt-1 space-y-1 pl-1">
+              {configMenuItems.map((item) => {
+                const active = isActive(item.url);
+                return (
+                  <Link
+                    key={item.id}
+                    href={item.url}
+                    className={navItemClass(active)}
+                  >
+                    <item.icon className={iconClass(active)} />
+                    <span className="text-sm leading-none flex-1">{item.title}</span>
+                  </Link>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </nav>
+
+      {/* Flyout portal (sidebar collapsed) */}
+      <FlyoutMenu />
+    </aside>
+  );
+}

package/client/src/components/approval/approval-decision-form.test.tsx

@@ -0,0 +1,294 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { render, screen, cleanup, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const mockSubmitDecisionMutate = vi.fn();
+
+vi.mock('@/hooks/use-approval', () => ({
+  useSubmitDecision: vi.fn(() => ({
+    mutate: mockSubmitDecisionMutate,
+    isPending: false,
+  })),
+  AlreadyDecidedError: class AlreadyDecidedError extends Error {
+    decision: string;
+    constructor(decision: string) {
+      super('Already decided');
+      this.decision = decision;
+    }
+  },
+}));
+
+vi.mock('@moving-walls/design-system', async () => {
+  const React = await import('react');
+  return {
+    Button: (props: any) => React.createElement('button', {
+      onClick: props.onClick,
+      disabled: props.disabled,
+      'data-testid': props['data-testid'],
+      className: props.className,
+    }, props.children),
+    Sheet: (props: any) => props.open ? React.createElement('div', { 'data-testid': 'sheet' }, props.children) : null,
+    SheetContent: (props: any) => React.createElement('div', { 'data-testid': props['data-testid'] || 'sheet-content' }, props.children),
+    SheetHeader: (props: any) => React.createElement('div', { 'data-testid': 'sheet-header' }, props.children),
+    SheetTitle: (props: any) => React.createElement('h2', { 'data-testid': 'sheet-title' }, props.children),
+    SheetDescription: (props: any) => React.createElement('p', { 'data-testid': 'sheet-description' }, props.children),
+    SheetFooter: (props: any) => React.createElement('div', { 'data-testid': 'sheet-footer', className: props.className }, props.children),
+    cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
+  };
+});
+
+vi.mock('lucide-react', async () => {
+  const React = await import('react');
+  return {
+    Loader2: () => React.createElement('span', { 'data-testid': 'loader' }, 'Loading...'),
+    CheckCircle: (props: any) => React.createElement('svg', { 'data-testid': 'icon-check-circle', className: props.className }),
+    XCircle: (props: any) => React.createElement('svg', { 'data-testid': 'icon-x-circle', className: props.className }),
+    AlertCircle: (props: any) => React.createElement('svg', { 'data-testid': 'icon-alert-circle', className: props.className }),
+  };
+});
+
+import { ApprovalDecisionForm } from './approval-decision-form';
+import { useSubmitDecision, AlreadyDecidedError } from '@/hooks/use-approval';
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return React.createElement(QueryClientProvider, { client: queryClient }, children);
+  };
+}
+
+describe('ApprovalDecisionForm', () => {
+  const defaultProps = {
+    token: 'test-token-123',
+    otpVerified: true,
+    alreadyDecided: false,
+  };
+
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    vi.mocked(useSubmitDecision).mockReturnValue({
+      mutate: mockSubmitDecisionMutate,
+      isPending: false,
+    } as any);
+  });
+
+  it('should render Approve and Reject buttons', () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByTestId('button-approve')).toBeInTheDocument();
+    expect(screen.getByTestId('button-reject')).toBeInTheDocument();
+    expect(screen.getByTestId('button-approve')).toHaveTextContent('Approve');
+    expect(screen.getByTestId('button-reject')).toHaveTextContent('Reject');
+  });
+
+  it('should disable buttons when otpVerified is false', () => {
+    render(
+      React.createElement(ApprovalDecisionForm, { ...defaultProps, otpVerified: false }),
+      { wrapper: createWrapper() }
+    );
+
+    expect(screen.getByTestId('button-approve')).toBeDisabled();
+    expect(screen.getByTestId('button-reject')).toBeDisabled();
+    expect(screen.getByTestId('otp-required-notice')).toBeInTheDocument();
+  });
+
+  it('should disable buttons when alreadyDecided is true', () => {
+    render(
+      React.createElement(ApprovalDecisionForm, {
+        ...defaultProps,
+        alreadyDecided: true,
+        existingDecision: 'APPROVED',
+      }),
+      { wrapper: createWrapper() }
+    );
+
+    expect(screen.getByTestId('button-approve')).toBeDisabled();
+    expect(screen.getByTestId('button-reject')).toBeDisabled();
+  });
+
+  it('should show existing decision status when alreadyDecided with APPROVED', () => {
+    render(
+      React.createElement(ApprovalDecisionForm, {
+        ...defaultProps,
+        alreadyDecided: true,
+        existingDecision: 'APPROVED',
+      }),
+      { wrapper: createWrapper() }
+    );
+
+    expect(screen.getByTestId('existing-decision-status')).toBeInTheDocument();
+    expect(screen.getByTestId('existing-decision-status')).toHaveTextContent(
+      'You have already approved this campaign.'
+    );
+  });
+
+  it('should show existing decision status when alreadyDecided with REJECTED', () => {
+    render(
+      React.createElement(ApprovalDecisionForm, {
+        ...defaultProps,
+        alreadyDecided: true,
+        existingDecision: 'REJECTED',
+      }),
+      { wrapper: createWrapper() }
+    );
+
+    expect(screen.getByTestId('existing-decision-status')).toBeInTheDocument();
+    expect(screen.getByTestId('existing-decision-status')).toHaveTextContent(
+      'You have already rejected this campaign.'
+    );
+  });
+
+  it('should open approval confirmation sheet when clicking Approve', async () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-approve'));
+
+    expect(screen.getByTestId('sheet')).toBeInTheDocument();
+    expect(screen.getByTestId('sheet-title')).toHaveTextContent('Confirm Approval');
+  });
+
+  it('should open rejection sheet when clicking Reject', async () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-reject'));
+
+    expect(screen.getByTestId('sheet')).toBeInTheDocument();
+    expect(screen.getByTestId('sheet-title')).toHaveTextContent('Reject Campaign');
+  });
+
+  it('should call mutate with APPROVED decision on confirm approve', async () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-approve'));
+    await userEvent.click(screen.getByTestId('button-confirm-approve'));
+
+    expect(mockSubmitDecisionMutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        token: 'test-token-123',
+        decision: 'APPROVED',
+      }),
+      expect.any(Object)
+    );
+  });
+
+  it('should call mutate with REJECTED decision and reason', async () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-reject'));
+
+    const reasonTextarea = screen.getByTestId('textarea-rejection-reason');
+    await userEvent.type(reasonTextarea, 'Budget is too high');
+
+    await userEvent.click(screen.getByTestId('button-confirm-reject'));
+
+    expect(mockSubmitDecisionMutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        token: 'test-token-123',
+        decision: 'REJECTED',
+        rejectionReason: 'Budget is too high',
+      }),
+      expect.any(Object)
+    );
+  });
+
+  it('should disable submit rejection button when reason is empty', async () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-reject'));
+
+    expect(screen.getByTestId('button-confirm-reject')).toBeDisabled();
+  });
+
+  it('should disable confirm buttons in sheet while submitting', async () => {
+    vi.mocked(useSubmitDecision).mockReturnValue({
+      mutate: mockSubmitDecisionMutate,
+      isPending: true,
+    } as any);
+
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-approve'));
+
+    expect(screen.getByTestId('button-confirm-approve')).toBeDisabled();
+    expect(screen.getByTestId('button-cancel-approve')).toBeDisabled();
+  });
+
+  it('should show success message after approval', async () => {
+    mockSubmitDecisionMutate.mockImplementation((_, options) => {
+      options.onSuccess();
+    });
+
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-approve'));
+    await userEvent.click(screen.getByTestId('button-confirm-approve'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('success-message')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('success-message')).toHaveTextContent('approved successfully');
+  });
+
+  it('should show error message on failure', async () => {
+    mockSubmitDecisionMutate.mockImplementation((_, options) => {
+      options.onError(new Error('Server error occurred'));
+    });
+
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-approve'));
+    await userEvent.click(screen.getByTestId('button-confirm-approve'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-message')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('error-message')).toHaveTextContent('Server error occurred');
+  });
+
+  it('should handle AlreadyDecidedError correctly', async () => {
+    const alreadyDecidedError = new AlreadyDecidedError('APPROVED');
+    mockSubmitDecisionMutate.mockImplementation((_, options) => {
+      options.onError(alreadyDecidedError);
+    });
+
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-approve'));
+    await userEvent.click(screen.getByTestId('button-confirm-approve'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('success-message')).toBeInTheDocument();
+    });
+  });
+
+  it('should close approval sheet when cancel is clicked', async () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-approve'));
+    expect(screen.getByTestId('sheet')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId('button-cancel-approve'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('approve-dialog')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should close rejection sheet when cancel is clicked', async () => {
+    render(React.createElement(ApprovalDecisionForm, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-reject'));
+    expect(screen.getByTestId('sheet')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId('button-cancel-reject'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('reject-dialog')).not.toBeInTheDocument();
+    });
+  });
+});