adserver-dashboard 1.0.0

package/client/src/components/deals/approval-history-panel.test.tsx

@@ -0,0 +1,240 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const mockUseApprovalHistory = vi.fn();
+
+vi.mock('@/hooks/use-approval', () => ({
+  useApprovalHistory: (dealId: string) => mockUseApprovalHistory(dealId),
+}));
+
+vi.mock('lucide-react', async () => {
+  const React = await import('react');
+  const createIcon = (name: string) => {
+    const Icon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+      (props, ref) => React.createElement('svg', { ref, 'data-testid': `icon-${name}`, ...props })
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+  return {
+    ChevronDown: createIcon('chevron-down'),
+    ChevronUp: createIcon('chevron-up'),
+    Clock: createIcon('clock'),
+    CheckCircle: createIcon('check-circle'),
+    XCircle: createIcon('x-circle'),
+    History: createIcon('history'),
+  };
+});
+
+import { ApprovalHistoryPanel } from './approval-history-panel';
+
+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('ApprovalHistoryPanel', () => {
+  const defaultProps = {
+    dealId: 'deal-123',
+  };
+
+  const mockApprovalHistory = [
+    {
+      id: 'approval-1',
+      approverEmail: 'pending@example.com',
+      status: 'PENDING' as const,
+      rejectionReason: null,
+      decidedAt: null,
+      createdAt: '2024-01-15T10:00:00Z',
+    },
+    {
+      id: 'approval-2',
+      approverEmail: 'approved@example.com',
+      status: 'APPROVED' as const,
+      rejectionReason: null,
+      decidedAt: '2024-01-16T14:30:00Z',
+      createdAt: '2024-01-15T10:00:00Z',
+    },
+    {
+      id: 'approval-3',
+      approverEmail: 'rejected@example.com',
+      status: 'REJECTED' as const,
+      rejectionReason: 'Budget concerns',
+      decidedAt: '2024-01-16T15:45:00Z',
+      createdAt: '2024-01-15T10:00:00Z',
+    },
+  ];
+
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    mockUseApprovalHistory.mockReturnValue({
+      data: { dealId: 'deal-123', approvalHistory: mockApprovalHistory },
+      isLoading: false,
+    });
+  });
+
+  it('should render approval history list with multiple approvers', () => {
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByTestId('approval-history-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('approval-item-approval-1')).toBeInTheDocument();
+    expect(screen.getByTestId('approval-item-approval-2')).toBeInTheDocument();
+    expect(screen.getByTestId('approval-item-approval-3')).toBeInTheDocument();
+
+    const emails = screen.getAllByTestId('approver-email');
+    expect(emails).toHaveLength(3);
+    expect(emails[0]).toHaveTextContent('pending@example.com');
+    expect(emails[1]).toHaveTextContent('approved@example.com');
+    expect(emails[2]).toHaveTextContent('rejected@example.com');
+  });
+
+  it('should show pending badge for pending approvers', () => {
+    mockUseApprovalHistory.mockReturnValue({
+      data: {
+        dealId: 'deal-123',
+        approvalHistory: [mockApprovalHistory[0]],
+      },
+      isLoading: false,
+    });
+
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    const pendingBadge = screen.getByTestId('status-badge-pending');
+    expect(pendingBadge).toBeInTheDocument();
+    expect(pendingBadge).toHaveTextContent('Pending');
+    expect(pendingBadge).toHaveClass('bg-gray-100', 'text-gray-600');
+  });
+
+  it('should show approved badge with timestamp for approved', () => {
+    mockUseApprovalHistory.mockReturnValue({
+      data: {
+        dealId: 'deal-123',
+        approvalHistory: [mockApprovalHistory[1]],
+      },
+      isLoading: false,
+    });
+
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    const approvedBadge = screen.getByTestId('status-badge-approved');
+    expect(approvedBadge).toBeInTheDocument();
+    expect(approvedBadge).toHaveTextContent('Approved');
+    expect(approvedBadge).toHaveClass('bg-green-50', 'text-green-600');
+
+    const timestamp = screen.getByTestId('decided-at');
+    expect(timestamp).toBeInTheDocument();
+  });
+
+  it('should show rejected badge with reason for rejected', () => {
+    mockUseApprovalHistory.mockReturnValue({
+      data: {
+        dealId: 'deal-123',
+        approvalHistory: [mockApprovalHistory[2]],
+      },
+      isLoading: false,
+    });
+
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    const rejectedBadge = screen.getByTestId('status-badge-rejected');
+    expect(rejectedBadge).toBeInTheDocument();
+    expect(rejectedBadge).toHaveTextContent('Rejected');
+    expect(rejectedBadge).toHaveClass('bg-red-50', 'text-red-600');
+
+    const reason = screen.getByTestId('rejection-reason');
+    expect(reason).toBeInTheDocument();
+    expect(reason).toHaveTextContent('Reason: Budget concerns');
+  });
+
+  it('should show loading skeleton while fetching', () => {
+    mockUseApprovalHistory.mockReturnValue({
+      data: null,
+      isLoading: true,
+    });
+
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
+    expect(screen.queryByTestId('approval-item-approval-1')).not.toBeInTheDocument();
+  });
+
+  it('should show empty state when no history exists', () => {
+    mockUseApprovalHistory.mockReturnValue({
+      data: { dealId: 'deal-123', approvalHistory: [] },
+      isLoading: false,
+    });
+
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    expect(screen.getByText('No approval history yet')).toBeInTheDocument();
+  });
+
+  it('should format dates correctly', () => {
+    mockUseApprovalHistory.mockReturnValue({
+      data: {
+        dealId: 'deal-123',
+        approvalHistory: [mockApprovalHistory[1]],
+      },
+      isLoading: false,
+    });
+
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    const timestamp = screen.getByTestId('decided-at');
+    expect(timestamp).toBeInTheDocument();
+    expect(timestamp.textContent).toMatch(/\d{2}\/\d{2}\/\d{4} \d{2}:\d{2}/);
+  });
+
+  it('should toggle panel expansion when clicking the header', async () => {
+    const user = userEvent.setup();
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByTestId('panel-content')).toBeInTheDocument();
+
+    const toggleButton = screen.getByTestId('panel-toggle');
+    await user.click(toggleButton);
+
+    expect(screen.queryByTestId('panel-content')).not.toBeInTheDocument();
+
+    await user.click(toggleButton);
+
+    expect(screen.getByTestId('panel-content')).toBeInTheDocument();
+  });
+
+  it('should call useApprovalHistory with the correct dealId', () => {
+    render(React.createElement(ApprovalHistoryPanel, { dealId: 'custom-deal-id' }), {
+      wrapper: createWrapper(),
+    });
+
+    expect(mockUseApprovalHistory).toHaveBeenCalledWith('custom-deal-id');
+  });
+
+  it('should show count of approvers in the header', () => {
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByText('(3)')).toBeInTheDocument();
+  });
+
+  it('should not show timestamp for pending approvers', () => {
+    mockUseApprovalHistory.mockReturnValue({
+      data: {
+        dealId: 'deal-123',
+        approvalHistory: [mockApprovalHistory[0]],
+      },
+      isLoading: false,
+    });
+
+    render(React.createElement(ApprovalHistoryPanel, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.queryByTestId('decided-at')).not.toBeInTheDocument();
+  });
+});

