adserver-dashboard 1.0.0

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

@@ -0,0 +1,530 @@
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useLocation } from "wouter";
+import { Plus, Search, Filter, MoreHorizontal, Trash2, Edit, Eye, Play, Pause } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { PageHeader } from "@/components/page-header";
+import { DataTable } from "@/components/data-table";
+import { StatusBadge } from "@/components/status-badge";
+import { FilterDrawer, FilterField, FilterValues } from "@/components/filter-drawer";
+import { Progress } from "@/components/ui/progress";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { formatDate, formatCurrency } from "@/lib/utils";
+import type { LineItem, Deal } from "@shared/schema";
+
+const STATUS_OPTIONS = [
+  { value: "draft", label: "Draft" },
+  { value: "pending", label: "Pending" },
+  { value: "active", label: "Active" },
+  { value: "paused", label: "Paused" },
+  { value: "completed", label: "Completed" },
+];
+
+const initialFilterValues: FilterValues = {
+  status: [],
+  dealId: "",
+  dateRange: { start: undefined, end: undefined },
+  budgetRange: { min: undefined, max: undefined },
+  cpmRange: { min: undefined, max: undefined },
+  priorityRange: { min: undefined, max: undefined },
+  trafficAllocationRange: { min: undefined, max: undefined },
+  impressionsRange: { min: undefined, max: undefined },
+};
+
+export default function LineItems() {
+  const [, setLocation] = useLocation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [filterValues, setFilterValues] = useState<FilterValues>(initialFilterValues);
+  const [appliedFilters, setAppliedFilters] = useState<FilterValues>(initialFilterValues);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [lineItemToDelete, setLineItemToDelete] = useState<LineItem | null>(null);
+  const { toast } = useToast();
+
+  const { data: lineItems, isLoading } = useQuery<LineItem[]>({
+    queryKey: ["/api/line-items"],
+  });
+
+  const { data: deals } = useQuery<Deal[]>({
+    queryKey: ["/api/deals"],
+  });
+
+  const dealOptions = useMemo(() => {
+    return (deals || []).map((deal) => ({
+      value: deal.id,
+      label: deal.name,
+    }));
+  }, [deals]);
+
+  const filterFields: FilterField[] = [
+    {
+      key: "status",
+      label: "Status",
+      type: "multi-select",
+      options: STATUS_OPTIONS,
+    },
+    {
+      key: "dealId",
+      label: "Deal",
+      type: "combobox",
+      comboboxOptions: dealOptions,
+      placeholder: "Search deals...",
+    },
+    {
+      key: "dateRange",
+      label: "Date Range",
+      type: "date-range",
+    },
+    {
+      key: "budgetRange",
+      label: "Budget Range",
+      type: "number-range",
+      minPlaceholder: "Min budget",
+      maxPlaceholder: "Max budget",
+    },
+    {
+      key: "cpmRange",
+      label: "Rate Range",
+      type: "number-range",
+      minPlaceholder: "Min rate",
+      maxPlaceholder: "Max rate",
+    },
+    {
+      key: "priorityRange",
+      label: "Priority Range (1-10)",
+      type: "number-range",
+      minPlaceholder: "Min (1)",
+      maxPlaceholder: "Max (10)",
+    },
+    {
+      key: "trafficAllocationRange",
+      label: "Traffic Allocation Range (0-100%)",
+      type: "number-range",
+      minPlaceholder: "Min %",
+      maxPlaceholder: "Max %",
+    },
+    {
+      key: "impressionsRange",
+      label: "Target Impressions Range",
+      type: "number-range",
+      minPlaceholder: "Min impressions",
+      maxPlaceholder: "Max impressions",
+    },
+  ];
+
+  const updateStatusMutation = useMutation({
+    mutationFn: async ({ id, status }: { id: string; status: string }) => {
+      return apiRequest("PATCH", `/api/line-items/${id}`, { status });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      toast({
+        title: "Status updated",
+        description: "Line item status has been updated.",
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("DELETE", `/api/line-items/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/line-items"] });
+      toast({
+        title: "Line item deleted",
+        description: "The line item has been deleted.",
+      });
+      setDeleteDialogOpen(false);
+      setLineItemToDelete(null);
+    },
+  });
+
+  const handleDeleteClick = (lineItem: LineItem) => {
+    setLineItemToDelete(lineItem);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (lineItemToDelete) {
+      deleteMutation.mutate(lineItemToDelete.id);
+    }
+  };
+
+  const handleApplyFilters = () => {
+    setAppliedFilters(filterValues);
+    setFilterOpen(false);
+  };
+
+  const handleClearFilters = () => {
+    setAppliedFilters(initialFilterValues);
+    setFilterOpen(false);
+  };
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    const statuses = appliedFilters.status as string[];
+    const dealId = appliedFilters.dealId as string;
+    const dateRange = appliedFilters.dateRange as { start?: Date; end?: Date };
+    const budgetRange = appliedFilters.budgetRange as { min?: number; max?: number };
+    const cpmRange = appliedFilters.cpmRange as { min?: number; max?: number };
+    const priorityRange = appliedFilters.priorityRange as { min?: number; max?: number };
+    const trafficRange = appliedFilters.trafficAllocationRange as { min?: number; max?: number };
+    const impressionsRange = appliedFilters.impressionsRange as { min?: number; max?: number };
+
+    if (statuses?.length > 0) count++;
+    if (dealId) count++;
+    if (dateRange?.start || dateRange?.end) count++;
+    if (budgetRange?.min !== undefined || budgetRange?.max !== undefined) count++;
+    if (cpmRange?.min !== undefined || cpmRange?.max !== undefined) count++;
+    if (priorityRange?.min !== undefined || priorityRange?.max !== undefined) count++;
+    if (trafficRange?.min !== undefined || trafficRange?.max !== undefined) count++;
+    if (impressionsRange?.min !== undefined || impressionsRange?.max !== undefined) count++;
+
+    return count;
+  }, [appliedFilters]);
+
+  const getDealName = (dealId: string | null) => {
+    if (!dealId) return "-";
+    const deal = deals?.find((d) => d.id === dealId);
+    return deal?.name ?? "-";
+  };
+
+  const getDeliveryProgress = (item: LineItem) => {
+    if (!item.targetImpressions) return 0;
+    return Math.min(100, Math.round(((item.deliveredImpressions ?? 0) / item.targetImpressions) * 100));
+  };
+
+  const filteredLineItems = useMemo(() => {
+    if (!lineItems) return [];
+
+    return lineItems.filter((item) => {
+      const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const statuses = appliedFilters.status as string[];
+      const matchesStatus = statuses.length === 0 || statuses.includes(item.status);
+
+      const dealId = appliedFilters.dealId as string;
+      const matchesDeal = !dealId || item.dealId === dealId;
+
+      const dateRange = appliedFilters.dateRange as { start?: Date; end?: Date };
+      let matchesDateRange = true;
+      if (dateRange?.start && item.startDate) {
+        const itemStart = new Date(item.startDate);
+        matchesDateRange = matchesDateRange && itemStart >= dateRange.start;
+      }
+      if (dateRange?.end && item.endDate) {
+        const itemEnd = new Date(item.endDate);
+        matchesDateRange = matchesDateRange && itemEnd <= dateRange.end;
+      }
+
+      const budgetRange = appliedFilters.budgetRange as { min?: number; max?: number };
+      let matchesBudget = true;
+      if (item.budget) {
+        const budget = parseFloat(item.budget);
+        if (budgetRange?.min !== undefined) {
+          matchesBudget = matchesBudget && budget >= budgetRange.min;
+        }
+        if (budgetRange?.max !== undefined) {
+          matchesBudget = matchesBudget && budget <= budgetRange.max;
+        }
+      }
+
+      const cpmRange = appliedFilters.cpmRange as { min?: number; max?: number };
+      let matchesCpm = true;
+      if (item.cpm) {
+        const cpm = parseFloat(item.cpm);
+        if (cpmRange?.min !== undefined) {
+          matchesCpm = matchesCpm && cpm >= cpmRange.min;
+        }
+        if (cpmRange?.max !== undefined) {
+          matchesCpm = matchesCpm && cpm <= cpmRange.max;
+        }
+      }
+
+      const priorityRange = appliedFilters.priorityRange as { min?: number; max?: number };
+      let matchesPriority = true;
+      const priority = item.priority ?? 5;
+      if (priorityRange?.min !== undefined) {
+        matchesPriority = matchesPriority && priority >= priorityRange.min;
+      }
+      if (priorityRange?.max !== undefined) {
+        matchesPriority = matchesPriority && priority <= priorityRange.max;
+      }
+
+      const trafficRange = appliedFilters.trafficAllocationRange as { min?: number; max?: number };
+      let matchesTraffic = true;
+      const traffic = item.trafficAllocation ?? 100;
+      if (trafficRange?.min !== undefined) {
+        matchesTraffic = matchesTraffic && traffic >= trafficRange.min;
+      }
+      if (trafficRange?.max !== undefined) {
+        matchesTraffic = matchesTraffic && traffic <= trafficRange.max;
+      }
+
+      const impressionsRange = appliedFilters.impressionsRange as { min?: number; max?: number };
+      let matchesImpressions = true;
+      if (item.targetImpressions) {
+        if (impressionsRange?.min !== undefined) {
+          matchesImpressions = matchesImpressions && item.targetImpressions >= impressionsRange.min;
+        }
+        if (impressionsRange?.max !== undefined) {
+          matchesImpressions = matchesImpressions && item.targetImpressions <= impressionsRange.max;
+        }
+      }
+
+      return (
+        matchesSearch &&
+        matchesStatus &&
+        matchesDeal &&
+        matchesDateRange &&
+        matchesBudget &&
+        matchesCpm &&
+        matchesPriority &&
+        matchesTraffic &&
+        matchesImpressions
+      );
+    });
+  }, [lineItems, searchQuery, appliedFilters]);
+
+  const columns = [
+    {
+      key: "name",
+      header: "Line Item",
+      render: (item: LineItem) => (
+        <div>
+          <div className="font-medium">{item.name}</div>
+          <div className="text-xs text-muted-foreground">Priority: {item.priority ?? 5}</div>
+        </div>
+      ),
+    },
+    {
+      key: "dealId",
+      header: "Deal",
+      render: (item: LineItem) => getDealName(item.dealId),
+    },
+    {
+      key: "status",
+      header: "Status",
+      render: (item: LineItem) => <StatusBadge status={item.status} />,
+    },
+    {
+      key: "delivery",
+      header: "Delivery",
+      className: "min-w-[180px]",
+      render: (item: LineItem) => {
+        const progress = getDeliveryProgress(item);
+        return (
+          <div className="space-y-1">
+            <div className="flex items-center justify-between text-xs">
+              <span>{(item.deliveredImpressions ?? 0).toLocaleString()}</span>
+              <span className="text-muted-foreground">
+                / {item.targetImpressions?.toLocaleString() ?? "N/A"}
+              </span>
+            </div>
+            <Progress value={progress} className="h-1.5" />
+          </div>
+        );
+      },
+    },
+    {
+      key: "trafficAllocation",
+      header: "Traffic",
+      className: "min-w-[150px]",
+      render: (item: LineItem) => (
+        <div className="flex items-center gap-2">
+          <Progress value={item.trafficAllocation ?? 100} className="h-2 flex-1" />
+          <span className="text-sm font-medium w-10">{item.trafficAllocation ?? 100}%</span>
+        </div>
+      ),
+    },
+    {
+      key: "rate",
+      header: "Rate",
+      render: (item: LineItem) => {
+        const rateType = (item.floorRateType || "cpm").toUpperCase();
+        const rate = item.floorRate ?? item.cpm;
+        return `${formatCurrency(rate)} ${rateType}`;
+      },
+    },
+    {
+      key: "budget",
+      header: "Budget",
+      render: (item: LineItem) => formatCurrency(item.budget),
+    },
+    {
+      key: "dates",
+      header: "Duration",
+      render: (item: LineItem) =>
+        item.startDate && item.endDate
+          ? `${formatDate(item.startDate)} - ${formatDate(item.endDate)}`
+          : "-",
+    },
+    {
+      key: "actions",
+      header: "",
+      className: "w-12",
+      render: (item: LineItem) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" data-testid={`line-item-actions-${item.id}`}>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => setLocation(`/line-items/${item.id}/edit`)}
+              data-testid={`view-line-item-${item.id}`}
+            >
+              <Eye className="h-4 w-4 mr-2" />
+              View Details
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => setLocation(`/line-items/${item.id}/edit`)}
+              data-testid={`edit-line-item-${item.id}`}
+            >
+              <Edit className="h-4 w-4 mr-2" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {item.status === "active" ? (
+              <DropdownMenuItem
+                onClick={() => updateStatusMutation.mutate({ id: item.id, status: "paused" })}
+                data-testid={`pause-line-item-${item.id}`}
+              >
+                <Pause className="h-4 w-4 mr-2" />
+                Pause
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem
+                onClick={() => updateStatusMutation.mutate({ id: item.id, status: "active" })}
+                data-testid={`activate-line-item-${item.id}`}
+              >
+                <Play className="h-4 w-4 mr-2" />
+                Activate
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-destructive"
+              onClick={() => handleDeleteClick(item)}
+              data-testid={`delete-line-item-${item.id}`}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader
+        title="Line Items"
+        description="Manage line items with traffic control and delivery settings"
+        actions={
+          <Button
+            onClick={() => setLocation("/line-items/new")}
+            data-testid="button-create-line-item"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            New Line Item
+          </Button>
+        }
+      />
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search line items..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 bg-white dark:bg-background border"
+                data-testid="input-search-line-items"
+              />
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => setFilterOpen(true)}
+              className="bg-white dark:bg-background"
+              data-testid="button-open-filters"
+            >
+              <Filter className="h-4 w-4 mr-2" />
+              Filters
+              {activeFilterCount > 0 && (
+                <span className="ml-2 rounded-full bg-primary text-primary-foreground px-2 py-0.5 text-xs">
+                  {activeFilterCount}
+                </span>
+              )}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            columns={columns}
+            data={filteredLineItems}
+            isLoading={isLoading}
+            emptyMessage="No line items found. Create your first line item to get started."
+          />
+        </CardContent>
+      </Card>
+
+      <FilterDrawer
+        open={filterOpen}
+        onOpenChange={setFilterOpen}
+        fields={filterFields}
+        values={filterValues}
+        onChange={setFilterValues}
+        onApply={handleApplyFilters}
+        onClear={handleClearFilters}
+        title="Filter Line Items"
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Line Item</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete "{lineItemToDelete?.name}"? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel data-testid="button-cancel-delete">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              data-testid="button-confirm-delete"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { AlertCircle } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
+      <Card className="w-full max-w-md mx-4">
+        <CardContent className="pt-6">
+          <div className="flex mb-4 gap-2">
+            <AlertCircle className="h-8 w-8 text-red-500" />
+            <h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
+          </div>
+
+          <p className="mt-4 text-sm text-gray-600">
+            Did you forget to add the page to the router?
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}