adserver-dashboard 1.0.0

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

@@ -0,0 +1,1596 @@
+import { useState, useEffect, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from "@moving-walls/design-system";
+import { Card } from "@moving-walls/design-system";
+import { Input } from "@moving-walls/design-system";
+import { Label } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import { Checkbox } from "@moving-walls/design-system";
+import { Sheet, SheetContent } from "@moving-walls/design-system";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@moving-walls/design-system";
+import {
+  SelectRoot,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@moving-walls/design-system";
+import { Select } from "@moving-walls/design-system";
+import { LineItemScheduleManager } from "../line-item-schedule-manager";
+import {
+  type LineItemScheduleData,
+  createDefaultSchedule,
+} from "../schedule-rule-types";
+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 {
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  ChevronFirst,
+  ChevronLast,
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  Grid3X3,
+  Monitor,
+  Package,
+  Search,
+  Network,
+  Loader2,
+  X,
+  MapPin,
+  Info,
+  SlidersHorizontal,
+  Settings,
+  List,
+  Sparkles,
+  AlertCircle,
+  RotateCcw,
+  Map as MapIcon,
+  Upload,
+} 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 InventoryScheduleStepProps {
+  data?: any;
+  lineItemData?: any;
+  lineItemId?: string;
+  targeting?: any;
+  recommendationRunId?: string;
+  country?: string;
+  onComplete: (data: any) => void;
+  onBack?: () => void;
+  isLoading?: boolean;
+  isPlannerRestricted?: boolean;
+}
+
+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;
+  // Recommendation-specific fields
+  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;
+  };
+  // Additional display fields
+  referenceId?: string;
+  // Geographic coordinates for map view
+  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" });
+  }
+
+  // Build location string
+  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",
+    // Recommendation-specific fields (multiply 0-1 scores by 100 for display)
+    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 {
+  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,
+  };
+}
+
+type InventoryTab = "screens" | "networks" | "packages";
+type GroupByOption = "none" | "publisher" | "location" | "type";
+
+interface InventoryGroup {
+  name: string;
+  inventories: InventoryItem[];
+}
+
+export function InventoryScheduleStep({
+  data,
+  lineItemData,
+  lineItemId,
+  targeting,
+  recommendationRunId: propRunId,
+  country = "JP",
+  onComplete,
+  onBack,
+  isLoading,
+  formId = "inventory-schedule-step-form",
+  isPlannerRestricted = false,
+}: InventoryScheduleStepProps & { formId?: string }) {
+  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 [scheduleData, setScheduleData] = useState<
+    LineItemScheduleData | undefined
+  >();
+  const [viewDetailsInventory, setViewDetailsInventory] =
+    useState<InventoryItem | null>(null);
+  const [isViewDetailsOpen, setIsViewDetailsOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [showAllInventories, setShowAllInventories] = useState(false);
+  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];
+    }
+  };
+
+  // Debounce search query
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // Use the runId from targeting step if available
+  const hasRecommendations = !!propRunId;
+
+  // Fetch recommendation results when we have a runId from targeting step
+  const { 
+    data: recommendationResponse, 
+    isLoading: isLoadingRecommendations,
+    error: recommendationError,
+    refetch: refetchRecommendations,
+  } =
+    useQuery({
+      queryKey: [
+        "recommendation-results",
+        propRunId,
+        currentPage,
+        pageSize,
+      ],
+      queryFn: async () => {
+        if (!propRunId) return null;
+
+        const result = await getRecommendationResults(
+          propRunId,
+          currentPage - 1,
+          pageSize,
+          ["finalScore,desc"],
+        );
+
+        return {
+          data: result.recommendations.map(mapRecommendationToAPIInventory),
+          recommendations: result.recommendations,
+          pagination: {
+            page: result.pagination.page + 1,
+            pageSize: result.pagination.size,
+            totalCount: result.pagination.totalElements,
+            totalPages: result.pagination.totalPages,
+          },
+        };
+      },
+      enabled: !!propRunId && !skipRecommendations,
+      staleTime: 30000,
+      retry: 1,
+    });
+
+  // Fallback to legacy inventory search when no recommendations or user wants to see all
+  const {
+    data: legacyInventoriesResponse,
+    isLoading: isLoadingLegacyInventories,
+  } = useQuery({
+    queryKey: ["legacy-inventories", debouncedSearch, currentPage, pageSize],
+    queryFn: async () => {
+      const result = await searchInventories(
+        {
+          archived: false,
+          searchText: debouncedSearch || undefined,
+        },
+        currentPage,
+        pageSize,
+      );
+      return result;
+    },
+    enabled: !hasRecommendations || showAllInventories || skipRecommendations,
+    staleTime: 30000,
+  });
+
+  // Determine which data source to use
+  const useRecommendations = hasRecommendations && recommendationResponse && !showAllInventories && !skipRecommendations;
+  const hasRecommendationError = hasRecommendations && !!recommendationError && !skipRecommendations;
+  const isInRecommendationMode = hasRecommendations && !showAllInventories && !skipRecommendations;
+  
+  const apiInventories = useRecommendations
+    ? recommendationResponse?.data || []
+    : legacyInventoriesResponse?.data || [];
+  const recommendations = useRecommendations
+    ? recommendationResponse?.recommendations || []
+    : [];
+  const totalItems = useRecommendations
+    ? recommendationResponse?.pagination?.totalCount || 0
+    : legacyInventoriesResponse?.pagination?.totalCount || 0;
+  const totalPages = useRecommendations
+    ? recommendationResponse?.pagination?.totalPages || 1
+    : legacyInventoriesResponse?.pagination?.totalPages || 1;
+  const isLoadingInventories =
+    (isInRecommendationMode && isLoadingRecommendations) ||
+    (!isInRecommendationMode && isLoadingLegacyInventories);
+  const recommendationCount = recommendationResponse?.pagination?.totalCount || 0;
+
+  // Reset to page 1 when search changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedSearch]);
+
+  // Map recommendation data to local format and store original API items
+  useEffect(() => {
+    // Only update from recommendations when using recommendation mode
+    if (useRecommendations) {
+      const mappedInventories = recommendations.map(mapRecommendationToLocal);
+      setInventoriesData(mappedInventories);
+
+      // Store original API items for full data when submitting
+      if (recommendations.length > 0) {
+        setApiInventoriesMap((prev) => {
+          const merged = new Map(prev);
+          recommendations.forEach((rec: RecommendedInventory) => {
+            merged.set(rec.inventoryId, mapRecommendationToAPIInventory(rec));
+          });
+          return merged;
+        });
+      }
+    } else if (apiInventories) {
+      // Update from legacy API
+      const mappedInventories = apiInventories.map(mapAPIInventoryToLocal);
+      setInventoriesData(mappedInventories);
+
+      if (apiInventories.length > 0) {
+        setApiInventoriesMap((prev) => {
+          const merged = new Map(prev);
+          apiInventories.forEach((item: APIInventoryItem) => {
+            merged.set(item.id, item);
+          });
+          return merged;
+        });
+      }
+    }
+  }, [recommendations, apiInventories, useRecommendations]);
+
+  useEffect(() => {
+    if (selectedInventories.length > 0 && !scheduleData) {
+      const parsedStartDate = (() => {
+        try {
+          const date = new Date(flightStartDate);
+          return isNaN(date.getTime())
+            ? new Date().toISOString().split("T")[0]
+            : date.toISOString().split("T")[0];
+        } catch {
+          return new Date().toISOString().split("T")[0];
+        }
+      })();
+      const parsedEndDate = (() => {
+        try {
+          const date = new Date(flightEndDate);
+          return isNaN(date.getTime())
+            ? new Date().toISOString().split("T")[0]
+            : date.toISOString().split("T")[0];
+        } catch {
+          return new Date().toISOString().split("T")[0];
+        }
+      })();
+
+      setScheduleData({
+        schedules: [createDefaultSchedule(parsedStartDate, parsedEndDate)],
+      });
+    }
+  }, [
+    selectedInventories.length,
+    scheduleData,
+    flightStartDate,
+    flightEndDate,
+  ]);
+
+  useEffect(() => {
+    if (data) {
+      console.log("📦 InventoryScheduleStep received data:", data);
+      console.log("📦 Inventories to select:", data.inventories);
+      if (data.inventories && Array.isArray(data.inventories)) {
+        setSelectedInventories(data.inventories);
+      }
+      if (data.scheduleData) {
+        setScheduleData(data.scheduleData);
+      }
+      // Load existing inventory objects (for edit mode)
+      if (
+        data.inventoryObjects &&
+        Array.isArray(data.inventoryObjects) &&
+        data.inventoryObjects.length > 0
+      ) {
+        // Map existing inventories to local format with all required fields
+        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];
+        });
+
+        // Also add to API map
+        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");
+    }
+
+    // Apply client-side search filter for recommendations (legacy search is handled server-side)
+    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)),
+      );
+    }
+
+    // Apply advanced filters
+    if (advancedFilters) {
+      // Location-based filters
+      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)
+        );
+      }
+
+      // Operations filters
+      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 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 = () => {
+    // Build full inventory objects with ALL available data from JAD API for proper mapping
+    const selectedInventoryObjects = selectedInventories
+      .map((id) => apiInventoriesMap.get(id))
+      .filter((inv): inv is APIInventoryItem => inv !== undefined)
+      .map((inv) => {
+        // Pass the full inventory object to preserve all JAD API fields
+        // This includes: geoms, timeZone, digitalFields, panels, mediaOwnerId, mediaOwnerName, etc.
+        return {
+          ...inv,
+          // Ensure core fields are present
+          id: inv.id,
+          name: inv.name,
+        };
+      });
+
+    // Convert scheduleData.schedules to API format
+    const apiSchedules =
+      scheduleData?.schedules?.map((schedule) => {
+        const apiSchedule: any = {
+          type: schedule.type,
+          validity: {
+            startDate: schedule.validity.startDate,
+            endDate: schedule.validity.endDate,
+          },
+          hours: schedule.hours.map((h) => ({ start: h.start, end: h.end })),
+          priority:
+            schedule.priority ??
+            (schedule.type === "DEFAULT"
+              ? 10
+              : schedule.type === "CUSTOM"
+                ? 100
+                : 50),
+          daysOfWeek:
+            schedule.daysOfWeek ||
+            (schedule.type === "DEFAULT"
+              ? [1, 2, 3, 4, 5, 6, 7]
+              : schedule.type === "WEEKDAY"
+                ? [1, 2, 3, 4, 5]
+                : schedule.type === "WEEKEND"
+                  ? [6, 7]
+                  : [1, 2, 3, 4, 5, 6, 7]),
+        };
+        // Include date field for CUSTOM schedules (required by API)
+        if (schedule.type === "CUSTOM") {
+          apiSchedule.date = schedule.date || schedule.validity.startDate;
+        }
+        return apiSchedule;
+      }) || [];
+
+    const outputData = {
+      inventories: selectedInventories,
+      inventoryObjects: selectedInventoryObjects,
+      scheduleData: scheduleData,
+      apiSchedules: apiSchedules,
+    };
+    console.log("✅ Inventory & Schedule submitted:", outputData);
+    onComplete(outputData);
+  };
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    handleNext();
+  };
+
+  const formatDate = (dateStr: string) => {
+    if (!dateStr) return "";
+    try {
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return dateStr;
+      return date.toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+      });
+    } catch {
+      return dateStr;
+    }
+  };
+
+  const getTabLabel = (): string => {
+    switch (activeTab) {
+      case "screens":
+        return "Screens";
+      case "networks":
+        return "Networks";
+      case "packages":
+        return "Packages";
+      default:
+        return "Items";
+    }
+  };
+
+  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;
+
+    selectedInventories.forEach((id) => {
+      const inv = inventoriesData.find((i) => i.id === id);
+      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, inventoriesData]);
+
+  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.plannerRestrictedScheduleDesc')}
+          </p>
+        </div>
+      )}
+      <div className="flex-1 flex gap-6">
+        <div className="w-[65%] min-w-0 flex flex-col">
+          <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 text-mw-neutral-500" />
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                isIconOnly
+                title={t("wizard.inventory.advancedFilter")}
+                onClick={() => setIsAdvancedFiltersOpen(true)}
+              >
+                <SlidersHorizontal className="h-4 w-4 text-mw-neutral-500" />
+              </Button>
+              <InventorySettingsMenu
+                onMapViewClick={() => {
+                  setViewMode(viewMode === "map" ? "list" : "map");
+                }}
+                onAvailabilityClick={() => {
+                  setIsAvailabilityViewOpen(true);
+                }}
+                onUploadCSVClick={() => {
+                  setIsCsvUploadOpen(true);
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 mb-3">
+            <Button
+              type="button"
+              variant={activeTab === "screens" ? "primary" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("screens")}
+            >
+              <Monitor className="h-3.5 w-3.5" />
+              {t("wizard.inventory.screens")}
+            </Button>
+            <Button
+              type="button"
+              variant={activeTab === "networks" ? "primary" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("networks")}
+            >
+              <Network className="h-3.5 w-3.5" />
+              {t("wizard.inventory.networks")}
+            </Button>
+            <Button
+              type="button"
+              variant={activeTab === "packages" ? "primary" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("packages")}
+            >
+              <Package className="h-3.5 w-3.5" />
+              {t("wizard.inventory.packages")}
+            </Button>
+          </div>
+
+          {/* AI Recommendation Section */}
+          {isInRecommendationMode && (
+            <>
+              {/* Loading State */}
+              {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>
+              )}
+
+              {/* Error State */}
+              {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);
+                            setShowAllInventories(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>
+              )}
+
+              {/* Success State - Header with recommendations */}
+              {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">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setShowAllInventories(!showAllInventories);
+                          }}
+                          className="text-white/90 hover:text-white hover:bg-white/10 text-xs h-7 px-3"
+                        >
+                          {showAllInventories ? t('wizard.ai.viewRecommendations') : t('wizard.ai.viewAllInventories')}
+                        </Button>
+                        {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-[400px] 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 className="flex-1 overflow-y-auto space-y-3 max-h-[400px] 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}
+                  />
+                ))
+              ) : (
+                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}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+
+          {totalItems > 0 && (
+            <div className="flex items-center justify-between pt-3 border-t border-mw-neutral-100 dark:border-mw-neutral-800 mt-auto">
+              <div className="flex items-center gap-2">
+                <span className="text-[12px] text-mw-neutral-600 dark:text-mw-neutral-400">
+                  {t("wizard.common.pageItems")}:
+                </span>
+                <Select
+                  value={String(pageSize)}
+                  onChange={(e) => {
+                    const newSize = Number(e.target.value);
+                    setPageSize(newSize);
+                    setCurrentPage(1);
+                  }}
+                  className="h-7 px-2 text-[12px] border border-mw-neutral-200 dark:border-mw-neutral-600 rounded bg-white dark:bg-mw-neutral-800 text-mw-neutral-700 dark:text-mw-neutral-200 focus:outline-none focus:ring-1 focus:ring-mw-primary-500"
+                  options={[
+                    { value: "25", label: "25" },
+                    { value: "50", label: "50" },
+                    { value: "100", label: "100" },
+                  ]}
+                />
+              </div>
+
+              <span className="text-[12px] text-mw-neutral-600 dark:text-mw-neutral-400">
+                {(currentPage - 1) * pageSize + 1} to{" "}
+                {Math.min(currentPage * pageSize, totalItems)} of {totalItems}
+              </span>
+
+              <div className="flex items-center gap-1">
+                <span className="px-3 py-1 text-[12px] border border-mw-neutral-200 dark:border-mw-neutral-600 rounded bg-white dark:bg-mw-neutral-800 text-mw-neutral-700 dark:text-mw-neutral-200">
+                  Page {currentPage} of {totalPages}
+                </span>
+
+                <div className="flex items-center gap-0.5 ml-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    isIconOnly
+                    disabled={currentPage === 1}
+                    onClick={() => setCurrentPage(1)}
+                  >
+                    <ChevronFirst className="w-4 h-4" />
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    isIconOnly
+                    disabled={currentPage === 1}
+                    onClick={() => setCurrentPage(currentPage - 1)}
+                  >
+                    <ChevronLeft className="w-4 h-4" />
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    isIconOnly
+                    disabled={currentPage === totalPages}
+                    onClick={() => setCurrentPage(currentPage + 1)}
+                  >
+                    <ChevronRight className="w-4 h-4" />
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    isIconOnly
+                    disabled={currentPage === totalPages}
+                    onClick={() => setCurrentPage(totalPages)}
+                  >
+                    <ChevronLast className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="w-[35%] flex-shrink-0 space-y-4">
+          <Card className="p-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-semibold text-sm text-mw-neutral-900 dark:text-white">
+                Line Item Schedule
+              </h3>
+              <div className="flex items-center gap-1 text-xs text-mw-neutral-500">
+                <Calendar className="h-3.5 w-3.5" />
+                <span>
+                  {formatDate(flightStartDate)} - {formatDate(flightEndDate)}
+                </span>
+              </div>
+            </div>
+
+            {selectedInventories.length === 0 ? (
+              <div className="border border-dashed border-mw-neutral-300 dark:border-mw-neutral-600 rounded-lg p-6 flex items-center justify-center min-h-[150px]">
+                <p className="text-sm text-mw-neutral-500 text-center">
+                  Select inventories to configure scheduling
+                </p>
+              </div>
+            ) : (
+              <LineItemScheduleManager
+                startDate={flightStartDate}
+                endDate={flightEndDate}
+                value={scheduleData}
+                onChange={setScheduleData}
+                isReadOnly={isPlannerRestricted}
+              />
+            )}
+          </Card>
+        </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>
+  );
+}