adserver-dashboard 1.0.0

package/client/src/components/inventory/inventory-map-view.tsx

@@ -0,0 +1,596 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useTranslation } from '@/lib/i18n';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { Button, cn } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { Checkbox } from '@moving-walls/design-system';
+import { Plus, Minus, Maximize2, X, MapPin, Eye } from 'lucide-react';
+
+interface InventoryTag {
+  label: string;
+  variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline';
+}
+
+interface InventoryItemForMap {
+  id: string;
+  name: string;
+  address: string;
+  tags: InventoryTag[];
+  thumbnail?: string;
+  latitude?: number;
+  longitude?: number;
+  type?: string;
+  format?: string;
+  mediaType?: string;
+  size?: string;
+  publisherName?: string;
+}
+
+interface InventoryMapViewProps {
+  inventories: InventoryItemForMap[];
+  selectedInventories: string[];
+  onSelectInventory: (inventoryId: string) => void;
+  onInventoryToggle: (inventoryId: string) => void;
+  onViewDetails?: (inventory: InventoryItemForMap) => void;
+  className?: string;
+  defaultCenter?: [number, number];
+  defaultZoom?: number;
+}
+
+const MAPBOX_TOKEN = "pk.eyJ1IjoibWF4aW5mbyIsImEiOiJjbWV2M2l6ZDMwZ2ZqMmtzaHUyMXc3bGl2In0.ttPa9Es1LK2herlw4ZM0Hw";
+
+const DEFAULT_CENTER: [number, number] = [139.6917, 35.6895];
+const DEFAULT_ZOOM = 10;
+
+export function InventoryMapView({
+  inventories,
+  selectedInventories,
+  onSelectInventory,
+  onInventoryToggle,
+  onViewDetails,
+  className,
+  defaultCenter = DEFAULT_CENTER,
+  defaultZoom = DEFAULT_ZOOM,
+}: InventoryMapViewProps) {
+  const { t } = useTranslation('inventory');
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
+  const popup = useRef<mapboxgl.Popup | null>(null);
+  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const [activePopupInventory, setActivePopupInventory] = useState<InventoryItemForMap | null>(null);
+
+  const getInventoryCoordinates = useCallback((inv: InventoryItemForMap): [number, number] | null => {
+    if (inv.latitude && inv.longitude) {
+      return [inv.longitude, inv.latitude];
+    }
+    return null;
+  }, []);
+
+  const createGeoJSONSource = useCallback(() => {
+    const features = inventories
+      .map((inv) => {
+        const coords = getInventoryCoordinates(inv);
+        if (!coords) return null;
+        
+        return {
+          type: 'Feature' as const,
+          properties: {
+            id: inv.id,
+            name: inv.name,
+            address: inv.address,
+            thumbnail: inv.thumbnail || '',
+            type: inv.type || 'screen',
+            format: inv.format || '',
+            mediaType: inv.mediaType || '',
+            size: inv.size || '',
+            publisherName: inv.publisherName || '',
+            isSelected: selectedInventories.includes(inv.id),
+            tags: JSON.stringify(inv.tags || []),
+          },
+          geometry: {
+            type: 'Point' as const,
+            coordinates: coords,
+          },
+        };
+      })
+      .filter((f): f is NonNullable<typeof f> => f !== null);
+
+    return {
+      type: 'FeatureCollection' as const,
+      features,
+    };
+  }, [inventories, selectedInventories, getInventoryCoordinates]);
+
+  const initializeMap = useCallback(() => {
+    if (!mapContainer.current || map.current) return;
+
+    mapboxgl.accessToken = MAPBOX_TOKEN;
+
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: defaultCenter,
+      zoom: defaultZoom,
+    });
+
+    map.current.on('load', () => {
+      if (!map.current) return;
+
+      map.current.addSource('inventories', {
+        type: 'geojson',
+        data: createGeoJSONSource(),
+        cluster: true,
+        clusterMaxZoom: 14,
+        clusterRadius: 50,
+      });
+
+      map.current.addLayer({
+        id: 'clusters',
+        type: 'circle',
+        source: 'inventories',
+        filter: ['has', 'point_count'],
+        paint: {
+          'circle-color': [
+            'step',
+            ['get', 'point_count'],
+            '#2176cc',
+            10,
+            '#1e5fa8',
+            30,
+            '#194d8a',
+          ],
+          'circle-radius': [
+            'step',
+            ['get', 'point_count'],
+            20,
+            10,
+            25,
+            30,
+            30,
+          ],
+          'circle-stroke-width': 2,
+          'circle-stroke-color': '#ffffff',
+        },
+      });
+
+      map.current.addLayer({
+        id: 'cluster-count',
+        type: 'symbol',
+        source: 'inventories',
+        filter: ['has', 'point_count'],
+        layout: {
+          'text-field': ['get', 'point_count_abbreviated'],
+          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+          'text-size': 12,
+        },
+        paint: {
+          'text-color': '#ffffff',
+        },
+      });
+
+      map.current.addLayer({
+        id: 'unclustered-point',
+        type: 'circle',
+        source: 'inventories',
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+          'circle-color': [
+            'case',
+            ['get', 'isSelected'],
+            '#22c55e',
+            '#2176cc',
+          ],
+          'circle-radius': 8,
+          'circle-stroke-width': 2,
+          'circle-stroke-color': '#ffffff',
+        },
+      });
+
+      map.current.addLayer({
+        id: 'unclustered-point-icon',
+        type: 'symbol',
+        source: 'inventories',
+        filter: ['!', ['has', 'point_count']],
+        layout: {
+          'icon-image': 'marker-15',
+          'icon-size': 1.2,
+          'icon-allow-overlap': true,
+        },
+      });
+
+      map.current.on('click', 'clusters', (e) => {
+        if (!map.current) return;
+        const features = map.current.queryRenderedFeatures(e.point, {
+          layers: ['clusters'],
+        });
+        const clusterId = features[0]?.properties?.cluster_id;
+        const source = map.current.getSource('inventories') as mapboxgl.GeoJSONSource;
+        
+        source.getClusterExpansionZoom(clusterId, (err, zoom) => {
+          if (err || !map.current || zoom === null || zoom === undefined) return;
+          
+          const geometry = features[0].geometry;
+          if (geometry.type === 'Point') {
+            map.current.easeTo({
+              center: geometry.coordinates as [number, number],
+              zoom: zoom,
+            });
+          }
+        });
+      });
+
+      map.current.on('click', 'unclustered-point', (e) => {
+        if (!map.current || !e.features || e.features.length === 0) return;
+        
+        const feature = e.features[0];
+        const properties = feature.properties;
+        const geometry = feature.geometry;
+        
+        if (geometry.type !== 'Point') return;
+        
+        const coordinates = geometry.coordinates.slice() as [number, number];
+        
+        const inv = inventories.find((i) => i.id === properties?.id);
+        if (inv) {
+          setActivePopupInventory(inv);
+          showPopup(coordinates, inv);
+        }
+      });
+
+      map.current.on('mouseenter', 'clusters', () => {
+        if (map.current) {
+          map.current.getCanvas().style.cursor = 'pointer';
+        }
+      });
+
+      map.current.on('mouseleave', 'clusters', () => {
+        if (map.current) {
+          map.current.getCanvas().style.cursor = '';
+        }
+      });
+
+      map.current.on('mouseenter', 'unclustered-point', () => {
+        if (map.current) {
+          map.current.getCanvas().style.cursor = 'pointer';
+        }
+      });
+
+      map.current.on('mouseleave', 'unclustered-point', () => {
+        if (map.current) {
+          map.current.getCanvas().style.cursor = '';
+        }
+      });
+
+      setIsMapLoaded(true);
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [defaultCenter, defaultZoom, createGeoJSONSource, inventories]);
+
+  const showPopup = useCallback((coordinates: [number, number], inv: InventoryItemForMap) => {
+    if (!map.current) return;
+
+    if (popup.current) {
+      popup.current.remove();
+    }
+
+    const isSelected = selectedInventories.includes(inv.id);
+    const tags: InventoryTag[] = inv.tags || [];
+    const selectText = isSelected ? t('map.legendSelected') : t('map.select');
+    const viewDetailsText = t('map.viewDetails');
+
+    const popupContent = document.createElement('div');
+    popupContent.className = 'inventory-popup-content';
+    popupContent.innerHTML = `
+      <div class="p-3 min-w-[280px] max-w-[320px]">
+        <div class="flex gap-3">
+          ${inv.thumbnail ? `
+            <div class="flex-shrink-0">
+              <img 
+                src="${inv.thumbnail}" 
+                alt="${inv.name}"
+                class="w-16 h-16 object-cover rounded-lg border border-gray-200"
+                onerror="this.style.display='none'"
+              />
+            </div>
+          ` : `
+            <div class="flex-shrink-0 w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+                <rect width="20" height="14" x="2" y="3" rx="2"/>
+                <line x1="8" x2="16" y1="21" y2="21"/>
+                <line x1="12" x2="12" y1="17" y2="21"/>
+              </svg>
+            </div>
+          `}
+          <div class="flex-1 min-w-0">
+            <h3 class="font-semibold text-sm text-gray-900 truncate">${inv.name}</h3>
+            <p class="text-xs text-gray-500 mt-0.5 truncate flex items-center gap-1">
+              <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="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>
+              ${inv.address}
+            </p>
+            <div class="flex flex-wrap gap-1 mt-2">
+              ${tags.slice(0, 3).map((tag) => `
+                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${getTagClasses(tag.variant)}">
+                  ${tag.label}
+                </span>
+              `).join('')}
+              ${tags.length > 3 ? `<span class="text-[10px] text-gray-400">+${tags.length - 3}</span>` : ''}
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input 
+              type="checkbox" 
+              id="popup-checkbox-${inv.id}"
+              ${isSelected ? 'checked' : ''} 
+              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
+            />
+            <span class="text-xs text-gray-600">${selectText}</span>
+          </label>
+          <button 
+            id="popup-view-details-${inv.id}"
+            class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+            ${viewDetailsText}
+          </button>
+        </div>
+      </div>
+    `;
+
+    popup.current = new mapboxgl.Popup({
+      closeButton: true,
+      closeOnClick: false,
+      maxWidth: '350px',
+      className: 'inventory-map-popup',
+    })
+      .setLngLat(coordinates)
+      .setDOMContent(popupContent)
+      .addTo(map.current);
+
+    setTimeout(() => {
+      const checkbox = document.getElementById(`popup-checkbox-${inv.id}`) as HTMLInputElement;
+      const viewDetailsBtn = document.getElementById(`popup-view-details-${inv.id}`);
+
+      if (checkbox) {
+        checkbox.addEventListener('change', () => {
+          onInventoryToggle(inv.id);
+        });
+      }
+
+      if (viewDetailsBtn) {
+        viewDetailsBtn.addEventListener('click', () => {
+          if (onViewDetails) {
+            onViewDetails(inv);
+          } else {
+            onSelectInventory(inv.id);
+          }
+          if (popup.current) {
+            popup.current.remove();
+          }
+        });
+      }
+    }, 0);
+
+    popup.current.on('close', () => {
+      setActivePopupInventory(null);
+    });
+  }, [selectedInventories, onInventoryToggle, onSelectInventory, onViewDetails, t]);
+
+  useEffect(() => {
+    initializeMap();
+  }, [initializeMap]);
+
+  useEffect(() => {
+    if (!isMapLoaded || !map.current) return;
+
+    const source = map.current.getSource('inventories') as mapboxgl.GeoJSONSource;
+    if (source) {
+      source.setData(createGeoJSONSource());
+    }
+
+    if (activePopupInventory && popup.current) {
+      const coords = getInventoryCoordinates(activePopupInventory);
+      if (coords) {
+        showPopup(coords, activePopupInventory);
+      }
+    }
+  }, [inventories, selectedInventories, isMapLoaded, createGeoJSONSource, activePopupInventory, getInventoryCoordinates, showPopup]);
+
+  useEffect(() => {
+    if (!isMapLoaded || !map.current || inventories.length === 0) return;
+
+    const validInventories = inventories.filter((inv) => getInventoryCoordinates(inv));
+    
+    if (validInventories.length === 0) return;
+
+    if (validInventories.length === 1) {
+      const coords = getInventoryCoordinates(validInventories[0]);
+      if (coords) {
+        map.current.flyTo({
+          center: coords,
+          zoom: 14,
+          duration: 1000,
+        });
+      }
+    } else {
+      const bounds = new mapboxgl.LngLatBounds();
+      validInventories.forEach((inv) => {
+        const coords = getInventoryCoordinates(inv);
+        if (coords) {
+          bounds.extend(coords);
+        }
+      });
+
+      map.current.fitBounds(bounds, {
+        padding: 50,
+        maxZoom: 15,
+        duration: 1000,
+      });
+    }
+  }, [isMapLoaded, inventories, getInventoryCoordinates]);
+
+  const handleZoomIn = () => {
+    if (map.current) {
+      map.current.zoomIn();
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (map.current) {
+      map.current.zoomOut();
+    }
+  };
+
+  const handleResetView = () => {
+    if (!map.current || inventories.length === 0) return;
+
+    const validInventories = inventories.filter((inv) => getInventoryCoordinates(inv));
+    
+    if (validInventories.length === 0) {
+      map.current.flyTo({
+        center: defaultCenter,
+        zoom: defaultZoom,
+        duration: 1000,
+      });
+      return;
+    }
+
+    const bounds = new mapboxgl.LngLatBounds();
+    validInventories.forEach((inv) => {
+      const coords = getInventoryCoordinates(inv);
+      if (coords) {
+        bounds.extend(coords);
+      }
+    });
+
+    map.current.fitBounds(bounds, {
+      padding: 50,
+      maxZoom: 15,
+      duration: 1000,
+    });
+  };
+
+  return (
+    <div className={cn('relative w-full h-full rounded-lg overflow-hidden border border-gray-200', className)}>
+      <div ref={mapContainer} className="w-full h-full min-h-[400px]" />
+      
+      <div className="absolute bottom-4 right-4 flex flex-col gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          isIconOnly
+          onClick={handleZoomIn}
+          title={t('map.zoomIn')}
+        >
+          <Plus className="h-4 w-4 text-gray-700" />
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          isIconOnly
+          onClick={handleZoomOut}
+          title={t('map.zoomOut')}
+        >
+          <Minus className="h-4 w-4 text-gray-700" />
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          isIconOnly
+          onClick={handleResetView}
+          title={t('map.resetView')}
+        >
+          <Maximize2 className="h-4 w-4 text-gray-700" />
+        </Button>
+      </div>
+
+      <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm rounded-lg px-3 py-2 shadow-md border border-gray-200">
+        <div className="flex items-center gap-2 text-sm">
+          <MapPin className="h-4 w-4 text-blue-600" />
+          <span className="font-medium text-gray-700">
+            {inventories.filter((inv) => getInventoryCoordinates(inv)).length} {t('map.locations')}
+          </span>
+          {selectedInventories.length > 0 && (
+            <span className="text-gray-500">
+              ({selectedInventories.length} {t('map.selected')})
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm rounded-lg px-3 py-2 shadow-md border border-gray-200">
+        <div className="flex items-center gap-4 text-xs">
+          <div className="flex items-center gap-1.5">
+            <div className="w-3 h-3 rounded-full bg-blue-600 border-2 border-white shadow-sm" />
+            <span className="text-gray-600">{t('map.legendAvailable')}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="w-3 h-3 rounded-full bg-green-500 border-2 border-white shadow-sm" />
+            <span className="text-gray-600">{t('map.legendSelected')}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="w-5 h-5 rounded-full bg-blue-600 border-2 border-white shadow-sm flex items-center justify-center">
+              <span className="text-[8px] text-white font-bold">5+</span>
+            </div>
+            <span className="text-gray-600">{t('map.legendCluster')}</span>
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        .inventory-map-popup .mapboxgl-popup-content {
+          padding: 0;
+          border-radius: 12px;
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+        .inventory-map-popup .mapboxgl-popup-close-button {
+          font-size: 18px;
+          padding: 4px 8px;
+          color: #6b7280;
+        }
+        .inventory-map-popup .mapboxgl-popup-close-button:hover {
+          background-color: #f3f4f6;
+          color: #374151;
+        }
+        .inventory-map-popup .mapboxgl-popup-tip {
+          border-top-color: white;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function getTagClasses(variant: InventoryTag['variant']): string {
+  switch (variant) {
+    case 'primary':
+      return 'bg-blue-100 text-blue-700';
+    case 'secondary':
+      return 'bg-gray-100 text-gray-700';
+    case 'success':
+      return 'bg-green-100 text-green-700';
+    case 'warning':
+      return 'bg-amber-100 text-amber-700';
+    case 'error':
+      return 'bg-red-100 text-red-700';
+    case 'outline':
+      return 'bg-white text-gray-700 border border-gray-300';
+    default:
+      return 'bg-gray-100 text-gray-700';
+  }
+}
+
+export default InventoryMapView;

package/client/src/components/inventory/inventory-settings-menu.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from "@/lib/i18n";
+import { Settings, Map, Calendar, Upload } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Button,
+} from "@moving-walls/design-system";
+
+interface InventorySettingsMenuProps {
+  onMapViewClick?: () => void;
+  onAvailabilityClick?: () => void;
+  onUploadCSVClick?: () => void;
+}
+
+export function InventorySettingsMenu({
+  onMapViewClick,
+  onAvailabilityClick,
+  onUploadCSVClick,
+}: InventorySettingsMenuProps) {
+  const { t } = useTranslation('inventory');
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          isIconOnly
+          title={t('settings.title')}
+        >
+          <Settings className="h-4 w-4 text-mw-neutral-500" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuItem onClick={onMapViewClick} className="cursor-pointer">
+          <Map className="h-4 w-4 mr-2" />
+          <span>{t('settings.mapView')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onAvailabilityClick} className="cursor-pointer">
+          <Calendar className="h-4 w-4 mr-2" />
+          <span>{t('settings.availability')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onUploadCSVClick} className="cursor-pointer">
+          <Upload className="h-4 w-4 mr-2" />
+          <span>{t('settings.uploadCsv')}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/client/src/components/language-switcher.tsx

@@ -0,0 +1,53 @@
+import { useTranslation } from '@/lib/i18n';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@moving-walls/design-system';
+import { supportedLanguages, changeLanguage, type SupportedLanguage } from '@/lib/i18n';
+
+export function LanguageSwitcher() {
+  const { t, i18n } = useTranslation('common');
+  const currentLanguage = i18n.language as SupportedLanguage;
+
+  const currentLangInfo = supportedLanguages.find(
+    (lang) => lang.code === currentLanguage
+  ) || supportedLanguages[0];
+
+  const handleLanguageChange = async (langCode: SupportedLanguage) => {
+    await changeLanguage(langCode);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border-none bg-transparent hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800 focus:outline-none"
+          aria-label={t('accessibility.selectLanguage')}
+        >
+          <span id="current-language" className="hidden sm:inline">{currentLangInfo.shortName}</span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent 
+        align="end" 
+        className="w-40 p-1 z-[100] bg-white shadow-lg border border-mw-neutral-200 rounded-lg"
+      >
+        {supportedLanguages.map((lang) => (
+          <DropdownMenuItem
+            key={lang.code}
+            onClick={() => handleLanguageChange(lang.code)}
+            className={`flex items-center gap-2 px-3 py-2 text-sm rounded cursor-pointer transition-colors ${
+              currentLanguage === lang.code
+                ? 'bg-mw-primary-50 text-mw-primary-700 font-medium'
+                : 'text-mw-neutral-700 hover:bg-mw-neutral-50'
+            }`}
+            aria-current={currentLanguage === lang.code ? 'true' : undefined}
+          >
+            <span dir={lang.dir}>{lang.shortName}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}