package.json

@@ -19,7 +19,6 @@
     "@radix-ui/react-navigation-menu": "^1.2.10",
     "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-select": "^2.2.2",
-    "@radix-ui/react-separator": "^1.1.4",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.8",
     "@radix-ui/react-toast": "^1.2.11",

pnpm-lock.yaml

@@ -35,9 +35,6 @@ importers:
       '@radix-ui/react-select':
         specifier: ^2.2.2
         version: 2.2.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-slot':
         specifier: ^1.2.0
         version: 1.2.0(@types/react@19.1.2)(react@19.1.0)
@@ -827,19 +824,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-separator@1.1.4':
-    resolution: {integrity: sha512-2fTm6PSiUm8YPq9W0E4reYuv01EE3aFSzt8edBiXqPHshF8N9+Kymt/k0/R+F3dkY5lQyB/zPtrP82phskLi7w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-slot@1.2.0':
     resolution: {integrity: sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==}
     peerDependencies:
@@ -3398,15 +3382,6 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
-  '@radix-ui/react-separator@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.2
-      '@types/react-dom': 19.1.2(@types/react@19.1.2)
-
   '@radix-ui/react-slot@1.2.0(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)

src/features/map/ui/gas-station-map.tsx

@@ -8,14 +8,13 @@ import {
   List,
   MapPin,
 } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Stations } from '@/app/api-utlities/@types';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Badge } from '@/shared/shadcn-ui/badge';
 import { Button } from '@/shared/shadcn-ui/button';
