adserver-dashboard 1.0.0

package/client/src/components/line-items/geofencing/SelectedLocationsSidebar.tsx

@@ -0,0 +1,436 @@
+import { useState, useMemo } from 'react';
+import { useTranslation } from '@/lib/i18n';
+import { Button } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { Checkbox } from '@moving-walls/design-system';
+import { ScrollArea } from '@moving-walls/design-system';
+import { Chip } from '@moving-walls/design-system';
+import { Tooltip } from '@moving-walls/design-system';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@moving-walls/design-system';
+import {
+  Search,
+  Trash2,
+  Plus,
+  MapPin,
+  AlertTriangle,
+  FileDown,
+} from 'lucide-react';
+import { cn } from '@moving-walls/design-system';
+
+interface LocationItem {
+  id: string;
+  itemType?: string;
+  type?: string;
+  geometry?: {
+    type: 'Point' | 'Polygon' | 'Circle';
+    coordinates: any;
+  };
+  properties?: {
+    name?: string;
+    address?: string;
+    included?: boolean;
+    pois?: string[];
+  };
+  poi?: string[];
+  enabled?: boolean;
+  metadata?: Record<string, string>;
+}
+
+interface SelectedLocationsSidebarProps {
+  locations: LocationItem[];
+  selectedLocationId: string | null;
+  onLocationSelect: (location: LocationItem) => void;
+  onLocationToggle: (id: string, enabled: boolean) => void;
+  onLocationDelete: (id: string) => void;
+  onAddPOI: (location: LocationItem) => void;
+  onRemovePOI: (locationId: string, poiId: string) => void;
+  onImportLocations?: () => void;
+  addPOIModeActive?: boolean;
+  onSetAddPOIMode?: (mode: boolean) => void;
+  className?: string;
+}
+
+const MAX_POIS = 5;
+
+const getChipDisplayName = (item: LocationItem, poi: string) => {
+  const metadata = item.metadata;
+  if (metadata) {
+    const poiMetadata = metadata[poi];
+    if (poiMetadata) {
+      const poiData = JSON.parse(poiMetadata);
+      return poiData.displayName;
+    }
+  }
+  return "";
+};
+
+export function SelectedLocationsSidebar({
+  locations,
+  selectedLocationId,
+  onLocationSelect,
+  onLocationToggle,
+  onLocationDelete,
+  onAddPOI,
+  onRemovePOI,
+  onImportLocations,
+  addPOIModeActive = false,
+  onSetAddPOIMode,
+  className,
+}: SelectedLocationsSidebarProps) {
+  const { t } = useTranslation('lineItems');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [includeAll, setIncludeAll] = useState(true);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [locationToDelete, setLocationToDelete] = useState<LocationItem | null>(null);
+
+  const handleDeleteClick = (location: LocationItem) => {
+    setLocationToDelete(location);
+    setDeleteConfirmOpen(true);
+    if (onSetAddPOIMode) {
+      onSetAddPOIMode(false);
+    }
+  };
+
+  const handleConfirmDelete = () => {
+    if (locationToDelete) {
+      onLocationDelete(locationToDelete.id);
+    }
+    setDeleteConfirmOpen(false);
+    setLocationToDelete(null);
+  };
+
+  const handleLocationClick = (location: LocationItem) => {
+    if (onSetAddPOIMode) {
+      onSetAddPOIMode(false);
+    }
+    onLocationSelect(location);
+  };
+
+  const filteredLocations = useMemo(() => {
+    if (!searchQuery.trim()) return locations;
+    const query = searchQuery.toLowerCase();
+    return locations.filter((loc) => {
+      const name = getLocationName(loc).toLowerCase();
+      const address = loc.properties?.address?.toLowerCase() || '';
+      return name.includes(query) || address.includes(query);
+    });
+  }, [locations, searchQuery]);
+
+  const handleIncludeAllChange = () => {
+    const newValue = !includeAll;
+    setIncludeAll(newValue);
+    locations.forEach((loc) => {
+      onLocationToggle(loc.id, newValue);
+    });
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col h-full overflow-hidden bg-white dark:bg-mw-neutral-900',
+        'border-l border-mw-neutral-200 dark:border-mw-neutral-700',
+        className
+      )}
+    >
+      <div className="p-4 border-b border-mw-neutral-200 dark:border-mw-neutral-700">
+        <h3 className="text-sm font-semibold text-mw-neutral-900 dark:text-mw-neutral-100 mb-1">
+          {t('geofencing.locations.selectedLocations')}
+        </h3>
+        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400">
+          {t('geofencing.locations.manageLocations')}
+        </p>
+      </div>
+
+      <div className="p-3 border-b border-mw-neutral-200 dark:border-mw-neutral-700 space-y-3">
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400 z-10" />
+          <input
+            type="text"
+            placeholder={t('geofencing.locations.searchPlaceholder')}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-8 h-8 text-sm bg-white dark:bg-mw-neutral-800 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-md focus:outline-none focus:ring-2 focus:ring-mw-primary-500"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="include-all"
+            checked={includeAll}
+            onChange={handleIncludeAllChange}
+          />
+          <label
+            htmlFor="include-all"
+            className="text-xs text-mw-neutral-600 dark:text-mw-neutral-400 cursor-pointer"
+          >
+            {t('geofencing.locations.includeAll')}
+          </label>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="p-2 space-y-2">
+          {filteredLocations.length === 0 ? (
+            <div className="px-3 py-8 text-center">
+              <MapPin className="h-8 w-8 mx-auto text-mw-neutral-300 dark:text-mw-neutral-600 mb-2" />
+              <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">
+                {locations.length === 0
+                  ? t('geofencing.locations.noLocationsAdded')
+                  : t('geofencing.locations.noLocationsMatch')}
+              </p>
+            </div>
+          ) : (
+            filteredLocations.map((location, index) => (
+              <LocationCard
+                key={location.id}
+                location={location}
+                index={index}
+                isSelected={selectedLocationId === location.id}
+                onSelect={() => handleLocationClick(location)}
+                onToggle={(enabled) => onLocationToggle(location.id, enabled)}
+                onDelete={() => handleDeleteClick(location)}
+                onAddPOI={() => onAddPOI(location)}
+                onRemovePOI={(poiId) => {
+                  if (onSetAddPOIMode) {
+                    onSetAddPOIMode(false);
+                  }
+                  onRemovePOI(location.id, poiId);
+                }}
+                addPOIModeActive={addPOIModeActive && selectedLocationId === location.id}
+                onSetAddPOIMode={onSetAddPOIMode}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+
+      <div className="p-2">
+        <Button
+          id="import-locations-button"
+          type="button"
+          variant="outline"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onImportLocations?.();
+          }}
+          className="w-full inline-flex gap-2 outline-mw-primary-500 text-mw-primary-500"
+        >
+          <FileDown className="h-4 w-4 text-mw-primary-500" />
+          {t('geofencing.locations.importLocations')}
+        </Button>
+      </div>
+
+      <div className="p-3 border-t border-mw-neutral-200 dark:border-mw-neutral-700">
+        <p className="text-xs text-mw-neutral-500 dark:text-mw-neutral-400 text-center">
+          {locations.length === 1 
+            ? t('geofencing.locations.locationsAdded', { count: locations.length })
+            : t('geofencing.locations.locationsAdded_plural', { count: locations.length })}
+        </p>
+      </div>
+
+      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-mw-error-500" />
+              {t('geofencing.locations.deleteLocation')}
+            </DialogTitle>
+            <DialogDescription>
+              {t('geofencing.locations.deleteConfirmation')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            {locationToDelete && (
+              <div className="p-3 bg-mw-neutral-50 dark:bg-mw-neutral-800 rounded-md">
+                <p className="font-medium text-sm">{getLocationName(locationToDelete)}</p>
+                {locationToDelete.properties?.address && (
+                  <p className="text-xs text-mw-neutral-500 mt-1">
+                    {locationToDelete.properties.address}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+          <DialogFooter className="flex gap-2 sm:gap-0">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDeleteConfirmOpen(false)}
+            >
+              {t('geofencing.locations.cancel')}
+            </Button>
+            <Button
+              type="button"
+              variant="primary"
+              className="bg-mw-error-500 hover:bg-mw-error-600 text-white"
+              onClick={handleConfirmDelete}
+            >
+              {t('geofencing.locations.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+interface LocationCardProps {
+  location: LocationItem;
+  index: number;
+  isSelected: boolean;
+  onSelect: () => void;
+  onToggle: (enabled: boolean) => void;
+  onDelete: () => void;
+  onAddPOI: () => void;
+  onRemovePOI: (poiId: string) => void;
+  addPOIModeActive: boolean;
+  onSetAddPOIMode?: (mode: boolean) => void;
+}
+
+function LocationCard({
+  location,
+  index,
+  isSelected,
+  onSelect,
+  onToggle,
+  onDelete,
+  onAddPOI,
+  onRemovePOI,
+  addPOIModeActive,
+  onSetAddPOIMode,
+}: LocationCardProps) {
+  const { t } = useTranslation('lineItems');
+  const itemName = getLocationName(location);
+  const itemAddress = location.properties?.address;
+  const pois = location.poi || location.properties?.pois || [];
+  const isEnabled = location.enabled !== false && location.properties?.included !== false;
+
+  return (
+    <div
+      key={`${location.itemType || 'location'}-${location.id}`}
+      onClick={() => {
+        onSelect();
+        if (onSetAddPOIMode) {
+          onSetAddPOIMode(false);
+        }
+      }}
+      className={`rounded-md m-2 p-2 transition-all cursor-pointer shadow-sm ${
+        isSelected
+          ? "bg-mw-primary-50 border-2 border-mw-primary-500"
+          : "bg-white hover:bg-mw-neutral-30 border border-mw-neutral-200"
+      }`}
+    >
+      <div className="flex items-start gap-3 space-y-1">
+        <Checkbox
+          checked={isEnabled}
+          onChange={(e) => {
+            e.stopPropagation();
+            onToggle(!isEnabled);
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+
+        <div className="flex-1 min-w-0 inline-flex items-center gap-2 font-medium text-sm text-mw-neutral-900">
+          <Tooltip content={itemName}>
+            <div className="max-w-[120px] truncate">{itemName}</div>
+          </Tooltip>
+          <Badge variant="secondary" className="capitalize text-xs px-1.5 py-0.5">
+            {location.metadata?.type || getLocationType(location)}
+          </Badge>
+        </div>
+
+        <Button
+          variant="destructive"
+          size="sm"
+          isIconOnly
+          id={"delete-location-button-" + (index + 1)}
+          onClick={(e) => {
+            e.stopPropagation();
+            if (onSetAddPOIMode) {
+              onSetAddPOIMode(false);
+            }
+            onDelete();
+          }}
+          className="flex-shrink-0"
+          title={t('geofencing.locations.deleteLocation')}
+        >
+          <Trash2 className="h-4 w-4 text-red-500" />
+        </Button>
+      </div>
+      {itemAddress && (
+        <div className="text-xs text-secondary my-1.5 line-clamp-2">
+          {itemAddress}
+        </div>
+      )}
+      {pois.length > 0 && (
+        <div className="pois-wrapper my-1.5 flex flex-wrap gap-2">
+          {pois.map((poi, poiIndex) => (
+            <Chip
+              key={"poi-" + poiIndex}
+              size="sm"
+              variant="outline"
+              className="rounded-xs"
+              onRemove={() => {
+                onRemovePOI(poi);
+              }}
+            >
+              {getChipDisplayName(location, poi)}
+            </Chip>
+          ))}
+        </div>
+      )}
+      <div className="flex items-center justify-start border-t-2 pt-2 border-container-border">
+        <div className={clsx(
+          "flex-1 text-xs",
+          pois.length >= 5
+            ? "text-mw-error-300"
+            : "text-secondary",
+        )}>
+          {pois.length >= 5
+            ? t('geofencing.locations.limitReached')
+            : t('geofencing.locations.addUpToPois')}
+        </div>
+        <Button
+          variant="outline"
+          id={"add-poi-button-" + (index + 1)}
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onSelect();
+            onAddPOI();
+          }}
+          disabled={pois.length >= 5}
+          className="outline-mw-primary-500 text-mw-primary-500 cursor-pointer"
+        >
+          <Plus className="h-4 w-4 text-mw-primary-500" />
+          {t('geofencing.locations.addPoi')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function getLocationName(location: LocationItem): string {
+  if (location.properties?.name) return location.properties.name;
+  const type = location.geometry?.type || 'Location';
+  return `${type} ${location.id.substring(0, 6)}`;
+}
+
+function getLocationType(location: LocationItem): string {
+  if (location.metadata?.type) return location.metadata.type;
+  if ((location.properties as any)?.locationType) return (location.properties as any).locationType;
+  if (location.properties?.address) return 'address';
+  if (location.geometry?.type === 'Point') return 'point';
+  if (location.geometry?.type === 'Polygon') return 'polygon';
+  if (location.geometry?.type === 'Circle') return 'circle';
+  return 'location';
+}

package/client/src/components/line-items/geofencing/ViewFileLocationDrawer.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@moving-walls/design-system';
+import { Button } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { Checkbox } from '@moving-walls/design-system';
+import { ScrollArea } from '@moving-walls/design-system';
+import { Input } from '@moving-walls/design-system';
+import { MapPin, Loader2, Search, CheckCircle } from 'lucide-react';
+import { fetchGeoImportLocations, setSelectedLocations, addSelectedLocation, removeSelectedLocation, clearSelectedLocations } from '@/store/mapMarkerLocationsSlice';
+import type { AppDispatch, RootState } from '@/store';
+import type { GeoImportFile, MapMarkerLocation } from '@/types/geofencing';
+
+interface ViewFileLocationDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  file: GeoImportFile | null;
+  onConfirm?: (locations: MapMarkerLocation[]) => void;
+}
+
+export function ViewFileLocationDrawer({
+  open,
+  onOpenChange,
+  file,
+  onConfirm,
+}: ViewFileLocationDrawerProps) {
+  const dispatch = useDispatch<AppDispatch>();
+  const { locations, selectedLocations, isLoading } = useSelector(
+    (state: RootState) => state.mapMarkerLocations
+  );
+
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    if (open && file) {
+      dispatch(fetchGeoImportLocations(file.id));
+      dispatch(clearSelectedLocations());
+    }
+  }, [open, file, dispatch]);
+
+  const filteredLocations = locations.filter((location) =>
+    location.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    location.address?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isAllSelected = filteredLocations.length > 0 && 
+    filteredLocations.every((loc) => 
+      selectedLocations.some((selected) => selected.id === loc.id)
+    );
+
+  const handleSelectAll = () => {
+    if (isAllSelected) {
+      dispatch(clearSelectedLocations());
+    } else {
+      dispatch(setSelectedLocations(filteredLocations));
+    }
+  };
+
+  const handleToggleLocation = (location: MapMarkerLocation) => {
+    const isSelected = selectedLocations.some((selected) => selected.id === location.id);
+    if (isSelected) {
+      dispatch(removeSelectedLocation(location.id));
+    } else {
+      dispatch(addSelectedLocation(location));
+    }
+  };
+
+  const handleConfirm = () => {
+    onConfirm?.(selectedLocations);
+    onOpenChange(false);
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader className="pb-4 border-b border-mw-neutral-200">
+          <SheetTitle className="flex items-center gap-2">
+            <MapPin className="h-5 w-5 text-mw-primary-500" />
+            View Locations
+          </SheetTitle>
+          {file && (
+            <p className="text-sm text-mw-neutral-600 mt-1">
+              {file.originalName || file.fileName}
+            </p>
+          )}
+        </SheetHeader>
+
+        <div className="py-4 space-y-4 flex flex-col h-[calc(100vh-180px)]">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+            <Input
+              placeholder="Search locations..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="select-all"
+                checked={isAllSelected}
+                onChange={handleSelectAll}
+              />
+              <label
+                htmlFor="select-all"
+                className="text-sm text-mw-neutral-700 cursor-pointer"
+              >
+                Select All
+              </label>
+            </div>
+            <Badge variant="secondary">
+              {selectedLocations.length} / {filteredLocations.length} selected
+            </Badge>
+          </div>
+
+          <ScrollArea className="flex-1">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-8 w-8 text-mw-primary-500 animate-spin" />
+              </div>
+            ) : filteredLocations.length === 0 ? (
+              <div className="text-center py-12">
+                <MapPin className="h-12 w-12 text-mw-neutral-300 mx-auto mb-3" />
+                <p className="text-sm text-mw-neutral-600">No locations found</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filteredLocations.map((location) => {
+                  const isSelected = selectedLocations.some(
+                    (selected) => selected.id === location.id
+                  );
+                  return (
+                    <div
+                      key={location.id}
+                      className={`flex items-start gap-3 p-3 rounded-lg border transition-colors cursor-pointer ${
+                        isSelected
+                          ? 'border-mw-primary-500 bg-mw-primary-50'
+                          : 'border-mw-neutral-200 hover:border-mw-neutral-300'
+                      }`}
+                      onClick={() => handleToggleLocation(location)}
+                    >
+                      <Checkbox
+                        checked={isSelected}
+                        onChange={() => handleToggleLocation(location)}
+                        className="mt-0.5"
+                      />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-mw-neutral-900 truncate">
+                          {location.name}
+                        </p>
+                        {location.address && (
+                          <p className="text-xs text-mw-neutral-500 truncate mt-0.5">
+                            {location.address}
+                          </p>
+                        )}
+                        <div className="flex items-center gap-3 mt-1 text-xs text-mw-neutral-400">
+                          <span>Lat: {location.latitude.toFixed(6)}</span>
+                          <span>Lng: {location.longitude.toFixed(6)}</span>
+                          {location.radius && <span>Radius: {location.radius}m</span>}
+                        </div>
+                      </div>
+                      {isSelected && (
+                        <CheckCircle className="h-5 w-5 text-mw-primary-500 flex-shrink-0" />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </ScrollArea>
+        </div>
+
+        <div className="pt-4 border-t border-mw-neutral-200 flex gap-3">
+          <Button
+            variant="outline"
+            className="flex-1"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="flex-1"
+            onClick={handleConfirm}
+            disabled={selectedLocations.length === 0}
+          >
+            Add {selectedLocations.length} Location{selectedLocations.length !== 1 ? 's' : ''}
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}