update: update logo

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,443 +23,221 @@ import {
   TabsTrigger,
 } from '@/shared/shadcn-ui/tabs';
 
-// Sample data for gas stations
-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();
+import { Point } from '../model';
+import { YandexMap } from './yandex-map';
 
+// Пропсы для компонента GasStationMap
 interface GasStationMapProps {
   stations: Stations;
 }
 
-export default function GasStationMap({
-  stations: _stations,
-}: GasStationMapProps) {
-  const { t } = useTextController();
-  const mapRef = useRef<HTMLDivElement>(null);
-  const [activeFilters, setActiveFilters] = useState<string[]>([]);
-  const [activeCities, setActiveCities] = useState<string[]>([]);
-  const [filteredStations, setFilteredStations] = useState(stations);
-  const [selectedStation, setSelectedStation] = useState<number | null>(null);
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
-  const [isStationListOpen, setIsStationListOpen] = useState(false);
-  const [activeFilterTab, setActiveFilterTab] = useState('cities');
+// Пропсы для панели фильтров
+interface FilterPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  activeFilters: string[];
+  activeCities: string[];
+  allCities: string[];
+  allFilters: string[];
+  activeFilterTab: string;
+  toggleFilter: (filter: string) => void;
+  toggleCity: (city: string) => void;
+  selectAllCities: () => void;
+  setActiveFilterTab: (tab: string) => void;
+  resetFilters: () => void;
+  resetCities: () => void;
+  t: (key: string) => string;
+}
 
-  // Toggle service filter
-  const toggleFilter = (filter: string) => {
-    if (activeFilters.includes(filter)) {
-      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) {
-      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]);
+// Пропсы для панели списка станций
+interface StationListPanelProps {
+  isOpen: boolean;
+  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;
+}
 
+// Компонент панели фильтров
+function FilterPanel({
+  isOpen,
+  onClose,
+  activeFilters,
+  activeCities,
+  allCities,
+  allFilters,
+  activeFilterTab,
+  toggleFilter,
+  toggleCity,
+  selectAllCities,
+  setActiveFilterTab,
+  resetFilters,
+  resetCities,
+  t,
+}: FilterPanelProps) {
   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'
-        }`}
-        style={{ width: '300px' }}
-      >
-        <div className='flex items-center justify-between border-b border-gray-200 p-4'>
-          <div className='flex items-center gap-2'>
-            <Filter className='h-5 w-5 text-red-600' />
-            <span className='font-medium'>{t('map.filters')}</span>
-          </div>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={() => setIsFilterOpen(false)}
-          >
-            <ChevronLeft className='h-5 w-5' />
-          </Button>
-        </div>
-
-        <div className='p-4'>
-          <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'>
-              <Button
-                variant='outline'
-                size='sm'
-                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'>
-                {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 && (
-                <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'>
-              <div className='flex flex-wrap gap-2'>
-                {allFilters.map((filter) => (
-                  <Button
-                    key={filter}
-                    variant={
-                      activeFilters.includes(filter) ? 'default' : 'outline'
-                    }
-                    size='sm'
-                    className={
-                      activeFilters.includes(filter)
-                        ? 'bg-red-600 hover:bg-red-700'
-                        : ''
-                    }
-                    onClick={() => toggleFilter(filter)}
-                  >
-                    {filter}
-                  </Button>
-                ))}
-              </div>
-              {activeFilters.length > 0 && (
-                <Button
-                  variant='link'
-                  className='mt-4 p-0 text-red-600'
-                  onClick={() => setActiveFilters([])}
-                >
-                  {t('common.buttons.resetFilters')}
-                </Button>
-              )}
-            </TabsContent>
-          </Tabs>
+    <div
+      className={`absolute top-0 bottom-0 left-0 z-20 transform bg-white shadow-lg transition-transform duration-300 ${
+        isOpen ? 'translate-x-0' : '-translate-x-full'
+      }`}
+      style={{ width: '300px' }}
+    >
+      <div className='flex items-center justify-between border-b border-gray-200 p-4'>
+        <div className='flex items-center gap-2'>
+          <Filter className='h-5 w-5 text-red-600' />
+          <span className='font-medium'>{t('map.filters')}</span>
         </div>
+        <Button variant='ghost' size='sm' onClick={onClose}>
+          <ChevronLeft className='h-5 w-5' />
+        </Button>
       </div>
 
-      {/* 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)' }}
+      <div className='p-4'>
+        <Tabs
+          value={activeFilterTab}
+          onValueChange={setActiveFilterTab}
+          className='w-full'
         >
-          {filteredStations.length > 0 ? (
-            <div className='p-2'>
-              {filteredStations.map((station) => (
+          <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
+              variant='outline'
+              size='sm'
+              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'>
+              {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>
+          </TabsContent>
+
+          <TabsContent value='services' className='mt-0'>
+            <div className='flex flex-wrap gap-2'>
+              {allFilters.map((filter) => (
+                <Button
+                  key={filter}
+                  variant={
+                    activeFilters.includes(filter) ? 'default' : 'outline'
+                  }
+                  size='sm'
+                  className={
+                    activeFilters.includes(filter)
+                      ? 'bg-red-600 hover:bg-red-700'
+                      : ''
+                  }
+                  onClick={() => toggleFilter(filter)}
+                >
+                  {filter}
+                </Button>
+              ))}
+            </div>
+          </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={resetFilters}
+                >
+                  {t('common.buttons.resetFilters')}
+                </Button>
+              )}
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+
+// Компонент панели списка станций
+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 ${
+        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 variant='ghost' size='sm' onClick={onClose}>
+          <ChevronRight className='h-5 w-5' />
+        </Button>
+        <div className='flex items-center gap-2'>
+          <span className='font-medium'>{t('map.stationsList')}</span>
+          <Badge>{stations.length}</Badge>
+        </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 (
                 <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'>
-                    <Badge className='mb-1 border-blue-200 bg-blue-100 text-blue-800'>
-                      {station.city}
-                    </Badge>
-                    {station.services.map((service) => (
+                    {station.region && (
+                      <Badge className='mb-1 border-blue-200 bg-blue-100 text-blue-800'>
+                        {station.region}
+                      </Badge>
+                    )}
+                    {services.map((service) => (
                       <Badge
                         key={service}
                         variant='outline'
@@ -493,40 +284,198 @@ 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'>
+            <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 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>
+    </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%'}
-        height={'500px'}
+        className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
       >
         {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/assets/logo.tsx

@@ -4,8 +4,8 @@ import Link from 'next/link';
 export const Logo = () => {
   return (
     <Link className='flex items-center gap-2' href={'/'}>
-      <Image src='/logo.svg' alt='oriyo-logo' width={24} height={24} />
-      <span className='text-xl font-bold'>Ориё</span>
+      <Image src='/logo-new.png' alt='oriyo-logo' width={110} height={40} />
+      {/* <span className='text-xl font-bold'>Ориё</span> */}
     </Link>
   );
 };

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 { YandexMap } from '@/features/map/ui/yandex-map';
+import { GasStationMap } from '@/features/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>