adserver-dashboard 1.0.0

package/Influence-MW-AdServer-12-02-2026/client/src/pages/geotargeting.tsx

@@ -0,0 +1,675 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useLocation, useParams } from "wouter";
+import { 
+  MapPin, 
+  Circle, 
+  Pentagon, 
+  Pencil, 
+  Search, 
+  X, 
+  Check, 
+  Eye, 
+  EyeOff,
+  Minus,
+  Train,
+  Bus,
+  Car,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { MapboxMap, useMapboxGeocoder, DrawnShape } from "@/components/mapbox-map";
+import { cn } from "@/lib/utils";
+import type { POI, TransitRoute, TransitZone, GeoLocation, GeoShape } from "@shared/schema";
+
+type TabMode = "regions" | "proximity";
+
+interface SelectedLocation extends GeoLocation {
+  visible: boolean;
+}
+
+interface SelectedShape extends GeoShape {
+  visible: boolean;
+}
+
+export default function Geotargeting() {
+  const { entityType, entityId } = useParams<{ entityType: string; entityId: string }>();
+  const [, setLocation] = useLocation();
+  
+  const [activeTab, setActiveTab] = useState<TabMode>("regions");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<Array<{
+    id: string;
+    name: string;
+    address: string;
+    lat: number;
+    lng: number;
+  }>>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  
+  const [selectedLocations, setSelectedLocations] = useState<SelectedLocation[]>([]);
+  const [selectedShapes, setSelectedShapes] = useState<SelectedShape[]>([]);
+  
+  const [drawingMode, setDrawingMode] = useState<"polygon" | "circle" | "freeform" | null>(null);
+  
+  const [poiSearch, setPoiSearch] = useState("");
+  const [poiCategories, setPoiCategories] = useState<string[]>([]);
+  const [showPoiPanel, setShowPoiPanel] = useState(false);
+  
+  const { searchLocation } = useMapboxGeocoder();
+
+  const { data: transitRoutes = [] } = useQuery<TransitRoute[]>({
+    queryKey: ["/api/transit/routes"],
+  });
+
+  const { data: transitZones = [] } = useQuery<TransitZone[]>({
+    queryKey: ["/api/transit/zones"],
+  });
+
+  const { data: pois = [] } = useQuery<POI[]>({
+    queryKey: ["/api/poi/search", poiSearch, poiCategories.join(",")],
+    enabled: poiSearch.length > 0 || poiCategories.length > 0,
+  });
+
+  const handleSearch = useCallback(async (query: string) => {
+    setSearchQuery(query);
+    if (query.length < 2) {
+      setSearchResults([]);
+      return;
+    }
+    
+    setIsSearching(true);
+    const results = await searchLocation(query);
+    setSearchResults(results);
+    setIsSearching(false);
+  }, [searchLocation]);
+
+  const handleAddLocation = useCallback((result: { id: string; name: string; address: string; lat: number; lng: number }) => {
+    const newLocation: SelectedLocation = {
+      id: result.id,
+      name: result.name,
+      address: result.address,
+      lat: result.lat,
+      lng: result.lng,
+      radius: 2000,
+      include: true,
+      visible: true,
+    };
+    setSelectedLocations(prev => [...prev, newLocation]);
+    setSearchQuery("");
+    setSearchResults([]);
+  }, []);
+
+  const handleRemoveLocation = useCallback((id: string) => {
+    setSelectedLocations(prev => prev.filter(loc => loc.id !== id));
+  }, []);
+
+  const handleToggleLocationVisibility = useCallback((id: string) => {
+    setSelectedLocations(prev => prev.map(loc => 
+      loc.id === id ? { ...loc, visible: !loc.visible } : loc
+    ));
+  }, []);
+
+  const handleLocationRadiusChange = useCallback((id: string, radius: number) => {
+    setSelectedLocations(prev => prev.map(loc =>
+      loc.id === id ? { ...loc, radius } : loc
+    ));
+  }, []);
+
+  const handleToggleLocationInclude = useCallback((id: string) => {
+    setSelectedLocations(prev => prev.map(loc =>
+      loc.id === id ? { ...loc, include: !loc.include } : loc
+    ));
+  }, []);
+
+  const handleAddPoiCategory = useCallback((category: string) => {
+    if (!poiCategories.includes(category)) {
+      setPoiCategories(prev => [...prev, category]);
+    }
+  }, [poiCategories]);
+
+  const handleRemovePoiCategory = useCallback((category: string) => {
+    setPoiCategories(prev => prev.filter(c => c !== category));
+  }, []);
+
+  const handleShapeCreated = useCallback((shape: DrawnShape) => {
+    const newShape: SelectedShape = {
+      id: shape.id,
+      type: shape.type,
+      coordinates: shape.coordinates as number[][][],
+      measurements: shape.measurements || "0 m²",
+      include: true,
+      visible: true,
+    };
+    setSelectedShapes(prev => [...prev, newShape]);
+    setDrawingMode(null);
+  }, []);
+
+  const handleShapeDeleted = useCallback((shapeId: string) => {
+    setSelectedShapes(prev => prev.filter(s => s.id !== shapeId));
+  }, []);
+
+  const handleRemoveShape = useCallback((id: string) => {
+    setSelectedShapes(prev => prev.filter(s => s.id !== id));
+  }, []);
+
+  const handleToggleShapeVisibility = useCallback((id: string) => {
+    setSelectedShapes(prev => prev.map(s =>
+      s.id === id ? { ...s, visible: !s.visible } : s
+    ));
+  }, []);
+
+  const handleToggleShapeInclude = useCallback((id: string) => {
+    setSelectedShapes(prev => prev.map(s =>
+      s.id === id ? { ...s, include: !s.include } : s
+    ));
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    setLocation(entityId ? `/deals/${entityId}` : "/deals");
+  }, [entityId, setLocation]);
+
+  const handleDone = useCallback(() => {
+    console.log("Saving geotargeting rules:", {
+      locations: selectedLocations,
+      shapes: selectedShapes,
+      poiCategories,
+    });
+    setLocation(entityId ? `/deals/${entityId}` : "/deals");
+  }, [entityId, selectedLocations, selectedShapes, poiCategories, setLocation]);
+
+  const mapMarkers = useMemo(() => {
+    const markers = selectedLocations
+      .filter(loc => loc.visible)
+      .map(loc => ({
+        id: loc.id,
+        lng: loc.lng,
+        lat: loc.lat,
+        color: loc.include ? "#1E88E5" : "#E53935",
+        popup: `<strong>${loc.name}</strong><br/>${loc.address || ""}`,
+      }));
+    return markers;
+  }, [selectedLocations]);
+
+  const mapCircles = useMemo(() => {
+    return selectedLocations
+      .filter(loc => loc.visible)
+      .map(loc => ({
+        id: loc.id,
+        center: [loc.lng, loc.lat] as [number, number],
+        radius: loc.radius,
+        color: loc.include ? "#1E88E5" : "#E53935",
+      }));
+  }, [selectedLocations]);
+
+  const mapRoutes = useMemo(() => {
+    return transitRoutes.map(route => ({
+      id: route.id,
+      coordinates: (route.geojson as any).coordinates || [],
+      color: route.color || "#1E88E5",
+      name: route.name,
+    }));
+  }, [transitRoutes]);
+
+  const mapZones = useMemo(() => {
+    return transitZones.map(zone => ({
+      id: zone.id,
+      coordinates: (zone.geojson as any).coordinates || [],
+      color: zone.color || "#FFC107",
+      name: zone.name,
+    }));
+  }, [transitZones]);
+
+  return (
+    <div className="flex flex-col h-screen bg-background">
+      <div className="border-b px-6 py-4">
+        <h1 className="text-2xl font-semibold">Geography Targeting</h1>
+      </div>
+
+      <div className="flex-1 flex overflow-hidden">
+        <div className="w-[450px] border-r flex flex-col bg-card">
+          <div className="flex border-b">
+            <button
+              onClick={() => setActiveTab("regions")}
+              className={cn(
+                "flex-1 py-3 text-center font-medium transition-colors",
+                activeTab === "regions"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              )}
+              data-testid="tab-regions"
+            >
+              Regions
+            </button>
+            <button
+              onClick={() => setActiveTab("proximity")}
+              className={cn(
+                "flex-1 py-3 text-center font-medium transition-colors",
+                activeTab === "proximity"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-muted/80"
+              )}
+              data-testid="tab-proximity"
+            >
+              Proximity
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-auto p-4">
+            {activeTab === "regions" && (
+              <div className="space-y-4">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="Search locations..."
+                    value={searchQuery}
+                    onChange={(e) => handleSearch(e.target.value)}
+                    className="pl-9"
+                    data-testid="input-location-search"
+                  />
+                </div>
+
+                {searchResults.length > 0 && (
+                  <Card className="absolute z-10 w-[calc(100%-2rem)] mt-1 max-h-60 overflow-auto">
+                    <CardContent className="p-0">
+                      {searchResults.map((result) => (
+                        <button
+                          key={result.id}
+                          onClick={() => handleAddLocation(result)}
+                          className="w-full px-4 py-3 text-left hover:bg-muted border-b last:border-b-0"
+                          data-testid={`search-result-${result.id}`}
+                        >
+                          <div className="font-medium">{result.name}</div>
+                          <div className="text-sm text-muted-foreground">{result.address}</div>
+                        </button>
+                      ))}
+                    </CardContent>
+                  </Card>
+                )}
+
+                {selectedLocations.length > 0 && (
+                  <div className="space-y-2 mt-4">
+                    <div className="grid grid-cols-12 gap-2 text-xs font-medium text-muted-foreground px-2">
+                      <div className="col-span-1">#</div>
+                      <div className="col-span-5">Location</div>
+                      <div className="col-span-3">Radius</div>
+                      <div className="col-span-3">Actions</div>
+                    </div>
+                    {selectedLocations.map((loc, index) => (
+                      <div
+                        key={loc.id}
+                        className="grid grid-cols-12 gap-2 items-center p-2 bg-muted/50 rounded-md"
+                        data-testid={`location-row-${index}`}
+                      >
+                        <div className="col-span-1 text-sm text-muted-foreground">{index + 1}</div>
+                        <div className="col-span-5">
+                          <div className="text-sm font-medium truncate">{loc.name}</div>
+                          <div className="text-xs text-muted-foreground truncate">{loc.address}</div>
+                        </div>
+                        <div className="col-span-3 flex items-center gap-1">
+                          <Input
+                            type="number"
+                            value={loc.radius}
+                            onChange={(e) => handleLocationRadiusChange(loc.id, parseInt(e.target.value) || 0)}
+                            className="h-7 w-16 text-xs"
+                            data-testid={`input-radius-${index}`}
+                          />
+                          <span className="text-xs text-muted-foreground">m</span>
+                        </div>
+                        <div className="col-span-3 flex items-center gap-1">
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7"
+                                onClick={() => handleToggleLocationInclude(loc.id)}
+                                data-testid={`button-toggle-include-${index}`}
+                              >
+                                <Checkbox checked={loc.include} className="pointer-events-none" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {loc.include ? "Included" : "Excluded"}
+                            </TooltipContent>
+                          </Tooltip>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7"
+                                onClick={() => handleToggleLocationVisibility(loc.id)}
+                                data-testid={`button-toggle-visibility-${index}`}
+                              >
+                                {loc.visible ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {loc.visible ? "Hide on map" : "Show on map"}
+                            </TooltipContent>
+                          </Tooltip>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7 text-destructive hover:text-destructive"
+                                onClick={() => handleRemoveLocation(loc.id)}
+                                data-testid={`button-remove-location-${index}`}
+                              >
+                                <Minus className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Remove</TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {selectedLocations.length === 0 && searchResults.length === 0 && (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <MapPin className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                    <p>Search for locations to add to your targeting</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {activeTab === "proximity" && (
+              <div className="space-y-4">
+                <div className="border-l-4 border-primary bg-primary/5 p-4 rounded-r-md">
+                  <p className="text-sm text-muted-foreground">
+                    Draw your preferred shape on the map using the map tools and target the proximities. 
+                    You may choose to include or exclude the shape.
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant={drawingMode === "polygon" ? "default" : "outline"}
+                        size="icon"
+                        onClick={() => setDrawingMode(drawingMode === "polygon" ? null : "polygon")}
+                        data-testid="button-draw-polygon"
+                      >
+                        <Pentagon className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Draw Polygon</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant={drawingMode === "circle" ? "default" : "outline"}
+                        size="icon"
+                        onClick={() => setDrawingMode(drawingMode === "circle" ? null : "circle")}
+                        data-testid="button-draw-circle"
+                      >
+                        <Circle className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Draw Circle</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant={drawingMode === "freeform" ? "default" : "outline"}
+                        size="icon"
+                        onClick={() => setDrawingMode(drawingMode === "freeform" ? null : "freeform")}
+                        data-testid="button-draw-freeform"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Freeform Draw</TooltipContent>
+                  </Tooltip>
+                </div>
+
+                {selectedShapes.length > 0 && (
+                  <div className="space-y-2 mt-4">
+                    <div className="grid grid-cols-12 gap-2 text-xs font-medium text-muted-foreground px-2">
+                      <div className="col-span-1">S.No</div>
+                      <div className="col-span-5">List of Proximities</div>
+                      <div className="col-span-3">Measurements</div>
+                      <div className="col-span-3">Actions</div>
+                    </div>
+                    {selectedShapes.map((shape, index) => (
+                      <div
+                        key={shape.id}
+                        className="grid grid-cols-12 gap-2 items-center p-2 bg-muted/50 rounded-md"
+                        data-testid={`shape-row-${index}`}
+                      >
+                        <div className="col-span-1 text-sm text-muted-foreground">{index + 1}</div>
+                        <div className="col-span-5">
+                          <span className="text-sm font-medium capitalize">{shape.type} {index + 1}</span>
+                        </div>
+                        <div className="col-span-3 text-sm">{shape.measurements}</div>
+                        <div className="col-span-3 flex items-center gap-1">
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7"
+                                onClick={() => handleToggleShapeInclude(shape.id)}
+                                data-testid={`button-toggle-shape-include-${index}`}
+                              >
+                                <Checkbox checked={shape.include} className="pointer-events-none" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {shape.include ? "Included" : "Excluded"}
+                            </TooltipContent>
+                          </Tooltip>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7"
+                                onClick={() => handleToggleShapeVisibility(shape.id)}
+                                data-testid={`button-toggle-shape-visibility-${index}`}
+                              >
+                                {shape.visible ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {shape.visible ? "Hide on map" : "Show on map"}
+                            </TooltipContent>
+                          </Tooltip>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-7 w-7 text-destructive hover:text-destructive"
+                                onClick={() => handleRemoveShape(shape.id)}
+                                data-testid={`button-remove-shape-${index}`}
+                              >
+                                <Minus className="h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Remove</TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {selectedShapes.length === 0 && (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <img 
+                      src="https://via.placeholder.com/200x150?text=Draw+on+Map" 
+                      alt="Draw on map" 
+                      className="mx-auto mb-3 rounded-lg"
+                    />
+                    <p>Use the drawing tools to create proximity shapes</p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1 relative">
+          <MapboxMap
+            markers={mapMarkers}
+            circles={mapCircles}
+            routes={mapRoutes}
+            zones={mapZones}
+            drawingMode={drawingMode}
+            onShapeCreated={handleShapeCreated}
+            onShapeDeleted={handleShapeDeleted}
+          />
+
+          <div className="absolute top-4 right-4 flex flex-col gap-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="bg-white shadow-md"
+                  onClick={() => setShowPoiPanel(!showPoiPanel)}
+                  data-testid="button-toggle-poi"
+                >
+                  <MapPin className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="left">Search POIs</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={drawingMode === "circle" ? "default" : "outline"}
+                  size="icon"
+                  className={cn("shadow-md", drawingMode !== "circle" && "bg-white")}
+                  onClick={() => setDrawingMode(drawingMode === "circle" ? null : "circle")}
+                  data-testid="button-map-circle"
+                >
+                  <Circle className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="left">Draw Circle</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={drawingMode === "freeform" ? "default" : "outline"}
+                  size="icon"
+                  className={cn("shadow-md", drawingMode !== "freeform" && "bg-white")}
+                  onClick={() => setDrawingMode(drawingMode === "freeform" ? null : "freeform")}
+                  data-testid="button-map-freeform"
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="left">Freeform Draw</TooltipContent>
+            </Tooltip>
+          </div>
+
+          {showPoiPanel && (
+            <div className="absolute top-4 left-4 w-72 bg-white rounded-lg shadow-lg p-4" data-testid="poi-panel">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-medium">Search POIs</h3>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={() => setShowPoiPanel(false)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground mb-3">Maximum 5 POI labels can be added</p>
+              
+              <div className="flex flex-wrap gap-1 mb-3">
+                {poiCategories.map(cat => (
+                  <Badge key={cat} variant="secondary" className="gap-1">
+                    {cat}
+                    <button onClick={() => handleRemovePoiCategory(cat)}>
+                      <X className="h-3 w-3" />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+
+              <div className="flex gap-2 mb-3">
+                <Input
+                  placeholder="Add category..."
+                  value={poiSearch}
+                  onChange={(e) => setPoiSearch(e.target.value)}
+                  className="flex-1"
+                  data-testid="input-poi-category"
+                />
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    if (poiSearch && poiCategories.length < 5) {
+                      handleAddPoiCategory(poiSearch);
+                      setPoiSearch("");
+                    }
+                  }}
+                  disabled={!poiSearch || poiCategories.length >= 5}
+                  data-testid="button-add-poi-category"
+                >
+                  Find POIs
+                </Button>
+              </div>
+
+              {pois.length > 0 && (
+                <div className="max-h-40 overflow-auto space-y-2">
+                  {pois.slice(0, 10).map(poi => (
+                    <div key={poi.id} className="p-2 bg-muted/50 rounded text-sm">
+                      <div className="font-medium">{poi.name}</div>
+                      <div className="text-xs text-muted-foreground">{poi.category}</div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="absolute bottom-4 left-4 flex gap-2">
+            <div className="bg-white rounded-lg shadow-md px-3 py-2 flex items-center gap-4 text-xs">
+              <div className="flex items-center gap-1.5">
+                <Train className="h-4 w-4 text-blue-600" />
+                <span>MRT/LRT</span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Bus className="h-4 w-4 text-green-600" />
+                <span>Bus</span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Car className="h-4 w-4 text-amber-600" />
+                <span>Taxi Zone</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t px-6 py-4 flex justify-end gap-3">
+        <Button variant="outline" onClick={handleCancel} data-testid="button-cancel">
+          Cancel
+        </Button>
+        <Button onClick={handleDone} data-testid="button-done">
+          Done
+        </Button>
+      </div>
+    </div>
+  );
+}