adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/components/mapbox-map.tsx

@@ -0,0 +1,368 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import mapboxgl from "mapbox-gl";
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import "mapbox-gl/dist/mapbox-gl.css";
+import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
+import { cn } from "@/lib/utils";
+
+mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_TOKEN || "";
+
+export interface DrawnShape {
+  id: string;
+  type: "polygon" | "circle" | "point";
+  coordinates: number[][][] | number[][] | number[];
+  properties?: Record<string, any>;
+  measurements?: string;
+}
+
+interface MapboxMapProps {
+  center?: [number, number];
+  zoom?: number;
+  className?: string;
+  onMapLoad?: (map: mapboxgl.Map) => void;
+  markers?: Array<{
+    id: string;
+    lng: number;
+    lat: number;
+    color?: string;
+    popup?: string;
+  }>;
+  circles?: Array<{
+    id: string;
+    center: [number, number];
+    radius: number;
+    color?: string;
+  }>;
+  routes?: Array<{
+    id: string;
+    coordinates: number[][];
+    color: string;
+    name?: string;
+  }>;
+  zones?: Array<{
+    id: string;
+    coordinates: number[][][];
+    color: string;
+    name?: string;
+  }>;
+  onMarkerClick?: (markerId: string) => void;
+  drawingMode?: "polygon" | "circle" | "freeform" | null;
+  onShapeCreated?: (shape: DrawnShape) => void;
+  onShapeDeleted?: (shapeId: string) => void;
+}
+
+function calculatePolygonArea(coords: number[][]): number {
+  let area = 0;
+  const n = coords.length;
+  for (let i = 0; i < n - 1; i++) {
+    area += coords[i][0] * coords[i + 1][1];
+    area -= coords[i + 1][0] * coords[i][1];
+  }
+  return Math.abs(area / 2) * 111.32 * 111.32;
+}
+
+function formatArea(areaKm2: number): string {
+  if (areaKm2 < 1) {
+    return `${(areaKm2 * 1000000).toFixed(0)} m²`;
+  }
+  return `${areaKm2.toFixed(2)} km²`;
+}
+
+export function MapboxMap({
+  center = [101.6865, 3.1346],
+  zoom = 11,
+  className,
+  onMapLoad,
+  markers = [],
+  circles = [],
+  routes = [],
+  zones = [],
+  onMarkerClick,
+  drawingMode,
+  onShapeCreated,
+  onShapeDeleted,
+}: MapboxMapProps) {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
+  const draw = useRef<MapboxDraw | null>(null);
+  const markersRef = useRef<mapboxgl.Marker[]>([]);
+  const [mapLoaded, setMapLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!mapContainer.current || map.current) return;
+
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: "mapbox://styles/mapbox/streets-v12",
+      center,
+      zoom,
+    });
+
+    map.current.addControl(new mapboxgl.NavigationControl(), "bottom-right");
+
+    draw.current = new MapboxDraw({
+      displayControlsDefault: false,
+      controls: {
+        polygon: false,
+        trash: false,
+      },
+      defaultMode: "simple_select",
+    });
+
+    map.current.addControl(draw.current as any);
+
+    map.current.on("load", () => {
+      setMapLoaded(true);
+      if (onMapLoad && map.current) {
+        onMapLoad(map.current);
+      }
+    });
+
+    map.current.on("draw.create", (e: any) => {
+      if (onShapeCreated && e.features && e.features.length > 0) {
+        const feature = e.features[0];
+        const coords = feature.geometry.coordinates;
+        const area = feature.geometry.type === "Polygon" 
+          ? calculatePolygonArea(coords[0]) 
+          : 0;
+
+        onShapeCreated({
+          id: feature.id,
+          type: feature.geometry.type.toLowerCase() as "polygon" | "circle" | "point",
+          coordinates: coords,
+          measurements: formatArea(area),
+        });
+      }
+    });
+
+    map.current.on("draw.delete", (e: any) => {
+      if (onShapeDeleted && e.features && e.features.length > 0) {
+        onShapeDeleted(e.features[0].id);
+      }
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!draw.current || !mapLoaded) return;
+
+    if (drawingMode === "polygon" || drawingMode === "freeform") {
+      draw.current.changeMode("draw_polygon");
+    } else if (drawingMode === "circle") {
+      draw.current.changeMode("draw_polygon");
+    } else {
+      draw.current.changeMode("simple_select");
+    }
+  }, [drawingMode, mapLoaded]);
+
+  useEffect(() => {
+    if (!map.current || !mapLoaded) return;
+
+    markersRef.current.forEach((marker) => marker.remove());
+    markersRef.current = [];
+
+    markers.forEach((m) => {
+      const el = document.createElement("div");
+      el.className = "w-6 h-6 rounded-full border-2 border-white shadow-lg cursor-pointer";
+      el.style.backgroundColor = m.color || "#E53935";
+
+      const marker = new mapboxgl.Marker(el)
+        .setLngLat([m.lng, m.lat])
+        .addTo(map.current!);
+
+      if (m.popup) {
+        const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(m.popup);
+        marker.setPopup(popup);
+      }
+
+      if (onMarkerClick) {
+        el.addEventListener("click", () => onMarkerClick(m.id));
+      }
+
+      markersRef.current.push(marker);
+    });
+  }, [markers, mapLoaded, onMarkerClick]);
+
+  useEffect(() => {
+    if (!map.current || !mapLoaded) return;
+
+    circles.forEach((circle) => {
+      const sourceId = `circle-${circle.id}`;
+      const layerId = `circle-layer-${circle.id}`;
+
+      if (map.current!.getSource(sourceId)) {
+        map.current!.removeLayer(layerId);
+        map.current!.removeSource(sourceId);
+      }
+
+      const center = circle.center;
+      const radius = circle.radius / 1000;
+      const points = 64;
+      const coords = [];
+
+      for (let i = 0; i < points; i++) {
+        const angle = (i / points) * 2 * Math.PI;
+        const dx = radius * Math.cos(angle) / 111.32;
+        const dy = radius * Math.sin(angle) / (111.32 * Math.cos(center[1] * Math.PI / 180));
+        coords.push([center[0] + dx, center[1] + dy]);
+      }
+      coords.push(coords[0]);
+
+      map.current!.addSource(sourceId, {
+        type: "geojson",
+        data: {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            type: "Polygon",
+            coordinates: [coords],
+          },
+        },
+      });
+
+      map.current!.addLayer({
+        id: layerId,
+        type: "fill",
+        source: sourceId,
+        paint: {
+          "fill-color": circle.color || "#1E88E5",
+          "fill-opacity": 0.3,
+        },
+      });
+    });
+  }, [circles, mapLoaded]);
+
+  useEffect(() => {
+    if (!map.current || !mapLoaded) return;
+
+    routes.forEach((route) => {
+      const sourceId = `route-${route.id}`;
+      const layerId = `route-layer-${route.id}`;
+
+      if (map.current!.getSource(sourceId)) {
+        map.current!.removeLayer(layerId);
+        map.current!.removeSource(sourceId);
+      }
+
+      map.current!.addSource(sourceId, {
+        type: "geojson",
+        data: {
+          type: "Feature",
+          properties: { name: route.name },
+          geometry: {
+            type: "LineString",
+            coordinates: route.coordinates,
+          },
+        },
+      });
+
+      map.current!.addLayer({
+        id: layerId,
+        type: "line",
+        source: sourceId,
+        layout: {
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": route.color,
+          "line-width": 4,
+        },
+      });
+    });
+  }, [routes, mapLoaded]);
+
+  useEffect(() => {
+    if (!map.current || !mapLoaded) return;
+
+    zones.forEach((zone) => {
+      const sourceId = `zone-${zone.id}`;
+      const fillLayerId = `zone-fill-${zone.id}`;
+      const lineLayerId = `zone-line-${zone.id}`;
+
+      if (map.current!.getSource(sourceId)) {
+        if (map.current!.getLayer(fillLayerId)) map.current!.removeLayer(fillLayerId);
+        if (map.current!.getLayer(lineLayerId)) map.current!.removeLayer(lineLayerId);
+        map.current!.removeSource(sourceId);
+      }
+
+      map.current!.addSource(sourceId, {
+        type: "geojson",
+        data: {
+          type: "Feature",
+          properties: { name: zone.name },
+          geometry: {
+            type: "Polygon",
+            coordinates: zone.coordinates,
+          },
+        },
+      });
+
+      map.current!.addLayer({
+        id: fillLayerId,
+        type: "fill",
+        source: sourceId,
+        paint: {
+          "fill-color": zone.color,
+          "fill-opacity": 0.2,
+        },
+      });
+
+      map.current!.addLayer({
+        id: lineLayerId,
+        type: "line",
+        source: sourceId,
+        paint: {
+          "line-color": zone.color,
+          "line-width": 2,
+        },
+      });
+    });
+  }, [zones, mapLoaded]);
+
+  return (
+    <div
+      ref={mapContainer}
+      className={cn("w-full h-full min-h-[400px]", className)}
+      data-testid="mapbox-map"
+    />
+  );
+}
+
+export function useMapboxGeocoder() {
+  const searchLocation = async (query: string): Promise<Array<{
+    id: string;
+    name: string;
+    address: string;
+    lat: number;
+    lng: number;
+  }>> => {
+    if (!query || query.length < 2) return [];
+    
+    try {
+      const response = await fetch(
+        `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${mapboxgl.accessToken}&limit=5`
+      );
+      const data = await response.json();
+      
+      return data.features.map((feature: any) => ({
+        id: feature.id,
+        name: feature.text,
+        address: feature.place_name,
+        lat: feature.center[1],
+        lng: feature.center[0],
+      }));
+    } catch (error) {
+      console.error("Geocoding error:", error);
+      return [];
+    }
+  };
+
+  return { searchLocation };
+}

