Merge pull request 'render-main-page-data' (#12) from render-main-page-data into dev

Reviewed-on: #12

package.json

@@ -19,6 +19,7 @@
     "@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,6 +35,9 @@ 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)
@@ -824,6 +827,19 @@ 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:
@@ -3382,6 +3398,15 @@ 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,13 +8,14 @@ import {
   List,
   MapPin,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useMemo, 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,
@@ -22,311 +23,69 @@ import {
   TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';
 
-// Sample data for gas stations
+import { Point } from '../model';
-const stations = [
+import { YandexMap } from './yandex-map';
-  {
-    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({
+// Пропсы для панели фильтров
-  stations: _stations,
+interface FilterPanelProps {
-}: GasStationMapProps) {
+  isOpen: boolean;
-  const { t } = useTextController();
+  onClose: () => void;
-  const mapRef = useRef<HTMLDivElement>(null);
+  activeFilters: string[];
-  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  activeCities: string[];
-  const [activeCities, setActiveCities] = useState<string[]>([]);
+  allCities: string[];
-  const [filteredStations, setFilteredStations] = useState(stations);
+  allFilters: string[];
-  const [selectedStation, setSelectedStation] = useState<number | null>(null);
+  activeFilterTab: string;
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  toggleFilter: (filter: string) => void;
-  const [isStationListOpen, setIsStationListOpen] = useState(false);
+  toggleCity: (city: string) => void;
-  const [activeFilterTab, setActiveFilterTab] = useState('cities');
+  selectAllCities: () => void;
-
+  setActiveFilterTab: (tab: string) => void;
-  // Toggle service filter
+  resetFilters: () => void;
-  const toggleFilter = (filter: string) => {
+  resetCities: () => void;
-    if (activeFilters.includes(filter)) {
+  t: (key: string) => string;
-      setActiveFilters(activeFilters.filter((f) => f !== filter));
-    } else {
-      setActiveFilters([...activeFilters, filter]);
-    }
-  };
-
-  // Toggle city filter
-  const toggleCity = (city: string) => {
-    if (activeCities.includes(city)) {
-      setActiveCities(activeCities.filter((c) => c !== city));
-    } 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) {
+interface StationListPanelProps {
-      filtered = filtered.filter((station) =>
+  isOpen: boolean;
-        activeCities.includes(station.city),
+  onClose: () => void;
-      );
+  stations: Stations;
+  selectedStation: number | null;
+  activeFilters: string[];
+  activeCities: string[];
+  setSelectedStation: (id: number | null) => void;
+  t: (key: string) => string;
+  filterToFieldMap: { [key: string]: keyof Stations[number] };
+  allFilters: string[];
+  resetFilters: () => void;
+  resetCities: () => void;
 }
 
-    setFilteredStations(filtered);
+// Компонент панели фильтров
-  }, [activeFilters, activeCities]);
+function FilterPanel({
-
+  isOpen,
-  useEffect(() => {
+  onClose,
-    // This is a placeholder for a real map implementation
+  activeFilters,
-    // In a real application, you would use a mapping library like Mapbox, Google Maps, or Leaflet
+  activeCities,
-    if (mapRef.current) {
+  allCities,
-      const canvas = document.createElement('canvas');
+  allFilters,
-      canvas.width = mapRef.current.clientWidth;
+  activeFilterTab,
-      canvas.height = mapRef.current.clientHeight;
+  toggleFilter,
-      mapRef.current.appendChild(canvas);
+  toggleCity,
-
+  selectAllCities,
-      const ctx = canvas.getContext('2d');
+  setActiveFilterTab,
-      if (ctx) {
+  resetFilters,
-        // Draw a simple map placeholder
+  resetCities,
-        ctx.fillStyle = '#f3f4f6';
+  t,
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+}: FilterPanelProps) {
-
-        // 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]);
-
   return (
-    <div className='relative h-full w-full'>
-      {/* Filter panel - slides from left */}
     <div
       className={`absolute top-0 bottom-0 left-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
-          isFilterOpen ? 'translate-x-0' : '-translate-x-full'
+        isOpen ? 'translate-x-0' : '-translate-x-full'
       }`}
       style={{ width: '300px' }}
     >
@@ -335,11 +94,7 @@ export default function GasStationMap({
           <Filter className='h-5 w-5 text-red-600' />
           <span className='font-medium'>{t('map.filters')}</span>
         </div>
-          <Button
+        <Button variant='ghost' size='sm' onClick={onClose}>
-            variant='ghost'
-            size='sm'
-            onClick={() => setIsFilterOpen(false)}
-          >
           <ChevronLeft className='h-5 w-5' />
         </Button>
       </div>
@@ -355,7 +110,10 @@ export default function GasStationMap({
             <TabsTrigger value='services'>{t('map.services')}</TabsTrigger>
           </TabsList>
 
-            <TabsContent value='cities' className='mt-0'>
+          <TabsContent
+            value='cities'
+            className='mt-0 max-h-[300px] overflow-y-auto py-2 pr-1'
+          >
             <Button
               variant='outline'
               size='sm'
@@ -372,11 +130,13 @@ export default function GasStationMap({
               {allCities.map((city) => (
                 <Button
                   key={city}
-                    variant={
+                  variant={activeCities.includes(city) ? 'default' : 'outline'}
-                      activeCities.includes(city) ? 'default' : 'outline'
-                    }
                   size='sm'
-                    className={`justify-between ${activeCities.includes(city) ? 'bg-red-600 hover:bg-red-700' : ''}`}
+                  className={`justify-between ${
+                    activeCities.includes(city)
+                      ? 'bg-red-600 hover:bg-red-700'
+                      : ''
+                  }`}
                   onClick={() => toggleCity(city)}
                 >
                   <span>{city}</span>
@@ -386,16 +146,6 @@ export default function GasStationMap({
                 </Button>
               ))}
             </div>
-
-              {activeCities.length > 0 && (
-                <Button
-                  variant='link'
-                  className='mt-4 p-0 text-red-600'
-                  onClick={() => setActiveCities([])}
-                >
-                  {t('common.buttons.resetFilters')}
-                </Button>
-              )}
           </TabsContent>
 
           <TabsContent value='services' className='mt-0'>
@@ -418,47 +168,76 @@ export default function GasStationMap({
                 </Button>
               ))}
             </div>
-              {activeFilters.length > 0 && (
+          </TabsContent>
+
+          <Separator className='mt-2' />
+
+          {/* Кнопка сброса фильтров */}
+          {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={() => setActiveFilters([])}
+                  onClick={resetFilters}
                 >
                   {t('common.buttons.resetFilters')}
                 </Button>
               )}
-            </TabsContent>
         </Tabs>
       </div>
     </div>
+  );
+}
 
-      {/* Station list panel - slides from right */}
+// Компонент панели списка станций
+function StationListPanel({
+  isOpen,
+  onClose,
+  stations,
+  selectedStation,
+  activeFilters,
+  activeCities,
+  setSelectedStation,
+  t,
+  filterToFieldMap,
+  allFilters,
+  resetCities,
+  resetFilters,
+}: StationListPanelProps) {
+  return (
     <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'
+        isOpen ? 'translate-x-0' : 'translate-x-full'
       }`}
       style={{ width: '350px' }}
     >
       <div className='flex items-center justify-between border-b border-gray-200 p-4'>
-          <Button
+        <Button variant='ghost' size='sm' onClick={onClose}>
-            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>
+          <Badge>{stations.length}</Badge>
         </div>
       </div>
-        <div
+      <div className='overflow-y-auto' style={{ height: 'calc(100% - 60px)' }}>
-          className='overflow-y-auto'
+        {stations.length > 0 ? (
-          style={{ height: 'calc(100% - 60px)' }}
-        >
-          {filteredStations.length > 0 ? (
           <div className='p-2'>
-              {filteredStations.map((station) => (
+            {stations.map((station) => {
+              const services = allFilters.filter(
+                (filter) => station[filterToFieldMap[filter]],
+              );
+
+              return (
                 <div
                   key={station.id}
                   className={`mb-2 cursor-pointer rounded-lg border p-3 transition-colors ${
@@ -475,11 +254,23 @@ export default function GasStationMap({
                   <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'>
-                      {station.city}
+                        {station.region}
                       </Badge>
-                    {station.services.map((service) => (
+                    )}
+                    {services.map((service) => (
                       <Badge
                         key={service}
                         variant='outline'
@@ -493,8 +284,16 @@ export default function GasStationMap({
                       </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'>
@@ -504,7 +303,7 @@ export default function GasStationMap({
                 <Button
                   variant='link'
                   className='text-red-600'
-                    onClick={() => setActiveFilters([])}
+                  onClick={resetFilters}
                 >
                   {t('common.buttons.resetFilters')}
                 </Button>
@@ -513,7 +312,7 @@ export default function GasStationMap({
                 <Button
                   variant='link'
                   className='text-red-600'
-                    onClick={() => setActiveCities([])}
+                  onClick={resetCities}
                 >
                   {t('map.allCities')}
                 </Button>
@@ -523,10 +322,160 @@ export default function GasStationMap({
         )}
       </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'>
-        <div ref={mapRef} className='h-full w-full'></div>
+        <YandexMap points={points} />
       </div>
 
       {/* Control buttons */}
@@ -568,7 +517,7 @@ export default function GasStationMap({
           <span>{t('map.ourStations')}</span>
         </div>
         <p className='mt-1 text-xs text-gray-500'>
-          {t('map.totalStations')}: {stations.length}
+          {t('map.totalStations')}: {filteredStations.length}
         </p>
       </div>
     </div>

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { Map, Placemark, YMaps } from '@pbe/react-yandex-maps';
+import React from 'react';
 
 import { Point } from '../model';
 
@@ -8,29 +9,43 @@ 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 || [55.751574, 37.573856], // центр карты,
+          center: points[0].coordinates || mapCenter,
           zoom: 11,
+          behaviors: ['drag', 'multiTouch', 'dblClickZoom', 'scrollZoom'],
         }}
-        className='rounded-md shadow-lg'
         options={{
+          copyrightUaVisible: false,
+          copyrightProvidersVisible: false,
+          copyrightLogoVisible: false,
           suppressMapOpenBlock: true,
           suppressObsoleteBrowserNotifier: true,
         }}
-        width={'100%'}
+        className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
-        height={'500px'}
       >
         {points.map((point) => (
-          <Placemark key={point.id} geometry={point.coordinates} />
+          <Placemark
+            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

@@ -0,0 +1,31 @@
+'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,8 +4,7 @@ import { MapPin } from 'lucide-react';
 
 import { Stations } from '@/app/api-utlities/@types';
 
-import { Point } from '@/features/map/model';
+import { GasStationMap } from '@/features/map';
-import { YandexMap } from '@/features/map/ui/yandex-map';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
@@ -16,15 +15,9 @@ 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' />
@@ -40,7 +33,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>