adserver-dashboard 1.0.0

package/client/src/components/line-items/steps/inventory-step.tsx

@@ -0,0 +1,1533 @@
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Checkbox } from "@moving-walls/design-system";
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import { PlannerInventoryCard } from "../planner-inventory-card";
+import { AdvancedFiltersPanel, type AdvancedFilterValues } from "../../inventory/advanced-filters-panel";
+import { InventoryDetailsSheet, type InventoryDetailsItem } from "../../inventory/inventory-details-sheet";
+import { InventorySettingsMenu } from "../../inventory/inventory-settings-menu";
+import { InventoryAvailabilityView, type AvailabilityInventoryItem } from "../../inventory/inventory-availability-view";
+import { CSVUploadModal } from "../../inventory/csv-upload-modal";
+import { InventoryMapView } from "../../inventory/inventory-map-view";
+import { CampaignForecastPanel } from "../campaign-forecast-panel";
+import {
+  ChevronDown,
+  ChevronUp,
+  Grid3X3,
+  Monitor,
+  Package,
+  Search,
+  Network,
+  Loader2,
+  SlidersHorizontal,
+  List,
+  Sparkles,
+  AlertCircle,
+  RotateCcw,
+} from "lucide-react";
+import { cn } from "@moving-walls/design-system";
+import {
+  searchInventories,
+  type InventoryItem as APIInventoryItem,
+  type InventoryPlanning,
+} from "@/lib/inventory-api";
+import {
+  getRecommendationResults,
+  type RecommendedInventory,
+} from "@/lib/recommendation-api";
+
+interface InventoryStepProps {
+  data?: any;
+  lineItemData?: any;
+  lineItemId?: string;
+  targeting?: any;
+  recommendationRunId?: string;
+  country?: string;
+  onComplete: (data: { inventories: string[]; inventoryObjects: any[] }) => void;
+  onBack?: () => void;
+  isLoading?: boolean;
+  isPlannerRestricted?: boolean;
+  formId?: string;
+  dealMode?: "DIRECT" | "PROGRAMMATIC";
+}
+
+interface InventoryItem {
+  id: string;
+  name: string;
+  address: string;
+  additionalDetails?: string;
+  tags: Array<{
+    label: string;
+    variant:
+      | "primary"
+      | "secondary"
+      | "success"
+      | "warning"
+      | "error"
+      | "outline";
+  }>;
+  operatingHours: string;
+  estimatedCostPerDay: number;
+  currency: string;
+  type: "screen" | "network" | "package";
+  planning?: InventoryPlanning;
+  publisherName?: string;
+  screens?: number;
+  thumbnail?: string;
+  size?: string;
+  format?: string;
+  mediaType?: string;
+  operationMode?: string;
+  execution?: string;
+  finalScore?: number;
+  why?: string;
+  availability?: {
+    availableDays?: number;
+    totalDays?: number;
+    availabilityPercentage?: number;
+    summary?: string;
+  };
+  componentScores?: {
+    geoFit?: number;
+    availability?: number;
+    budgetFit?: number;
+    audienceFit?: number;
+    brandFit?: number;
+    qualityFit?: number;
+    timeFit?: number;
+  };
+  location?: {
+    cityName?: string;
+    stateName?: string;
+    countryName?: string;
+  };
+  referenceId?: string;
+  latitude?: number;
+  longitude?: number;
+}
+
+function mapAPIInventoryToLocal(apiItem: APIInventoryItem): InventoryItem {
+  const tags: InventoryItem["tags"] = [];
+
+  if (apiItem.type) {
+    tags.push({
+      label: apiItem.type === "digital" ? "Digital" : apiItem.type,
+      variant: "primary",
+    });
+  }
+  tags.push({ label: "DOOH", variant: "secondary" });
+  if (apiItem.venueType) {
+    const venueVariant = apiItem.venueType.toLowerCase().includes("retail")
+      ? "warning"
+      : apiItem.venueType.toLowerCase().includes("transit")
+        ? "success"
+        : apiItem.venueType.toLowerCase().includes("outdoor")
+          ? "outline"
+          : "secondary";
+    tags.push({ label: apiItem.venueType, variant: venueVariant });
+  }
+  if (apiItem.size) {
+    tags.push({ label: apiItem.size, variant: "warning" });
+  }
+
+  return {
+    id: apiItem.id,
+    name: apiItem.name,
+    address: apiItem.address || "Location not specified",
+    additionalDetails: apiItem.publisherName
+      ? `Publisher: ${apiItem.publisherName}`
+      : undefined,
+    tags,
+    operatingHours: apiItem.operatingHours || "24/7",
+    estimatedCostPerDay: apiItem.planning?.pricing?.estimatedCost || 2500,
+    currency: "MYR",
+    type: "screen",
+    planning: apiItem.planning,
+    publisherName: apiItem.publisherName,
+    screens: 1,
+    thumbnail: apiItem.thumbnail,
+    size: apiItem.size || "N/A",
+    format: "OOH",
+    mediaType:
+      apiItem.type === "digital" ? "Digital" : apiItem.type || "Digital",
+    operationMode: "N/A",
+    execution: "placeholder",
+    latitude: apiItem.latitude,
+    longitude: apiItem.longitude,
+  };
+}
+
+function mapRecommendationToLocal(rec: RecommendedInventory): InventoryItem {
+  const tags: InventoryItem["tags"] = [];
+
+  if (rec.inventoryDetails?.type) {
+    tags.push({
+      label:
+        rec.inventoryDetails.type === "digital"
+          ? "Digital"
+          : rec.inventoryDetails.type,
+      variant: "primary",
+    });
+  }
+  tags.push({ label: "DOOH", variant: "secondary" });
+
+  if (
+    rec.inventoryDetails?.venueTypes &&
+    rec.inventoryDetails.venueTypes.length > 0
+  ) {
+    const venueType = rec.inventoryDetails.venueTypes[0];
+    const venueVariant = venueType.toLowerCase().includes("retail")
+      ? "warning"
+      : venueType.toLowerCase().includes("transit")
+        ? "success"
+        : venueType.toLowerCase().includes("outdoor")
+          ? "outline"
+          : "secondary";
+    tags.push({ label: venueType, variant: venueVariant });
+  }
+
+  if (rec.inventoryDetails?.sizes && rec.inventoryDetails.sizes.length > 0) {
+    tags.push({ label: rec.inventoryDetails.sizes[0], variant: "warning" });
+  }
+
+  if (rec.finalScore !== undefined) {
+    const scorePercent = rec.finalScore * 100;
+    const scoreLabel = `Score: ${scorePercent.toFixed(0)}`;
+    tags.push({ label: scoreLabel, variant: "success" });
+  }
+
+  const locationParts: string[] = [];
+  if (rec.inventoryDetails?.location?.cityName) {
+    locationParts.push(rec.inventoryDetails.location.cityName);
+  }
+  if (rec.inventoryDetails?.location?.stateName) {
+    locationParts.push(rec.inventoryDetails.location.stateName);
+  }
+  const locationStr = locationParts.length > 0 
+    ? locationParts.join(', ') 
+    : rec.inventoryDetails?.address || "Location not specified";
+
+  return {
+    id: rec.inventoryId,
+    name: rec.name,
+    address: locationStr,
+    additionalDetails: rec.why || (rec.inventoryDetails?.mediaOwnerName
+      ? `Publisher: ${rec.inventoryDetails.mediaOwnerName}`
+      : undefined),
+    tags,
+    operatingHours: "24/7",
+    estimatedCostPerDay: rec.cost?.estimatedCost || 2500,
+    currency: rec.cost?.currency || "MYR",
+    type: "screen",
+    planning: rec.forecast
+      ? {
+          capacity: {
+            campaignDays: rec.availability?.totalSlots || 30,
+            available: {
+              slots: 0,
+              playTimeSec: 0,
+              maxImpressions: rec.forecast.estimatedImpressions || 0,
+            },
+          },
+          allocation: {
+            slots: 0,
+            playTimeSec: 0,
+            sov: rec.forecast.estimatedSov || 0,
+            sot: 0,
+          },
+          estimates: {
+            impressions: rec.forecast.estimatedImpressions || 0,
+            reach: rec.forecast.estimatedReach || 0,
+            frequency: rec.forecast.estimatedFrequency || 0,
+          },
+          pricing: {
+            cpm: rec.cost?.costPerImpression
+              ? rec.cost.costPerImpression * 1000
+              : 0,
+            estimatedCost: rec.cost?.estimatedCost || 0,
+          },
+        }
+      : undefined,
+    publisherName: rec.inventoryDetails?.mediaOwnerName,
+    screens: 1,
+    thumbnail: undefined,
+    size: rec.inventoryDetails?.sizes?.[0] || "N/A",
+    format: rec.inventoryDetails?.format || "OOH",
+    mediaType:
+      rec.inventoryDetails?.type === "digital"
+        ? "Digital"
+        : rec.inventoryDetails?.type || "Digital",
+    operationMode: "N/A",
+    execution: "placeholder",
+    finalScore: rec.finalScore !== undefined ? rec.finalScore * 100 : undefined,
+    why: rec.why,
+    availability: rec.availability ? {
+      availableDays: rec.availability.availableSlots,
+      totalDays: rec.availability.totalSlots,
+      availabilityPercentage: rec.availability.availabilityPercentage !== undefined 
+        ? rec.availability.availabilityPercentage * 100 
+        : undefined,
+      summary: undefined,
+    } : undefined,
+    componentScores: rec.componentScores ? {
+      geoFit: rec.componentScores.geoFit !== undefined ? rec.componentScores.geoFit * 100 : undefined,
+      availability: rec.componentScores.availability !== undefined ? rec.componentScores.availability * 100 : undefined,
+      budgetFit: rec.componentScores.budgetFit !== undefined ? rec.componentScores.budgetFit * 100 : undefined,
+      audienceFit: rec.componentScores.audienceFit !== undefined ? rec.componentScores.audienceFit * 100 : undefined,
+      brandFit: rec.componentScores.brandFit !== undefined ? rec.componentScores.brandFit * 100 : undefined,
+      qualityFit: rec.componentScores.qualityFit !== undefined ? rec.componentScores.qualityFit * 100 : undefined,
+      timeFit: rec.componentScores.timeFit !== undefined ? rec.componentScores.timeFit * 100 : undefined,
+    } : undefined,
+    location: rec.inventoryDetails?.location ? {
+      cityName: rec.inventoryDetails.location.cityName,
+      stateName: rec.inventoryDetails.location.stateName,
+      countryName: rec.inventoryDetails.location.countryName,
+    } : undefined,
+    referenceId: rec.referenceId,
+    latitude: rec.inventoryDetails?.location?.locationCoordinates?.latitude,
+    longitude: rec.inventoryDetails?.location?.locationCoordinates?.longitude,
+  };
+}
+
+function mapRecommendationToAPIInventory(
+  rec: RecommendedInventory,
+): APIInventoryItem {
+  const availableDays = rec.availability?.availableDays ?? rec.availability?.availableSlots ?? 0;
+  const totalDays = rec.availability?.totalDays ?? rec.availability?.totalSlots ?? 30;
+  
+  return {
+    id: rec.inventoryId,
+    name: rec.name,
+    address: rec.inventoryDetails?.address,
+    venueType: rec.inventoryDetails?.venueTypes?.[0],
+    size: rec.inventoryDetails?.sizes?.[0],
+    publisherName: rec.inventoryDetails?.mediaOwnerName,
+    mediaOwnerName: rec.inventoryDetails?.mediaOwnerName,
+    mediaOwnerId: rec.inventoryDetails?.mediaOwnerId,
+    type: rec.inventoryDetails?.type,
+    planning: rec.forecast ? {
+      capacity: {
+        campaignDays: totalDays,
+        available: {
+          slots: availableDays,
+          playTimeSec: 0,
+          maxImpressions: rec.forecast.estimatedImpressions || 0,
+        },
+      },
+      allocation: {
+        slots: availableDays,
+        playTimeSec: 0,
+        sov: rec.forecast.estimatedSov || 0,
+        sot: 0,
+      },
+      estimates: {
+        impressions: rec.forecast.estimatedImpressions || 0,
+        reach: rec.forecast.estimatedReach || 0,
+        frequency: rec.forecast.estimatedFrequency || 0,
+      },
+      pricing: {
+        cpm: rec.cost?.costPerImpression ? rec.cost.costPerImpression * 1000 : 0,
+        estimatedCost: rec.cost?.estimatedCost || 0,
+      },
+    } : undefined,
+  };
+}
+
+type InventoryTab = "screens" | "networks" | "packages";
+type GroupByOption = "none" | "publisher" | "location" | "type";
+
+interface InventoryGroup {
+  name: string;
+  inventories: InventoryItem[];
+}
+
+export function InventoryStep({
+  data,
+  lineItemData,
+  lineItemId,
+  targeting,
+  recommendationRunId: propRunId,
+  country = "JP",
+  onComplete,
+  onBack,
+  isLoading,
+  isPlannerRestricted = false,
+  formId = "inventory-step-form",
+  dealMode = "DIRECT",
+}: InventoryStepProps) {
+  const { t } = useTranslation("lineItems");
+  const [activeTab, setActiveTab] = useState<InventoryTab>("screens");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [selectedInventories, setSelectedInventories] = useState<string[]>([]);
+  const [inventoriesData, setInventoriesData] = useState<InventoryItem[]>([]);
+  const [apiInventoriesMap, setApiInventoriesMap] = useState<
+    Map<string, APIInventoryItem>
+  >(new Map());
+  const [viewDetailsInventory, setViewDetailsInventory] =
+    useState<InventoryItem | null>(null);
+  const [isViewDetailsOpen, setIsViewDetailsOpen] = useState(false);
+  const [pageSize] = useState(25);
+  const [aiRecommendationCollapsed, setAiRecommendationCollapsed] = useState(false);
+  const [skipRecommendations, setSkipRecommendations] = useState(false);
+  const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState(false);
+  const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilterValues | null>(null);
+  const [isAvailabilityViewOpen, setIsAvailabilityViewOpen] = useState(false);
+  const [groupBy, setGroupBy] = useState<GroupByOption>("none");
+  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({});
+  const [isCsvUploadOpen, setIsCsvUploadOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<"list" | "map">("list");
+
+  const flightStartDate =
+    lineItemData?.startDate || lineItemData?.start_date || "12 Nov 2025";
+  const flightEndDate =
+    lineItemData?.endDate || lineItemData?.end_date || "24 Nov 2025";
+
+  const formatDateForAPI = (dateStr: string): string => {
+    try {
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) {
+        return new Date().toISOString().split("T")[0];
+      }
+      return date.toISOString().split("T")[0];
+    } catch {
+      return new Date().toISOString().split("T")[0];
+    }
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const hasRecommendations = !!propRunId;
+  
+  console.log('[Inventory] propRunId received:', propRunId, 'hasRecommendations:', hasRecommendations);
+
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  
+  const { 
+    data: recommendationResponse, 
+    isLoading: isLoadingRecommendations,
+    error: recommendationError,
+    refetch: refetchRecommendations,
+    fetchNextPage: fetchNextRecommendations,
+    hasNextPage: hasNextRecommendations,
+    isFetchingNextPage: isFetchingNextRecommendations,
+  } =
+    useInfiniteQuery({
+      queryKey: [
+        "recommendation-results",
+        propRunId,
+        pageSize,
+      ],
+      queryFn: async ({ pageParam = 0 }) => {
+        if (!propRunId) return null;
+
+        const result = await getRecommendationResults(
+          propRunId,
+          pageParam,
+          pageSize,
+          ["finalScore,desc"],
+        );
+
+        return {
+          data: result.recommendations.map(mapRecommendationToAPIInventory),
+          recommendations: result.recommendations,
+          pagination: {
+            page: result.pagination.page,
+            pageSize: result.pagination.size,
+            totalCount: result.pagination.totalElements,
+            totalPages: result.pagination.totalPages,
+          },
+        };
+      },
+      getNextPageParam: (lastPage) => {
+        if (!lastPage?.pagination) return undefined;
+        const { page, totalPages } = lastPage.pagination;
+        return page + 1 < totalPages ? page + 1 : undefined;
+      },
+      initialPageParam: 0,
+      enabled: !!propRunId && !skipRecommendations,
+      staleTime: 0,
+      refetchOnMount: 'always',
+      retry: 1,
+    });
+
+  const {
+    data: legacyInventoriesResponse,
+    isLoading: isLoadingLegacyInventories,
+    fetchNextPage: fetchNextLegacy,
+    hasNextPage: hasNextLegacy,
+    isFetchingNextPage: isFetchingNextLegacy,
+  } = useInfiniteQuery({
+    queryKey: ["legacy-inventories", debouncedSearch, pageSize],
+    queryFn: async ({ pageParam = 1 }) => {
+      const result = await searchInventories(
+        {
+          archived: false,
+          searchText: debouncedSearch || undefined,
+        },
+        pageParam,
+        pageSize,
+      );
+      return result;
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage?.pagination) return undefined;
+      const { page, totalPages } = lastPage.pagination;
+      return page < totalPages ? page + 1 : undefined;
+    },
+    initialPageParam: 1,
+    enabled: !hasRecommendations || skipRecommendations,
+    staleTime: 0,
+    refetchOnMount: 'always',
+  });
+
+  const useRecommendations = hasRecommendations && recommendationResponse && !skipRecommendations;
+  const hasRecommendationError = hasRecommendations && !!recommendationError && !skipRecommendations;
+  const isInRecommendationMode = hasRecommendations && !skipRecommendations;
+  
+  // Flatten paginated data from infinite queries
+  const apiInventories = useMemo(() => {
+    if (useRecommendations && recommendationResponse?.pages) {
+      return recommendationResponse.pages.flatMap(page => page?.data || []);
+    }
+    if (legacyInventoriesResponse?.pages) {
+      return legacyInventoriesResponse.pages.flatMap(page => page?.data || []);
+    }
+    return [];
+  }, [useRecommendations, recommendationResponse, legacyInventoriesResponse]);
+  
+  const recommendations = useMemo(() => {
+    if (useRecommendations && recommendationResponse?.pages) {
+      return recommendationResponse.pages.flatMap(page => page?.recommendations || []);
+    }
+    return [];
+  }, [useRecommendations, recommendationResponse]);
+  
+  const totalItems = useMemo(() => {
+    if (useRecommendations && recommendationResponse?.pages?.[0]?.pagination) {
+      return recommendationResponse.pages[0].pagination.totalCount || 0;
+    }
+    if (legacyInventoriesResponse?.pages?.[0]?.pagination) {
+      return legacyInventoriesResponse.pages[0].pagination.totalCount || 0;
+    }
+    return 0;
+  }, [useRecommendations, recommendationResponse, legacyInventoriesResponse]);
+  
+  const totalPages = useMemo(() => {
+    if (useRecommendations && recommendationResponse?.pages?.[0]?.pagination) {
+      return recommendationResponse.pages[0].pagination.totalPages || 1;
+    }
+    if (legacyInventoriesResponse?.pages?.[0]?.pagination) {
+      return legacyInventoriesResponse.pages[0].pagination.totalPages || 1;
+    }
+    return 1;
+  }, [useRecommendations, recommendationResponse, legacyInventoriesResponse]);
+  
+  const isLoadingInventories =
+    (isInRecommendationMode && isLoadingRecommendations) ||
+    (!isInRecommendationMode && isLoadingLegacyInventories);
+  const isFetchingMore = isFetchingNextRecommendations || isFetchingNextLegacy;
+  const hasMore = useRecommendations ? hasNextRecommendations : hasNextLegacy;
+  const fetchNextPage = useRecommendations ? fetchNextRecommendations : fetchNextLegacy;
+  const recommendationCount = recommendationResponse?.pages?.[0]?.pagination?.totalCount || 0;
+  
+  // Infinite scroll observer - trigger when sentinel becomes visible in container
+  const lastFetchTimeRef = useRef(0);
+  const initialLoadCompleteRef = useRef(false);
+  
+  // Mark initial load as complete once we have data
+  useEffect(() => {
+    if (!isLoadingInventories && (recommendations.length > 0 || apiInventories.length > 0)) {
+      // Delay marking as complete to prevent immediate trigger
+      const timer = setTimeout(() => {
+        initialLoadCompleteRef.current = true;
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [isLoadingInventories, recommendations.length, apiInventories.length]);
+  
+  useEffect(() => {
+    // Don't set up observer until we have initial data
+    if (isLoadingInventories) return;
+    
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const isIntersecting = entries[0].isIntersecting;
+        const now = Date.now();
+        
+        // Only fetch if:
+        // 1. Sentinel is visible
+        // 2. We have more pages
+        // 3. Not already fetching
+        // 4. Initial load is complete (prevents auto-load on first render)
+        // 5. At least 300ms has passed since last fetch (debounce)
+        if (
+          isIntersecting && 
+          hasMore && 
+          !isFetchingMore && 
+          initialLoadCompleteRef.current &&
+          now - lastFetchTimeRef.current > 300
+        ) {
+          lastFetchTimeRef.current = now;
+          fetchNextPage();
+        }
+      },
+      { 
+        root: container,
+        threshold: 0.1,
+        rootMargin: '100px' // Pre-fetch when within 100px of the sentinel
+      }
+    );
+    
+    if (loadMoreRef.current) {
+      observer.observe(loadMoreRef.current);
+    }
+    
+    return () => observer.disconnect();
+  }, [hasMore, isFetchingMore, fetchNextPage, isLoadingInventories, recommendations.length, apiInventories.length]);
+
+
+  useEffect(() => {
+    // Prioritize recommendation data when in recommendation mode and data is available
+    if (hasRecommendations && !skipRecommendations && recommendations.length > 0) {
+      console.log('[Inventory] Setting inventoriesData from recommendations:', recommendations.length);
+      const mappedInventories = recommendations.map(mapRecommendationToLocal);
+      setInventoriesData(mappedInventories);
+
+      setApiInventoriesMap((prev) => {
+        const merged = new Map(prev);
+        recommendations.forEach((rec: RecommendedInventory) => {
+          merged.set(rec.inventoryId, mapRecommendationToAPIInventory(rec));
+        });
+        return merged;
+      });
+    } else if ((!hasRecommendations || skipRecommendations) && apiInventories && apiInventories.length > 0) {
+      console.log('[Inventory] Setting inventoriesData from legacy:', apiInventories.length);
+      const mappedInventories = apiInventories.map(mapAPIInventoryToLocal);
+      setInventoriesData(mappedInventories);
+
+      setApiInventoriesMap((prev) => {
+        const merged = new Map(prev);
+        apiInventories.forEach((item: APIInventoryItem) => {
+          merged.set(item.id, item);
+        });
+        return merged;
+      });
+    }
+  }, [recommendations, apiInventories, hasRecommendations, skipRecommendations]);
+
+  useEffect(() => {
+    if (data) {
+      console.log("📦 InventoryStep received data:", data);
+      console.log("📦 Inventories to select:", data.inventories);
+      if (data.inventories && Array.isArray(data.inventories)) {
+        setSelectedInventories(data.inventories);
+      }
+      if (
+        data.inventoryObjects &&
+        Array.isArray(data.inventoryObjects) &&
+        data.inventoryObjects.length > 0
+      ) {
+        const existingMapped: InventoryItem[] = data.inventoryObjects.map(
+          (inv: any) => {
+            const tags: InventoryItem["tags"] = [];
+            if (inv.venueType) {
+              const venueVariant = inv.venueType
+                .toLowerCase()
+                .includes("retail")
+                ? "warning"
+                : inv.venueType.toLowerCase().includes("transit")
+                  ? "success"
+                  : "secondary";
+              tags.push({ label: inv.venueType, variant: venueVariant });
+            }
+            if (inv.size) {
+              tags.push({ label: inv.size, variant: "outline" });
+            }
+
+            return {
+              id: inv.id || inv.inventoryId,
+              name: inv.name || `Inventory ${inv.id}`,
+              type: "screen" as const,
+              address: inv.address || inv.venueType || "Location",
+              tags,
+              operatingHours: inv.operatingHours || "24/7",
+              estimatedCostPerDay: 2500,
+              currency: "MYR",
+            };
+          },
+        );
+
+        setInventoriesData((prev) => {
+          const existingIds = new Set(prev.map((p) => p.id));
+          const newItems = existingMapped.filter(
+            (item) => !existingIds.has(item.id),
+          );
+          return [...prev, ...newItems];
+        });
+
+        setApiInventoriesMap((prev) => {
+          const merged = new Map(prev);
+          data.inventoryObjects.forEach((inv: any) => {
+            merged.set(inv.id || inv.inventoryId, inv as APIInventoryItem);
+          });
+          return merged;
+        });
+      }
+    }
+  }, [data]);
+
+  const filteredInventories = useMemo(() => {
+    let filtered = inventoriesData;
+
+    if (activeTab === "screens") {
+      filtered = filtered.filter((inv) => inv.type === "screen");
+    } else if (activeTab === "networks") {
+      filtered = filtered.filter((inv) => inv.type === "network");
+    } else if (activeTab === "packages") {
+      filtered = filtered.filter((inv) => inv.type === "package");
+    }
+
+    if (debouncedSearch && useRecommendations) {
+      const searchLower = debouncedSearch.toLowerCase();
+      filtered = filtered.filter(
+        (inv) =>
+          inv.name.toLowerCase().includes(searchLower) ||
+          inv.address.toLowerCase().includes(searchLower) ||
+          inv.publisherName?.toLowerCase().includes(searchLower) ||
+          inv.tags.some((tag) => tag.label.toLowerCase().includes(searchLower)),
+      );
+    }
+
+    if (advancedFilters) {
+      if (advancedFilters.state) {
+        const stateLower = advancedFilters.state.toLowerCase();
+        filtered = filtered.filter(
+          (inv) =>
+            inv.location?.stateName?.toLowerCase().includes(stateLower) ||
+            inv.address.toLowerCase().includes(stateLower)
+        );
+      }
+      if (advancedFilters.city) {
+        const cityLower = advancedFilters.city.toLowerCase();
+        filtered = filtered.filter(
+          (inv) =>
+            inv.location?.cityName?.toLowerCase().includes(cityLower) ||
+            inv.address.toLowerCase().includes(cityLower)
+        );
+      }
+
+      if (advancedFilters.mediaOwner) {
+        const ownerLower = advancedFilters.mediaOwner.toLowerCase();
+        filtered = filtered.filter(
+          (inv) => inv.publisherName?.toLowerCase().includes(ownerLower)
+        );
+      }
+      if (advancedFilters.inventoryType) {
+        const typeLower = advancedFilters.inventoryType.toLowerCase();
+        filtered = filtered.filter(
+          (inv) => inv.mediaType?.toLowerCase().includes(typeLower) ||
+            inv.tags.some((tag) => tag.label.toLowerCase().includes(typeLower))
+        );
+      }
+      if (advancedFilters.size) {
+        const sizeLower = advancedFilters.size.toLowerCase();
+        filtered = filtered.filter(
+          (inv) => inv.size?.toLowerCase().includes(sizeLower)
+        );
+      }
+      if (advancedFilters.modeOfOperation) {
+        const modeLower = advancedFilters.modeOfOperation.toLowerCase();
+        filtered = filtered.filter(
+          (inv) => inv.operationMode?.toLowerCase().includes(modeLower)
+        );
+      }
+    }
+
+    return filtered;
+  }, [activeTab, inventoriesData, debouncedSearch, useRecommendations, advancedFilters]);
+
+  const groupInventories = (inventories: InventoryItem[], groupByOption: GroupByOption): InventoryGroup[] => {
+    if (groupByOption === "none") {
+      return [{ name: "All Inventories", inventories }];
+    }
+
+    const groups: Record<string, InventoryItem[]> = {};
+
+    inventories.forEach((inv) => {
+      let groupKey: string;
+      
+      switch (groupByOption) {
+        case "publisher":
+          groupKey = inv.publisherName || "Unknown Publisher";
+          break;
+        case "location":
+          if (inv.location?.cityName && inv.location?.stateName) {
+            groupKey = `${inv.location.cityName}, ${inv.location.stateName}`;
+          } else if (inv.location?.cityName) {
+            groupKey = inv.location.cityName;
+          } else if (inv.location?.stateName) {
+            groupKey = inv.location.stateName;
+          } else if (inv.address) {
+            const addressParts = inv.address.split(',');
+            groupKey = addressParts.length > 1 ? addressParts.slice(-2).join(',').trim() : inv.address;
+          } else {
+            groupKey = "Unknown Location";
+          }
+          break;
+        case "type":
+          groupKey = inv.mediaType || "Unknown Type";
+          break;
+        default:
+          groupKey = "Other";
+      }
+
+      if (!groups[groupKey]) {
+        groups[groupKey] = [];
+      }
+      groups[groupKey].push(inv);
+    });
+
+    return Object.entries(groups)
+      .map(([name, inventories]) => ({ name, inventories }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  };
+
+  const groupedInventories = useMemo(() => {
+    return groupInventories(filteredInventories, groupBy);
+  }, [filteredInventories, groupBy]);
+
+  const toggleGroupExpanded = (groupName: string) => {
+    setExpandedGroups((prev) => ({
+      ...prev,
+      [groupName]: !prev[groupName],
+    }));
+  };
+
+  const isGroupExpanded = (groupName: string) => {
+    return expandedGroups[groupName] !== false;
+  };
+
+  const handleSelectGroup = (group: InventoryGroup) => {
+    const groupIds = group.inventories.map((inv) => inv.id);
+    const allSelected = groupIds.every((id) => selectedInventories.includes(id));
+
+    if (allSelected) {
+      setSelectedInventories((prev) => prev.filter((id) => !groupIds.includes(id)));
+    } else {
+      const newIds = groupIds.filter((id) => !selectedInventories.includes(id));
+      setSelectedInventories((prev) => [...prev, ...newIds]);
+    }
+  };
+
+  const isGroupAllSelected = (group: InventoryGroup) => {
+    return group.inventories.length > 0 && group.inventories.every((inv) => selectedInventories.includes(inv.id));
+  };
+
+  const isGroupPartiallySelected = (group: InventoryGroup) => {
+    const selectedCount = group.inventories.filter((inv) => selectedInventories.includes(inv.id)).length;
+    return selectedCount > 0 && selectedCount < group.inventories.length;
+  };
+
+  const selectionCounts = useMemo(() => {
+    const screens = selectedInventories.filter((id) =>
+      inventoriesData.find((inv) => inv.id === id && inv.type === "screen"),
+    ).length;
+    const networks = selectedInventories.filter((id) =>
+      inventoriesData.find((inv) => inv.id === id && inv.type === "network"),
+    ).length;
+    const packages = selectedInventories.filter((id) =>
+      inventoriesData.find((inv) => inv.id === id && inv.type === "package"),
+    ).length;
+
+    return {
+      total: selectedInventories.length,
+      screens,
+      networks,
+      packages,
+    };
+  }, [selectedInventories, inventoriesData]);
+
+  const isAllCurrentTabSelected = useMemo(() => {
+    return (
+      filteredInventories.length > 0 &&
+      filteredInventories.every((inv) => selectedInventories.includes(inv.id))
+    );
+  }, [filteredInventories, selectedInventories]);
+
+  const aggregatedForecast = useMemo(() => {
+    let totalImpressions = 0;
+    let totalReach = 0;
+    let totalSlots = 0;
+    let totalCost = 0;
+    let totalCpm = 0;
+    let sovSum = 0;
+    let sotSum = 0;
+    let count = 0;
+
+    const selectedInventoryObjects = selectedInventories
+      .map((id) => apiInventoriesMap.get(id))
+      .filter((inv): inv is APIInventoryItem => inv !== undefined);
+
+    selectedInventoryObjects.forEach((inv) => {
+      if (inv?.planning) {
+        totalImpressions += inv.planning.estimates?.impressions || 0;
+        totalReach += inv.planning.estimates?.reach || 0;
+        totalSlots += inv.planning.allocation?.slots || 0;
+        totalCost += inv.planning.pricing?.estimatedCost || 0;
+        totalCpm += inv.planning.pricing?.cpm || 0;
+        sovSum += inv.planning.allocation?.sov || 0;
+        sotSum += inv.planning.allocation?.sot || 0;
+        count++;
+      }
+    });
+
+    const avgFrequency = totalReach > 0 ? totalImpressions / totalReach : 0;
+    const avgCpm = count > 0 ? totalCpm / count : 0;
+    const avgEcpm = totalImpressions > 0 ? (totalCost / totalImpressions) * 1000 : 0;
+    const avgSov = count > 0 ? (sovSum / count) * 100 : 0;
+    const avgSot = count > 0 ? (sotSum / count) * 100 : 0;
+
+    return {
+      impressions: totalImpressions,
+      reach: totalReach,
+      frequency: avgFrequency,
+      adPlays: totalSlots,
+      sov: avgSov,
+      cpm: avgCpm,
+      ecpm: avgEcpm,
+      totalCost: totalCost,
+      sot: avgSot,
+    };
+  }, [selectedInventories, apiInventoriesMap]);
+
+  const handleSelectAll = () => {
+    if (isAllCurrentTabSelected) {
+      const idsToRemove = filteredInventories.map((inv) => inv.id);
+      setSelectedInventories((prev) =>
+        prev.filter((id) => !idsToRemove.includes(id)),
+      );
+    } else {
+      const newIds = filteredInventories
+        .map((inv) => inv.id)
+        .filter((id) => !selectedInventories.includes(id));
+      setSelectedInventories((prev) => [...prev, ...newIds]);
+    }
+  };
+
+  const handleInventoryToggle = (inventoryId: string) => {
+    setSelectedInventories((prev) =>
+      prev.includes(inventoryId)
+        ? prev.filter((id) => id !== inventoryId)
+        : [...prev, inventoryId],
+    );
+  };
+
+  const handleNext = () => {
+    const selectedInventoryObjects = selectedInventories
+      .map((id) => apiInventoriesMap.get(id))
+      .filter((inv): inv is APIInventoryItem => inv !== undefined)
+      .map((inv) => {
+        return {
+          ...inv,
+          id: inv.id,
+          name: inv.name,
+        };
+      });
+
+    // Calculate aggregated planning from selected inventories for DIRECT mode
+    let aggregatedPlanning = undefined;
+    // Always calculate planning if any inventory has planning data (for DIRECT deals)
+    const hasPlanning = selectedInventoryObjects.some((inv) => inv?.planning);
+    if (hasPlanning) {
+      let totalImpressions = 0;
+      let totalReach = 0;
+      let totalSlots = 0;
+      let totalPlayTimeSec = 0;
+      let totalCost = 0;
+      let totalCpm = 0;
+      let sovSum = 0;
+      let sotSum = 0;
+      let campaignDays = 0;
+      let availableSlots = 0;
+      let availablePlayTimeSec = 0;
+      let availableMaxImpressions = 0;
+      let count = 0;
+
+      selectedInventoryObjects.forEach((inv) => {
+        if (inv?.planning) {
+          totalImpressions += inv.planning.estimates?.impressions || 0;
+          totalReach += inv.planning.estimates?.reach || 0;
+          totalSlots += inv.planning.allocation?.slots || 0;
+          totalPlayTimeSec += inv.planning.allocation?.playTimeSec || 0;
+          totalCost += inv.planning.pricing?.estimatedCost || 0;
+          totalCpm += inv.planning.pricing?.cpm || 0;
+          // sov/sot are fractions (0-1) per swagger spec
+          sovSum += inv.planning.allocation?.sov || 0;
+          sotSum += inv.planning.allocation?.sot || 0;
+          campaignDays = Math.max(campaignDays, inv.planning.capacity?.campaignDays || 0);
+          // Aggregate capacity.available fields
+          availableSlots += inv.planning.capacity?.available?.slots || 0;
+          availablePlayTimeSec += inv.planning.capacity?.available?.playTimeSec || 0;
+          availableMaxImpressions += inv.planning.capacity?.available?.maxImpressions || 0;
+          count++;
+        }
+      });
+
+      const avgFrequency = totalReach > 0 ? totalImpressions / totalReach : 0;
+      const avgCpm = count > 0 ? totalCpm / count : 0;
+      // Average sov/sot as fractions (0-1 scale)
+      const avgSov = count > 0 ? sovSum / count : 0;
+      const avgSot = count > 0 ? sotSum / count : 0;
+
+      aggregatedPlanning = {
+        capacity: { 
+          campaignDays,
+          available: {
+            slots: availableSlots,
+            playTimeSec: availablePlayTimeSec,
+            maxImpressions: availableMaxImpressions,
+          },
+        },
+        allocation: {
+          slots: totalSlots,
+          playTimeSec: totalPlayTimeSec,
+          sov: avgSov,
+          sot: avgSot,
+        },
+        estimates: {
+          impressions: totalImpressions,
+          reach: totalReach,
+          frequency: avgFrequency,
+        },
+        pricing: {
+          cpm: avgCpm,
+          estimatedCost: totalCost,
+        },
+      };
+    }
+
+    const outputData = {
+      inventories: selectedInventories,
+      inventoryObjects: selectedInventoryObjects,
+      planning: aggregatedPlanning,
+    };
+    console.log("✅ Inventory selection submitted:", outputData);
+    onComplete(outputData);
+  };
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    handleNext();
+  };
+
+  const getTabLabel = (): string => {
+    switch (activeTab) {
+      case "screens":
+        return t('wizard.inventory.screens');
+      case "networks":
+        return t('wizard.inventory.networks');
+      case "packages":
+        return t('wizard.inventory.packages');
+      default:
+        return t('wizard.inventory.items');
+    }
+  };
+
+  return (
+    <form
+      id={formId}
+      onSubmit={handleFormSubmit}
+      className="flex flex-col h-full"
+    >
+      {isPlannerRestricted && (
+        <div className="mb-4 p-3 bg-purple-50 border border-purple-200 rounded-lg">
+          <p className="text-sm text-purple-700 font-medium">{t('wizard.common.readOnly')}</p>
+          <p className="text-xs text-purple-600">
+            {t('wizard.inventory.plannerRestrictedDesc')}
+          </p>
+        </div>
+      )}
+      <div className="flex-1 flex gap-6">
+        <div className="flex-1 flex flex-col min-w-0">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Grid3X3 className="h-5 w-5 text-mw-neutral-500" />
+            <div>
+              <h2 className="text-base font-semibold text-mw-neutral-900 dark:text-white">
+                {t("wizard.inventory.title")}
+              </h2>
+              <p className="text-xs text-mw-neutral-500">
+                {t("wizard.inventory.subtitle")}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1 min-w-[200px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+              <Input
+                placeholder={t("wizard.common.searchHere")}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                  }
+                }}
+                className="pl-10 pr-3 py-2 text-sm border-mw-neutral-200 dark:border-mw-neutral-700 w-[250px]"
+              />
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              isIconOnly
+              title={t("wizard.inventory.listView")}
+            >
+              <List className="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              isIconOnly
+              title={t("wizard.inventory.advancedFilter")}
+              onClick={() => setIsAdvancedFiltersOpen(true)}
+            >
+              <SlidersHorizontal className="h-4 w-4" />
+            </Button>
+            <InventorySettingsMenu
+              onMapViewClick={() => {
+                setViewMode(viewMode === "map" ? "list" : "map");
+              }}
+              onAvailabilityClick={() => {
+                setIsAvailabilityViewOpen(true);
+              }}
+              onUploadCSVClick={() => {
+                setIsCsvUploadOpen(true);
+              }}
+            />
+          </div>
+        </div>
+
+        {isInRecommendationMode && (
+          <>
+            {isLoadingRecommendations && !recommendationResponse && (
+              <div className="mb-4 rounded-lg overflow-hidden bg-gradient-to-r from-purple-600 via-purple-500 to-indigo-500 p-4">
+                <div className="flex items-start gap-3">
+                  <div className="flex-shrink-0">
+                    <Sparkles className="h-6 w-6 text-white animate-pulse" />
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="text-white font-semibold text-sm">
+                        {t('wizard.ai.smartSuggestion')}
+                      </h3>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setSkipRecommendations(true)}
+                        className="text-white/80 hover:text-white hover:bg-white/10 text-xs h-7 px-3"
+                      >
+                        {t('wizard.ai.skipForNow')}
+                      </Button>
+                    </div>
+                    <p className="text-white/90 text-xs mb-3">
+                      {t('wizard.ai.workingOnGeoFitness')}
+                    </p>
+                    <div className="w-full h-1.5 bg-white/20 rounded-full overflow-hidden">
+                      <div 
+                        className="h-full bg-white rounded-full animate-pulse"
+                        style={{ 
+                          width: '60%',
+                          animation: 'pulse 1.5s ease-in-out infinite, progress 2s ease-in-out infinite'
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {hasRecommendationError && (
+              <div className="mb-4 rounded-lg overflow-hidden bg-gradient-to-r from-purple-600 via-purple-500 to-indigo-500 p-4">
+                <div className="flex items-start gap-3">
+                  <div className="flex-shrink-0">
+                    <Sparkles className="h-6 w-6 text-white" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-white font-semibold text-sm mb-1">
+                      {t('wizard.ai.smartSuggestion')}
+                    </h3>
+                    <div className="flex items-start gap-2 mb-3">
+                      <AlertCircle className="h-4 w-4 text-white/80 flex-shrink-0 mt-0.5" />
+                      <p className="text-white/90 text-xs leading-relaxed">
+                        {t('wizard.ai.errorMessage')}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setSkipRecommendations(true);
+                        }}
+                        className="bg-transparent border-white/50 text-white hover:bg-white/10 text-xs h-7 px-3"
+                      >
+                        {t('wizard.ai.showAllInventories')}
+                      </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        onClick={() => refetchRecommendations()}
+                        className="bg-blue-500 hover:bg-blue-600 text-white text-xs h-7 px-3"
+                      >
+                        <RotateCcw className="h-3 w-3 mr-1" />
+                        {t('wizard.ai.retry')}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {recommendationResponse && !hasRecommendationError && recommendationCount > 0 && (
+              <div className="mb-4 rounded-lg overflow-hidden bg-gradient-to-r from-purple-600 via-purple-500 to-indigo-500">
+                <div 
+                  className="p-4 cursor-pointer"
+                  onClick={() => setAiRecommendationCollapsed(!aiRecommendationCollapsed)}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <Sparkles className="h-5 w-5 text-white" />
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h3 className="text-white font-semibold text-sm">
+                            {t('wizard.ai.smartRecommendation')}
+                          </h3>
+                          <Badge 
+                            variant="success" 
+                            size="sm" 
+                            className="bg-green-500/90 text-white text-[10px] px-2"
+                          >
+                            {t('wizard.ai.inventoriesRecommended', { count: recommendationCount })}
+                          </Badge>
+                        </div>
+                        <p className="text-white/80 text-xs mt-0.5">
+                          {t('wizard.ai.basedOnCampaignDetails')}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {aiRecommendationCollapsed ? (
+                        <ChevronDown className="h-5 w-5 text-white/70" />
+                      ) : (
+                        <ChevronUp className="h-5 w-5 text-white/70" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              checked={isAllCurrentTabSelected}
+              onChange={handleSelectAll}
+              disabled={isPlannerRestricted}
+            />
+            <span
+              className={cn(
+                "text-sm text-mw-neutral-700 dark:text-mw-neutral-300",
+                isPlannerRestricted && "opacity-60",
+              )}
+            >
+              {t("wizard.common.selectAll")}
+            </span>
+            <Badge variant="primary" size="sm" className="ml-1">
+              {selectionCounts.total}/{filteredInventories.length}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-2 text-sm text-mw-neutral-500">
+            <span>{t("wizard.common.groupBy")}:</span>
+            <SelectRoot value={groupBy} onValueChange={(value) => setGroupBy(value as GroupByOption)}>
+              <SelectTrigger className="h-8 w-[160px] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">{t("wizard.common.allInventories")}</SelectItem>
+                <SelectItem value="publisher">{t("wizard.common.publisher")}</SelectItem>
+                <SelectItem value="location">{t("wizard.common.location")}</SelectItem>
+                <SelectItem value="type">{t("wizard.common.type")}</SelectItem>
+              </SelectContent>
+            </SelectRoot>
+          </div>
+        </div>
+
+        {viewMode === "map" ? (
+          <div className="flex-1 min-h-[400px] max-h-[500px] rounded-lg overflow-hidden border border-mw-neutral-200 dark:border-mw-neutral-700">
+            <InventoryMapView
+              inventories={filteredInventories.map((inv) => ({
+                id: inv.id,
+                name: inv.name,
+                address: inv.address,
+                tags: inv.tags,
+                thumbnail: inv.thumbnail,
+                type: inv.type,
+                format: inv.format,
+                mediaType: inv.mediaType,
+                size: inv.size,
+                publisherName: inv.publisherName,
+                latitude: inv.latitude,
+                longitude: inv.longitude,
+              }))}
+              selectedInventories={selectedInventories}
+              onSelectInventory={(id) => {
+                if (!isPlannerRestricted) {
+                  handleInventoryToggle(id);
+                }
+              }}
+              onInventoryToggle={(id) => {
+                if (!isPlannerRestricted) {
+                  handleInventoryToggle(id);
+                }
+              }}
+              onViewDetails={(inv) => {
+                const fullInv = filteredInventories.find((i) => i.id === inv.id);
+                if (fullInv) {
+                  setViewDetailsInventory(fullInv);
+                  setIsViewDetailsOpen(true);
+                }
+              }}
+            />
+          </div>
+        ) : (
+          <div ref={scrollContainerRef} className="flex-1 overflow-y-auto space-y-3 max-h-[500px] pr-2">
+            {isLoadingInventories ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-mw-primary-500" />
+                <span className="ml-2 text-mw-neutral-500">
+                  {t("wizard.inventory.loadingInventories")}
+                </span>
+              </div>
+            ) : filteredInventories.length === 0 ? (
+              <div className="text-center py-8 text-mw-neutral-500">
+                No {getTabLabel().toLowerCase()} found
+              </div>
+            ) : groupBy === "none" ? (
+              filteredInventories.map((inventory) => (
+                <PlannerInventoryCard
+                  key={inventory.id}
+                  id={inventory.id}
+                  name={inventory.name}
+                  location={inventory.address}
+                  tags={inventory.tags}
+                  planning={inventory.planning}
+                  screens={inventory.screens}
+                  owner={inventory.publisherName}
+                  publisherName={inventory.publisherName}
+                  thumbnail={inventory.thumbnail}
+                  currency={inventory.currency}
+                  isSelected={selectedInventories.includes(inventory.id)}
+                  onToggleSelect={
+                    isPlannerRestricted
+                      ? undefined
+                      : () => handleInventoryToggle(inventory.id)
+                  }
+                  onViewDetails={() => {
+                    setViewDetailsInventory(inventory);
+                    setIsViewDetailsOpen(true);
+                  }}
+                  isReadOnly={isPlannerRestricted}
+                  referenceId={inventory.referenceId}
+                  estimatedCost={inventory.estimatedCostPerDay}
+                  finalScore={inventory.finalScore}
+                  why={inventory.why}
+                  availability={inventory.availability}
+                  componentScores={inventory.componentScores}
+                  showPlanningData={dealMode === "DIRECT"}
+                />
+              ))
+            ) : (
+              groupedInventories.map((group) => (
+                <div key={group.name} className="border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg overflow-hidden">
+                  <div
+                    className="flex items-center justify-between px-4 py-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 cursor-pointer hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-750"
+                    onClick={() => toggleGroupExpanded(group.name)}
+                  >
+                    <div className="flex items-center gap-3">
+                      <Checkbox
+                        checked={isGroupAllSelected(group)}
+                        onChange={(e) => {
+                          e.stopPropagation();
+                          handleSelectGroup(group);
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                        disabled={isPlannerRestricted}
+                        className={cn(isGroupPartiallySelected(group) && "data-[state=checked]:bg-mw-primary-300")}
+                      />
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-sm text-mw-neutral-900 dark:text-white">
+                          {group.name}
+                        </span>
+                        <Badge variant="secondary" size="sm" className="text-xs">
+                          {group.inventories.length} {group.inventories.length === 1 ? 'item' : 'items'}
+                        </Badge>
+                      </div>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      isIconOnly
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupExpanded(group.name);
+                      }}
+                    >
+                      {isGroupExpanded(group.name) ? (
+                        <ChevronUp className="h-4 w-4 text-mw-neutral-500" />
+                      ) : (
+                        <ChevronDown className="h-4 w-4 text-mw-neutral-500" />
+                      )}
+                    </Button>
+                  </div>
+                  {isGroupExpanded(group.name) && (
+                    <div className="p-3 space-y-3 bg-white dark:bg-mw-neutral-900">
+                      {group.inventories.map((inventory) => (
+                        <PlannerInventoryCard
+                          key={inventory.id}
+                          id={inventory.id}
+                          name={inventory.name}
+                          location={inventory.address}
+                          tags={inventory.tags}
+                          planning={inventory.planning}
+                          screens={inventory.screens}
+                          owner={inventory.publisherName}
+                          publisherName={inventory.publisherName}
+                          thumbnail={inventory.thumbnail}
+                          currency={inventory.currency}
+                          isSelected={selectedInventories.includes(inventory.id)}
+                          onToggleSelect={
+                            isPlannerRestricted
+                              ? undefined
+                              : () => handleInventoryToggle(inventory.id)
+                          }
+                          onViewDetails={() => {
+                            setViewDetailsInventory(inventory);
+                            setIsViewDetailsOpen(true);
+                          }}
+                          isReadOnly={isPlannerRestricted}
+                          referenceId={inventory.referenceId}
+                          estimatedCost={inventory.estimatedCostPerDay}
+                          finalScore={inventory.finalScore}
+                          why={inventory.why}
+                          availability={inventory.availability}
+                          componentScores={inventory.componentScores}
+                          showPlanningData={dealMode === "DIRECT"}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))
+            )}
+            
+            {/* Infinite scroll trigger - must be inside scrollable container */}
+            <div ref={loadMoreRef} className="h-4" />
+          </div>
+        )}
+        
+        {isFetchingMore && (
+          <div className="flex items-center justify-center py-4">
+            <Loader2 className="h-5 w-5 animate-spin text-mw-primary-500" />
+            <span className="ml-2 text-sm text-mw-neutral-600 dark:text-mw-neutral-400">
+              Loading more...
+            </span>
+          </div>
+        )}
+        
+        {totalItems > 0 && (
+          <div className="flex items-center justify-center pt-3 border-t border-mw-neutral-100 dark:border-mw-neutral-800 mt-auto">
+            <span className="text-[12px] text-mw-neutral-600 dark:text-mw-neutral-400">
+              Showing {apiInventories.length} of {totalItems} inventories
+            </span>
+          </div>
+        )}
+        </div>
+
+        <div className="w-[220px] flex-shrink-0">
+          <CampaignForecastPanel 
+            forecast={aggregatedForecast} 
+            currency="JPY" 
+          />
+        </div>
+      </div>
+
+      <InventoryDetailsSheet
+        inventory={viewDetailsInventory as InventoryDetailsItem | null}
+        open={isViewDetailsOpen}
+        onOpenChange={setIsViewDetailsOpen}
+      />
+
+      <AdvancedFiltersPanel
+        isOpen={isAdvancedFiltersOpen}
+        onClose={() => setIsAdvancedFiltersOpen(false)}
+        onApply={(filters) => {
+          setAdvancedFilters(filters);
+          console.log("Applied advanced filters:", filters);
+        }}
+        initialValues={advancedFilters || undefined}
+      />
+
+      <InventoryAvailabilityView
+        inventories={inventoriesData.map((inv): AvailabilityInventoryItem => ({
+          id: inv.id,
+          name: inv.name,
+          address: inv.address,
+          publisherName: inv.publisherName,
+        }))}
+        dateRange={{
+          startDate: formatDateForAPI(flightStartDate),
+          endDate: formatDateForAPI(flightEndDate),
+        }}
+        open={isAvailabilityViewOpen}
+        onOpenChange={setIsAvailabilityViewOpen}
+      />
+
+      <CSVUploadModal
+        open={isCsvUploadOpen}
+        onOpenChange={setIsCsvUploadOpen}
+        onComplete={(importedData) => {
+          console.log("CSV imported:", importedData);
+          setIsCsvUploadOpen(false);
+        }}
+        onCancel={() => setIsCsvUploadOpen(false)}
+      />
+    </form>
+  );
+}