adserver-dashboard 1.0.0

package/client/src/pages/dashboard.tsx

@@ -0,0 +1,615 @@
+import { useState } from "react";
+import { format, subDays } from "date-fns";
+import {
+  Megaphone,
+  Monitor,
+  Eye,
+  DollarSign,
+  TrendingUp,
+  Activity,
+  Zap,
+  AlertTriangle,
+  ArrowUpRight,
+  BarChart3,
+  Layers,
+  Image,
+  CalendarDays,
+  CheckCircle2,
+  Clock,
+  Link2,
+} from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Progress,
+  PageHeader,
+  Skeleton,
+  Select,
+} from "@moving-walls/design-system";
+import { useTranslation } from "@/lib/i18n";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { useLocation } from "wouter";
+
+type TimePeriod = "30" | "60" | "90" | "custom";
+
+interface DashboardMetrics {
+  activeDeals: number;
+  totalDeals: number;
+  totalImpressions: number;
+  totalRevenue: number;
+  fillRate: number;
+  avgCPM: number;
+  activeLineItems: number;
+  totalLineItems: number;
+  totalCreatives: number;
+  acceptedCreatives: number;
+  pendingApprovalCreatives: number;
+  assignedCreatives: number;
+  activeScreens: number;
+  totalScreens: number;
+}
+
+interface Deal {
+  id: string;
+  name: string;
+  dealType: "programmatic" | "traditional";
+  status: "active" | "pending" | "completed" | "draft";
+}
+
+const mockMetrics: DashboardMetrics = {
+  activeDeals: 24,
+  totalDeals: 48,
+  totalImpressions: 12500000,
+  totalRevenue: 485000,
+  fillRate: 87,
+  avgCPM: 12.50,
+  activeLineItems: 156,
+  totalLineItems: 312,
+  totalCreatives: 89,
+  acceptedCreatives: 72,
+  pendingApprovalCreatives: 12,
+  assignedCreatives: 65,
+  activeScreens: 1247,
+  totalScreens: 1300,
+};
+
+const mockRecentDeals: Deal[] = [
+  { id: "1", name: "Holiday Campaign 2026", dealType: "programmatic", status: "active" },
+  { id: "2", name: "Brand Awareness Q1", dealType: "traditional", status: "active" },
+  { id: "3", name: "Product Launch - Spring", dealType: "programmatic", status: "pending" },
+  { id: "4", name: "Retail Promo Network", dealType: "traditional", status: "completed" },
+  { id: "5", name: "Transit Media Deal", dealType: "programmatic", status: "draft" },
+];
+
+export default function Dashboard() {
+  const { t } = useTranslation(['dashboard', 'common']);
+  usePageTitle(t('dashboard:title'));
+  const [, setLocation] = useLocation();
+  const [timePeriod, setTimePeriod] = useState<TimePeriod>("30");
+  const [customDateRange, setCustomDateRange] = useState<{
+    from: Date | undefined;
+    to: Date | undefined;
+  }>({
+    from: subDays(new Date(), 30),
+    to: new Date(),
+  });
+  const [calendarOpen, setCalendarOpen] = useState(false);
+
+  const metrics = mockMetrics;
+  const recentDeals = mockRecentDeals;
+  const metricsLoading = false;
+  const dealsLoading = false;
+
+  const formatNumber = (num: number) => {
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+    return num.toString();
+  };
+
+  const formatCurrency = (num: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(num);
+  };
+
+  const getTimePeriodLabel = () => {
+    if (timePeriod === "custom" && customDateRange.from && customDateRange.to) {
+      return `${format(customDateRange.from, "MMM dd, yyyy")} - ${format(customDateRange.to, "MMM dd, yyyy")}`;
+    }
+    return `Last ${timePeriod} days`;
+  };
+
+  const handleTimePeriodChange = (value: string) => {
+    if (value === "custom") {
+      setTimePeriod("custom");
+      setCalendarOpen(true);
+    } else {
+      setTimePeriod(value as TimePeriod);
+      const days = parseInt(value);
+      setCustomDateRange({
+        from: subDays(new Date(), days),
+        to: new Date(),
+      });
+    }
+  };
+
+  const getStatusBadge = (status: Deal["status"]) => {
+    const variants: Record<Deal["status"], "default" | "secondary" | "outline" | "success" | "warning"> = {
+      active: "success",
+      pending: "warning",
+      completed: "outline",
+      draft: "secondary",
+    };
+    return (
+      <Badge variant={variants[status]} className="capitalize">
+        {status}
+      </Badge>
+    );
+  };
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-mw-neutral-50 dark:bg-mw-neutral-900 overflow-hidden">
+      <div className="flex-shrink-0">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-mw-neutral-200">
+          <PageHeader
+            title={t('dashboard:title')}
+            subtitle={t('dashboard:subtitle')}
+          />
+          <div className="flex items-center gap-2">
+            <Select
+              value={timePeriod}
+              onChange={(e) => handleTimePeriodChange(e.target.value)}
+              className="h-10 px-3 py-2 text-sm border border-input bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+              data-testid="select-time-period"
+              options={[
+                { value: "30", label: "Last 30 days" },
+                { value: "60", label: "Last 60 days" },
+                { value: "90", label: "Last 90 days" },
+                { value: "custom", label: "Custom dates" },
+              ]}
+            />
+            {timePeriod === "custom" && (
+              <Button variant="outline" size="sm" data-testid="button-custom-dates">
+                <CalendarDays className="h-4 w-4 mr-2" />
+                {customDateRange.from && customDateRange.to
+                  ? `${format(customDateRange.from, "MMM dd")} - ${format(customDateRange.to, "MMM dd")}`
+                  : "Pick dates"}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto px-6 py-6 space-y-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {metricsLoading ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Card key={i}>
+                  <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                    <Skeleton className="h-4 w-24" />
+                    <Skeleton className="h-8 w-8 rounded-md" />
+                  </CardHeader>
+                  <CardContent>
+                    <Skeleton className="h-8 w-20 mb-2" />
+                    <Skeleton className="h-3 w-32" />
+                  </CardContent>
+                </Card>
+              ))}
+            </>
+          ) : (
+            <>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Active Deals</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <Megaphone className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{metrics.activeDeals}</div>
+                  <p className="text-xs text-muted-foreground">of {metrics.totalDeals} total</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Total Impressions</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <Eye className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{formatNumber(metrics.totalImpressions)}</div>
+                  <p className="text-xs text-muted-foreground">{getTimePeriodLabel()}</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Revenue</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <DollarSign className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{formatCurrency(metrics.totalRevenue)}</div>
+                  <p className="text-xs text-muted-foreground">{getTimePeriodLabel()}</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Fill Rate</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <TrendingUp className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{metrics.fillRate}%</div>
+                  <p className="text-xs text-muted-foreground">Avg CPM: {formatCurrency(metrics.avgCPM)}</p>
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {metricsLoading ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Card key={i}>
+                  <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                    <Skeleton className="h-4 w-24" />
+                    <Skeleton className="h-8 w-8 rounded-md" />
+                  </CardHeader>
+                  <CardContent>
+                    <Skeleton className="h-8 w-20 mb-2" />
+                    <Skeleton className="h-3 w-32" />
+                  </CardContent>
+                </Card>
+              ))}
+            </>
+          ) : (
+            <>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Active Screens</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <Monitor className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{metrics.activeScreens}</div>
+                  <p className="text-xs text-muted-foreground">of {metrics.totalScreens} total</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Active Line Items</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <Layers className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{metrics.activeLineItems}</div>
+                  <p className="text-xs text-muted-foreground">of {metrics.totalLineItems} total</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Total Creatives</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <Image className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{metrics.totalCreatives}</div>
+                  <p className="text-xs text-muted-foreground">{metrics.acceptedCreatives} approved</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0 pb-2">
+                  <span className="text-sm font-medium text-muted-foreground">Pending Approvals</span>
+                  <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
+                    <Clock className="h-4 w-4 text-primary" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{metrics.pendingApprovalCreatives}</div>
+                  <p className="text-xs text-muted-foreground">{metrics.assignedCreatives} assigned</p>
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-7">
+          <Card className="lg:col-span-4">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Activity className="h-5 w-5 text-primary" />
+                Impression Delivery
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-6">
+                {metricsLoading ? (
+                  [...Array(4)].map((_, i) => (
+                    <div key={i} className="space-y-2">
+                      <Skeleton className="h-4 w-full" />
+                      <Skeleton className="h-2 w-full" />
+                    </div>
+                  ))
+                ) : (
+                  <>
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between text-sm">
+                        <span>Today</span>
+                        <span className="font-medium">245,890 impressions</span>
+                      </div>
+                      <Progress value={68} className="h-2" />
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between text-sm">
+                        <span>This Week</span>
+                        <span className="font-medium">1.42M impressions</span>
+                      </div>
+                      <Progress value={82} className="h-2" />
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between text-sm">
+                        <span>This Month</span>
+                        <span className="font-medium">5.67M impressions</span>
+                      </div>
+                      <Progress value={71} className="h-2" />
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between text-sm">
+                        <span>Goal Completion</span>
+                        <span className="font-medium">89%</span>
+                      </div>
+                      <Progress value={89} className="h-2" />
+                    </div>
+                  </>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="lg:col-span-3">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Monitor className="h-5 w-5 text-primary" />
+                Screen Status
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {metricsLoading ? (
+                  [...Array(3)].map((_, i) => (
+                    <div key={i} className="flex items-center justify-between">
+                      <Skeleton className="h-4 w-20" />
+                      <Skeleton className="h-6 w-16" />
+                    </div>
+                  ))
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-emerald-500/10">
+                      <div className="flex items-center gap-2">
+                        <div className="h-2 w-2 rounded-full bg-emerald-500" />
+                        <span className="text-sm font-medium">Online</span>
+                      </div>
+                      <span className="text-lg font-bold text-emerald-600 dark:text-emerald-400">
+                        {metrics.activeScreens}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-amber-500/10">
+                      <div className="flex items-center gap-2">
+                        <div className="h-2 w-2 rounded-full bg-amber-500" />
+                        <span className="text-sm font-medium">Maintenance</span>
+                      </div>
+                      <span className="text-lg font-bold text-amber-600 dark:text-amber-400">3</span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-slate-500/10">
+                      <div className="flex items-center gap-2">
+                        <div className="h-2 w-2 rounded-full bg-slate-500" />
+                        <span className="text-sm font-medium">Offline</span>
+                      </div>
+                      <span className="text-lg font-bold text-slate-600 dark:text-slate-400">
+                        {metrics.totalScreens - metrics.activeScreens - 3}
+                      </span>
+                    </div>
+                    <div className="pt-2 border-t">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Total Screens</span>
+                        <span className="font-semibold">{metrics.totalScreens}</span>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-3">
+          <Card 
+            className="cursor-pointer hover:shadow-md transition-shadow" 
+            onClick={() => setLocation("/deals")} 
+            data-testid="card-recent-deals"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Zap className="h-5 w-5 text-primary" />
+                Recent Deals
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {dealsLoading ? (
+                  [...Array(5)].map((_, i) => (
+                    <div key={i} className="flex items-center justify-between py-2">
+                      <Skeleton className="h-4 w-40" />
+                      <Skeleton className="h-6 w-16" />
+                    </div>
+                  ))
+                ) : recentDeals && recentDeals.length > 0 ? (
+                  recentDeals.slice(0, 5).map((deal) => (
+                    <div
+                      key={deal.id}
+                      className="flex items-center justify-between py-2 border-b last:border-0"
+                      data-testid={`deal-row-${deal.id}`}
+                    >
+                      <div className="flex flex-col">
+                        <span className="font-medium">{deal.name}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {deal.dealType === "programmatic" ? "Programmatic" : "Traditional"}
+                        </span>
+                      </div>
+                      {getStatusBadge(deal.status)}
+                    </div>
+                  ))
+                ) : (
+                  <div className="text-center py-8 text-muted-foreground">
+                    No deals yet. Create your first deal to get started.
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <BarChart3 className="h-5 w-5 text-primary" />
+                Line Item Delivery Status
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {metricsLoading ? (
+                  [...Array(4)].map((_, i) => (
+                    <div key={i} className="flex items-center justify-between">
+                      <Skeleton className="h-4 w-24" />
+                      <Skeleton className="h-6 w-12" />
+                    </div>
+                  ))
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-emerald-500/10">
+                      <div className="flex items-center gap-2">
+                        <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+                        <span className="text-sm font-medium">On Track</span>
+                      </div>
+                      <span className="text-lg font-bold text-emerald-600 dark:text-emerald-400">
+                        {Math.round(metrics.activeLineItems * 0.6)}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-blue-500/10">
+                      <div className="flex items-center gap-2">
+                        <ArrowUpRight className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                        <span className="text-sm font-medium">Ahead</span>
+                      </div>
+                      <span className="text-lg font-bold text-blue-600 dark:text-blue-400">
+                        {Math.round(metrics.activeLineItems * 0.2)}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-amber-500/10">
+                      <div className="flex items-center gap-2">
+                        <Clock className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+                        <span className="text-sm font-medium">Behind</span>
+                      </div>
+                      <span className="text-lg font-bold text-amber-600 dark:text-amber-400">
+                        {Math.round(metrics.activeLineItems * 0.15)}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-red-500/10">
+                      <div className="flex items-center gap-2">
+                        <AlertTriangle className="h-4 w-4 text-red-600 dark:text-red-400" />
+                        <span className="text-sm font-medium">At Risk</span>
+                      </div>
+                      <span className="text-lg font-bold text-red-600 dark:text-red-400">
+                        {Math.round(metrics.activeLineItems * 0.05)}
+                      </span>
+                    </div>
+                    <div className="pt-2 border-t">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Active Line Items</span>
+                        <span className="font-semibold">{metrics.activeLineItems}</span>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Image className="h-5 w-5 text-primary" />
+                Creative Status
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {metricsLoading ? (
+                  [...Array(4)].map((_, i) => (
+                    <div key={i} className="flex items-center justify-between">
+                      <Skeleton className="h-4 w-24" />
+                      <Skeleton className="h-6 w-12" />
+                    </div>
+                  ))
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-blue-500/10">
+                      <div className="flex items-center gap-2">
+                        <Image className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                        <span className="text-sm font-medium">Total Creatives</span>
+                      </div>
+                      <span className="text-lg font-bold text-blue-600 dark:text-blue-400">
+                        {metrics.totalCreatives}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-emerald-500/10">
+                      <div className="flex items-center gap-2">
+                        <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+                        <span className="text-sm font-medium">Accepted</span>
+                      </div>
+                      <span className="text-lg font-bold text-emerald-600 dark:text-emerald-400">
+                        {metrics.acceptedCreatives}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-amber-500/10">
+                      <div className="flex items-center gap-2">
+                        <Clock className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+                        <span className="text-sm font-medium">Pending Approval</span>
+                      </div>
+                      <span className="text-lg font-bold text-amber-600 dark:text-amber-400">
+                        {metrics.pendingApprovalCreatives}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 rounded-md bg-purple-500/10">
+                      <div className="flex items-center gap-2">
+                        <Link2 className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+                        <span className="text-sm font-medium">Assigned to Line Items</span>
+                      </div>
+                      <span className="text-lg font-bold text-purple-600 dark:text-purple-400">
+                        {metrics.assignedCreatives}
+                      </span>
+                    </div>
+                  </>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}