-import { Separator } from '@/shared/shadcn-ui/separator';
 import {
   Tabs,
   TabsContent,
@@ -23,221 +22,443 @@ import {
   TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';
 
-import { Point } from '../model';
+// Sample data for gas stations
-import { YandexMap } from './yandex-map';
+const stations = [
+  {
+    id: 1,
+    name: 'АЗС Душанбе-Центр',
+    address: 'ул. Рудаки 150, Душанбе',
+    city: 'Душанбе',
+    coordinates: { x: 0.2, y: 0.3 },
+    services: ['ДТ', 'АИ-92', 'АИ-95', 'Z-100 Power', 'Минимаркет', 'Туалет'],
+  },
+  {
+    id: 2,
+    name: 'АЗС Худжанд',
+    address: 'ул. Ленина 45, Худжанд',
+    city: 'Худжанд',
+    coordinates: { x: 0.5, y: 0.2 },
+    services: [
+      'ДТ',
+      'АИ-92',
+      'АИ-95',
+      'Пропан',
+      'Минимаркет',
+      'Автомойка',
+      'Туалет',
+    ],
+  },
+  {
+    id: 3,
+    name: 'АЗС Куляб',
+    address: 'ул. Сомони 78, Куляб',
+    city: 'Куляб',
+    coordinates: { x: 0.7, y: 0.4 },
+    services: ['ДТ', 'АИ-92', 'Пропан', 'Туалет'],
+  },
+  {
+    id: 4,
+    name: 'АЗС Бохтар',
+    address: 'ул. Айни 23, Бохтар',
+    city: 'Бохтар',
+    coordinates: { x: 0.3, y: 0.6 },
+    services: [
+      'ДТ',
+      'АИ-92',
+      'АИ-95',
+      'Z-100 Power',
+      'Минимаркет',
+      'Зарядная станция',
+      'Туалет',
+    ],
+  },
+  {
+    id: 5,
+    name: 'АЗС Хорог',
+    address: 'ул. Горная 12, Хорог',
+    city: 'Хорог',
+    coordinates: { x: 0.6, y: 0.7 },
+    services: ['ДТ', 'АИ-92', 'Автомойка', 'Туалет'],
+  },
+  {
+    id: 6,
+    name: 'АЗС Истаравшан',
+    address: 'ул. Исмоили Сомони 34, Истаравшан',
+    city: 'Истаравшан',
+    coordinates: { x: 0.8, y: 0.8 },
+    services: ['ДТ', 'АИ-92', 'АИ-95', 'Минимаркет', 'Туалет'],
+  },
+  {
+    id: 7,
+    name: 'АЗС Пенджикент',
+    address: 'ул. Рудаки 56, Пенджикент',
+    city: 'Пенджикент',
+    coordinates: { x: 0.1, y: 0.9 },
+    services: ['ДТ', 'АИ-92', 'АИ-95', 'Пропан', 'Минимаркет', 'Туалет'],
+  },
+  {
+    id: 8,
+    name: 'АЗС Душанбе-Запад',
+    address: 'ул. Джами 23, Душанбе',
+    city: 'Душанбе',
+    coordinates: { x: 0.25, y: 0.35 },
+    services: [
+      'ДТ',
+      'АИ-92',
+      'АИ-95',
+      'Z-100 Power',
+      'Пропан',
+      'Минимаркет',
+      'Автомойка',
+      'Туалет',
+    ],
+  },
+  {
+    id: 9,
+    name: 'АЗС Душанбе-Восток',
+    address: 'ул. Айни 78, Душанбе',
+    city: 'Душанбе',
+    coordinates: { x: 0.15, y: 0.25 },
+    services: [
+      'ДТ',
+      'АИ-92',
+      'АИ-95',
+      'Зарядная станция',
+      'Минимаркет',
+      'Туалет',
+    ],
+  },
+  {
+    id: 10,
+    name: 'АЗС Гиссар',
+    address: 'ул. Центральная 12, Гиссар',
+    city: 'Гиссар',
+    coordinates: { x: 0.4, y: 0.4 },
+    services: ['ДТ', 'АИ-92', 'Пропан', 'Туалет'],
+  },
+  {
+    id: 11,
+    name: 'АЗС Вахдат',
+    address: 'ул. Сомони 45, Вахдат',
+    city: 'Вахдат',
+    coordinates: { x: 0.55, y: 0.45 },
+    services: ['ДТ', 'АИ-92', 'АИ-95', 'Минимаркет', 'Туалет'],
+  },
+  {
+    id: 12,
+    name: 'АЗС Турсунзаде',
+    address: 'ул. Ленина 34, Турсунзаде',
+    city: 'Турсунзаде',
+    coordinates: { x: 0.65, y: 0.55 },
+    services: ['ДТ', 'АИ-92', 'АИ-95', 'Z-100 Power', 'Автомойка', 'Туалет'],
+  },
+];
+
+// All available filters
+const allFilters = [
+  'ДТ',
+  'АИ-92',
+  'АИ-95',
+  'Z-100 Power',
+  'Пропан',
+  'Зарядная станция',
+  'Минимаркет',
+  'Автомойка',
+  'Туалет',
+];
+
+// Extract unique cities from stations
+const allCities = [...new Set(stations.map((station) => station.city))].sort();
 
-// Пропсы для компонента GasStationMap
 interface GasStationMapProps {
   stations: Stations;
 }
 
-// Пропсы для панели фильтров
+export default function GasStationMap({
-interface FilterPanelProps {
+  stations: _stations,
-  isOpen: boolean;
+}: GasStationMapProps) {
-  onClose: () => void;
+  const { t } = useTextController();
-  activeFilters: string[];
+  const mapRef = useRef<HTMLDivElement>(null);
-  activeCities: string[];
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
-  allCities: string[];
+  const [activeCities, setActiveCities] = useState<string[]>([]);
-  allFilters: string[];
+  const [filteredStations, setFilteredStations] = useState(stations);
-  activeFilterTab: string;
+  const [selectedStation, setSelectedStation] = useState<number | null>(null);
-  toggleFilter: (filter: string) => void;
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
-  toggleCity: (city: string) => void;
+  const [isStationListOpen, setIsStationListOpen] = useState(false);
-  selectAllCities: () => void;
+  const [activeFilterTab, setActiveFilterTab] = useState('cities');
-  setActiveFilterTab: (tab: string) => void;
-  resetFilters: () => void;
-  resetCities: () => void;
-  t: (key: string) => string;
-}
 
-// Пропсы для панели списка станций
+  // Toggle service filter
-interface StationListPanelProps {
+  const toggleFilter = (filter: string) => {
-  isOpen: boolean;
+    if (activeFilters.includes(filter)) {
-  onClose: () => void;
+      setActiveFilters(activeFilters.filter((f) => f !== filter));
-  stations: Stations;
+    } else {
-  selectedStation: number | null;
+      setActiveFilters([...activeFilters, filter]);
-  activeFilters: string[];
+    }
-  activeCities: string[];
+  };
-  setSelectedStation: (id: number | null) => void;
+
-  t: (key: string) => string;
+  // Toggle city filter
-  filterToFieldMap: { [key: string]: keyof Stations[number] };
+  const toggleCity = (city: string) => {
-  allFilters: string[];
+    if (activeCities.includes(city)) {
-  resetFilters: () => void;
+      setActiveCities(activeCities.filter((c) => c !== city));
-  resetCities: () => void;
+    } else {
-}
+      setActiveCities([...activeCities, city]);
+    }
+  };
+
+  // Select all cities
+  const selectAllCities = () => {
+    if (activeCities.length === allCities.length) {
+      setActiveCities([]);
+    } else {
+      setActiveCities([...allCities]);
+    }
+  };
+
+  // Filter stations based on active filters and cities
+  useEffect(() => {
+    let filtered = stations;
+
+    // Filter by services
+    if (activeFilters.length > 0) {
+      filtered = filtered.filter((station) =>
+        activeFilters.every((filter) => station.services.includes(filter)),
+      );
+    }
+
+    // Filter by cities
+    if (activeCities.length > 0) {
+      filtered = filtered.filter((station) =>
+        activeCities.includes(station.city),
+      );
+    }
+
+    setFilteredStations(filtered);
+  }, [activeFilters, activeCities]);
+
+  useEffect(() => {
+    // This is a placeholder for a real map implementation
+    // In a real application, you would use a mapping library like Mapbox, Google Maps, or Leaflet
+    if (mapRef.current) {
+      const canvas = document.createElement('canvas');
+      canvas.width = mapRef.current.clientWidth;
+      canvas.height = mapRef.current.clientHeight;
+      mapRef.current.appendChild(canvas);
+
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        // Draw a simple map placeholder
+        ctx.fillStyle = '#f3f4f6';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Draw some roads
+        ctx.strokeStyle = '#d1d5db';
+        ctx.lineWidth = 5;
+
+        // Horizontal roads
+        for (let i = 1; i < 5; i++) {
+          ctx.beginPath();
+          ctx.moveTo(0, canvas.height * (i / 5));
+          ctx.lineTo(canvas.width, canvas.height * (i / 5));
+          ctx.stroke();
+        }
+
+        // Vertical roads
+        for (let i = 1; i < 8; i++) {
+          ctx.beginPath();
+          ctx.moveTo(canvas.width * (i / 8), 0);
+          ctx.lineTo(canvas.width * (i / 8), canvas.height);
+          ctx.stroke();
+        }
+
+        // Draw gas station markers
+        filteredStations.forEach((station) => {
+          const isSelected = selectedStation === station.id;
+          // Draw marker
+          ctx.fillStyle = isSelected ? '#3b82f6' : '#ef4444';
+          ctx.beginPath();
+          ctx.arc(
+            station.coordinates.x * canvas.width,
+            station.coordinates.y * canvas.height,
+            isSelected ? 12 : 10,
+            0,
+            2 * Math.PI,
+          );
+          ctx.fill();
+
+          // Draw white border
+          ctx.strokeStyle = 'white';
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.arc(
+            station.coordinates.x * canvas.width,
+            station.coordinates.y * canvas.height,
+            isSelected ? 12 : 10,
+            0,
+            2 * Math.PI,
+          );
+          ctx.stroke();
+        });
+
+        // Add city names
+        ctx.fillStyle = '#1f2937';
+        ctx.font = 'bold 16px Arial';
+        ctx.fillText('Душанбе', canvas.width * 0.45, canvas.height * 0.15);
+        ctx.fillText('Худжанд', canvas.width * 0.2, canvas.height * 0.25);
+        ctx.fillText('Куляб', canvas.width * 0.7, canvas.height * 0.35);
+        ctx.fillText('Бохтар', canvas.width * 0.3, canvas.height * 0.55);
+        ctx.fillText('Хорог', canvas.width * 0.6, canvas.height * 0.65);
+        ctx.fillText('Истаравшан', canvas.width * 0.8, canvas.height * 0.75);
+        ctx.fillText('Пенджикент', canvas.width * 0.1, canvas.height * 0.85);
+      }
+    }
+
+    return () => {
+      if (mapRef.current) {
+        while (mapRef.current.firstChild) {
+          mapRef.current.removeChild(mapRef.current.firstChild);
+        }
+      }
+    };
+  }, [filteredStations, selectedStation]);
 
-// Компонент панели фильтров
-function FilterPanel({
-  isOpen,
-  onClose,
-  activeFilters,
-  activeCities,
-  allCities,
-  allFilters,
-  activeFilterTab,
-  toggleFilter,
-  toggleCity,
-  selectAllCities,
-  setActiveFilterTab,
-  resetFilters,
-  resetCities,
-  t,
-}: FilterPanelProps) {
   return (
-    <div
+    <div className='relative h-full w-full'>
-      className={`absolute top-0 bottom-0 left-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
+      {/* Filter panel - slides from left */}
-        isOpen ? 'translate-x-0' : '-translate-x-full'
+      <div
-      }`}
+        className={`absolute top-0 bottom-0 left-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
-      style={{ width: '300px' }}
+          isFilterOpen ? 'translate-x-0' : '-translate-x-full'
-    >
+        }`}
-      <div className='flex items-center justify-between border-b border-gray-200 p-4'>
+        style={{ width: '300px' }}
-        <div className='flex items-center gap-2'>
+      >
-          <Filter className='h-5 w-5 text-red-600' />
+        <div className='flex items-center justify-between border-b border-gray-200 p-4'>
-          <span className='font-medium'>{t('map.filters')}</span>
+          <div className='flex items-center gap-2'>
-        </div>
+            <Filter className='h-5 w-5 text-red-600' />
-        <Button variant='ghost' size='sm' onClick={onClose}>
+            <span className='font-medium'>{t('map.filters')}</span>
-          <ChevronLeft className='h-5 w-5' />
+          </div>
-        </Button>
+          <Button
-      </div>
+            variant='ghost'
-
+            size='sm'
-      <div className='p-4'>
+            onClick={() => setIsFilterOpen(false)}
-        <Tabs
-          value={activeFilterTab}
-          onValueChange={setActiveFilterTab}
-          className='w-full'
-        >
-          <TabsList className='mb-4 grid w-full grid-cols-2'>
-            <TabsTrigger value='cities'>{t('map.cities')}</TabsTrigger>
-            <TabsTrigger value='services'>{t('map.services')}</TabsTrigger>
-          </TabsList>
-
-          <TabsContent
-            value='cities'
-            className='mt-0 max-h-[300px] overflow-y-auto py-2 pr-1'
           >
-            <Button
+            <ChevronLeft className='h-5 w-5' />
-              variant='outline'
+          </Button>
-              size='sm'
+        </div>
-              className='mb-3 flex w-full items-center justify-between'
-              onClick={selectAllCities}
-            >
-              <span>{t('map.allCities')}</span>
-              {activeCities.length === allCities.length && (
-                <Check className='h-4 w-4 text-green-600' />
-              )}
-            </Button>
 
-            <div className='flex max-h-[calc(100vh-250px)] flex-col gap-2 overflow-y-auto'>
+        <div className='p-4'>
-              {allCities.map((city) => (
+          <Tabs
-                <Button
+            value={activeFilterTab}
-                  key={city}
+            onValueChange={setActiveFilterTab}
-                  variant={activeCities.includes(city) ? 'default' : 'outline'}
+            className='w-full'
-                  size='sm'
+          >
-                  className={`justify-between ${
+            <TabsList className='mb-4 grid w-full grid-cols-2'>
-                    activeCities.includes(city)
+              <TabsTrigger value='cities'>{t('map.cities')}</TabsTrigger>
-                      ? 'bg-red-600 hover:bg-red-700'
+              <TabsTrigger value='services'>{t('map.services')}</TabsTrigger>
-                      : ''
+            </TabsList>
-                  }`}
-                  onClick={() => toggleCity(city)}
-                >
-                  <span>{city}</span>
-                  {activeCities.includes(city) && (
-                    <Check className='ml-2 h-4 w-4' />
-                  )}
-                </Button>
-              ))}
-            </div>
-          </TabsContent>
 
-          <TabsContent value='services' className='mt-0'>
+            <TabsContent value='cities' className='mt-0'>
-            <div className='flex flex-wrap gap-2'>
+              <Button
-              {allFilters.map((filter) => (
+                variant='outline'
-                <Button
+                size='sm'
-                  key={filter}
+                className='mb-3 flex w-full items-center justify-between'
-                  variant={
+                onClick={selectAllCities}
-                    activeFilters.includes(filter) ? 'default' : 'outline'
+              >
-                  }
+                <span>{t('map.allCities')}</span>
-                  size='sm'
+                {activeCities.length === allCities.length && (
-                  className={
+                  <Check className='h-4 w-4 text-green-600' />
-                    activeFilters.includes(filter)
+                )}
-                      ? 'bg-red-600 hover:bg-red-700'
+              </Button>
-                      : ''
-                  }
-                  onClick={() => toggleFilter(filter)}
-                >
-                  {filter}
-                </Button>
-              ))}
-            </div>
-          </TabsContent>
 
-          <Separator className='mt-2' />
+              <div className='flex max-h-[calc(100vh-250px)] flex-col gap-2 overflow-y-auto'>
+                {allCities.map((city) => (
+                  <Button
+                    key={city}
+                    variant={
+                      activeCities.includes(city) ? 'default' : 'outline'
+                    }
+                    size='sm'
+                    className={`justify-between ${activeCities.includes(city) ? 'bg-red-600 hover:bg-red-700' : ''}`}
+                    onClick={() => toggleCity(city)}
+                  >
+                    <span>{city}</span>
+                    {activeCities.includes(city) && (
+                      <Check className='ml-2 h-4 w-4' />
+                    )}
+                  </Button>
+                ))}
+              </div>
 
-          {/* Кнопка сброса фильтров */}
+              {activeCities.length > 0 && (
-          {activeFilterTab === 'cities'
-            ? activeCities.length > 0 && (
-                <Button
-                  variant='link'
-                  className='p-0 text-red-600'
-                  onClick={resetCities}
-                >
-                  {t('common.buttons.resetFilters')}
-                </Button>
-              )
-            : activeFilters.length > 0 && (
                 <Button
                   variant='link'
                   className='mt-4 p-0 text-red-600'
-                  onClick={resetFilters}
+                  onClick={() => setActiveCities([])}
                 >
                   {t('common.buttons.resetFilters')}
                 </Button>
               )}
-        </Tabs>
+            </TabsContent>
-      </div>
-    </div>
-  );
-}
 
-// Компонент панели списка станций
+            <TabsContent value='services' className='mt-0'>
-function StationListPanel({
+              <div className='flex flex-wrap gap-2'>
-  isOpen,
+                {allFilters.map((filter) => (
-  onClose,
+                  <Button
-  stations,
+                    key={filter}
-  selectedStation,
+                    variant={
-  activeFilters,
+                      activeFilters.includes(filter) ? 'default' : 'outline'
-  activeCities,
+                    }
-  setSelectedStation,
+                    size='sm'
-  t,
+                    className={
-  filterToFieldMap,
+                      activeFilters.includes(filter)
-  allFilters,
+                        ? 'bg-red-600 hover:bg-red-700'
-  resetCities,
+                        : ''
-  resetFilters,
+                    }
-}: StationListPanelProps) {
+                    onClick={() => toggleFilter(filter)}
-  return (
+                  >
-    <div
+                    {filter}
-      className={`absolute top-0 right-0 bottom-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
+                  </Button>
-        isOpen ? 'translate-x-0' : 'translate-x-full'
+                ))}
-      }`}
+              </div>
-      style={{ width: '350px' }}
+              {activeFilters.length > 0 && (
-    >
+                <Button
-      <div className='flex items-center justify-between border-b border-gray-200 p-4'>
+                  variant='link'
-        <Button variant='ghost' size='sm' onClick={onClose}>
+                  className='mt-4 p-0 text-red-600'
-          <ChevronRight className='h-5 w-5' />
+                  onClick={() => setActiveFilters([])}
-        </Button>
+                >
-        <div className='flex items-center gap-2'>
+                  {t('common.buttons.resetFilters')}
-          <span className='font-medium'>{t('map.stationsList')}</span>
+                </Button>
-          <Badge>{stations.length}</Badge>
+              )}
+            </TabsContent>
+          </Tabs>
         </div>
       </div>
-      <div className='overflow-y-auto' style={{ height: 'calc(100% - 60px)' }}>
-        {stations.length > 0 ? (
-          <div className='p-2'>
-            {stations.map((station) => {
-              const services = allFilters.filter(
-                (filter) => station[filterToFieldMap[filter]],
-              );
 
-              return (
+      {/* Station list panel - slides from right */}
+      <div
+        className={`absolute top-0 right-0 bottom-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
+          isStationListOpen ? 'translate-x-0' : 'translate-x-full'
+        }`}
+        style={{ width: '350px' }}
+      >
+        <div className='flex items-center justify-between border-b border-gray-200 p-4'>
+          <Button
+            variant='ghost'
+            size='sm'
+            onClick={() => setIsStationListOpen(false)}
+          >
+            <ChevronRight className='h-5 w-5' />
+          </Button>
+          <div className='flex items-center gap-2'>
+            <span className='font-medium'>{t('map.stationsList')}</span>
+            <Badge>{filteredStations.length}</Badge>
+          </div>
+        </div>
+        <div
+          className='overflow-y-auto'
+          style={{ height: 'calc(100% - 60px)' }}
+        >
+          {filteredStations.length > 0 ? (
+            <div className='p-2'>
+              {filteredStations.map((station) => (
                 <div
                   key={station.id}
                   className={`mb-2 cursor-pointer rounded-lg border p-3 transition-colors ${
@@ -254,23 +475,11 @@ function StationListPanel({
                   <p className='mb-2 text-sm text-gray-500'>
                     {station.address}
                   </p>
-                  {station.workingHours && (
-                    <p className='mb-2 text-sm text-gray-500'>
-                      {t('map.workingHours')}: {station.workingHours}
-                    </p>
-                  )}
-                  {station.description && (
-                    <p className='mb-2 text-sm text-gray-500'>
-                      {station.description}
-                    </p>
-                  )}
                   <div className='flex flex-wrap gap-1'>
-                    {station.region && (
+                    <Badge className='mb-1 border-blue-200 bg-blue-100 text-blue-800'>
-                      <Badge className='mb-1 border-blue-200 bg-blue-100 text-blue-800'>
+                      {station.city}
-                        {station.region}
+                    </Badge>
-                      </Badge>
+                    {station.services.map((service) => (
-                    )}
-                    {services.map((service) => (
                       <Badge
                         key={service}
                         variant='outline'
@@ -284,198 +493,40 @@ function StationListPanel({
                       </Badge>
                     ))}
                   </div>
-                  {station.image && (
-                    <img
-                      src={station.image}
-                      alt={station.name}
-                      className='mt-2 h-20 w-full rounded object-cover'
-                    />
-                  )}
                 </div>
-              );
+              ))}
-            })}
-          </div>
-        ) : (
-          <div className='p-4 text-center text-gray-500'>
-            <p>{t('map.noStations')}</p>
-            <div className='mt-2 flex justify-center gap-2'>
-              {activeFilters.length > 0 && (
-                <Button
-                  variant='link'
-                  className='text-red-600'
-                  onClick={resetFilters}
-                >
-                  {t('common.buttons.resetFilters')}
-                </Button>
-              )}
-              {activeCities.length > 0 && (
-                <Button
-                  variant='link'
-                  className='text-red-600'
-                  onClick={resetCities}
-                >
-                  {t('map.allCities')}
-                </Button>
-              )}
             </div>
-          </div>
+          ) : (
-        )}
+            <div className='p-4 text-center text-gray-500'>
+              <p>{t('map.noStations')}</p>
+              <div className='mt-2 flex justify-center gap-2'>
+                {activeFilters.length > 0 && (
+                  <Button
+                    variant='link'
+                    className='text-red-600'
+                    onClick={() => setActiveFilters([])}
+                  >
+                    {t('common.buttons.resetFilters')}
+                  </Button>
+                )}
+                {activeCities.length > 0 && (
+                  <Button
+                    variant='link'
+                    className='text-red-600'
+                    onClick={() => setActiveCities([])}
+                  >
+                    {t('map.allCities')}
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  );
-}
-
-// Главный компонент
-export default function GasStationMap({ stations }: GasStationMapProps) {
-  const { t } = useTextController();
-  const [activeFilters, setActiveFilters] = useState<string[]>([]);
-  const [activeCities, setActiveCities] = useState<string[]>([]);
-  const [selectedStation, setSelectedStation] = useState<number | null>(null);
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
-  const [isStationListOpen, setIsStationListOpen] = useState(false);
-  const [activeFilterTab, setActiveFilterTab] = useState('cities');
-
-  // Все доступные фильтры
-  const allFilters = [
-    // 'ДТ', -> нет значения в интерфейсе - TODO: поправить
-    'АИ-92',
-    'АИ-95',
-    'Z-100 Power',
-    'Пропан',
-    'Зарядная станция',
-    'Минимаркет',
-    'Автомойка',
-    'Туалет',
-  ];
-
-  // Маппинг фильтров на поля Station
-  const filterToFieldMap: { [key: string]: keyof Stations[number] } = {
-    'АИ-92': 'ai92',
-    'АИ-95': 'ai95',
-    'Z-100 Power': 'z100',
-    Пропан: 'propan',
-    'Зарядная станция': 'electricCharge',
-    Минимаркет: 'miniMarket',
-    Автомойка: 'carWash',
-    Туалет: 'toilet',
-  };
-
-  // Мемоизация списка уникальных регионов
-  const allCities = useMemo(() => {
-    return [
-      ...new Set(
-        stations
-          .map((station) => station.region)
-          .filter((region): region is string => region !== null),
-      ),
-    ].sort();
-  }, [stations]);
-
-  // Мемоизация фильтрованных станций
-  const filteredStations = useMemo(() => {
-    let filtered = stations;
-
-    // Фильтрация по регионам (ИЛИ)
-    if (activeCities.length > 0) {
-      filtered = filtered.filter(
-        (station) => station.region && activeCities.includes(station.region),
-      );
-    }
-
-    // Фильтрация по услугам (И)
-    if (activeFilters.length > 0) {
-      filtered = filtered.filter((station) =>
-        activeFilters.every((filter) => {
-          const field = filterToFieldMap[filter];
-          return Boolean(station[field]) === true;
-        }),
-      );
-    }
-    return filtered;
-  }, [activeFilters, activeCities, stations]);
-
-  // Мемоизация точек для карты
-  const points = useMemo(
-    (): Point[] =>
-      filteredStations.map((st) => ({
-        id: st.id,
-        coordinates: [st.latitude, st.longitude],
-      })),
-    [filteredStations],
-  );
-
-  // Переключение фильтра услуг
-  const toggleFilter = (filter: string) => {
-    setActiveFilters((prev) =>
-      prev.includes(filter)
-        ? prev.filter((f) => f !== filter)
-        : [...prev, filter],
-    );
-  };
-
-  // Переключение фильтра региона
-  const toggleCity = (city: string) => {
-    setActiveCities((prev) =>
-      prev.includes(city) ? prev.filter((c) => c !== city) : [...prev, city],
-    );
-  };
-
-  // Выбор всех регионов
-  const selectAllCities = () => {
-    setActiveCities(
-      activeCities.length === allCities.length ? [] : [...allCities],
-    );
-  };
-
-  // Сброс фильтров услуг
-  const resetFilters = () => {
-    setActiveFilters([]);
-  };
-
-  // Сброс фильтров регионов
-  const resetCities = () => {
-    setActiveCities([]);
-  };
-
-  return (
-    <div className='relative h-full w-full'>
-      {/* Filter panel */}
-      <FilterPanel
-        isOpen={isFilterOpen}
-        onClose={() => setIsFilterOpen(false)}
-        activeFilters={activeFilters}
-        activeCities={activeCities}
-        allCities={allCities}
-        allFilters={allFilters}
-        activeFilterTab={activeFilterTab}
-        toggleFilter={toggleFilter}
-        toggleCity={toggleCity}
-        selectAllCities={selectAllCities}
-        setActiveFilterTab={setActiveFilterTab}
-        resetFilters={resetFilters}
-        resetCities={resetCities}
-        t={t}
-      />
-
-      {/* Station list panel */}
-      <StationListPanel
-        isOpen={isStationListOpen}
-        onClose={() => setIsStationListOpen(false)}
-        stations={filteredStations}
-        selectedStation={selectedStation}
-        activeFilters={activeFilters}
-        activeCities={activeCities}
-        setSelectedStation={setSelectedStation}
-        t={t}
-        filterToFieldMap={filterToFieldMap}
-        allFilters={allFilters}
-        resetFilters={resetFilters}
-        resetCities={resetCities}
-      />
 
       {/* Map */}
       <div className='h-full w-full'>
-        <YandexMap points={points} />
+        <div ref={mapRef} className='h-full w-full'></div>
       </div>
 
       {/* Control buttons */}
@@ -517,7 +568,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
           <span>{t('map.ourStations')}</span>
         </div>
         <p className='mt-1 text-xs text-gray-500'>
-          {t('map.totalStations')}: {filteredStations.length}
+          {t('map.totalStations')}: {stations.length}
         </p>
       </div>
     </div>

src/features/map/ui/yandex-map.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { Map, Placemark, YMaps } from '@pbe/react-yandex-maps';
-import React from 'react';
 
 import { Point } from '../model';
 
@@ -9,43 +8,29 @@ type YandexMapProps = {
   points: Point[];
 };
 
-const mapCenter = [55.751574, 37.573856];
-
 export const YandexMap = ({ points }: YandexMapProps) => {
   return (
     <YMaps
       query={{
         apikey: process.env.NEXT_PUBLIC_YANDEX_MAP_API_KEY,
         lang: 'ru_RU',
-        // load: 'geoObject.addon.balloon',
       }}
     >
       <Map
         defaultState={{
-          center: points[0].coordinates || mapCenter,
+          center: points[0].coordinates || [55.751574, 37.573856], // центр карты,
           zoom: 11,
-          behaviors: ['drag', 'multiTouch', 'dblClickZoom', 'scrollZoom'],
         }}
+        className='rounded-md shadow-lg'
         options={{
-          copyrightUaVisible: false,
-          copyrightProvidersVisible: false,
-          copyrightLogoVisible: false,
           suppressMapOpenBlock: true,
           suppressObsoleteBrowserNotifier: true,
         }}
-        className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
+        width={'100%'}
+        height={'500px'}
       >
         {points.map((point) => (
-          <Placemark
+          <Placemark key={point.id} geometry={point.coordinates} />
-            key={point.id}
-            geometry={point.coordinates}
-            options={{
-              iconLayout: 'default#image',
-              iconImageHref: '/map/oriyo-marker.png',
-              iconImageSize: [64, 64],
-              iconImageOffset: [-24, -36],
-            }}
-          />
         ))}
       </Map>
     </YMaps>

src/shared/shadcn-ui/separator.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as React from 'react';
-
-import { cn } from '@/shared/lib/utils';
-
-const Separator = React.forwardRef<
-  React.ComponentRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'bg-border shrink-0',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

src/widgets/map-section.tsx

@@ -4,7 +4,8 @@ import { MapPin } from 'lucide-react';
 
 import { Stations } from '@/app/api-utlities/@types';
 
-import { GasStationMap } from '@/features/map';
+import { Point } from '@/features/map/model';
+import { YandexMap } from '@/features/map/ui/yandex-map';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
@@ -15,9 +16,15 @@ interface MapSectionProps {
 export const MapSection = ({ stations }: MapSectionProps) => {
   const { t } = useTextController();
 
+  const points = stations.map((st) => ({
+    id: st.id,
+    coordinates: [st.latitude, st.longitude],
+  })) as Point[];
+
   return (
     <section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
       <div className='container mx-auto'>
+        <YandexMap points={points} />
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <MapPin className='h-6 w-6 text-red-600' />
@@ -33,7 +40,7 @@ export const MapSection = ({ stations }: MapSectionProps) => {
           className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
           data-aos='fade-up'
         >
-          <GasStationMap stations={stations} />
+          {/* <GasStationMap stations={stations} /> */}
         </div>
       </div>
     </section>