adserver-dashboard 1.0.0

package/client/src/pages/line-item-detail-page.tsx

@@ -0,0 +1,684 @@
+import { useMemo } from "react";
+import { useParams, useLocation } from "wouter";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { AgGridTable } from '@moving-walls/design-system';
+import type { ColDef } from '@moving-walls/design-system';
+
+import {
+  ArrowLeft,
+  Calendar,
+  DollarSign,
+  BarChart3,
+  Monitor,
+  Image,
+  Pencil,
+  Target,
+  Layers,
+  MapPin,
+  Users,
+  Eye,
+  Clock,
+  Zap,
+  TrendingUp,
+  ChevronRight,
+  Hash,
+  FileText,
+} from "lucide-react";
+import {
+  InfluenceDealsAPI,
+  influenceDealsRequest,
+  isDealEditable,
+  type Deal,
+} from "@/lib/influence-deals-api";
+import { usePageTitle } from "@/hooks/use-page-title";
+
+export default function LineItemDetailPage() {
+  const { dealId, lineItemId } = useParams<{ dealId: string; lineItemId: string }>();
+  const [, setLocation] = useLocation();
+
+  const { data: deal } = useQuery({
+    queryKey: ["deal", dealId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<Deal>(
+        InfluenceDealsAPI.deals.get(dealId!),
+      );
+      return response;
+    },
+    enabled: !!dealId,
+  });
+
+  const { data: lineItem, isLoading: isLoadingLineItem } = useQuery({
+    queryKey: ["line-item-details", dealId, lineItemId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.lineItems.get(dealId!, lineItemId!),
+      );
+      return response;
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  const { data: inventoriesResponse } = useQuery({
+    queryKey: ["line-item-inventories", dealId, lineItemId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<{
+        data: any[];
+        pagination?: any;
+      }>(
+        InfluenceDealsAPI.lineItems.inventories(dealId!, lineItemId!, { page: 1, limit: 100 }),
+      );
+      return {
+        data: response?.data || response || [],
+      };
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  const { data: creativesResponse } = useQuery({
+    queryKey: ["line-item-creatives", dealId, lineItemId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<{
+        data: any[];
+        pagination?: any;
+      }>(
+        InfluenceDealsAPI.creatives.listByLineItem(dealId!, lineItemId!, { page: 1, limit: 100 }),
+      );
+      return {
+        data: response?.data || response || [],
+      };
+    },
+    enabled: !!dealId && !!lineItemId,
+  });
+
+  usePageTitle("Line Item Detail", lineItem?.name || deal?.name);
+
+  const inventories = Array.isArray(inventoriesResponse?.data) ? inventoriesResponse.data : [];
+  const creatives = Array.isArray(creativesResponse?.data) ? creativesResponse.data : [];
+
+  const inventoryColumnDefs = useMemo<ColDef<any>[]>(() => [
+    {
+      colId: "name",
+      headerName: "Name",
+      field: "name",
+      cellRenderer: (params: { data: any }) => (
+        <span className="text-sm font-medium text-mw-neutral-800 dark:text-white">
+          {params.data?.name || params.data?.inventoryName || "Unnamed"}
+        </span>
+      ),
+    },
+    {
+      colId: "address",
+      headerName: "Address",
+      field: "address",
+      cellRenderer: (params: { data: any }) => (
+        <span className="text-sm text-mw-neutral-500">
+          {params.data?.address || params.data?.location || "--"}
+        </span>
+      ),
+    },
+    {
+      colId: "venueType",
+      headerName: "Venue Type",
+      field: "venueType",
+      cellRenderer: (params: { value: string }) => (
+        <Badge variant="outline" className="text-xs rounded-full">
+          {params.value || "--"}
+        </Badge>
+      ),
+    },
+    {
+      colId: "publisher",
+      headerName: "Publisher",
+      field: "publisher",
+      cellRenderer: (params: { data: any }) => (
+        <span className="text-sm text-mw-neutral-500">
+          {params.data?.publisher?.name || params.data?.mediaOwnerName || "--"}
+        </span>
+      ),
+    },
+  ], []);
+
+  const canEdit = isDealEditable(deal?.status);
+
+  const formatDate = (dateStr?: string | null): string => {
+    if (!dateStr) return "--";
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  const formatCurrency = (amount: number | undefined, currency: string = "USD"): string => {
+    if (!amount && amount !== 0) return `${currency} 0`;
+    return `${currency} ${amount.toLocaleString()}`;
+  };
+
+  const calculateDuration = (startDate?: string | null, endDate?: string | null): string => {
+    if (!startDate || !endDate) return "--";
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const days = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+    if (days < 0) return "--";
+    return `${days} day${days !== 1 ? 's' : ''}`;
+  };
+
+  const getStatusVariant = (status?: string): "default" | "secondary" | "destructive" | "outline" => {
+    switch (status?.toUpperCase()) {
+      case "LIVE":
+      case "ACTIVE":
+        return "default";
+      case "DRAFT":
+        return "secondary";
+      case "REJECTED":
+        return "destructive";
+      default:
+        return "outline";
+    }
+  };
+
+  const getStatusColor = (status?: string): string => {
+    switch (status?.toUpperCase()) {
+      case "LIVE":
+      case "ACTIVE":
+        return "bg-green-100 text-green-700 border-green-200";
+      case "DRAFT":
+        return "bg-slate-100 text-slate-600 border-slate-200";
+      case "PENDING":
+        return "bg-amber-100 text-amber-700 border-amber-200";
+      case "APPROVED":
+        return "bg-blue-100 text-blue-700 border-blue-200";
+      case "PAUSED":
+        return "bg-orange-100 text-orange-700 border-orange-200";
+      case "COMPLETED":
+      case "ENDED":
+        return "bg-purple-100 text-purple-700 border-purple-200";
+      case "REJECTED":
+        return "bg-red-100 text-red-700 border-red-200";
+      default:
+        return "bg-slate-100 text-slate-600 border-slate-200";
+    }
+  };
+
+  const li = lineItem as any;
+  const budget = li?.direct?.budgetSetup?.budgetAmount || li?.budget || li?.totalBudget || li?.programmatic?.netCost || 0;
+  const impressions = li?.impressions || li?.targetImpressions || li?.totalImpressions || li?.direct?.campaignGoal?.targetValue || li?.programmatic?.impressions || 0;
+  const revenue = li?.revenue || li?.estimatedRevenue || 0;
+  const currency = li?.currency || deal?.currency || "USD";
+  const dealMode = deal?.mode || (li?.programmatic ? "PROGRAMMATIC" : "DIRECT");
+
+  const targeting = li?.targeting || {};
+  const demographics = targeting?.demographics || targeting?.audience || {};
+  const venueTypes = targeting?.venueTypes || targeting?.venues || [];
+  const geography = targeting?.geography || targeting?.geo || targeting?.geofencing?.locations || [];
+  const signals = li?.deliveryTargeting?.signals;
+
+  if (isLoadingLineItem) {
+    return (
+      <div className="h-[calc(100vh-72px)] w-full flex items-center justify-center bg-mw-neutral-50 dark:bg-mw-neutral-900">
+        <div className="flex flex-col items-center gap-3">
+          <div className="h-8 w-8 border-2 border-mw-primary-500 border-t-transparent rounded-full animate-spin" />
+          <p className="text-sm text-mw-neutral-500">Loading line item details...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!lineItem) {
+    return (
+      <div className="h-[calc(100vh-72px)] w-full flex items-center justify-center bg-mw-neutral-50 dark:bg-mw-neutral-900">
+        <div className="flex flex-col items-center gap-3">
+          <p className="text-sm text-mw-neutral-500">Line item not found</p>
+          <Button variant="outline" onClick={() => setLocation(`/deals/${dealId}/line-items`)}>
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Line Items
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const summaryCards = [
+    {
+      label: "Budget",
+      value: formatCurrency(budget, currency),
+      icon: DollarSign,
+      gradient: "from-emerald-500 to-teal-600",
+      bgLight: "bg-emerald-50",
+    },
+    {
+      label: "Impressions",
+      value: impressions ? impressions.toLocaleString() : "0",
+      icon: Eye,
+      gradient: "from-violet-500 to-purple-600",
+      bgLight: "bg-violet-50",
+    },
+    {
+      label: "Revenue",
+      value: formatCurrency(revenue, currency),
+      icon: TrendingUp,
+      gradient: "from-blue-500 to-indigo-600",
+      bgLight: "bg-blue-50",
+    },
+    {
+      label: "Flight Dates",
+      value: li?.startDate ? `${formatDate(li.startDate)} – ${formatDate(li.endDate)}` : "--",
+      icon: Calendar,
+      gradient: "from-amber-500 to-orange-600",
+      bgLight: "bg-amber-50",
+    },
+  ];
+
+  return (
+    <div className="h-[calc(100vh-72px)] w-full flex flex-col bg-slate-50 dark:bg-mw-neutral-900 overflow-auto">
+      <div className="flex-shrink-0 bg-white dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+        <div className="px-6 py-4">
+          <div className="flex items-center gap-2 text-xs text-mw-neutral-400 mb-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setLocation("/deals")}
+            >
+              Deals
+            </Button>
+            <ChevronRight className="h-3 w-3" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setLocation(`/deals/${dealId}/line-items`)}
+            >
+              {deal?.name || "Deal"}
+            </Button>
+            <ChevronRight className="h-3 w-3" />
+            <span className="text-mw-neutral-600 dark:text-mw-neutral-300">{li?.name || "Line Item"}</span>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 px-3"
+                onClick={() => setLocation(`/deals/${dealId}/line-items`)}
+              >
+                <ArrowLeft className="h-3.5 w-3.5 mr-1.5" />
+                Back
+              </Button>
+              <div className="h-6 w-px bg-mw-neutral-200 dark:bg-mw-neutral-700" />
+              <div>
+                <div className="flex items-center gap-3">
+                  <h1 className="text-lg font-semibold text-mw-neutral-900 dark:text-white">
+                    {li?.name || "Untitled Line Item"}
+                  </h1>
+                  <Badge className={`${getStatusColor(li?.status)} text-xs font-medium px-2.5 py-0.5 rounded-full border`}>
+                    {li?.status || "DRAFT"}
+                  </Badge>
+                  {dealMode && (
+                    <Badge variant="outline" className="text-xs font-normal text-mw-neutral-500 rounded-full">
+                      {dealMode}
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex items-center gap-3 mt-1">
+                  <span className="text-xs text-mw-neutral-400 flex items-center gap-1">
+                    <Hash className="h-3 w-3" />
+                    {lineItemId?.slice(0, 8)}
+                  </span>
+                  <span className="text-xs text-mw-neutral-300">·</span>
+                  <span className="text-xs text-mw-neutral-400 flex items-center gap-1">
+                    <Clock className="h-3 w-3" />
+                    {calculateDuration(li?.startDate, li?.endDate)}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {canEdit && (
+                <Button
+                  size="sm"
+                  className="bg-mw-primary-500 hover:bg-mw-primary-600 text-white h-9"
+                  onClick={() => setLocation(`/deals/${dealId}/line-items/${lineItemId}/edit`)}
+                >
+                  <Pencil className="h-3.5 w-3.5 mr-1.5" />
+                  Edit Line Item
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6">
+        <div className="max-w-[1400px] mx-auto space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {summaryCards.map((card) => (
+              <div
+                key={card.label}
+                className="bg-white dark:bg-mw-neutral-800 rounded-xl border border-mw-neutral-200 dark:border-mw-neutral-700 p-4 hover:shadow-sm transition-shadow"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <p className="text-xs font-medium text-mw-neutral-400 uppercase tracking-wider">{card.label}</p>
+                    <p className="text-lg font-bold text-mw-neutral-900 dark:text-white mt-1.5">{card.value}</p>
+                  </div>
+                  <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${card.gradient} flex items-center justify-center shadow-sm`}>
+                    <card.icon className="h-5 w-5 text-white" />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+            <div className="lg:col-span-8 space-y-6">
+              <div className="bg-white dark:bg-mw-neutral-800 rounded-xl border border-mw-neutral-200 dark:border-mw-neutral-700 overflow-hidden">
+                <div className="px-5 py-4 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                  <div className="flex items-center gap-2.5">
+                    <div className="w-7 h-7 rounded-lg bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center">
+                      <FileText className="h-3.5 w-3.5 text-blue-500" />
+                    </div>
+                    <h3 className="text-sm font-semibold text-mw-neutral-900 dark:text-white">Overview</h3>
+                  </div>
+                </div>
+                <div className="p-5">
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-y-5 gap-x-6">
+                    {[
+                      { label: "Status", value: li?.status || "--" },
+                      { label: "Priority", value: li?.priority || li?.direct?.campaignGoal?.priority || "--" },
+                      { label: "Creative Type", value: li?.creativeType || li?.direct?.campaignGoal?.creativeType || "--" },
+                      { label: "Media Type", value: li?.mediaType || "DOOH" },
+                      { label: "Start Date", value: formatDate(li?.startDate) },
+                      { label: "End Date", value: formatDate(li?.endDate) },
+                      { label: "Duration", value: calculateDuration(li?.startDate, li?.endDate) },
+                      { label: "Pacing", value: li?.direct?.pacing?.type || (typeof li?.pacing === 'object' ? li?.pacing?.type : li?.pacing) || "--" },
+                    ].map((item) => (
+                      <div key={item.label}>
+                        <p className="text-[11px] font-medium text-mw-neutral-400 uppercase tracking-wider mb-1">{item.label}</p>
+                        <p className="text-sm font-medium text-mw-neutral-800 dark:text-mw-neutral-200">{item.value}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-white dark:bg-mw-neutral-800 rounded-xl border border-mw-neutral-200 dark:border-mw-neutral-700 overflow-hidden">
+                <div className="px-5 py-4 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                  <div className="flex items-center gap-2.5">
+                    <div className="w-7 h-7 rounded-lg bg-green-50 dark:bg-green-900/30 flex items-center justify-center">
+                      <Target className="h-3.5 w-3.5 text-green-500" />
+                    </div>
+                    <h3 className="text-sm font-semibold text-mw-neutral-900 dark:text-white">Targeting</h3>
+                  </div>
+                </div>
+                <div className="divide-y divide-mw-neutral-100 dark:divide-mw-neutral-700">
+                  <div className="px-5 py-4">
+                    <div className="flex items-center gap-2 mb-2.5">
+                      <Users className="h-3.5 w-3.5 text-mw-neutral-400" />
+                      <p className="text-xs font-semibold text-mw-neutral-500 uppercase tracking-wider">Demographics</p>
+                    </div>
+                    {demographics?.ageGroups?.length || demographics?.genders?.length || demographics?.gender ? (
+                      <div className="flex flex-wrap gap-1.5">
+                        {demographics.gender && (
+                          <Badge variant="outline" className="text-xs rounded-full px-2.5 py-0.5 bg-violet-50 text-violet-600 border-violet-200">{demographics.gender}</Badge>
+                        )}
+                        {demographics.genders?.map((g: string, i: number) => (
+                          <Badge key={`g-${i}`} variant="outline" className="text-xs rounded-full px-2.5 py-0.5 bg-violet-50 text-violet-600 border-violet-200">{g}</Badge>
+                        ))}
+                        {demographics.ageGroups?.map((age: string, i: number) => (
+                          <Badge key={`a-${i}`} variant="outline" className="text-xs rounded-full px-2.5 py-0.5 bg-blue-50 text-blue-600 border-blue-200">{age}</Badge>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-sm text-mw-neutral-400 italic">No demographic targeting set</p>
+                    )}
+                  </div>
+                  <div className="px-5 py-4">
+                    <div className="flex items-center gap-2 mb-2.5">
+                      <Layers className="h-3.5 w-3.5 text-mw-neutral-400" />
+                      <p className="text-xs font-semibold text-mw-neutral-500 uppercase tracking-wider">Venue Types</p>
+                    </div>
+                    {Array.isArray(venueTypes) && venueTypes.length > 0 ? (
+                      <div className="flex flex-wrap gap-1.5">
+                        {venueTypes.map((v: any, i: number) => (
+                          <Badge key={i} variant="outline" className="text-xs rounded-full px-2.5 py-0.5 bg-teal-50 text-teal-600 border-teal-200">
+                            {typeof v === "string" ? v : v?.name || v?.label || "--"}
+                          </Badge>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-sm text-mw-neutral-400 italic">No venue type targeting set</p>
+                    )}
+                  </div>
+                  <div className="px-5 py-4">
+                    <div className="flex items-center gap-2 mb-2.5">
+                      <MapPin className="h-3.5 w-3.5 text-mw-neutral-400" />
+                      <p className="text-xs font-semibold text-mw-neutral-500 uppercase tracking-wider">Geography</p>
+                    </div>
+                    {Array.isArray(geography) && geography.length > 0 ? (
+                      <div className="flex flex-wrap gap-1.5">
+                        {geography.map((g: any, i: number) => (
+                          <Badge key={i} variant="outline" className="text-xs rounded-full px-2.5 py-0.5 bg-amber-50 text-amber-600 border-amber-200">
+                            {typeof g === "string" ? g : g?.name || g?.city || g?.country || "--"}
+                          </Badge>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-sm text-mw-neutral-400 italic">No geographic targeting set</p>
+                    )}
+                  </div>
+                  {signals && (
+                    <div className="px-5 py-4">
+                      <div className="flex items-center gap-2 mb-2.5">
+                        <Zap className="h-3.5 w-3.5 text-mw-neutral-400" />
+                        <p className="text-xs font-semibold text-mw-neutral-500 uppercase tracking-wider">Signals</p>
+                      </div>
+                      <div className="flex flex-wrap gap-1.5">
+                        {signals.signalEnabled ? (
+                          <Badge variant="outline" className="text-xs rounded-full px-2.5 py-0.5 bg-orange-50 text-orange-600 border-orange-200">
+                            {signals.signalName || signals.signalId || "Auto-activate enabled"}
+                          </Badge>
+                        ) : Array.isArray(signals) && signals.length > 0 ? (
+                          signals.map((s: any, i: number) => (
+                            <Badge key={i} variant="outline" className="text-xs rounded-full px-2.5 py-0.5 bg-orange-50 text-orange-600 border-orange-200">
+                              {s.name || s.id || "--"}
+                            </Badge>
+                          ))
+                        ) : (
+                          <p className="text-sm text-mw-neutral-400 italic">No signals configured</p>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="bg-white dark:bg-mw-neutral-800 rounded-xl border border-mw-neutral-200 dark:border-mw-neutral-700 overflow-hidden">
+                <div className="px-5 py-4 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 flex items-center justify-center">
+                        <Monitor className="h-3.5 w-3.5 text-indigo-500" />
+                      </div>
+                      <h3 className="text-sm font-semibold text-mw-neutral-900 dark:text-white">
+                        Inventory
+                      </h3>
+                      <Badge variant="secondary" className="text-xs rounded-full ml-1">{inventories.length}</Badge>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  {inventories.length > 0 ? (
+                    <div style={{ height: Math.min(inventories.length * 60 + 44, 400) }}>
+                      <AgGridTable
+                        rowData={inventories}
+                        columnDefs={inventoryColumnDefs}
+                        getRowId={(data) => String(data.id || data.inventoryId || Math.random())}
+                        pagination={false}
+                        emptyMessage="No inventory assigned"
+                      />
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                      <div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-mw-neutral-700 flex items-center justify-center mb-3">
+                        <Monitor className="h-6 w-6 text-mw-neutral-300" />
+                      </div>
+                      <p className="text-sm font-medium text-mw-neutral-500">No inventory assigned</p>
+                      <p className="text-xs text-mw-neutral-400 mt-1">Inventory will appear here once assigned to this line item</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="lg:col-span-4 space-y-6">
+              <div className="bg-white dark:bg-mw-neutral-800 rounded-xl border border-mw-neutral-200 dark:border-mw-neutral-700 overflow-hidden">
+                <div className="px-5 py-4 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-pink-50 dark:bg-pink-900/30 flex items-center justify-center">
+                        <Image className="h-3.5 w-3.5 text-pink-500" />
+                      </div>
+                      <h3 className="text-sm font-semibold text-mw-neutral-900 dark:text-white">
+                        Creatives
+                      </h3>
+                      <Badge variant="secondary" className="text-xs rounded-full ml-1">{creatives.length}</Badge>
+                    </div>
+                    {canEdit && creatives.length > 0 && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 text-xs"
+                        onClick={() => setLocation(`/deals/${dealId}/line-items/${lineItemId}/creatives`)}
+                      >
+                        Manage
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                <div className="p-4">
+                  {creatives.length > 0 ? (
+                    <div className="space-y-3">
+                      {creatives.map((cr: any, idx: number) => (
+                        <div
+                          key={cr.id || cr.creativeId || idx}
+                          className="flex items-center gap-3 p-2.5 rounded-lg border border-mw-neutral-100 dark:border-mw-neutral-700 hover:border-mw-neutral-200 dark:hover:border-mw-neutral-600 transition-colors"
+                        >
+                          <div className="w-14 h-14 rounded-lg bg-slate-100 dark:bg-mw-neutral-700 overflow-hidden flex-shrink-0">
+                            {(cr.thumbnail || cr.thumbnailUrl || cr.creativeUri || cr.previewUrl) ? (
+                              <img
+                                src={cr.thumbnail || cr.thumbnailUrl || cr.creativeUri || cr.previewUrl}
+                                alt={cr.name || "Creative"}
+                                className="w-full h-full object-cover"
+                                onError={(e) => {
+                                  (e.target as HTMLImageElement).style.display = "none";
+                                }}
+                              />
+                            ) : (
+                              <div className="w-full h-full flex items-center justify-center">
+                                <Image className="h-5 w-5 text-mw-neutral-300" />
+                              </div>
+                            )}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-mw-neutral-800 dark:text-white truncate">
+                              {cr.name || cr.creativeName || "Unnamed"}
+                            </p>
+                            {(cr.dimensions || cr.resolution) && (
+                              <p className="text-xs text-mw-neutral-400 mt-0.5">
+                                {cr.dimensions || cr.resolution}
+                              </p>
+                            )}
+                            {cr.status && (
+                              <Badge variant="outline" className="text-[10px] rounded-full mt-1 h-4 px-1.5">
+                                {cr.status}
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center justify-center py-10 text-center">
+                      <div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-mw-neutral-700 flex items-center justify-center mb-3">
+                        <Image className="h-6 w-6 text-mw-neutral-300" />
+                      </div>
+                      <p className="text-sm font-medium text-mw-neutral-500">No creatives assigned</p>
+                      <p className="text-xs text-mw-neutral-400 mt-1">Assign creatives to this line item</p>
+                      {canEdit && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="mt-3 h-8 text-xs"
+                          onClick={() => setLocation(`/deals/${dealId}/line-items/${lineItemId}/creatives`)}
+                        >
+                          <Image className="h-3.5 w-3.5 mr-1.5" />
+                          Assign Creatives
+                        </Button>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {(dealMode === "DIRECT" && li?.direct) && (
+                <div className="bg-white dark:bg-mw-neutral-800 rounded-xl border border-mw-neutral-200 dark:border-mw-neutral-700 overflow-hidden">
+                  <div className="px-5 py-4 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                    <div className="flex items-center gap-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 flex items-center justify-center">
+                        <BarChart3 className="h-3.5 w-3.5 text-emerald-500" />
+                      </div>
+                      <h3 className="text-sm font-semibold text-mw-neutral-900 dark:text-white">Budget & Goals</h3>
+                    </div>
+                  </div>
+                  <div className="p-5 space-y-3">
+                    {[
+                      { label: "Budget Type", value: li.direct.budgetSetup?.budgetType || "--" },
+                      { label: "Budget Amount", value: formatCurrency(li.direct.budgetSetup?.budgetAmount, currency) },
+                      { label: "Goal Type", value: li.direct.campaignGoal?.type || "--" },
+                      { label: "Target Value", value: li.direct.campaignGoal?.targetValue?.toLocaleString() || "--" },
+                      { label: "Pacing", value: li.direct.pacing?.type || "--" },
+                    ].map((item) => (
+                      <div key={item.label} className="flex items-center justify-between py-1">
+                        <p className="text-xs text-mw-neutral-400">{item.label}</p>
+                        <p className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">{item.value}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {(dealMode === "PROGRAMMATIC" && li?.programmatic) && (
+                <div className="bg-white dark:bg-mw-neutral-800 rounded-xl border border-mw-neutral-200 dark:border-mw-neutral-700 overflow-hidden">
+                  <div className="px-5 py-4 border-b border-mw-neutral-100 dark:border-mw-neutral-700">
+                    <div className="flex items-center gap-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-emerald-50 dark:bg-emerald-900/30 flex items-center justify-center">
+                        <BarChart3 className="h-3.5 w-3.5 text-emerald-500" />
+                      </div>
+                      <h3 className="text-sm font-semibold text-mw-neutral-900 dark:text-white">Programmatic</h3>
+                    </div>
+                  </div>
+                  <div className="p-5 space-y-3">
+                    {[
+                      { label: "Bid Floor", value: formatCurrency(li.programmatic.bidFloor, currency) },
+                      { label: "Net Cost", value: formatCurrency(li.programmatic.netCost, currency) },
+                      { label: "Impressions", value: li.programmatic.impressions?.toLocaleString() || "--" },
+                      { label: "Imp Multiplier", value: typeof li.programmatic.impMultiplier === 'object' ? (li.programmatic.impMultiplier?.type || JSON.stringify(li.programmatic.impMultiplier)) : (li.programmatic.impMultiplier?.toString() || "--") },
+                    ].map((item) => (
+                      <div key={item.label} className="flex items-center justify-between py-1">
+                        <p className="text-xs text-mw-neutral-400">{item.label}</p>
+                        <p className="text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300">{item.value}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}