adserver-dashboard 1.0.0

package/client/src/components/line-items/manual-inventory-drawer.tsx

@@ -0,0 +1,346 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Search, Monitor, MapPin, X, Eye, DollarSign, Building } from "lucide-react";
+import mapboxgl from "mapbox-gl";
+import {
+  Button,
+  Input,
+  Badge,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  ScrollArea,
+} from "@moving-walls/design-system";
+import "mapbox-gl/dist/mapbox-gl.css";
+
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_PUBLIC_KEY || "";
+
+interface ManualInventoryDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  screens: Array<{
+    id: string;
+    name: string;
+    city?: string;
+    country?: string;
+    latitude?: number | string | null;
+    longitude?: number | string | null;
+    cpm?: number | string | null;
+    dailyImpressions?: number | null;
+    width?: number | null;
+    height?: number | null;
+    screenType?: string | null;
+    mediaOwnerId?: string | null;
+    mediaOwnerName?: string;
+  }>;
+  selectedScreens: string[];
+  onSelectionChange: (ids: string[]) => void;
+  mapCenter?: { lng: number; lat: number; zoom: number };
+}
+
+export function ManualInventoryDrawer({
+  open,
+  onOpenChange,
+  screens,
+  selectedScreens,
+  onSelectionChange,
+  mapCenter = { lng: 101.6869, lat: 3.139, zoom: 10 },
+}: ManualInventoryDrawerProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [localSelection, setLocalSelection] = useState<string[]>(selectedScreens);
+  const [expandedScreens, setExpandedScreens] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (open) {
+      setLocalSelection(selectedScreens);
+    }
+  }, [open, selectedScreens]);
+
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+  const screenMarkersRef = useRef<mapboxgl.Marker[]>([]);
+
+  const filteredScreens = useMemo(() => {
+    return screens.filter((screen) =>
+      screen.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (screen.city || "").toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [screens, searchQuery]);
+
+  useEffect(() => {
+    if (!open || !mapContainerRef.current || !MAPBOX_TOKEN) return;
+
+    if (!mapRef.current) {
+      mapboxgl.accessToken = MAPBOX_TOKEN;
+      mapRef.current = new mapboxgl.Map({
+        container: mapContainerRef.current,
+        style: "mapbox://styles/mapbox/light-v11",
+        center: [mapCenter.lng, mapCenter.lat],
+        zoom: mapCenter.zoom,
+      });
+
+      mapRef.current.addControl(new mapboxgl.NavigationControl(), "top-right");
+    }
+
+    return () => {
+      screenMarkersRef.current.forEach((m) => m.remove());
+      screenMarkersRef.current = [];
+    };
+  }, [open, mapCenter]);
+
+  useEffect(() => {
+    if (!mapRef.current || !open) return;
+
+    screenMarkersRef.current.forEach((m) => m.remove());
+    screenMarkersRef.current = [];
+
+    filteredScreens.forEach((screen) => {
+      if (!screen.latitude || !screen.longitude) return;
+
+      const isSelected = localSelection.includes(screen.id);
+      const el = document.createElement("div");
+      el.className = `w-6 h-6 rounded-full flex items-center justify-center cursor-pointer border-2 transition-all ${
+        isSelected
+          ? "bg-primary border-primary scale-110"
+          : "bg-background border-muted-foreground hover:scale-105"
+      }`;
+      el.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="${isSelected ? 'white' : '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.addEventListener("click", () => {
+        setLocalSelection((prev) =>
+          prev.includes(screen.id)
+            ? prev.filter((x) => x !== screen.id)
+            : [...prev, screen.id]
+        );
+      });
+
+      const marker = new mapboxgl.Marker({ element: el })
+        .setLngLat([Number(screen.longitude), Number(screen.latitude)])
+        .setPopup(
+          new mapboxgl.Popup().setHTML(
+            `<strong>${screen.name}</strong><br/>
+            ${screen.city || ""}, ${screen.country || ""}<br/>
+            CPM: $${screen.cpm || "0.00"}`
+          )
+        )
+        .addTo(mapRef.current!);
+
+      screenMarkersRef.current.push(marker);
+    });
+  }, [filteredScreens, localSelection, open]);
+
+  const handleToggleScreen = (id: string) => {
+    setLocalSelection((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  };
+
+  const toggleExpanded = (id: string) => {
+    setExpandedScreens((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleApply = () => {
+    onSelectionChange(localSelection);
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setLocalSelection(selectedScreens);
+    onOpenChange(false);
+  };
+
+  const handleSelectAll = () => {
+    setLocalSelection(filteredScreens.map((s) => s.id));
+  };
+
+  const handleDeselectAll = () => {
+    setLocalSelection([]);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="w-full sm:max-w-[75vw] flex flex-col p-0"
+        data-testid="manual-inventory-drawer"
+      >
+        <div className="p-6 pb-0">
+          <SheetHeader>
+            <SheetTitle className="flex items-center gap-2">
+              <Monitor className="h-5 w-5" />
+              Manual Inventory Selection
+            </SheetTitle>
+            <SheetDescription>
+              Click on map markers or use the list to select screens.
+            </SheetDescription>
+          </SheetHeader>
+        </div>
+
+        <div className="flex-1 flex overflow-hidden p-6 pt-4 gap-4">
+          <div className="w-80 flex flex-col gap-3 flex-shrink-0">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search screens..."
+                value={searchQuery}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                className="pl-9"
+                data-testid="input-search-inventory"
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleSelectAll}
+                className="flex-1"
+                data-testid="button-select-all-inventory"
+              >
+                Select All
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleDeselectAll}
+                className="flex-1"
+                data-testid="button-deselect-all-inventory"
+              >
+                Clear
+              </Button>
+            </div>
+
+            <div className="text-sm text-muted-foreground">
+              {localSelection.length} of {filteredScreens.length} screens selected
+            </div>
+
+            <ScrollArea className="flex-1 border rounded-md">
+              <div className="p-2 space-y-1">
+                {filteredScreens.map((screen) => {
+                  const isSelected = localSelection.includes(screen.id);
+                  const isExpanded = expandedScreens.has(screen.id);
+
+                  return (
+                    <div
+                      key={screen.id}
+                      className={`rounded-md border p-2 ${isSelected ? "bg-mw-primary-50 border-mw-primary-300" : "hover:bg-mw-neutral-50"}`}
+                      data-testid={`screen-item-${screen.id}`}
+                    >
+                      <div className="flex items-start gap-2">
+                        <Checkbox
+                          checked={isSelected}
+                          onChange={() => handleToggleScreen(screen.id)}
+                          className="mt-0.5"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="font-medium text-xs truncate">{screen.name}</div>
+                          <div className="text-xs text-muted-foreground flex items-center gap-2">
+                            <span className="flex items-center gap-1">
+                              <Building className="h-3 w-3" />
+                              {screen.mediaOwnerName || screen.mediaOwnerId || "N/A"}
+                            </span>
+                          </div>
+                          <div className="text-xs text-muted-foreground flex items-center gap-2 mt-1">
+                            <span className="flex items-center gap-1">
+                              <DollarSign className="h-3 w-3" />
+                              ${screen.cpm || "0.00"}
+                            </span>
+                            <span className="flex items-center gap-1">
+                              <Eye className="h-3 w-3" />
+                              {screen.dailyImpressions?.toLocaleString() || "N/A"}
+                            </span>
+                          </div>
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0"
+                          onClick={() => toggleExpanded(screen.id)}
+                        >
+                          {isExpanded ? (
+                            <X className="h-3 w-3" />
+                          ) : (
+                            <Eye className="h-3 w-3" />
+                          )}
+                        </Button>
+                      </div>
+                      {isExpanded && (
+                        <div className="mt-2 pt-2 border-t text-xs space-y-1">
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Resolution</span>
+                            <span>{screen.width && screen.height ? `${screen.width}x${screen.height}` : "N/A"}</span>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Location</span>
+                            <span>{screen.city || "N/A"}, {screen.country || "N/A"}</span>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Type</span>
+                            <span>{screen.screenType || "N/A"}</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+                {filteredScreens.length === 0 && (
+                  <p className="text-sm text-muted-foreground text-center py-4">
+                    No screens found
+                  </p>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+
+          <div
+            ref={mapContainerRef}
+            className="flex-1 rounded-md border overflow-hidden"
+            data-testid="manual-inventory-map"
+          />
+        </div>
+
+        <div className="flex justify-between items-center p-6 pt-4 border-t bg-background">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <div className="w-3 h-3 rounded-full bg-mw-primary-500" />
+              <span>Screens</span>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              data-testid="button-cancel-manual-inventory"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleApply}
+              data-testid="button-apply-manual-inventory"
+            >
+              Apply Selection ({localSelection.length})
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}