package/Influence-MW-AdServer-12-02-2026/client/src/components/market-insights-panel.tsx

@@ -0,0 +1,202 @@
+import { useMemo, memo } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Globe } from "lucide-react";
+import {
+  ComposableMap,
+  Geographies,
+  Geography,
+  ZoomableGroup,
+} from "react-simple-maps";
+
+interface CountryData {
+  code: string;
+  name: string;
+  flag: string;
+  population: string;
+  inventories: number;
+  impressions: string;
+  region: string;
+  currency: string;
+  iso3: string;
+}
+
+const COUNTRY_DATA: Record<string, CountryData> = {
+  MY: { code: "MY", name: "Malaysia", flag: "MY", population: "32M", inventories: 45000, impressions: "385B", region: "asia", currency: "MYR", iso3: "MYS" },
+  US: { code: "US", name: "United States", flag: "US", population: "331M", inventories: 250000, impressions: "2.1T", region: "americas", currency: "USD", iso3: "USA" },
+  CN: { code: "CN", name: "China", flag: "CN", population: "1.4B", inventories: 180000, impressions: "1.8T", region: "asia", currency: "CNY", iso3: "CHN" },
+  IN: { code: "IN", name: "India", flag: "IN", population: "1.4B", inventories: 95000, impressions: "890B", region: "asia", currency: "INR", iso3: "IND" },
+  GB: { code: "GB", name: "United Kingdom", flag: "GB", population: "67M", inventories: 75000, impressions: "420B", region: "europe", currency: "GBP", iso3: "GBR" },
+  SG: { code: "SG", name: "Singapore", flag: "SG", population: "5.9M", inventories: 12000, impressions: "95B", region: "asia", currency: "SGD", iso3: "SGP" },
+  TH: { code: "TH", name: "Thailand", flag: "TH", population: "70M", inventories: 35000, impressions: "280B", region: "asia", currency: "THB", iso3: "THA" },
+  ID: { code: "ID", name: "Indonesia", flag: "ID", population: "274M", inventories: 65000, impressions: "520B", region: "asia", currency: "IDR", iso3: "IDN" },
+  PH: { code: "PH", name: "Philippines", flag: "PH", population: "109M", inventories: 28000, impressions: "210B", region: "asia", currency: "PHP", iso3: "PHL" },
+  VN: { code: "VN", name: "Vietnam", flag: "VN", population: "97M", inventories: 22000, impressions: "175B", region: "asia", currency: "VND", iso3: "VNM" },
+  AU: { code: "AU", name: "Australia", flag: "AU", population: "26M", inventories: 42000, impressions: "195B", region: "oceania", currency: "AUD", iso3: "AUS" },
+  JP: { code: "JP", name: "Japan", flag: "JP", population: "125M", inventories: 85000, impressions: "620B", region: "asia", currency: "JPY", iso3: "JPN" },
+  KR: { code: "KR", name: "South Korea", flag: "KR", population: "52M", inventories: 55000, impressions: "340B", region: "asia", currency: "KRW", iso3: "KOR" },
+  DE: { code: "DE", name: "Germany", flag: "DE", population: "84M", inventories: 68000, impressions: "380B", region: "europe", currency: "EUR", iso3: "DEU" },
+  FR: { code: "FR", name: "France", flag: "FR", population: "68M", inventories: 52000, impressions: "290B", region: "europe", currency: "EUR", iso3: "FRA" },
+  BR: { code: "BR", name: "Brazil", flag: "BR", population: "214M", inventories: 78000, impressions: "450B", region: "americas", currency: "BRL", iso3: "BRA" },
+  MX: { code: "MX", name: "Mexico", flag: "MX", population: "128M", inventories: 48000, impressions: "280B", region: "americas", currency: "MXN", iso3: "MEX" },
+  CA: { code: "CA", name: "Canada", flag: "CA", population: "38M", inventories: 35000, impressions: "185B", region: "americas", currency: "CAD", iso3: "CAN" },
+  AE: { code: "AE", name: "UAE", flag: "AE", population: "9.9M", inventories: 18000, impressions: "120B", region: "middleeast", currency: "AED", iso3: "ARE" },
+  SA: { code: "SA", name: "Saudi Arabia", flag: "SA", population: "35M", inventories: 25000, impressions: "165B", region: "middleeast", currency: "SAR", iso3: "SAU" },
+};
+
+const geoUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
+
+interface MarketInsightsPanelProps {
+  selectedCountries: string[];
+}
+
+const WorldMap = memo(function WorldMap({ selectedIso3Codes }: { selectedIso3Codes: Set<string> }) {
+  return (
+    <ComposableMap
+      projection="geoMercator"
+      projectionConfig={{
+        scale: 100,
+        center: [0, 30],
+      }}
+      style={{ width: "100%", height: "100%" }}
+    >
+      <ZoomableGroup center={[0, 20]} zoom={1} minZoom={1} maxZoom={1}>
+        <Geographies geography={geoUrl}>
+          {({ geographies }) =>
+            geographies.map((geo) => {
+              const isSelected = selectedIso3Codes.has(geo.properties.ISO_A3 || geo.id);
+              return (
+                <Geography
+                  key={geo.rsmKey}
+                  geography={geo}
+                  fill={isSelected ? "hsl(var(--primary))" : "hsl(var(--muted))"}
+                  stroke="hsl(var(--background))"
+                  strokeWidth={0.5}
+                  style={{
+                    default: {
+                      outline: "none",
+                    },
+                    hover: {
+                      outline: "none",
+                      fill: isSelected ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.3)",
+                    },
+                    pressed: {
+                      outline: "none",
+                    },
+                  }}
+                />
+              );
+            })
+          }
+        </Geographies>
+      </ZoomableGroup>
+    </ComposableMap>
+  );
+});
+
+export function MarketInsightsPanel({ selectedCountries }: MarketInsightsPanelProps) {
+  const selectedData = useMemo(() => {
+    return selectedCountries
+      .map((code) => COUNTRY_DATA[code])
+      .filter(Boolean);
+  }, [selectedCountries]);
+
+  const selectedIso3Codes = useMemo(() => {
+    return new Set(selectedData.map((country) => country.iso3));
+  }, [selectedData]);
+
+  const aggregatedStats = useMemo(() => {
+    if (selectedData.length === 0) return null;
+
+    let totalPop = 0;
+    let totalInv = 0;
+    let totalImpBillions = 0;
+
+    selectedData.forEach((country) => {
+      const popNum = parseFloat(country.population.replace(/[BMT]/g, "")) * 
+        (country.population.includes("B") ? 1000000000 : country.population.includes("M") ? 1000000 : 1);
+      totalPop += popNum;
+      totalInv += country.inventories;
+      const impNum = parseFloat(country.impressions.replace(/[BMT]/g, "")) * 
+        (country.impressions.includes("T") ? 1000 : country.impressions.includes("B") ? 1 : 0.001);
+      totalImpBillions += impNum;
+    });
+
+    const formatPop = totalPop >= 1000000000 
+      ? `${(totalPop / 1000000000).toFixed(2)}B` 
+      : `${(totalPop / 1000000).toFixed(0)}M`;
+    
+    const formatImp = totalImpBillions >= 1000 
+      ? `${(totalImpBillions / 1000).toFixed(2)}T` 
+      : `${totalImpBillions.toFixed(0)}B`;
+
+    return {
+      population: formatPop,
+      inventories: totalInv.toLocaleString(),
+      impressions: formatImp,
+    };
+  }, [selectedData]);
+
+  return (
+    <div className="space-y-4" data-testid="panel-market-insights">
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Globe className="h-4 w-4 text-primary" />
+            Market Insights
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {selectedData.length > 0 && (
+            <div className="flex flex-wrap gap-1" data-testid="flags-selected-countries">
+              {selectedData.map((country) => (
+                <Badge 
+                  key={country.code} 
+                  variant="secondary"
+                  className="text-xs font-medium"
+                  title={country.name}
+                  data-testid={`flag-${country.code}`}
+                >
+                  {country.code}
+                </Badge>
+              ))}
+            </div>
+          )}
+          
+          <div className="relative w-full aspect-[2/1] bg-muted/30 rounded-md overflow-hidden" data-testid="map-visualization">
+            <WorldMap selectedIso3Codes={selectedIso3Codes} />
+          </div>
+
+          {aggregatedStats && (
+            <div className="grid grid-cols-3 gap-2" data-testid="market-stats">
+              <div className="text-center p-2 bg-blue-500/10 rounded-md">
+                <div className="text-xs text-muted-foreground">Population</div>
+                <div className="text-sm font-semibold text-blue-600" data-testid="stat-population">
+                  {aggregatedStats.population}
+                </div>
+              </div>
+              <div className="text-center p-2 bg-green-500/10 rounded-md">
+                <div className="text-xs text-muted-foreground">Inventories</div>
+                <div className="text-sm font-semibold text-green-600" data-testid="stat-inventories">
+                  {aggregatedStats.inventories}
+                </div>
+              </div>
+              <div className="text-center p-2 bg-purple-500/10 rounded-md">
+                <div className="text-xs text-muted-foreground">Impressions</div>
+                <div className="text-sm font-semibold text-purple-600" data-testid="stat-impressions">
+                  {aggregatedStats.impressions}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {selectedData.length === 0 && (
+            <p className="text-sm text-muted-foreground text-center py-4">
+              Select countries to see market insights
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}