adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/dashboard.tsx

@@ -0,0 +1,620 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { format, subDays } from "date-fns";
+import {
+  Megaphone,
+  Eye,
+  DollarSign,
+  TrendingUp,
+  Activity,
+  Zap,
+  FileText,
+  Layers,
+  Image,
+  CalendarDays,
+  CheckCircle2,
+  Clock,
+  Link2,
+  Calendar,
+  AlertTriangle,
+  ArrowUpRight,
+  BarChart3,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { PageHeader } from "@/components/page-header";
+import { MetricCard } from "@/components/metric-card";
+import { StatusBadge } from "@/components/status-badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar as CalendarComponent } from "@/components/ui/calendar";
+import { formatCurrency } from "@/lib/utils";
+import type { Deal, LineItem, DashboardMetrics, Screen } from "@shared/schema";
+import { useLocation } from "wouter";
+
+type TimePeriod = "30" | "60" | "90" | "custom";
+
+export default function Dashboard() {
+  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 { data: metrics, isLoading: metricsLoading } = useQuery<DashboardMetrics>({
+    queryKey: ["/api/dashboard/metrics"],
+  });
+
+  const { data: recentDeals, isLoading: dealsLoading } = useQuery<Deal[]>({
+    queryKey: ["/api/deals"],
+  });
+
+  const { data: lineItems, isLoading: lineItemsLoading } = useQuery<LineItem[]>({
+    queryKey: ["/api/line-items"],
+  });
+
+  const { data: screens, isLoading: screensLoading } = useQuery<Screen[]>({
+    queryKey: ["/api/screens"],
+  });
+
+  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 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 getInventoryAvailability = () => {
+    if (!screens || screens.length === 0) {
+      return { available: 0, partiallyAvailable: 0, soldOut: 0, total: 0 };
+    }
+    
+    const seededRandom = (seed: number) => {
+      const x = Math.sin(seed) * 10000;
+      return x - Math.floor(x);
+    };
+
+    let available = 0;
+    let partiallyAvailable = 0;
+    let soldOut = 0;
+
+    screens.forEach((screen) => {
+      const idStr = String(screen.id);
+      const seed = parseInt(idStr.replace(/\D/g, '') || '0', 10) + 42;
+      const rand = seededRandom(seed);
+      if (rand < 0.6) {
+        available++;
+      } else if (rand < 0.85) {
+        partiallyAvailable++;
+      } else {
+        soldOut++;
+      }
+    });
+
+    return { available, partiallyAvailable, soldOut, total: screens.length };
+  };
+
+  const getLineItemDeliveryStatus = () => {
+    if (!lineItems || lineItems.length === 0) {
+      return { onTrack: 0, behind: 0, atRisk: 0, ahead: 0, total: 0 };
+    }
+
+    const activeLineItems = lineItems.filter(li => li.status === 'active');
+    
+    const seededRandom = (seed: number) => {
+      const x = Math.sin(seed) * 10000;
+      return x - Math.floor(x);
+    };
+
+    let onTrack = 0;
+    let behind = 0;
+    let atRisk = 0;
+    let ahead = 0;
+
+    activeLineItems.forEach((lineItem) => {
+      const idStr = String(lineItem.id);
+      const seed = parseInt(idStr.replace(/\D/g, '') || '0', 10) + 123;
+      const rand = seededRandom(seed);
+      if (rand < 0.45) {
+        onTrack++;
+      } else if (rand < 0.65) {
+        ahead++;
+      } else if (rand < 0.85) {
+        behind++;
+      } else {
+        atRisk++;
+      }
+    });
+
+    return { onTrack, behind, atRisk, ahead, total: activeLineItems.length };
+  };
+
+  const availability = getInventoryAvailability();
+  const deliveryStatus = getLineItemDeliveryStatus();
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <div className="flex items-center justify-between">
+        <PageHeader
+          title="Dashboard"
+          description="Overview of your DOOH advertising operations"
+        />
+        <div className="flex items-center gap-2">
+          <Select value={timePeriod} onValueChange={handleTimePeriodChange}>
+            <SelectTrigger className="w-[180px]" data-testid="select-time-period">
+              <SelectValue placeholder="Select period" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="30">Last 30 days</SelectItem>
+              <SelectItem value="60">Last 60 days</SelectItem>
+              <SelectItem value="90">Last 90 days</SelectItem>
+              <SelectItem value="custom">Custom dates</SelectItem>
+            </SelectContent>
+          </Select>
+          {timePeriod === "custom" && (
+            <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
+              <PopoverTrigger asChild>
+                <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>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="end">
+                <CalendarComponent
+                  mode="range"
+                  selected={{
+                    from: customDateRange.from,
+                    to: customDateRange.to,
+                  }}
+                  onSelect={(range) => {
+                    setCustomDateRange({
+                      from: range?.from,
+                      to: range?.to,
+                    });
+                    if (range?.from && range?.to) {
+                      setCalendarOpen(false);
+                    }
+                  }}
+                  numberOfMonths={2}
+                />
+              </PopoverContent>
+            </Popover>
+          )}
+        </div>
+      </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>
+            ))}
+          </>
+        ) : (
+          <>
+            <MetricCard
+              title="Active Deals"
+              value={metrics?.activeDeals ?? 0}
+              subtitle={`of ${metrics?.totalDeals ?? 0} total`}
+              icon={Megaphone}
+              trend={{ value: 12, isPositive: true }}
+            />
+            <MetricCard
+              title="Total Impressions"
+              value={formatNumber(metrics?.totalImpressions ?? 0)}
+              subtitle={getTimePeriodLabel()}
+              icon={Eye}
+              trend={{ value: 8, isPositive: true }}
+            />
+            <MetricCard
+              title="Revenue"
+              value={formatCurrency(metrics?.totalRevenue ?? 0)}
+              subtitle={getTimePeriodLabel()}
+              icon={DollarSign}
+              trend={{ value: 15, isPositive: true }}
+            />
+            <MetricCard
+              title="Fill Rate"
+              value={`${metrics?.fillRate ?? 0}%`}
+              subtitle={`Avg CPM: ${formatCurrency(metrics?.avgCPM ?? 0)}`}
+              icon={TrendingUp}
+              trend={{ value: 3, isPositive: true }}
+            />
+          </>
+        )}
+      </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>
+            ))}
+          </>
+        ) : (
+          <>
+            <MetricCard
+              title="Total Screens"
+              value={metrics?.totalScreens ?? 0}
+              subtitle={`${availability.available} available`}
+              icon={FileText}
+              trend={{ value: 5, isPositive: true }}
+            />
+            <MetricCard
+              title="Active Line Items"
+              value={metrics?.activeLineItems ?? 0}
+              subtitle={`of ${metrics?.totalLineItems ?? 0} total`}
+              icon={Layers}
+              trend={{ value: 10, isPositive: true }}
+            />
+            <MetricCard
+              title="Total Creatives"
+              value={metrics?.totalCreatives ?? 0}
+              subtitle={`${metrics?.acceptedCreatives ?? 0} approved`}
+              icon={Image}
+              trend={{ value: 7, isPositive: true }}
+            />
+            <MetricCard
+              title="Pending Approvals"
+              value={metrics?.pendingApprovalCreatives ?? 0}
+              subtitle={`${metrics?.assignedCreatives ?? 0} assigned`}
+              icon={Clock}
+            />
+          </>
+        )}
+      </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">
+              <Calendar className="h-5 w-5 text-primary" />
+              Inventory Availability
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {screensLoading ? (
+                [...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">Available</span>
+                    </div>
+                    <span className="text-lg font-bold text-emerald-600 dark:text-emerald-400">
+                      {availability.available}
+                    </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">Partially Available</span>
+                    </div>
+                    <span className="text-lg font-bold text-amber-600 dark:text-amber-400">
+                      {availability.partiallyAvailable}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between p-3 rounded-md bg-red-500/10">
+                    <div className="flex items-center gap-2">
+                      <div className="h-2 w-2 rounded-full bg-red-500" />
+                      <span className="text-sm font-medium">Sold Out</span>
+                    </div>
+                    <span className="text-lg font-bold text-red-600 dark:text-red-400">
+                      {availability.soldOut}
+                    </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">{availability.total}</span>
+                    </div>
+                    {availability.total > 0 && (
+                      <div className="mt-2">
+                        <Progress 
+                          value={(availability.available / availability.total) * 100} 
+                          className="h-2" 
+                        />
+                        <div className="flex justify-between mt-1 text-xs text-muted-foreground">
+                          <span>{Math.round((availability.available / availability.total) * 100)}% available</span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card className="hover-elevate cursor-pointer" 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>
+                    <StatusBadge status={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">
+              {lineItemsLoading ? (
+                [...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>
+                ))
+              ) : deliveryStatus.total === 0 ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  No active line items to track.
+                </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">
+                      {deliveryStatus.onTrack}
+                    </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">
+                      {deliveryStatus.ahead}
+                    </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">
+                      {deliveryStatus.behind}
+                    </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">
+                      {deliveryStatus.atRisk}
+                    </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">{deliveryStatus.total}</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 ?? 0}
+                    </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 ?? 0}
+                    </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 ?? 0}
+                    </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 ?? 0}
+                    </span>
+                  </div>
+                </>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}