package/client/src/components/deals/approval-history-panel.tsx

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronUp, Clock, CheckCircle, XCircle, History } from 'lucide-react';
+import { Button, cn } from '@moving-walls/design-system';
+import { useApprovalHistory } from '@/hooks/use-approval';
+import type { ApprovalRecord } from '@/types/approval';
+
+interface ApprovalHistoryPanelProps {
+  dealId: string;
+}
+
+function formatDateTime(dateString: string | null | undefined): string {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return '';
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = date.getFullYear();
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${day}/${month}/${year} ${hours}:${minutes}`;
+}
+
+function StatusBadge({ status }: { status: ApprovalRecord['status'] }) {
+  const config = {
+    PENDING: {
+      label: 'Pending',
+      className: 'bg-gray-100 text-gray-600',
+      icon: Clock,
+    },
+    APPROVED: {
+      label: 'Approved',
+      className: 'bg-green-50 text-green-600',
+      icon: CheckCircle,
+    },
+    REJECTED: {
+      label: 'Rejected',
+      className: 'bg-red-50 text-red-600',
+      icon: XCircle,
+    },
+  };
+
+  const { label, className, icon: Icon } = config[status] || config.PENDING;
+
+  return (
+    <span
+      data-testid={`status-badge-${status.toLowerCase()}`}
+      className={cn(
+        'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
+        className
+      )}
+    >
+      <Icon className="h-3 w-3" />
+      {label}
+    </span>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div data-testid="loading-skeleton" className="space-y-3 p-4">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex items-center justify-between animate-pulse">
+          <div className="flex items-center gap-3">
+            <div className="h-4 w-32 bg-gray-200 rounded" />
+            <div className="h-5 w-16 bg-gray-200 rounded-full" />
+          </div>
+          <div className="h-4 w-24 bg-gray-200 rounded" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div data-testid="empty-state" className="flex flex-col items-center justify-center py-8 text-gray-500">
+      <History className="h-8 w-8 mb-2 text-gray-400" />
+      <p className="text-sm">No approval history yet</p>
+    </div>
+  );
+}
+
+function ApprovalItem({ record }: { record: ApprovalRecord }) {
+  return (
+    <div
+      data-testid={`approval-item-${record.id}`}
+      className="flex flex-col gap-1 py-3 border-b border-gray-100 last:border-b-0"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span data-testid="approver-email" className="text-sm font-medium text-gray-900">
+            {record.approverEmail}
+          </span>
+          <StatusBadge status={record.status} />
+        </div>
+        {record.decidedAt && (
+          <span data-testid="decided-at" className="text-xs text-gray-500">
+            {formatDateTime(record.decidedAt)}
+          </span>
+        )}
+      </div>
+      {record.status === 'REJECTED' && record.rejectionReason && (
+        <p data-testid="rejection-reason" className="text-sm text-red-600 mt-1">
+          Reason: {record.rejectionReason}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function ApprovalHistoryPanel({ dealId }: ApprovalHistoryPanelProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const { data, isLoading } = useApprovalHistory(dealId);
+
+  const approvalHistory = data?.approvalHistory || [];
+
+  return (
+    <div data-testid="approval-history-panel" className="border border-gray-200 rounded-lg bg-white">
+      <Button
+        variant="ghost"
+        data-testid="panel-toggle"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-4 py-3 text-left"
+      >
+        <div className="flex items-center gap-2">
+          <History className="h-4 w-4 text-gray-500" />
+          <span className="text-sm font-medium text-gray-900">Approval History</span>
+          {approvalHistory.length > 0 && (
+            <span className="text-xs text-gray-500">({approvalHistory.length})</span>
+          )}
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="h-4 w-4 text-gray-500" />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-gray-500" />
+        )}
+      </Button>
+
+      {isExpanded && (
+        <div data-testid="panel-content" className="border-t border-gray-200">
+          {isLoading ? (
+            <LoadingSkeleton />
+          ) : approvalHistory.length === 0 ? (
+            <EmptyState />
+          ) : (
+            <div className="px-4 py-2">
+              {approvalHistory.map((record) => (
+                <ApprovalItem key={record.id} record={record} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/deals/deal-status-badge.tsx

@@ -0,0 +1,92 @@
+import { cn } from "@moving-walls/design-system";
+
+interface DealStatusBadgeProps {
+  status: string;
+  mode?: 'DIRECT' | 'PROGRAMMATIC';
+  className?: string;
+}
+
+const statusConfig: Record<string, { 
+  label: string; 
+  className: string;
+}> = {
+  DRAFT: {
+    label: 'Draft',
+    className: 'bg-gray-100 text-gray-600 border-gray-300',
+  },
+  GENERATED: {
+    label: 'Generated',
+    className: 'bg-purple-50 text-purple-600 border-purple-200',
+  },
+  REQUESTED: {
+    label: 'Requested',
+    className: 'bg-indigo-50 text-indigo-600 border-indigo-200',
+  },
+  ARCHIVED: {
+    label: 'Archived',
+    className: 'bg-orange-50 text-orange-600 border-orange-200',
+  },
+  REVIEWING: {
+    label: 'Reviewing',
+    className: 'bg-blue-50 text-blue-600 border-blue-200',
+  },
+  REJECTED: {
+    label: 'Rejected',
+    className: 'bg-red-50 text-red-600 border-red-200',
+  },
+  ACTIVE: {
+    label: 'Active',
+    className: 'bg-green-50 text-green-600 border-green-200',
+  },
+  LIVE: {
+    label: 'Live',
+    className: 'bg-green-50 text-green-600 border-green-200',
+  },
+  PENDING: {
+    label: 'Pending',
+    className: 'bg-gray-100 text-gray-600 border-gray-300',
+  },
+  PAUSED: {
+    label: 'Paused',
+    className: 'bg-orange-50 text-orange-600 border-orange-200',
+  },
+  COMPLETED: {
+    label: 'Completed',
+    className: 'bg-blue-50 text-blue-600 border-blue-200',
+  },
+  REOPENED: {
+    label: 'Reopened',
+    className: 'bg-amber-50 text-amber-600 border-amber-200',
+  },
+  APPROVED: {
+    label: 'Approved',
+    className: 'bg-green-50 text-green-600 border-green-200',
+  },
+  EXPIRED: {
+    label: 'Expired',
+    className: 'bg-gray-100 text-gray-500 border-gray-300',
+  },
+};
+
+export function DealStatusBadge({ status, mode, className }: DealStatusBadgeProps) {
+  const statusUpper = status?.toUpperCase() || 'DRAFT';
+  const config = statusConfig[statusUpper] || statusConfig.DRAFT;
+
+  const modeLabel = mode === 'PROGRAMMATIC' ? 'Programmatic' : 'Traditional';
+
+  return (
+    <div className={cn("flex flex-col items-start gap-0.5", className)}>
+      <span
+        className={cn(
+          "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border",
+          config.className
+        )}
+      >
+        {config.label}
+      </span>
+      <span className="text-[10px] text-mw-neutral-500 pl-0.5">
+        {modeLabel}
+      </span>
+    </div>
+  );
+}