adserver-dashboard 1.0.0

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

@@ -0,0 +1,716 @@
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useLocation, Link } from "wouter";
+import { Plus, Search, Filter, MoreHorizontal, Trash2, Edit, Eye, Copy } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  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 { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { formatDate, formatCurrency } from "@/lib/utils";
+import type { Deal, Advertiser, Brand, LineItem, SspPartner, MediaOwner, Agency } from "@shared/schema";
+import { COUNTRIES, DEAL_TYPES, GOAL_TYPES } from "@shared/schema";
+
+const STATUS_OPTIONS = [
+  { value: "active", label: "Active" },
+  { value: "paused", label: "Paused" },
+];
+
+const DEAL_TYPE_OPTIONS = DEAL_TYPES.map(dt => ({ value: dt.value, label: dt.label }));
+
+const SOURCE_OPTIONS = [
+  { value: "influence", label: "Influence" },
+  { value: "planner", label: "Planner" },
+  { value: "activate", label: "Activate" },
+];
+
+const CLIENT_TYPE_OPTIONS = [
+  { value: "agency", label: "Agency" },
+  { value: "direct", label: "Direct Advertiser" },
+];
+
+const GOAL_TYPE_OPTIONS = GOAL_TYPES.map(gt => ({ value: gt.value, label: gt.label }));
+
+const initialFilterValues: FilterValues = {
+  status: [],
+  dealType: [],
+  goalType: [],
+  ssp: [],
+  mediaOwner: [],
+  clientType: [],
+  agency: [],
+  brand: [],
+  source: [],
+  country: [],
+  isRfp: [],
+  dateRange: { start: undefined, end: undefined },
+  budgetRange: { min: undefined, max: undefined },
+};
+
+export default function Deals() {
+  const [, setLocation] = useLocation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sortBy, setSortBy] = useState<string>("name");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [filterValues, setFilterValues] = useState<FilterValues>(initialFilterValues);
+  const [appliedFilters, setAppliedFilters] = useState<FilterValues>(initialFilterValues);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [dealToDelete, setDealToDelete] = useState<Deal | null>(null);
+  const { toast } = useToast();
+
+  const { data: deals, isLoading } = useQuery<Deal[]>({
+    queryKey: ["/api/deals"],
+  });
+
+  const { data: advertisers } = useQuery<Advertiser[]>({
+    queryKey: ["/api/advertisers"],
+  });
+
+  const { data: brands } = useQuery<Brand[]>({
+    queryKey: ["/api/brands"],
+  });
+
+  const { data: allLineItems } = useQuery<LineItem[]>({
+    queryKey: ["/api/line-items"],
+  });
+
+  const { data: sspPartners } = useQuery<SspPartner[]>({
+    queryKey: ["/api/ssp-partners"],
+  });
+
+  const { data: mediaOwners } = useQuery<MediaOwner[]>({
+    queryKey: ["/api/media-owners"],
+  });
+
+  const { data: agencies } = useQuery<Agency[]>({
+    queryKey: ["/api/agencies"],
+  });
+
+  const sspOptions = useMemo(() => {
+    return (sspPartners || []).map((ssp) => ({
+      value: ssp.id,
+      label: ssp.name,
+    }));
+  }, [sspPartners]);
+
+  const mediaOwnerOptions = useMemo(() => {
+    return (mediaOwners || []).map((mo) => ({
+      value: mo.id,
+      label: mo.name,
+    }));
+  }, [mediaOwners]);
+
+  const agencyOptions = useMemo(() => {
+    return (agencies || []).map((agency) => ({
+      value: agency.id,
+      label: agency.name,
+    }));
+  }, [agencies]);
+
+  const brandOptions = useMemo(() => {
+    return (brands || []).map((brand) => ({
+      value: brand.id,
+      label: brand.name,
+    }));
+  }, [brands]);
+
+  const countryOptions = useMemo(() => {
+    return COUNTRIES.map((country) => ({
+      value: country.code,
+      label: country.name,
+    }));
+  }, []);
+
+  const clientTypes = filterValues.clientType as string[];
+  const showAgencyFilter = clientTypes.length === 0 || clientTypes.includes("agency");
+  
+  const handleFilterChange = (newValues: FilterValues) => {
+    const newClientTypes = newValues.clientType as string[];
+    const shouldShowAgency = newClientTypes.length === 0 || newClientTypes.includes("agency");
+    if (!shouldShowAgency && (newValues.agency as string[])?.length > 0) {
+      newValues.agency = [];
+    }
+    setFilterValues(newValues);
+  };
+
+  const filterFields: FilterField[] = [
+    {
+      key: "status",
+      label: "Status",
+      type: "multi-select",
+      options: STATUS_OPTIONS,
+    },
+    {
+      key: "dealType",
+      label: "Deal Type",
+      type: "multi-select",
+      options: DEAL_TYPE_OPTIONS,
+    },
+    {
+      key: "goalType",
+      label: "Goal Type",
+      type: "multi-select",
+      options: GOAL_TYPE_OPTIONS,
+    },
+    {
+      key: "ssp",
+      label: "SSP Partner",
+      type: "multi-select",
+      options: sspOptions,
+    },
+    {
+      key: "mediaOwner",
+      label: "Media Owner",
+      type: "multi-select",
+      options: mediaOwnerOptions,
+    },
+    {
+      key: "clientType",
+      label: "Client Type",
+      type: "multi-select",
+      options: CLIENT_TYPE_OPTIONS,
+    },
+    ...(showAgencyFilter ? [{
+      key: "agency",
+      label: "Agency",
+      type: "multi-select" as const,
+      options: agencyOptions,
+    }] : []),
+    {
+      key: "brand",
+      label: "Brand",
+      type: "multi-select",
+      options: brandOptions,
+    },
+    {
+      key: "source",
+      label: "Source",
+      type: "multi-select",
+      options: SOURCE_OPTIONS,
+    },
+    {
+      key: "country",
+      label: "Country",
+      type: "multi-select",
+      options: countryOptions,
+    },
+    {
+      key: "isRfp",
+      label: "RFP Status",
+      type: "multi-select",
+      options: [
+        { value: "true", label: "RFP (Pending Review)" },
+        { value: "false", label: "Not RFP" },
+      ],
+    },
+    {
+      key: "dateRange",
+      label: "Flight Date Range",
+      type: "date-range",
+    },
+    {
+      key: "budgetRange",
+      label: "Budget Range",
+      type: "number-range",
+      minPlaceholder: "Min budget",
+      maxPlaceholder: "Max budget",
+    },
+  ];
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("DELETE", `/api/deals/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals"] });
+      toast({
+        title: "Deal deleted",
+        description: "The deal has been deleted.",
+      });
+      setDeleteDialogOpen(false);
+      setDealToDelete(null);
+    },
+  });
+
+  const duplicateMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return apiRequest("POST", `/api/deals/${id}/duplicate`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/deals"] });
+      toast({
+        title: "Deal duplicated",
+        description: "A copy of the deal has been created.",
+      });
+    },
+  });
+
+  const handleDeleteClick = (deal: Deal) => {
+    setDealToDelete(deal);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (dealToDelete) {
+      deleteMutation.mutate(dealToDelete.id);
+    }
+  };
+
+  const handleApplyFilters = () => {
+    setAppliedFilters(filterValues);
+    setFilterOpen(false);
+  };
+
+  const handleClearFilters = () => {
+    setFilterValues(initialFilterValues);
+    setAppliedFilters(initialFilterValues);
+    setFilterOpen(false);
+  };
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    const statuses = appliedFilters.status as string[];
+    const types = appliedFilters.dealType as string[];
+    const goalTypes = appliedFilters.goalType as string[];
+    const sspIds = appliedFilters.ssp as string[];
+    const mediaOwnerIds = appliedFilters.mediaOwner as string[];
+    const clientTypeIds = appliedFilters.clientType as string[];
+    const agencyIds = appliedFilters.agency as string[];
+    const brandIds = appliedFilters.brand as string[];
+    const sources = appliedFilters.source as string[];
+    const countries = appliedFilters.country as string[];
+    const dateRange = appliedFilters.dateRange as { start?: Date; end?: Date };
+    const budgetRange = appliedFilters.budgetRange as { min?: number; max?: number };
+
+    if (statuses?.length > 0) count++;
+    if (types?.length > 0) count++;
+    if (goalTypes?.length > 0) count++;
+    if (sspIds?.length > 0) count++;
+    if (mediaOwnerIds?.length > 0) count++;
+    if (clientTypeIds?.length > 0) count++;
+    if (agencyIds?.length > 0) count++;
+    if (brandIds?.length > 0) count++;
+    if (sources?.length > 0) count++;
+    if (countries?.length > 0) count++;
+    if (dateRange?.start || dateRange?.end) count++;
+    if (budgetRange?.min !== undefined || budgetRange?.max !== undefined) count++;
+
+    return count;
+  }, [appliedFilters]);
+
+  const handleSort = (key: string) => {
+    if (sortBy === key) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortOrder("asc");
+    }
+  };
+
+  const filteredDeals = useMemo(() => {
+    let result = deals || [];
+
+    if (searchQuery) {
+      result = result.filter((deal) =>
+        deal.name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    const statuses = appliedFilters.status as string[];
+    if (statuses?.length > 0) {
+      result = result.filter((deal) => statuses.includes(deal.status));
+    }
+
+    const types = appliedFilters.dealType as string[];
+    if (types?.length > 0) {
+      result = result.filter((deal) => types.includes(deal.dealType));
+    }
+
+    const goalTypes = appliedFilters.goalType as string[];
+    if (goalTypes?.length > 0) {
+      result = result.filter((deal) => deal.goalType && goalTypes.includes(deal.goalType));
+    }
+
+    const clientTypeIds = appliedFilters.clientType as string[];
+    if (clientTypeIds?.length > 0) {
+      result = result.filter((deal) => clientTypeIds.includes(deal.clientType || "direct"));
+    }
+
+    const agencyIds = appliedFilters.agency as string[];
+    if (agencyIds?.length > 0) {
+      result = result.filter(
+        (deal) => deal.agencyId && agencyIds.includes(deal.agencyId)
+      );
+    }
+
+    const brandIds = appliedFilters.brand as string[];
+    if (brandIds?.length > 0) {
+      result = result.filter(
+        (deal) => deal.brandId && brandIds.includes(deal.brandId)
+      );
+    }
+
+    const sspIds = appliedFilters.ssp as string[];
+    if (sspIds?.length > 0) {
+      result = result.filter((deal) => deal.sspId && sspIds.includes(deal.sspId));
+    }
+
+    const mediaOwnerIds = appliedFilters.mediaOwner as string[];
+    if (mediaOwnerIds?.length > 0) {
+      // Filter deals by checking if any of their line items have the selected media owner
+      const dealIdsWithMediaOwner = new Set(
+        allLineItems?.filter(li => li.mediaOwnerId && mediaOwnerIds.includes(li.mediaOwnerId))
+          .map(li => li.dealId) || []
+      );
+      result = result.filter((deal) => dealIdsWithMediaOwner.has(deal.id));
+    }
+
+    const sources = appliedFilters.source as string[];
+    if (sources?.length > 0) {
+      result = result.filter((deal) => sources.includes(deal.source));
+    }
+
+    const rfpFilter = appliedFilters.isRfp as string[];
+    if (rfpFilter?.length > 0) {
+      result = result.filter((deal) => rfpFilter.includes(String(deal.isRfp ?? false)));
+    }
+
+    const countries = appliedFilters.country as string[];
+    if (countries?.length > 0) {
+      result = result.filter((deal) => deal.countries && deal.countries.some(c => countries.includes(c)));
+    }
+
+    const dateRange = appliedFilters.dateRange as { start?: Date; end?: Date };
+    if (dateRange?.start && dateRange?.end) {
+      result = result.filter((deal) => {
+        if (!deal.startDate || !deal.endDate) return false;
+        const dealStart = new Date(deal.startDate);
+        const dealEnd = new Date(deal.endDate);
+        return dealStart >= dateRange.start! && dealEnd <= dateRange.end!;
+      });
+    }
+
+    const budgetRange = appliedFilters.budgetRange as { min?: number; max?: number };
+    if (budgetRange?.min !== undefined || budgetRange?.max !== undefined) {
+      result = result.filter((deal) => {
+        const budget = deal.budget ? parseFloat(deal.budget) : 0;
+        if (budgetRange.min !== undefined && budget < budgetRange.min) return false;
+        if (budgetRange.max !== undefined && budget > budgetRange.max) return false;
+        return true;
+      });
+    }
+
+    result = [...result].sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case "name":
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case "dealType":
+          comparison = a.dealType.localeCompare(b.dealType);
+          break;
+        case "source":
+          comparison = (a.source || "").localeCompare(b.source || "");
+          break;
+        case "status":
+          comparison = a.status.localeCompare(b.status);
+          break;
+        case "budget":
+          const budgetA = a.budget ? parseFloat(a.budget) : 0;
+          const budgetB = b.budget ? parseFloat(b.budget) : 0;
+          comparison = budgetA - budgetB;
+          break;
+        case "spent":
+          const spentA = a.spent ? parseFloat(a.spent) : 0;
+          const spentB = b.spent ? parseFloat(b.spent) : 0;
+          comparison = spentA - spentB;
+          break;
+        case "dates":
+          const dateA = a.startDate ? new Date(a.startDate).getTime() : 0;
+          const dateB = b.startDate ? new Date(b.startDate).getTime() : 0;
+          comparison = dateA - dateB;
+          break;
+        default:
+          comparison = 0;
+      }
+      return sortOrder === "asc" ? comparison : -comparison;
+    });
+
+    return result;
+  }, [deals, searchQuery, appliedFilters, sortBy, sortOrder]);
+
+  const columns = [
+    {
+      key: "name",
+      header: "Deal Name",
+      sortable: true,
+      render: (deal: Deal) => (
+        <Link href={`/deals/${deal.id}`}>
+          <div className="flex flex-col">
+            <span className="font-medium text-primary hover:underline cursor-pointer">{deal.name}</span>
+            {deal.externalDealId && (
+              <span className="text-xs text-muted-foreground">ID: {deal.externalDealId}</span>
+            )}
+          </div>
+        </Link>
+      ),
+    },
+    {
+      key: "dealType",
+      header: "Type",
+      sortable: true,
+      render: (deal: Deal) => {
+        const typeLabels: Record<string, string> = {
+          traditional: "Traditional",
+          pg: "PG",
+          pd: "PD",
+          pmp: "PMP",
+          always_on: "Always On",
+          open_auction: "Open Auction",
+        };
+        return <span>{typeLabels[deal.dealType || ""] || deal.dealType}</span>;
+      },
+    },
+    {
+      key: "source",
+      header: "Source",
+      sortable: true,
+      render: (deal: Deal) => (
+        <div className="flex flex-col gap-1">
+          <span className="capitalize">{deal.source || "influence"}</span>
+          {deal.isRfp && (
+            <Badge variant="outline" className="bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 border-amber-200 dark:border-amber-800 text-xs w-fit">
+              RFP
+            </Badge>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "status",
+      header: "Status",
+      sortable: true,
+      render: (deal: Deal) => <StatusBadge status={deal.status} />,
+    },
+    {
+      key: "lineItems",
+      header: "Line Items",
+      sortable: false,
+      render: (deal: Deal) => {
+        const count = (allLineItems ?? []).filter(li => li.dealId === deal.id).length;
+        return <span data-testid={`text-line-item-count-${deal.id}`}>{count}</span>;
+      },
+    },
+    {
+      key: "createdBy",
+      header: "Created By",
+      sortable: false,
+      render: (deal: Deal) => {
+        const advertiser = advertisers?.find(a => a.id === deal.advertiserId);
+        return (
+          <div className="flex flex-col" data-testid={`text-created-by-${deal.id}`}>
+            <span>{deal.createdBy || "-"}</span>
+            {advertiser && (
+              <span className="text-xs text-muted-foreground">{advertiser.name}</span>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: "budget",
+      header: "Budget",
+      sortable: true,
+      render: (deal: Deal) => formatCurrency(deal.budget),
+    },
+    {
+      key: "spent",
+      header: "Spent",
+      sortable: true,
+      render: (deal: Deal) => formatCurrency(deal.spent ?? 0),
+    },
+    {
+      key: "dates",
+      header: "Dates",
+      sortable: true,
+      render: (deal: Deal) =>
+        deal.startDate && deal.endDate
+          ? `${formatDate(deal.startDate)} - ${formatDate(deal.endDate)}`
+          : "-",
+    },
+    {
+      key: "actions",
+      header: "",
+      className: "w-12",
+      sortable: false,
+      render: (deal: Deal) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" data-testid={`deal-actions-${deal.id}`}>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => setLocation(`/deals/${deal.id}`)}
+              data-testid={`view-deal-${deal.id}`}
+            >
+              <Eye className="h-4 w-4 mr-2" />
+              View Details
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => setLocation(`/deals/${deal.id}/edit`)}
+              data-testid={`edit-deal-${deal.id}`}
+            >
+              <Edit className="h-4 w-4 mr-2" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => duplicateMutation.mutate(deal.id)}
+              data-testid={`duplicate-deal-${deal.id}`}
+            >
+              <Copy className="h-4 w-4 mr-2" />
+              Duplicate
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="text-destructive"
+              onClick={() => handleDeleteClick(deal)}
+              data-testid={`delete-deal-${deal.id}`}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <PageHeader
+        title="Deals"
+        description="Manage your advertising deals"
+        actions={
+          <Button
+            onClick={() => setLocation("/deals/new")}
+            data-testid="button-create-deal"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            New Deal
+          </Button>
+        }
+      />
+
+      <div className="flex items-center gap-3 mb-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 deals..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 bg-white dark:bg-background border"
+            data-testid="input-search"
+          />
+        </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 && (
+            <Badge variant="secondary" className="ml-2">{activeFilterCount}</Badge>
+          )}
+        </Button>
+      </div>
+
+      <Card>
+        <CardContent className="pt-6">
+          {filteredDeals.length === 0 && !isLoading && (deals?.length ?? 0) > 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">No deals match your filters</p>
+              <Button
+                variant="ghost"
+                className="text-primary"
+                onClick={() => {
+                  setSearchQuery("");
+                  setAppliedFilters(initialFilterValues);
+                }}
+                data-testid="button-clear-all-filters"
+              >
+                Clear all filters
+              </Button>
+            </div>
+          ) : (
+            <DataTable
+              columns={columns}
+              data={filteredDeals}
+              isLoading={isLoading}
+              emptyMessage="No deals found. Create your first deal to get started."
+              sortKey={sortBy}
+              sortOrder={sortOrder}
+              onSort={handleSort}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      <FilterDrawer
+        open={filterOpen}
+        onOpenChange={setFilterOpen}
+        fields={filterFields}
+        values={filterValues}
+        onChange={handleFilterChange}
+        onApply={handleApplyFilters}
+        onClear={handleClearFilters}
+        title="Filter Deals"
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Deal</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete "{dealToDelete?.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>
+  );
+}