adserver-dashboard 1.0.0

package/client/src/pages/direct-campaigns-new.tsx

@@ -0,0 +1,824 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+} from "react";
+import { useTranslation } from "@/lib/i18n";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { queryClient } from "@/lib/queryClient";
+import {
+  InfluenceDealsAPI,
+  influenceDealsRequest,
+  isDealEditable,
+  Deal,
+} from "@/lib/influence-deals-api";
+import { Button } from "@moving-walls/design-system";
+import { Card, CardHeader, CardContent } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { PageHeader } from "@moving-walls/design-system";
+import {
+  ColumnCustomizationDrawer,
+  ColumnConfig,
+} from "@moving-walls/design-system";
+import {
+  Plus,
+  Search,
+  SlidersHorizontal,
+  Settings2,
+  MoreHorizontal,
+  Eye,
+  Edit,
+  Archive,
+  RotateCcw,
+} from "lucide-react";
+import { useLocation } from "wouter";
+import { DealStatusBadge } from "@/components/deals/deal-status-badge";
+import {
+  DealFilterPanel,
+  DealFilterValues,
+} from "@/components/direct-campaigns/deal-filter-panel";
+import { AgGridTable } from "@moving-walls/design-system";
+import type { AgGridSortState, AgGridTableServerSideConfig, ColDef } from "@moving-walls/design-system";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@moving-walls/design-system";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@moving-walls/design-system";
+import { useToast } from "@/hooks/use-toast";
+import { ImportFromPlannerDialog } from "@/components/deals/import-from-planner-dialog";
+import { usePageTitle } from "@/hooks/use-page-title";
+import { ReopenDealSheet } from "@/components/deals/reopen-deal-sheet";
+import { useAuth } from "@/contexts/auth-context";
+
+export default function DirectCampaignsNew() {
+  usePageTitle("Direct Campaigns");
+  const { t } = useTranslation(['deals', 'common']);
+  const [, setLocation] = useLocation();
+  const { user } = useAuth();
+
+  const [searchInput, setSearchInput] = useState("");
+  const [searchValue, setSearchValue] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [modeFilter, setModeFilter] = useState<string>("all");
+  const [dealTypeFilter, setDealTypeFilter] = useState<string>("all");
+  const [currencyFilter, setCurrencyFilter] = useState<string>("all");
+  const [brandFilter, setBrandFilter] = useState<string>("");
+  const [advertiserFilter, setAdvertiserFilter] = useState<string>("");
+
+  const [publisherFilter, setPublisherFilter] = useState<string>("");
+  const [startDateFilter, setStartDateFilter] = useState<string>("");
+  const [endDateFilter, setEndDateFilter] = useState<string>("");
+  const [sortBy, setSortBy] = useState<string>("-created_at");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+  const [isColumnDrawerOpen, setIsColumnDrawerOpen] = useState(false);
+  const [archiveDialogOpen, setArchiveDialogOpen] = useState(false);
+  const [dealToArchive, setDealToArchive] = useState<Deal | null>(null);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [reopenSheetOpen, setReopenSheetOpen] = useState(false);
+  const [dealToReopen, setDealToReopen] = useState<Deal | null>(null);
+  const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>([
+    { id: "name", label: "Deal Name", visible: true, locked: true },
+    { id: "brand", label: "Brand", visible: true },
+    { id: "lineItems", label: "Line Items", visible: true },
+    { id: "flightDates", label: "Flight Dates", visible: true },
+    { id: "status", label: "Status", visible: true },
+    { id: "budget", label: "Budget", visible: true },
+  ]);
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      const trimmedValue = searchInput.trim();
+      if (trimmedValue === "" || trimmedValue.length >= 3) {
+        setSearchValue(trimmedValue);
+        setCurrentPage(1);
+      } else if (trimmedValue.length < 3) {
+        setSearchValue("");
+      }
+    }, 500);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [searchInput]);
+
+  const {
+    data: campaignsData,
+    isLoading,
+    isFetching,
+    isError,
+    error,
+  } = useQuery<{
+    data: Deal[];
+    pagination?: { page: number; limit: number; total: number; pages: number };
+  }>({
+    queryKey: [
+      "direct-campaigns",
+      {
+        status: statusFilter === "all" ? undefined : statusFilter.toUpperCase(),
+        page: currentPage,
+        limit: pageSize,
+        search: searchValue || undefined,
+        currency: currencyFilter === "all" ? undefined : currencyFilter,
+        brand: brandFilter || undefined,
+        advertiser: advertiserFilter || undefined,
+        publisher: publisherFilter || undefined,
+        startDate: startDateFilter || undefined,
+        endDate: endDateFilter || undefined,
+        sortBy: sortBy || undefined,
+      },
+    ],
+    queryFn: async () => {
+      const params: Record<string, any> = {
+        page: currentPage,
+        limit: pageSize,
+      };
+      if (statusFilter !== "all") {
+        params.status = statusFilter.toUpperCase();
+      }
+      if (searchValue) params.search = searchValue;
+      if (currencyFilter !== "all") params.currency = currencyFilter;
+      if (brandFilter) params.brand = brandFilter;
+      if (advertiserFilter) params.advertiser = advertiserFilter;
+      if (publisherFilter) params.publisher = publisherFilter;
+      if (startDateFilter) params.startDate = startDateFilter;
+      if (endDateFilter) params.endDate = endDateFilter;
+      if (sortBy) params.sort = sortBy;
+      const url = InfluenceDealsAPI.deals.list(params);
+      const response = await influenceDealsRequest<{
+        data: Deal[];
+        pagination: any;
+      }>(url, "GET");
+
+      return {
+        data: response.data || [],
+        pagination: response.pagination
+          ? {
+              page: response.pagination.page,
+              limit: response.pagination.limit,
+              total: response.pagination.total,
+              pages: response.pagination.totalPages,
+            }
+          : undefined,
+      };
+    },
+    staleTime: 0,
+    refetchOnMount: true,
+  });
+
+  const campaigns = campaignsData?.data || [];
+  const totalCount = campaignsData?.pagination?.total || 0;
+
+  // Populate rowData with placeholder rows so AG Grid knows the total count
+  // for correct server-side pagination display
+  const rowData = useMemo(() => {
+    if (totalCount <= campaigns.length) return campaigns;
+    const pageStartIndex = (currentPage - 1) * pageSize;
+    return Array.from({ length: totalCount }, (_, i) => {
+      const offset = i - pageStartIndex;
+      if (offset >= 0 && offset < campaigns.length) {
+        return campaigns[offset];
+      }
+      return { id: `placeholder-${i}`, __isPlaceholder: true } as unknown as Deal;
+    });
+  }, [totalCount, currentPage, pageSize, campaigns]);
+  const { toast } = useToast();
+
+  const deleteCampaignMutation = useMutation({
+    mutationFn: async (dealId: string) => {
+      const url = InfluenceDealsAPI.deals.archive(dealId);
+      await influenceDealsRequest(url, "DELETE");
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["direct-campaigns"] });
+      toast({
+        title: "Success",
+        description: "Deal archived successfully",
+      });
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Error",
+        description:
+          error instanceof Error ? error.message : "Failed to archive deal",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleApplyFilters = (filters: DealFilterValues) => {
+    setStatusFilter(filters.status);
+    setModeFilter(filters.mode);
+    setDealTypeFilter(filters.dealType);
+    setCurrencyFilter(filters.currency);
+    setBrandFilter(filters.brand);
+    setAdvertiserFilter(filters.advertiser);
+    setPublisherFilter(filters.publisher);
+    setStartDateFilter(filters.startDate);
+    setEndDateFilter(filters.endDate);
+    setSortBy(filters.sortBy);
+    setCurrentPage(1);
+  };
+
+  const getActiveFilterCount = () => {
+    let count = 0;
+    if (statusFilter !== "all") count++;
+    if (modeFilter !== "all") count++;
+    if (dealTypeFilter !== "all") count++;
+    if (currencyFilter !== "all") count++;
+    if (brandFilter) count++;
+    if (advertiserFilter) count++;
+    if (publisherFilter) count++;
+    if (startDateFilter) count++;
+    if (endDateFilter) count++;
+    if (sortBy !== "-created_at") count++;
+    return count;
+  };
+
+  const hiddenColumns = columnConfig
+    .filter((c) => !c.visible)
+    .map((c) => c.id);
+
+  const sortState: AgGridSortState[] = sortBy
+    ? [{
+        key: sortBy.startsWith("-") ? sortBy.slice(1) : sortBy,
+        direction: sortBy.startsWith("-") ? "desc" as const : "asc" as const,
+      }]
+    : [];
+
+  const handleSortChange = (newSort: AgGridSortState[]) => {
+    if (newSort.length === 0) {
+      setSortBy("");
+    } else {
+      setSortBy(newSort[0].direction === "desc" ? `-${newSort[0].key}` : newSort[0].key);
+    }
+  };
+
+  const columnDefs: ColDef<Deal>[] = [
+    {
+      colId: "name",
+      headerName: "Deal Name",
+      field: "name",
+      sortable: true,
+      minWidth: 200,
+      flex: 1,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <div>
+            <p
+              className="text-sm font-medium text-mw-primary-600 hover:text-mw-primary-700 hover:underline cursor-pointer transition-colors"
+              onClick={() => setLocation(`/deals/${deal.id}/line-items`)}
+            >
+              {deal.name}
+            </p>
+            <p className="text-xs text-mw-neutral-400 mt-0.5">
+              ID: {deal.dealId || deal.id.slice(0, 10)}
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      colId: "type",
+      headerName: "Type",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        const dealType = (deal as any).dealType?.toUpperCase();
+        let label = "-";
+        if (dealType === "PG" || dealType === "PROGRAMMATIC_GUARANTEED") label = "PG";
+        else if (dealType === "PD" || dealType === "PROGRAMMATIC_DIRECT") label = "PD";
+        else {
+          const mode = ((deal as any).mode || (deal as any).campaignMode || "").toUpperCase();
+          if (mode === "PROGRAMMATIC") label = "PD";
+          else if (mode === "DIRECT" || mode === "TRADITIONAL") label = "Traditional";
+          else label = mode || "-";
+        }
+        return (
+          <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+            {label}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "source",
+      headerName: "Source",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <div className="flex flex-col gap-1">
+            <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+              {deal.source === "mw-planner" ? "Planner" : deal.source === "mw-activate" ? "Activate" : "Influence"}
+            </span>
+            {(deal as any).dealType && (
+              <span className="inline-flex w-fit text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300">
+                {(deal as any).dealType}
+              </span>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      colId: "status",
+      headerName: "Status",
+      field: "status",
+      sortable: true,
+      width: 120,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <DealStatusBadge
+            status={deal.status}
+            mode={
+              (deal as any).campaignMode?.toUpperCase() === "PROGRAMMATIC"
+                ? "PROGRAMMATIC"
+                : "DIRECT"
+            }
+          />
+        );
+      },
+    },
+    {
+      colId: "lineItems",
+      headerName: "Line Items",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <span className="text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+            {(deal as any).lineItemsCount || 0}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "createdBy",
+      headerName: "Created By",
+      sortable: false,
+      minWidth: 140,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <div>
+            <p className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+              {(deal as any).createdBy?.name || (deal as any).seller?.name || "-"}
+            </p>
+            <p className="text-xs text-mw-neutral-400 mt-0.5">
+              {(deal as any).createdBy?.organization || (deal as any).seller?.company || (typeof deal.advertiser === "object" && deal.advertiser !== null ? (deal.advertiser as any).name : typeof deal.advertiser === "string" ? deal.advertiser : "") || ""}
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      colId: "budget",
+      headerName: "Budget",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+            {formatCurrency(deal.direct?.budgetSetup?.budgetAmount, deal.currency)}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "spent",
+      headerName: "Spent",
+      sortable: false,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+            {formatCurrency((deal as any).spent || 0, deal.currency)}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "flightDates",
+      headerName: "Dates",
+      sortable: false,
+      minWidth: 180,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <span className="text-sm text-mw-neutral-700 dark:text-mw-neutral-300">
+            {formatDateRange(deal.startDate, deal.endDate)}
+          </span>
+        );
+      },
+    },
+    {
+      colId: "actions",
+      headerName: "Actions",
+      sortable: false,
+      width: 100,
+      cellRenderer: (params: any) => {
+        const deal = params.data as Deal;
+        if (!deal) return null;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                isIconOnly
+                className="h-8 w-8 !p-0 border-mw-neutral-300 dark:border-mw-neutral-600 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-700 hover:border-mw-primary-500"
+              >
+                <MoreHorizontal className="w-5 h-5 text-mw-neutral-700 dark:text-mw-neutral-300" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              sideOffset={5}
+              className="w-48"
+            >
+              <DropdownMenuItem
+                onClick={() => setLocation(`/deals/${deal.id}/line-items`)}
+                className="flex items-center gap-2"
+              >
+                <Eye className="w-4 h-4 shrink-0" />
+                <span>View Line Items</span>
+              </DropdownMenuItem>
+              {isDealEditable(deal.status) && (
+                <DropdownMenuItem
+                  onClick={() => setLocation(`/deals/edit/${deal.id}`)}
+                  className="flex items-center gap-2"
+                >
+                  <Edit className="w-4 h-4 shrink-0" />
+                  <span>Edit Deal</span>
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuSeparator />
+              {(deal as any)?.mode?.toUpperCase() !== "PROGRAMMATIC" &&
+                ["APPROVED", "LIVE", "COMPLETED", "EXPIRED", "REJECTED", "ARCHIVED"].includes(deal.status?.toUpperCase() || "") && (
+                  <DropdownMenuItem
+                    onClick={() => {
+                      setDealToReopen(deal);
+                      setReopenSheetOpen(true);
+                    }}
+                    className="flex items-center gap-2 text-amber-600 dark:text-amber-400"
+                  >
+                    <RotateCcw className="w-4 h-4 shrink-0" />
+                    <span>Reopen Deal</span>
+                  </DropdownMenuItem>
+                )}
+              <DropdownMenuItem
+                onClick={() => {
+                  setDealToArchive(deal);
+                  setArchiveDialogOpen(true);
+                }}
+                className="flex items-center gap-2 text-red-600 dark:text-red-400"
+              >
+                <Archive className="w-4 h-4 shrink-0" />
+                <span>Move to Archive</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+
+  const getStatusBadgeClass = (status: string) => {
+    const statusUpper = status?.toUpperCase();
+    switch (statusUpper) {
+      case "LIVE":
+      case "ACTIVE":
+        return "bg-mw-success-50 text-mw-success-700 border-mw-success-200";
+      case "PENDING":
+      case "DRAFT":
+        return "bg-mw-neutral-50 text-mw-neutral-600 border-mw-neutral-200";
+      case "PAUSED":
+        return "bg-mw-warning-50 text-mw-warning-700 border-mw-warning-200";
+      case "COMPLETED":
+        return "bg-mw-info-50 text-mw-info-700 border-mw-info-200";
+      case "ARCHIVED":
+        return "bg-mw-error-50 text-mw-error-700 border-mw-error-200";
+      default:
+        return "bg-mw-neutral-50 text-mw-neutral-600 border-mw-neutral-200";
+    }
+  };
+
+  const formatCurrency = (
+    amount: number | undefined,
+    currency: string = "MYR",
+  ): string => {
+    if (!amount) return `${currency} 0`;
+    return `${currency} ${amount.toLocaleString()}`;
+  };
+
+  const formatDateRange = (
+    startDate?: string | null,
+    endDate?: string | null,
+  ): string => {
+    if (!startDate || !endDate) return "--";
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const options: Intl.DateTimeFormatOptions = {
+      month: "short",
+      day: "2-digit",
+      year: "numeric",
+    };
+    return `${start.toLocaleDateString("en-US", options)} - ${end.toLocaleDateString("en-US", options)}`;
+  };
+
+  const calculateDaysRemaining = (endDate?: string | null): string | null => {
+    if (!endDate) return null;
+    const end = new Date(endDate);
+    const now = new Date();
+    const days = Math.ceil(
+      (end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+    );
+    if (days < 0) return "Ended";
+    if (days === 0) return "Ends today";
+    return `${days} days remaining`;
+  };
+
+  return (
+    <div id="deals-page" className="h-full w-full flex flex-col">
+      <PageHeader
+        title={t('deals:deals.title')}
+        description={t('deals:deals.subtitle')}
+        actions={
+          <Button
+            id="deals-page-create-btn"
+            onClick={() => setLocation("/deals/create")}
+            variant="primary"
+            size="md"
+            className="flex items-center gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            {t('deals:deals.createDeal')}
+          </Button>
+        }
+      />
+
+      {/* Deals List Section */}
+      <div
+        id="deals-list-section"
+        className="flex-1 w-full overflow-hidden dark:bg-mw-neutral-900 p-4 sm:p-6 lg:p-8"
+      >
+        <Card id="deals-card" className="flex flex-col h-full">
+          <CardHeader id="deals-card-header" className="p-4">
+            <div
+              id="deals-header-actions"
+              className="flex items-center justify-between gap-4"
+            >
+              <div className="flex-1 max-w-md" />
+
+              <div id="deals-toolbar" className="flex items-center gap-2">
+                {/* Search Input */}
+                <div id="deals-search-container" className="relative w-80">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <Search className="h-4 w-4 text-mw-neutral-400" />
+                  </div>
+                  <Input
+                    id="deals-search-input"
+                    type="text"
+                    value={searchInput}
+                    onChange={(e) => setSearchInput(e.target.value)}
+                    placeholder="Search here..."
+                    className="w-80 pl-10 pr-3 py-2"
+                  />
+                </div>
+
+                {/* Filter Button */}
+                <Button
+                  id="deals-filter-btn"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsFilterModalOpen(true)}
+                  className="relative inline-flex items-center gap-2 px-3 py-2.5 text-sm font-medium"
+                >
+                  <SlidersHorizontal className="h-4 w-4" />
+                  {t('deals:deals.filters', 'Filters')}
+                  {getActiveFilterCount() > 0 && (
+                    <span
+                      id="deals-filter-badge"
+                      className="absolute -top-2 -right-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-mw-primary-600 rounded-full min-w-[1.25rem] h-5"
+                    >
+                      {getActiveFilterCount()}
+                    </span>
+                  )}
+                </Button>
+
+                {/* Column Customize Button */}
+                <Button
+                  id="deals-columns-btn"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsColumnDrawerOpen(true)}
+                  className="inline-flex items-center gap-2 px-3 py-2.5 text-sm font-medium"
+                >
+                  <Settings2 className="h-4 w-4" />
+                  {t('deals:deals.customize', 'Customize')}
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
+
+          <CardContent id="deals-card-content" className="flex-1 overflow-hidden px-4! pb-0!">
+            {isError ? (
+              <div className="text-center py-8 text-mw-error-500">
+                Failed to load campaigns.{" "}
+                {error instanceof Error ? error.message : "Please try again."}
+              </div>
+            ) : (
+              <AgGridTable
+                rowData={rowData}
+                columnDefs={columnDefs}
+                getRowId={(row) => row.id}
+                loading={isLoading || isFetching}
+                emptyMessage={
+                  searchValue
+                    ? `No campaigns found matching "${searchValue}".`
+                    : "No campaigns found. Create your first campaign to get started."
+                }
+                sortState={sortState}
+                onSortChange={handleSortChange}
+                hiddenColumns={hiddenColumns}
+                rowSelection="multiple"
+                selectedRowIds={selectedRows}
+                onSelectionChange={setSelectedRows}
+                serverSidePagination={true}
+                serverSideConfig={{
+                  totalCount,
+                  currentPage,
+                  pageSize,
+                  onPageChange: setCurrentPage,
+                  onPageSizeChange: (newSize) => {
+                    setPageSize(newSize);
+                    setCurrentPage(1);
+                  },
+                  pageSizeSelector: [10, 25, 50, 100],
+                }}
+              />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Deal Filter Panel */}
+      <DealFilterPanel
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        onApply={handleApplyFilters}
+        initialValues={{
+          status: statusFilter,
+          mode: modeFilter,
+          dealType: dealTypeFilter,
+          currency: currencyFilter,
+          brand: brandFilter,
+          advertiser: advertiserFilter,
+          seller: "",
+          publisher: publisherFilter,
+          startDate: startDateFilter,
+          endDate: endDateFilter,
+          sortBy,
+        }}
+      />
+
+      {/* Column Customization Drawer */}
+      <ColumnCustomizationDrawer
+        isOpen={isColumnDrawerOpen}
+        onClose={() => setIsColumnDrawerOpen(false)}
+        columns={columnConfig}
+        onApply={(newColumns) => setColumnConfig(newColumns)}
+      />
+
+      {/* Archive Confirmation Sheet */}
+      <Sheet open={archiveDialogOpen} onOpenChange={setArchiveDialogOpen}>
+        <SheetContent side="right" size="sm" className="flex flex-col">
+          <SheetHeader className="border-b border-mw-neutral-200 dark:border-mw-neutral-700 pb-4">
+            <SheetTitle>Move to Archive</SheetTitle>
+          </SheetHeader>
+
+          <div className="flex-1 p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center">
+                <Archive className="h-6 w-6 text-red-600 dark:text-red-400" />
+              </div>
+              <div>
+                <p className="font-medium text-mw-neutral-900 dark:text-white">
+                  Archive this deal?
+                </p>
+                <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">
+                  This action can be undone later.
+                </p>
+              </div>
+            </div>
+
+            {dealToArchive && (
+              <div className="bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-lg p-4 border border-mw-neutral-200 dark:border-mw-neutral-700">
+                <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400 mb-1">
+                  Deal Name
+                </p>
+                <p className="font-medium text-mw-neutral-900 dark:text-white">
+                  {dealToArchive.name}
+                </p>
+                {dealToArchive.brand && (
+                  <>
+                    <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400 mb-1 mt-3">
+                      Brand
+                    </p>
+                    <p className="font-medium text-mw-neutral-900 dark:text-white">
+                      {dealToArchive.brand}
+                    </p>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+
+          <SheetFooter className="border-t border-mw-neutral-200 dark:border-mw-neutral-700 pt-4">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setArchiveDialogOpen(false);
+                setDealToArchive(null);
+              }}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (dealToArchive) {
+                  deleteCampaignMutation.mutate(dealToArchive.id);
+                  setArchiveDialogOpen(false);
+                  setDealToArchive(null);
+                }
+              }}
+              className="flex-1 bg-red-600 hover:bg-red-700 text-white"
+            >
+              Move to Archive
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+
+      {/* Import from Planner Dialog */}
+      <ImportFromPlannerDialog
+        open={importDialogOpen}
+        onOpenChange={setImportDialogOpen}
+        onProceed={(deal) => {
+          console.log("Selected deal to import:", deal);
+          setLocation("/deals/create");
+        }}
+      />
+
+      {/* Reopen Deal Sheet */}
+      {dealToReopen && (
+        <ReopenDealSheet
+          dealId={dealToReopen.id}
+          open={reopenSheetOpen}
+          onOpenChange={(open) => {
+            setReopenSheetOpen(open);
+            if (!open) setDealToReopen(null);
+          }}
+          dealName={dealToReopen.name}
+          currentStatus={dealToReopen.status}
+        />
+      )}
+    </div>
+  );
+}