adserver-dashboard 1.0.0

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

@@ -0,0 +1,699 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import mapboxgl from "mapbox-gl";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Search, MapPin, X, Globe, Loader2, Store, ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useQuery } from "@tanstack/react-query";
+import type { POI } from "@shared/schema";
+import "mapbox-gl/dist/mapbox-gl.css";
+
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_PUBLIC_KEY || "";
+
+interface SelectedLocation {
+  id: string;
+  name: string;
+  fullName: string;
+  type: string;
+  coordinates: [number, number];
+}
+
+interface GeographySelectorProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  allowedCountries?: string[];
+  disabled?: boolean;
+  showPOIs?: boolean;
+  selectedPOIs?: string[];
+  onPOIChange?: (pois: string[]) => void;
+}
+
+interface SearchResult {
+  id: string;
+  place_name: string;
+  text: string;
+  place_type: string[];
+  center: [number, number];
+  context?: Array<{ id: string; text: string; short_code?: string }>;
+}
+
+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 },
+  Indonesia: { lng: 106.8456, lat: -6.2088, zoom: 4 },
+  Philippines: { lng: 121.774, lat: 12.8797, zoom: 5 },
+  "United States": { lng: -98.5795, lat: 39.8283, zoom: 3 },
+  "United Kingdom": { lng: -3.436, lat: 55.3781, zoom: 5 },
+  Australia: { lng: 133.7751, lat: -25.2744, zoom: 3 },
+  Japan: { lng: 138.2529, lat: 36.2048, zoom: 5 },
+  "South Korea": { lng: 127.7669, lat: 35.9078, zoom: 6 },
+  India: { lng: 78.9629, lat: 20.5937, zoom: 4 },
+  Germany: { lng: 10.4515, lat: 51.1657, zoom: 5 },
+  France: { lng: 2.2137, lat: 46.2276, zoom: 5 },
+  "United Arab Emirates": { lng: 53.9045, lat: 23.4241, zoom: 5 },
+  "Saudi Arabia": { lng: 45.0792, lat: 23.8859, zoom: 4 },
+};
+
+const COUNTRY_CODES: Record<string, string> = {
+  Malaysia: "my",
+  Singapore: "sg",
+  Thailand: "th",
+  Indonesia: "id",
+  Philippines: "ph",
+  "United States": "us",
+  "United Kingdom": "gb",
+  Australia: "au",
+  Japan: "jp",
+  "South Korea": "kr",
+  India: "in",
+  Germany: "de",
+  France: "fr",
+  "United Arab Emirates": "ae",
+  "Saudi Arabia": "sa",
+};
+
+function MapComponent({
+  center,
+  zoom,
+  selectedLocations,
+  pois,
+  selectedPOIs,
+  onPOIClick,
+  onMapReady,
+}: {
+  center: { lng: number; lat: number };
+  zoom: number;
+  selectedLocations: SelectedLocation[];
+  pois: POI[];
+  selectedPOIs: string[];
+  onPOIClick?: (poiId: string) => void;
+  onMapReady?: (map: mapboxgl.Map) => void;
+}) {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
+  const locationMarkersRef = useRef<mapboxgl.Marker[]>([]);
+  const poiMarkersRef = 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");
+
+    if (onMapReady) {
+      onMapReady(map.current);
+    }
+
+    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;
+
+    locationMarkersRef.current.forEach((marker) => marker.remove());
+    locationMarkersRef.current = [];
+
+    selectedLocations.forEach((location) => {
+      if (location.coordinates[0] !== 0 && location.coordinates[1] !== 0) {
+        const el = document.createElement("div");
+        el.className = "flex items-center justify-center w-8 h-8 bg-primary text-primary-foreground rounded-full shadow-lg";
+        el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>';
+
+        const marker = new mapboxgl.Marker(el)
+          .setLngLat([location.coordinates[0], location.coordinates[1]])
+          .setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML(`<strong>${location.name}</strong><p class="text-sm">${location.fullName}</p>`))
+          .addTo(map.current!);
+
+        locationMarkersRef.current.push(marker);
+      }
+    });
+  }, [selectedLocations]);
+
+  useEffect(() => {
+    if (!map.current) return;
+
+    poiMarkersRef.current.forEach((marker) => marker.remove());
+    poiMarkersRef.current = [];
+
+    pois.forEach((poi) => {
+      const isSelected = selectedPOIs.includes(poi.id);
+      const el = document.createElement("div");
+      el.className = `flex items-center justify-center w-6 h-6 ${isSelected ? 'bg-amber-500' : 'bg-amber-400/70'} text-white rounded-full shadow-md cursor-pointer`;
+      el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/></svg>';
+      
+      if (onPOIClick) {
+        el.addEventListener("click", (e) => {
+          e.stopPropagation();
+          onPOIClick(poi.id);
+        });
+      }
+
+      const popup = new mapboxgl.Popup({ offset: 20, closeButton: false })
+        .setHTML(`<div class="p-1"><strong class="text-sm">${poi.name}</strong><p class="text-xs text-muted-foreground">${poi.category}</p>${poi.address ? `<p class="text-xs">${poi.address}</p>` : ''}</div>`);
+
+      const marker = new mapboxgl.Marker(el)
+        .setLngLat([poi.longitude, poi.latitude])
+        .setPopup(popup)
+        .addTo(map.current!);
+
+      poiMarkersRef.current.push(marker);
+    });
+  }, [pois, selectedPOIs, onPOIClick]);
+
+  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 className="relative h-full w-full">
+      <div ref={mapContainer} className="h-full w-full" />
+      <div className="absolute bottom-4 left-4 bg-background/90 backdrop-blur-sm border rounded-lg p-2 text-xs shadow-md">
+        <div className="font-semibold mb-1">Legend</div>
+        <div className="flex items-center gap-2 mb-1">
+          <div className="w-4 h-4 bg-primary rounded-full flex items-center justify-center">
+            <MapPin className="h-2.5 w-2.5 text-primary-foreground" />
+          </div>
+          <span>Selected Locations</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 bg-amber-500 rounded-full flex items-center justify-center">
+            <Store className="h-2.5 w-2.5 text-white" />
+          </div>
+          <span>Points of Interest</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface GeographySelectorSheetProps extends GeographySelectorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function GeographySelectorSheet({
+  value,
+  onChange,
+  allowedCountries = [],
+  open,
+  onOpenChange,
+  showPOIs = true,
+  selectedPOIs = [],
+  onPOIChange,
+}: GeographySelectorSheetProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [poiSearchQuery, setPOISearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [selectedLocations, setSelectedLocations] = useState<SelectedLocation[]>(() => {
+    return value.map((v, index) => {
+      try {
+        return JSON.parse(v);
+      } catch {
+        return {
+          id: `legacy-${index}`,
+          name: v,
+          fullName: v,
+          type: "place",
+          coordinates: [0, 0] as [number, number],
+        };
+      }
+    });
+  });
+  const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
+  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+
+  const primaryCountry = allowedCountries[0] || "Malaysia";
+  const centerData = COUNTRY_CENTERS[primaryCountry] || COUNTRY_CENTERS.Malaysia;
+
+  const { data: pois = [], isLoading: isPOIsLoading } = useQuery<POI[]>({
+    queryKey: ["/api/pois", allowedCountries],
+    enabled: open && showPOIs && allowedCountries.length > 0,
+  });
+
+  const filteredPOIs = useMemo(() => {
+    if (!poiSearchQuery.trim()) return pois;
+    const query = poiSearchQuery.toLowerCase();
+    return pois.filter(poi => 
+      poi.name.toLowerCase().includes(query) ||
+      poi.category.toLowerCase().includes(query) ||
+      (poi.city && poi.city.toLowerCase().includes(query))
+    );
+  }, [pois, poiSearchQuery]);
+
+  const poisByCategory = useMemo(() => {
+    const grouped: Record<string, POI[]> = {};
+    filteredPOIs.forEach(poi => {
+      if (!grouped[poi.category]) {
+        grouped[poi.category] = [];
+      }
+      grouped[poi.category].push(poi);
+    });
+    return grouped;
+  }, [filteredPOIs]);
+
+  const relevantPOIs = useMemo(() => {
+    if (!allowedCountries.length) return filteredPOIs;
+    return filteredPOIs.filter(poi => allowedCountries.includes(poi.country));
+  }, [filteredPOIs, allowedCountries]);
+
+  useEffect(() => {
+    const newLocations = value.map((v, index) => {
+      try {
+        return JSON.parse(v);
+      } catch {
+        return {
+          id: `legacy-${index}`,
+          name: v,
+          fullName: v,
+          type: "place",
+          coordinates: [0, 0] as [number, number],
+        };
+      }
+    });
+    setSelectedLocations(newLocations);
+  }, [value]);
+
+  useEffect(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    setIsSearching(true);
+    searchTimeoutRef.current = setTimeout(async () => {
+      try {
+        let countryFilter = "";
+        if (allowedCountries.length > 0) {
+          const countryCodes = allowedCountries.map(c => {
+            const code = COUNTRY_CODES[c];
+            if (!code) {
+              console.warn(`Warning: Country "${c}" does not have a mapped ISO code.`);
+            }
+            return code || "";
+          }).filter(Boolean);
+          countryFilter = countryCodes.length > 0 ? `&country=${countryCodes.join(",")}` : "";
+        }
+        
+        const response = await fetch(
+          `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(searchQuery)}.json?access_token=${MAPBOX_TOKEN}&types=place,locality,neighborhood,address,poi&limit=10${countryFilter}`
+        );
+        
+        if (response.ok) {
+          const data = await response.json();
+          setSearchResults(data.features || []);
+        }
+      } catch (error) {
+        console.error("Geocoding error:", error);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 300);
+
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [searchQuery, allowedCountries]);
+
+  const handleSelectLocation = useCallback((result: SearchResult) => {
+    const existingIds = new Set(selectedLocations.map(l => l.id));
+    if (existingIds.has(result.id)) return;
+
+    const newLocation: SelectedLocation = {
+      id: result.id,
+      name: result.text,
+      fullName: result.place_name,
+      type: result.place_type[0] || "place",
+      coordinates: result.center,
+    };
+
+    const updated = [...selectedLocations, newLocation];
+    setSelectedLocations(updated);
+    onChange(updated.map(l => JSON.stringify(l)));
+    setSearchQuery("");
+    setSearchResults([]);
+    
+    if (mapRef.current) {
+      mapRef.current.flyTo({
+        center: result.center,
+        zoom: 12,
+      });
+    }
+  }, [selectedLocations, onChange]);
+
+  const handleRemoveLocation = useCallback((id: string) => {
+    const updated = selectedLocations.filter(l => l.id !== id);
+    setSelectedLocations(updated);
+    onChange(updated.map(l => JSON.stringify(l)));
+  }, [selectedLocations, onChange]);
+
+  const handleClearAll = useCallback(() => {
+    setSelectedLocations([]);
+    onChange([]);
+  }, [onChange]);
+
+  const handlePOIToggle = useCallback((poiId: string) => {
+    if (!onPOIChange) return;
+    const newSelected = selectedPOIs.includes(poiId)
+      ? selectedPOIs.filter(id => id !== poiId)
+      : [...selectedPOIs, poiId];
+    onPOIChange(newSelected);
+  }, [selectedPOIs, onPOIChange]);
+
+  const toggleCategory = useCallback((category: string) => {
+    setExpandedCategories(prev => 
+      prev.includes(category) 
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    );
+  }, []);
+
+  const getLocationIcon = (type: string) => {
+    switch (type) {
+      case "poi":
+      case "address":
+        return <MapPin className="h-4 w-4" />;
+      case "neighborhood":
+        return <div className="h-4 w-4 rounded-full border-2 border-current" />;
+      case "locality":
+        return <div className="h-4 w-4 rounded bg-current opacity-60" />;
+      case "place":
+      default:
+        return <Globe className="h-4 w-4" />;
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-[900px] flex flex-col p-0">
+        <SheetHeader className="px-6 py-4 border-b">
+          <SheetTitle>Geography Targeting</SheetTitle>
+          <SheetDescription>
+            Search for and select geographic locations to target in your deal
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <div className="p-4 border-b">
+            <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 for a location..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 pr-9"
+                data-testid="input-geography-search"
+              />
+              {isSearching && (
+                <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
+              )}
+            </div>
+
+            {searchResults.length > 0 && (
+              <div className="absolute z-30 left-4 right-4 mt-1 bg-background border rounded-md shadow-lg max-h-[250px] overflow-y-auto">
+                {searchResults.map((result) => (
+                  <button
+                    key={result.id}
+                    className="w-full px-4 py-3 text-left hover-elevate flex items-start gap-3 border-b last:border-b-0"
+                    onClick={() => handleSelectLocation(result)}
+                    data-testid={`button-location-${result.id}`}
+                  >
+                    <span className="mt-0.5 text-muted-foreground">
+                      {getLocationIcon(result.place_type[0])}
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{result.text}</div>
+                      <div className="text-sm text-muted-foreground truncate">
+                        {result.place_name.replace(`${result.text}, `, "")}
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="flex-1 flex min-h-0">
+            <div className="flex-1 p-4">
+              <div className="h-full rounded-lg overflow-hidden border">
+                <MapComponent
+                  center={centerData}
+                  zoom={centerData.zoom}
+                  selectedLocations={selectedLocations}
+                  pois={relevantPOIs}
+                  selectedPOIs={selectedPOIs}
+                  onPOIClick={onPOIChange ? handlePOIToggle : undefined}
+                  onMapReady={(m) => { mapRef.current = m; }}
+                />
+              </div>
+            </div>
+
+            <div className="w-[300px] border-l flex flex-col">
+              <div className="p-3 border-b flex items-center justify-between">
+                <div>
+                  <h3 className="font-semibold text-sm">Selected Locations</h3>
+                  <p className="text-xs text-muted-foreground">{selectedLocations.length} selected</p>
+                </div>
+                {selectedLocations.length > 0 && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                    onClick={handleClearAll}
+                    data-testid="button-clear-locations"
+                  >
+                    Clear All
+                  </Button>
+                )}
+              </div>
+
+              <ScrollArea className="flex-1">
+                <div className="p-3">
+                  {selectedLocations.length === 0 ? (
+                    <div className="text-sm text-muted-foreground py-4 text-center">
+                      No locations selected
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {selectedLocations.map((location) => (
+                        <div
+                          key={location.id}
+                          className="flex items-start gap-2 p-2 rounded-md border"
+                        >
+                          <span className="mt-0.5 text-muted-foreground">
+                            {getLocationIcon(location.type)}
+                          </span>
+                          <div className="flex-1 min-w-0">
+                            <div className="font-medium text-sm truncate">{location.name}</div>
+                            <div className="text-xs text-muted-foreground truncate">
+                              {location.type}
+                            </div>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={() => handleRemoveLocation(location.id)}
+                            data-testid={`button-remove-location-${location.id}`}
+                          >
+                            <X className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {showPOIs && (
+                  <div className="border-t">
+                    <div className="p-3">
+                      <div className="flex items-center justify-between mb-2">
+                        <h3 className="font-semibold text-sm flex items-center gap-1.5">
+                          <Store className="h-4 w-4 text-amber-500" />
+                          Points of Interest
+                        </h3>
+                        {selectedPOIs.length > 0 && (
+                          <Badge variant="secondary" className="text-xs">
+                            {selectedPOIs.length} selected
+                          </Badge>
+                        )}
+                      </div>
+                      
+                      <div className="relative mb-3">
+                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                        <Input
+                          placeholder="Filter POIs..."
+                          value={poiSearchQuery}
+                          onChange={(e) => setPOISearchQuery(e.target.value)}
+                          className="h-8 pl-8 text-sm"
+                          data-testid="input-poi-search"
+                        />
+                      </div>
+
+                      {isPOIsLoading ? (
+                        <div className="flex items-center justify-center py-4">
+                          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                        </div>
+                      ) : Object.keys(poisByCategory).length === 0 ? (
+                        <div className="text-sm text-muted-foreground py-4 text-center">
+                          No POIs available
+                        </div>
+                      ) : (
+                        <div className="space-y-1">
+                          {Object.entries(poisByCategory).map(([category, categoryPOIs]) => {
+                            const selectedInCategory = categoryPOIs.filter(p => selectedPOIs.includes(p.id)).length;
+                            return (
+                              <Collapsible
+                                key={category}
+                                open={expandedCategories.includes(category)}
+                                onOpenChange={() => toggleCategory(category)}
+                              >
+                                <CollapsibleTrigger asChild>
+                                  <button
+                                    className="w-full flex items-center justify-between p-2 rounded-md hover-elevate text-sm"
+                                    data-testid={`button-category-${category}`}
+                                  >
+                                    <span className="flex items-center gap-2">
+                                      {expandedCategories.includes(category) ? (
+                                        <ChevronDown className="h-3.5 w-3.5" />
+                                      ) : (
+                                        <ChevronRight className="h-3.5 w-3.5" />
+                                      )}
+                                      <span className="font-medium">{category}</span>
+                                    </span>
+                                    <span className="text-xs text-muted-foreground">
+                                      {selectedInCategory > 0 && (
+                                        <span className="text-amber-500 mr-1">{selectedInCategory}/</span>
+                                      )}
+                                      {categoryPOIs.length}
+                                    </span>
+                                  </button>
+                                </CollapsibleTrigger>
+                                <CollapsibleContent>
+                                  <div className="pl-4 space-y-0.5">
+                                    {categoryPOIs.map(poi => (
+                                      <label
+                                        key={poi.id}
+                                        className="flex items-start gap-2 p-2 rounded-md cursor-pointer hover-elevate"
+                                        data-testid={`label-poi-${poi.id}`}
+                                      >
+                                        <Checkbox
+                                          checked={selectedPOIs.includes(poi.id)}
+                                          onCheckedChange={() => handlePOIToggle(poi.id)}
+                                          className="mt-0.5"
+                                          data-testid={`checkbox-poi-${poi.id}`}
+                                        />
+                                        <div className="flex-1 min-w-0">
+                                          <div className="text-sm truncate">{poi.name}</div>
+                                          <div className="text-xs text-muted-foreground truncate">
+                                            {poi.city}
+                                          </div>
+                                        </div>
+                                      </label>
+                                    ))}
+                                  </div>
+                                </CollapsibleContent>
+                              </Collapsible>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </ScrollArea>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-6 py-4 border-t flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">
+            {selectedLocations.length} location(s){selectedPOIs.length > 0 && `, ${selectedPOIs.length} POI(s)`} selected
+          </span>
+          <Button onClick={() => onOpenChange(false)} data-testid="button-geography-done">
+            Done
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export function GeographySelector(props: GeographySelectorProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedCount = props.value.length;
+  const poiCount = props.selectedPOIs?.length || 0;
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="outline"
+        className={cn(
+          "w-full justify-start text-left font-normal h-10",
+          !selectedCount && !poiCount && "text-muted-foreground"
+        )}
+        disabled={props.disabled}
+        onClick={() => setOpen(true)}
+        data-testid="button-geography-selector"
+      >
+        <MapPin className="h-4 w-4 mr-2" />
+        {selectedCount > 0 || poiCount > 0 ? (
+          <span>
+            {selectedCount > 0 && `${selectedCount} location${selectedCount !== 1 ? "s" : ""}`}
+            {selectedCount > 0 && poiCount > 0 && ", "}
+            {poiCount > 0 && `${poiCount} POI${poiCount !== 1 ? "s" : ""}`}
+            {" selected"}
+          </span>
+        ) : (
+          <span>Select locations...</span>
+        )}
+      </Button>
+      <GeographySelectorSheet
+        {...props}
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </>
+  );
+}