adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/inventory-format-drawer.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect } from "react";
+import { Layout, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { INVENTORY_TYPES, INVENTORY_FORMATS_BY_TYPE } from "@shared/schema";
+
+interface InventoryFormatDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedFormats: string[];
+  onSelectionChange: (formats: string[]) => void;
+  selectedTypes?: string[];
+}
+
+export function InventoryFormatDrawer({
+  open,
+  onOpenChange,
+  selectedFormats,
+  onSelectionChange,
+  selectedTypes = [],
+}: InventoryFormatDrawerProps) {
+  const [localSelection, setLocalSelection] = useState<string[]>(selectedFormats);
+
+  useEffect(() => {
+    if (open) {
+      setLocalSelection(selectedFormats);
+    }
+  }, [open, selectedFormats]);
+
+  const handleToggle = (format: string) => {
+    setLocalSelection((prev) =>
+      prev.includes(format) ? prev.filter((x) => x !== format) : [...prev, format]
+    );
+  };
+
+  const handleSelectAllForType = (type: string) => {
+    const formats = INVENTORY_FORMATS_BY_TYPE[type] || [];
+    const allSelected = formats.every((f) => localSelection.includes(f));
+    if (allSelected) {
+      setLocalSelection((prev) => prev.filter((f) => !formats.includes(f)));
+    } else {
+      setLocalSelection((prev) => {
+        const combined = [...prev, ...formats];
+        return combined.filter((item, index) => combined.indexOf(item) === index);
+      });
+    }
+  };
+
+  const handleApply = () => {
+    onSelectionChange(localSelection);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setLocalSelection(selectedFormats);
+    onOpenChange(false);
+  };
+
+  const typesToShow = selectedTypes.length > 0 ? selectedTypes : INVENTORY_TYPES;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg flex flex-col">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <Layout className="h-5 w-5" />
+            Select Inventory Formats
+          </SheetTitle>
+          <SheetDescription>
+            Choose inventory formats grouped by DOOH type
+          </SheetDescription>
+        </SheetHeader>
+
+        {localSelection.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-4">
+            {localSelection.slice(0, 5).map((format) => (
+              <Badge key={format} variant="secondary" className="text-xs">
+                {format}
+              </Badge>
+            ))}
+            {localSelection.length > 5 && (
+              <Badge variant="outline" className="text-xs">
+                +{localSelection.length - 5} more
+              </Badge>
+            )}
+          </div>
+        )}
+
+        <ScrollArea className="flex-1 mt-4">
+          <div className="space-y-6 pr-4">
+            {typesToShow.map((type) => {
+              const formats = INVENTORY_FORMATS_BY_TYPE[type] || [];
+              const selectedCount = formats.filter((f) => localSelection.includes(f)).length;
+              const allSelected = formats.length > 0 && selectedCount === formats.length;
+
+              return (
+                <div key={type} className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium text-sm flex items-center gap-2">
+                      {type}
+                      <Badge variant="outline" className="text-xs">
+                        {selectedCount}/{formats.length}
+                      </Badge>
+                    </h4>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleSelectAllForType(type)}
+                      data-testid={`button-select-all-${type.toLowerCase()}`}
+                    >
+                      {allSelected ? "Deselect All" : "Select All"}
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-1 gap-1 pl-2 border-l-2 border-muted">
+                    {formats.map((format) => (
+                      <label
+                        key={format}
+                        className="flex items-center gap-3 p-2 rounded-md hover-elevate cursor-pointer"
+                        data-testid={`format-${format.toLowerCase().replace(/\s+/g, "-")}`}
+                      >
+                        <Checkbox
+                          checked={localSelection.includes(format)}
+                          onCheckedChange={() => handleToggle(format)}
+                        />
+                        <span className="text-sm flex-1">{format}</span>
+                        {localSelection.includes(format) && (
+                          <Check className="h-4 w-4 text-primary" />
+                        )}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </ScrollArea>
+
+        <div className="flex justify-between items-center pt-4 border-t mt-4">
+          <span className="text-sm text-muted-foreground">
+            {localSelection.length} formats selected
+          </span>
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              data-testid="button-cancel-format"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleApply}
+              data-testid="button-apply-format"
+            >
+              Apply Selection
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/inventory-selector.tsx

@@ -0,0 +1,401 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import mapboxgl from "mapbox-gl";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Monitor, MapPin, Globe, Loader2, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import "mapbox-gl/dist/mapbox-gl.css";
+import type { Screen } from "@shared/schema";
+import {
+  INVENTORY_TYPES,
+  INVENTORY_FORMATS,
+  INVENTORY_FORMATS_BY_TYPE,
+  INVENTORY_SIZE_CATEGORIES,
+} from "@shared/schema";
+
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_PUBLIC_KEY || "";
+
+interface InventorySelectorProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  allowedCountries?: string[];
+  sspId?: string;
+  mediaOwnerId?: string;
+  disabled?: boolean;
+}
+
+const COUNTRY_CENTERS: Record<string, { lng: number; lat: number; zoom: number }> = {
+  Malaysia: { lng: 101.9758, lat: 4.2105, zoom: 5 },
+  Singapore: { lng: 103.8198, lat: 1.3521, zoom: 10 },
+  Thailand: { lng: 100.5018, lat: 13.7563, zoom: 5 },
+};
+
+function MapComponent({
+  center,
+  zoom,
+  screens,
+  selectedIds,
+  onScreenClick,
+}: {
+  center: { lng: number; lat: number };
+  zoom: number;
+  screens: Screen[];
+  selectedIds: Set<string>;
+  onScreenClick: (id: string) => void;
+}) {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
+  const markersRef = useRef<mapboxgl.Marker[]>([]);
+
+  useEffect(() => {
+    if (!mapContainer.current || !MAPBOX_TOKEN) return;
+
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: "mapbox://styles/mapbox/streets-v12",
+      center: [center.lng, center.lat],
+      zoom: zoom,
+      accessToken: MAPBOX_TOKEN,
+    });
+
+    map.current.addControl(new mapboxgl.NavigationControl(), "top-right");
+
+    return () => {
+      map.current?.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!map.current) return;
+
+    map.current.flyTo({
+      center: [center.lng, center.lat],
+      zoom: zoom,
+    });
+  }, [center, zoom]);
+
+  useEffect(() => {
+    if (!map.current) return;
+
+    markersRef.current.forEach((marker) => marker.remove());
+    markersRef.current = [];
+
+    screens.forEach((screen) => {
+      if (screen.latitude && screen.longitude) {
+        const lat = parseFloat(screen.latitude);
+        const lng = parseFloat(screen.longitude);
+        
+        if (!isNaN(lat) && !isNaN(lng)) {
+          const isSelected = selectedIds.has(screen.id);
+          const el = document.createElement("div");
+          el.className = `flex items-center justify-center w-7 h-7 rounded-full shadow-lg cursor-pointer transition-all ${
+            isSelected 
+              ? "bg-primary text-primary-foreground scale-100" 
+              : "bg-muted text-muted-foreground scale-90 opacity-70"
+          }`;
+          el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>';
+          el.onclick = () => onScreenClick(screen.id);
+
+          const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`
+            <div class="p-2">
+              <div class="font-medium text-sm">${screen.name}</div>
+              <div class="text-xs text-gray-500">${screen.city || ''}, ${screen.country || ''}</div>
+              <div class="text-xs mt-1">CPM: $${screen.cpm || '0.00'}</div>
+            </div>
+          `);
+
+          const marker = new mapboxgl.Marker(el)
+            .setLngLat([lng, lat])
+            .setPopup(popup)
+            .addTo(map.current!);
+
+          markersRef.current.push(marker);
+        }
+      }
+    });
+  }, [screens, selectedIds, onScreenClick]);
+
+  if (!MAPBOX_TOKEN) {
+    return (
+      <div className="h-full flex items-center justify-center bg-muted">
+        <div className="text-center text-muted-foreground">
+          <Globe className="h-12 w-12 mx-auto mb-2 opacity-50" />
+          <p>Map unavailable</p>
+          <p className="text-sm">Mapbox token not configured</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <div ref={mapContainer} className="h-full w-full" />;
+}
+
+function InventorySelectorContent({
+  value = [],
+  onChange,
+  allowedCountries = [],
+  sspId,
+  mediaOwnerId,
+}: InventorySelectorProps) {
+  const [typeFilter, setTypeFilter] = useState<string>("all");
+  const [formatFilter, setFormatFilter] = useState<string>("all");
+  const [sizeFilter, setSizeFilter] = useState<string>("all");
+  const hasAutoSelected = useRef(false);
+  const safeValue = value || [];
+  const selectedIds = useMemo(() => new Set(safeValue), [safeValue]);
+
+  const countryParam = (allowedCountries || []).join(",");
+  const queryString = useMemo(() => {
+    const params = new URLSearchParams();
+    if (countryParam) {
+      params.set("country", countryParam);
+    }
+    if (sspId) {
+      params.set("sspId", sspId);
+    }
+    if (mediaOwnerId) {
+      params.set("mediaOwnerId", mediaOwnerId);
+    }
+    return params.toString();
+  }, [countryParam, sspId, mediaOwnerId]);
+
+  const { data: screens = [], isLoading } = useQuery<Screen[]>({
+    queryKey: ["/api/screens", countryParam, sspId || "", mediaOwnerId || ""],
+    queryFn: async () => {
+      const url = queryString ? `/api/screens?${queryString}` : "/api/screens";
+      const res = await fetch(url);
+      return res.json();
+    },
+  });
+
+  const filteredScreens = useMemo(() => {
+    return screens.filter((screen) => {
+      if (typeFilter !== "all" && screen.inventoryType !== typeFilter) return false;
+      if (formatFilter !== "all" && screen.format !== formatFilter) return false;
+      if (sizeFilter !== "all" && screen.sizeCategory !== sizeFilter) return false;
+      return true;
+    });
+  }, [screens, typeFilter, formatFilter, sizeFilter]);
+
+  const availableFormats = useMemo(() => {
+    if (typeFilter !== "all") {
+      return INVENTORY_FORMATS_BY_TYPE[typeFilter] || INVENTORY_FORMATS;
+    }
+    return INVENTORY_FORMATS;
+  }, [typeFilter]);
+
+  useEffect(() => {
+    if (!hasAutoSelected.current && screens.length > 0 && safeValue.length === 0) {
+      onChange(screens.map(s => s.id));
+      hasAutoSelected.current = true;
+    }
+  }, [screens, safeValue.length, onChange]);
+
+  const primaryCountry = allowedCountries[0] || "Malaysia";
+  const centerData = COUNTRY_CENTERS[primaryCountry] || COUNTRY_CENTERS.Malaysia;
+
+  const handleToggleScreen = useCallback((screenId: string) => {
+    if (selectedIds.has(screenId)) {
+      onChange(safeValue.filter(id => id !== screenId));
+    } else {
+      onChange([...safeValue, screenId]);
+    }
+  }, [safeValue, selectedIds, onChange]);
+
+  const handleSelectAll = useCallback(() => {
+    const allIds = filteredScreens.map(s => s.id);
+    const existingNonFiltered = safeValue.filter(id => !filteredScreens.find(s => s.id === id));
+    onChange([...existingNonFiltered, ...allIds]);
+  }, [filteredScreens, safeValue, onChange]);
+
+  const handleClearAll = useCallback(() => {
+    const filteredIds = new Set(filteredScreens.map(s => s.id));
+    onChange(safeValue.filter(id => !filteredIds.has(id)));
+  }, [filteredScreens, safeValue, onChange]);
+
+  const selectedInView = filteredScreens.filter(s => selectedIds.has(s.id)).length;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-wrap items-center gap-2 pb-4 border-b">
+        <Select value={typeFilter} onValueChange={setTypeFilter}>
+          <SelectTrigger className="w-[140px]" data-testid="select-inventory-type-filter">
+            <SelectValue placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Types</SelectItem>
+            {INVENTORY_TYPES.map((type) => (
+              <SelectItem key={type} value={type}>{type}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={formatFilter} onValueChange={setFormatFilter}>
+          <SelectTrigger className="w-[180px]" data-testid="select-inventory-format-filter">
+            <SelectValue placeholder="Format" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Formats</SelectItem>
+            {availableFormats.map((format) => (
+              <SelectItem key={format} value={format}>{format}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={sizeFilter} onValueChange={setSizeFilter}>
+          <SelectTrigger className="w-[120px]" data-testid="select-inventory-size-filter">
+            <SelectValue placeholder="Size" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Sizes</SelectItem>
+            {INVENTORY_SIZE_CATEGORIES.map((size) => (
+              <SelectItem key={size} value={size}>{size}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <div className="flex-1" />
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleSelectAll}
+          data-testid="button-select-all-screens"
+        >
+          Select All
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleClearAll}
+          data-testid="button-clear-all-screens"
+        >
+          Clear All
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
+        <span>{selectedInView} of {filteredScreens.length} screens selected</span>
+        {safeValue.length !== selectedInView && (
+          <Badge variant="secondary" className="text-xs">
+            {safeValue.length} total selected
+          </Badge>
+        )}
+      </div>
+
+      <div className="flex-1 flex gap-4 min-h-0">
+        <div className="flex-1 rounded-lg overflow-hidden border">
+          <MapComponent
+            center={centerData}
+            zoom={centerData.zoom}
+            screens={filteredScreens}
+            selectedIds={selectedIds}
+            onScreenClick={handleToggleScreen}
+          />
+        </div>
+
+        <div className="w-[320px] flex flex-col border-l pl-4">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="font-semibold text-sm">Available Screens</h3>
+          </div>
+
+          <ScrollArea className="flex-1">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : filteredScreens.length === 0 ? (
+              <div className="text-sm text-muted-foreground py-8 text-center">
+                No screens match the current filters
+              </div>
+            ) : (
+              <div className="space-y-2 pr-2">
+                {filteredScreens.map((screen) => (
+                  <label
+                    key={screen.id}
+                    className={cn(
+                      "flex items-start gap-3 p-3 rounded-md border cursor-pointer hover-elevate",
+                      selectedIds.has(screen.id) && "border-primary bg-primary/5"
+                    )}
+                    data-testid={`screen-item-${screen.id}`}
+                  >
+                    <Checkbox
+                      checked={selectedIds.has(screen.id)}
+                      onCheckedChange={() => handleToggleScreen(screen.id)}
+                      className="mt-0.5"
+                      data-testid={`checkbox-screen-${screen.id}`}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium text-sm truncate">{screen.name}</div>
+                      <div className="flex items-center gap-1 text-xs text-muted-foreground mt-0.5">
+                        <MapPin className="h-3 w-3" />
+                        <span className="truncate">{screen.city}, {screen.country}</span>
+                      </div>
+                      <div className="flex flex-wrap gap-1 mt-2">
+                        {screen.inventoryType && (
+                          <Badge variant="secondary" className="text-xs">{screen.inventoryType}</Badge>
+                        )}
+                        {screen.sizeCategory && (
+                          <Badge variant="outline" className="text-xs">{screen.sizeCategory}</Badge>
+                        )}
+                      </div>
+                      <div className="flex items-center justify-between mt-2 text-xs">
+                        <span className="text-muted-foreground truncate">{screen.format}</span>
+                        <span className="font-medium text-green-600">${screen.cpm} CPM</span>
+                      </div>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            )}
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function InventorySelector(props: InventorySelectorProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedCount = (props.value || []).length;
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal h-10",
+            !selectedCount && "text-muted-foreground"
+          )}
+          disabled={props.disabled}
+          data-testid="button-inventory-selector"
+        >
+          <Monitor className="h-4 w-4 mr-2" />
+          {selectedCount > 0 ? (
+            <span>{selectedCount} screen{selectedCount !== 1 ? "s" : ""} selected</span>
+          ) : (
+            <span>Select inventories...</span>
+          )}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-full sm:max-w-[900px] p-6">
+        <SheetHeader className="mb-4">
+          <SheetTitle>Inventory Selection</SheetTitle>
+          <SheetDescription>
+            Select specific screens to target in your deal
+          </SheetDescription>
+        </SheetHeader>
+        <div className="h-[calc(100vh-140px)]">
+          <InventorySelectorContent {...props} />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}