adserver-dashboard 1.0.0

package/client/src/pages/demo-status.tsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Card, CardContent, CardHeader, CardTitle } from '@moving-walls/design-system';
+import { Loader2, FileText, RefreshCw } from 'lucide-react';
+import { Button } from '@moving-walls/design-system';
+import { usePageTitle } from '@/hooks/use-page-title';
+
+export default function DemoStatusPage() {
+  usePageTitle('Demo Status');
+  const [content, setContent] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+
+  const fetchContent = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/DEMO_STATUS.md');
+      if (!response.ok) {
+        throw new Error('Failed to load demo status document');
+      }
+      const text = await response.text();
+      setContent(text);
+      setLastUpdated(new Date());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchContent();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-mw-neutral-50">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-8 w-8 animate-spin text-mw-primary-500" />
+          <p className="text-mw-neutral-600">Loading demo status...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-mw-neutral-50 p-4">
+        <Card className="max-w-md w-full shadow-lg">
+          <CardContent className="pt-6">
+            <div className="flex flex-col items-center gap-4 text-center">
+              <div className="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center">
+                <FileText className="h-6 w-6 text-red-600" />
+              </div>
+              <h1 className="text-xl font-semibold text-mw-neutral-900">Error Loading Document</h1>
+              <p className="text-mw-neutral-600">{error}</p>
+              <Button onClick={fetchContent} variant="outline">
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Retry
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-mw-neutral-50">
+      <div className="border-b border-mw-neutral-200 bg-white sticky top-0 z-10">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-lg bg-mw-primary-100 flex items-center justify-center">
+                <FileText className="h-5 w-5 text-mw-primary-600" />
+              </div>
+              <div>
+                <h1 className="text-xl font-semibold text-mw-neutral-900">Demo Status</h1>
+                <p className="text-sm text-mw-neutral-500">Ad Server Platform Documentation</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              {lastUpdated && (
+                <span className="text-xs text-mw-neutral-400">
+                  Loaded: {lastUpdated.toLocaleTimeString()}
+                </span>
+              )}
+              <Button onClick={fetchContent} variant="outline" size="sm">
+                <RefreshCw className="mr-2 h-3 w-3" />
+                Refresh
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-8">
+        <Card className="shadow-sm">
+          <CardContent className="p-8">
+            <article className="prose prose-neutral max-w-none prose-headings:text-mw-neutral-900 prose-h1:text-2xl prose-h1:font-bold prose-h1:border-b prose-h1:pb-2 prose-h2:text-xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4 prose-h3:text-lg prose-h3:font-medium prose-h4:text-base prose-p:text-mw-neutral-700 prose-li:text-mw-neutral-700 prose-strong:text-mw-neutral-900 prose-code:bg-mw-neutral-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono prose-pre:bg-mw-neutral-900 prose-pre:text-mw-neutral-100 prose-table:w-full prose-th:bg-mw-neutral-100 prose-th:px-4 prose-th:py-2 prose-th:text-left prose-th:font-medium prose-th:text-mw-neutral-700 prose-th:border prose-th:border-mw-neutral-200 prose-td:px-4 prose-td:py-2 prose-td:border prose-td:border-mw-neutral-200 prose-td:text-sm prose-a:text-mw-primary-600 prose-a:no-underline hover:prose-a:underline prose-hr:border-mw-neutral-200">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {content}
+              </ReactMarkdown>
+            </article>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/client/src/pages/direct-campaign-details.tsx

@@ -0,0 +1,361 @@
+import { useState } from "react";
+import { useParams, useLocation } from "wouter";
+import { useQuery } from "@tanstack/react-query";
+import { InfluenceDealsAPI, influenceDealsRequest, Deal, LineItem } from "@/lib/influence-deals-api";
+import { Button, cn } from "@moving-walls/design-system";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@moving-walls/design-system";
+import { ArrowLeft, Calendar, Building2, FileText, Monitor, Image, Send } from "lucide-react";
+import { RequestApprovalSheet } from "@/components/deals/request-approval-sheet";
+import { ApprovalHistoryPanel } from "@/components/deals/approval-history-panel";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+export default function DirectCampaignDetails() {
+  usePageTitle("Campaign Details");
+  const { id } = useParams<{ id: string }>();
+  const [, setLocation] = useLocation();
+  const [isApprovalSheetOpen, setIsApprovalSheetOpen] = useState(false);
+
+  const { data: deal, isLoading } = useQuery<Deal>({
+    queryKey: ['direct-campaigns', id],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.deals.get(id!);
+      return await influenceDealsRequest<Deal>(url, 'GET');
+    },
+    enabled: !!id,
+  });
+
+  const { data: lineItemsData } = useQuery<{ data: LineItem[] }>({
+    queryKey: ['direct-campaigns', id, 'line-items'],
+    queryFn: async () => {
+      const url = InfluenceDealsAPI.lineItems.list(id!);
+      return await influenceDealsRequest<{ data: LineItem[] }>(url, 'GET');
+    },
+    enabled: !!id,
+  });
+
+  const lineItems = lineItemsData?.data || [];
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-mw-primary-500"></div>
+      </div>
+    );
+  }
+
+  if (!deal) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4">
+        <div className="text-mw-neutral-500 dark:text-mw-neutral-400">Deal not found</div>
+        <Button
+          onClick={() => setLocation("/deals")}
+          className="bg-mw-primary-500 hover:bg-mw-primary-600"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to Deals
+        </Button>
+      </div>
+    );
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status?.toUpperCase()) {
+      case 'LIVE':
+      case 'APPROVED':
+        return 'bg-mw-success-500 text-white border-mw-success-500';
+      case 'PENDING':
+      case 'DRAFT':
+        return 'bg-mw-neutral-100 text-mw-neutral-600 border-mw-neutral-200';
+      case 'GENERATED':
+      case 'REVIEWING':
+        return 'bg-purple-100 text-purple-600 border-purple-200';
+      case 'PAUSED':
+        return 'bg-mw-warning-500 text-white border-mw-warning-500';
+      case 'COMPLETED':
+        return 'bg-mw-info-500 text-white border-mw-info-500';
+      case 'ARCHIVED':
+      case 'REJECTED':
+        return 'bg-mw-error-500 text-white border-mw-error-500';
+      default:
+        return 'bg-mw-neutral-100 text-mw-neutral-600 border-mw-neutral-200';
+    }
+  };
+
+  const showRequestApprovalButton = deal?.status?.toUpperCase() === 'GENERATED';
+  const showApprovalHistory = ['PENDING', 'APPROVED', 'REJECTED', 'REVIEWING'].includes(deal?.status?.toUpperCase() || '');
+
+  return (
+    <div className="flex flex-col gap-6 p-6 bg-mw-neutral-50 dark:bg-mw-neutral-900 min-h-screen">
+      <div className="flex items-center justify-between gap-4 flex-wrap">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLocation("/deals")}
+            className="hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-800 p-2"
+            data-testid="button-back"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <div className="flex items-center gap-3 mb-1 flex-wrap">
+              <h1 className="text-3xl font-bold tracking-tight text-mw-neutral-900 dark:text-white" data-testid="text-deal-name">
+                {deal.name}
+              </h1>
+              <Badge className={getStatusColor(deal.status)}>
+                {deal.status}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="bg-mw-primary-50 text-mw-primary-700 border-mw-primary-100"
+              >
+                {deal.dealType?.replace(/_/g, ' ')}
+              </Badge>
+              {deal.source && (
+                <Badge
+                  variant="secondary"
+                  className="bg-mw-info-50 text-mw-info-700 border-mw-info-100"
+                  data-testid="badge-source"
+                >
+                  {deal.source}
+                </Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-4 text-sm text-mw-neutral-600 dark:text-mw-neutral-400 flex-wrap">
+              {deal.advertiser && (
+                <div className="flex items-center gap-1">
+                  <Building2 className="h-4 w-4" />
+                  <span>{typeof deal.advertiser === 'object' ? (deal.advertiser as any).name : deal.advertiser}</span>
+                </div>
+              )}
+              <div>Currency: {deal.currency}</div>
+              <div>Country: {deal.country}</div>
+              {deal.externalId && (
+                <div>External ID: {deal.externalId}</div>
+              )}
+              {deal.createdAt && (
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-4 w-4" />
+                  <span>Created: {new Date(deal.createdAt).toLocaleDateString()}</span>
+                </div>
+              )}
+              {deal.publishers && deal.publishers.length > 0 && (
+                <div>Publishers: {deal.publishers.map(p => p.name).join(', ')}</div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {showRequestApprovalButton && (
+          <Button
+            onClick={() => setIsApprovalSheetOpen(true)}
+            className="bg-mw-primary-500 hover:bg-mw-primary-600"
+            data-testid="button-request-approval"
+          >
+            <Send className="h-4 w-4 mr-2" />
+            Request Approval
+          </Button>
+        )}
+      </div>
+
+      {showApprovalHistory && (
+        <ApprovalHistoryPanel dealId={id!} />
+      )}
+
+      <Tabs defaultValue="overview" className="w-full">
+        <TabsList className="grid w-full grid-cols-3 lg:w-auto bg-white dark:bg-mw-neutral-800 border border-mw-neutral-100">
+          <TabsTrigger
+            value="overview"
+            data-testid="tab-overview"
+            className="data-[state=active]:bg-mw-primary-50 data-[state=active]:text-mw-primary-700"
+          >
+            Overview
+          </TabsTrigger>
+          <TabsTrigger
+            value="line-items"
+            data-testid="tab-line-items"
+            className="gap-2 data-[state=active]:bg-mw-primary-50 data-[state=active]:text-mw-primary-700"
+          >
+            <FileText className="h-4 w-4" />
+            <span>Line Items</span>
+          </TabsTrigger>
+          <TabsTrigger
+            value="creatives"
+            data-testid="tab-creatives"
+            className="gap-2 data-[state=active]:bg-mw-primary-50 data-[state=active]:text-mw-primary-700"
+          >
+            <Image className="h-4 w-4" />
+            <span>Creatives</span>
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4 mt-6">
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <Card className="border-mw-neutral-100">
+              <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-mw-neutral-900 dark:text-white">Line Items</CardTitle>
+                <div className="h-8 w-8 rounded-lg bg-mw-success-50 dark:bg-mw-success-900/20 flex items-center justify-center">
+                  <FileText className="h-4 w-4 text-mw-success-600 dark:text-mw-success-400" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold text-mw-neutral-900 dark:text-white">
+                  {lineItems.length}
+                </div>
+                <p className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                  {lineItems.length === 1 ? "line item" : "line items"}
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="border-mw-neutral-100">
+              <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-mw-neutral-900 dark:text-white">Inventories</CardTitle>
+                <div className="h-8 w-8 rounded-lg bg-mw-info-50 dark:bg-mw-info-900/20 flex items-center justify-center">
+                  <Monitor className="h-4 w-4 text-mw-info-600 dark:text-mw-info-400" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold text-mw-neutral-900 dark:text-white">
+                  {lineItems.reduce((sum, li) => sum + (li.inventories?.length || 0), 0)}
+                </div>
+                <p className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                  assigned screens
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="border-mw-neutral-100">
+              <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-mw-neutral-900 dark:text-white">Total Budget</CardTitle>
+                <div className="h-8 w-8 rounded-lg bg-mw-warning-50 dark:bg-mw-warning-900/20 flex items-center justify-center">
+                  <Building2 className="h-4 w-4 text-mw-warning-600 dark:text-mw-warning-400" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold text-mw-neutral-900 dark:text-white">
+                  {deal.currency} {lineItems.reduce((sum, li) => sum + (li.budget || 0), 0).toLocaleString()}
+                </div>
+                <p className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400">
+                  across all line items
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+
+          <Card className="border-mw-neutral-100">
+            <CardHeader className="bg-mw-neutral-50 dark:bg-mw-neutral-900">
+              <CardTitle className="text-mw-neutral-900 dark:text-white">Deal Information</CardTitle>
+              <CardDescription className="text-mw-neutral-500 dark:text-mw-neutral-400">
+                Basic deal details and metadata
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 p-6 pt-0">
+              <div className="grid gap-4 md:grid-cols-2">
+                <div>
+                  <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400">Deal ID</div>
+                  <div className="text-sm text-mw-neutral-900 dark:text-white font-mono">{deal.id}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400">Status</div>
+                  <div className="text-sm text-mw-neutral-900 dark:text-white">{deal.status}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400">Deal Type</div>
+                  <div className="text-sm text-mw-neutral-900 dark:text-white">{deal.dealType?.replace(/_/g, ' ')}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400">Currency</div>
+                  <div className="text-sm text-mw-neutral-900 dark:text-white">{deal.currency}</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400">Country</div>
+                  <div className="text-sm text-mw-neutral-900 dark:text-white">{deal.country}</div>
+                </div>
+                {deal.createdAt && (
+                  <div>
+                    <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400">Created At</div>
+                    <div className="text-sm text-mw-neutral-900 dark:text-white">{new Date(deal.createdAt).toLocaleString()}</div>
+                  </div>
+                )}
+                {deal.updatedAt && (
+                  <div>
+                    <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400">Updated At</div>
+                    <div className="text-sm text-mw-neutral-900 dark:text-white">{new Date(deal.updatedAt).toLocaleString()}</div>
+                  </div>
+                )}
+                {deal.publishers && deal.publishers.length > 0 && (
+                  <div className="md:col-span-2">
+                    <div className="text-sm font-medium text-mw-neutral-600 dark:text-mw-neutral-400 mb-1">Publishers</div>
+                    <div className="flex flex-wrap gap-2">
+                      <div className="text-sm text-mw-neutral-900 dark:text-white">{deal.publishers.map(p => p.name).join(', ')}</div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="line-items" className="space-y-4 mt-6">
+          <Card className="border-mw-neutral-100">
+            <CardHeader className="bg-mw-neutral-50 dark:bg-mw-neutral-900">
+              <CardTitle className="text-mw-neutral-900 dark:text-white">Line Items</CardTitle>
+              <CardDescription className="text-mw-neutral-500 dark:text-mw-neutral-400">
+                All line items in this deal
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-6 pt-0">
+              {lineItems.length === 0 ? (
+                <div className="text-center py-8 text-mw-neutral-500">No line items found</div>
+              ) : (
+                <div className="space-y-3">
+                  {lineItems.map((lineItem) => (
+                    <Card key={lineItem.id} className="border-mw-neutral-100">
+                      <CardContent className="p-4">
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h4 className="font-medium">{lineItem.name}</h4>
+                            <p className="text-sm text-mw-neutral-500">
+                              {lineItem.startDate} - {lineItem.endDate} | Budget: {deal.currency} {lineItem.budget?.toLocaleString()}
+                            </p>
+                          </div>
+                          <Badge>{lineItem.status}</Badge>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="creatives" className="space-y-4 mt-6">
+          <Card className="border-mw-neutral-100">
+            <CardHeader className="bg-mw-neutral-50 dark:bg-mw-neutral-900">
+              <CardTitle className="text-mw-neutral-900 dark:text-white">Creatives</CardTitle>
+              <CardDescription className="text-mw-neutral-500 dark:text-mw-neutral-400">
+                Creatives assigned to line items
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-6 pt-0">
+              <div className="text-center py-8 text-mw-neutral-500">
+                Creatives are managed within each line item. View line items to see assigned creatives.
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      <RequestApprovalSheet
+        dealId={id!}
+        open={isApprovalSheetOpen}
+        onOpenChange={setIsApprovalSheetOpen}
+        existingEmails={deal.approvalEmails}
+      />
+    </div>
+  );
+}