теперь напиши как можно описать структуру страницы с картой кыргызстана мне нужно реализовать диаграмму активности в starUML по моему проекту  придумай дохрена всего но при этом это должнобыть реалистичным чтобы я мог это разаработать

вот код который у меня есть
// frontend/src/KGMap/KyrgyzstanMap.jsx

import React, { useState } from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './KyrgyzstanMap.scss';
import Button from '../Button/Button';

import kyrgyzstanData from '../data/kyrgyzstan.json';
import worldData from '../data/world.json';

const KyrgyzstanMap = () => {
  // State variables to manage panel visibility and info
  const [currentStyle, setCurrentStyle] = useState('streets');
  const [isControlPanelOpen, setIsControlPanelOpen] = useState(false);
  const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
  const [kyrgyzstanInfo, setKyrgyzstanInfo] = useState(null);

  const bounds = [
    [34, 64],
    [48, 85],
  ];

  const center = [41.2044, 74.7661];
  const minZoom = 5;
  const maxZoom = 15;

  const handleChangeStyle = (styleId) => {
    setCurrentStyle(styleId);
  };

  const styleMap = {
    streets: {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '© OpenStreetMap contributors',
    },
    satellite: {
      url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
      attribution: '© OpenTopoMap',
    },
    light: {
      url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
      attribution: '© CARTO',
    },
    dark: {
      url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
      attribution: '© CARTO',
    },
    outdoors: {
      url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
      attribution: '© OpenStreetMap contributors, Tiles style by HOT',
    },
  };

  // Styles for other countries and Kyrgyzstan
  const otherCountriesStyle = {
    fillColor: '#808080',
    fillOpacity: 0.4,
    weight: 0,
    opacity: 0,
  };

  const kyrgyzstanStyle = {
    fillColor: 'transparent',
    fillOpacity: 0,
    weight: 0,
    opacity: 0,
  };

  // Function to handle clicks on Kyrgyzstan
  const onKyrgyzstanClick = () => {
    // Adjust based on your JSON structure
    setKyrgyzstanInfo(kyrgyzstanData.properties);
    setIsInfoPanelOpen(true);
  };

  // Component to render Kyrgyzstan GeoJSON with event handlers
  const KyrgyzstanGeoJSON = () => {
    const onEachFeature = (feature, layer) => {
      if (feature.properties && (feature.properties.ADMIN === 'Kyrgyzstan' || feature.properties.NAME === 'Kyrgyzstan')) {
        layer.on({
          click: onKyrgyzstanClick,
        });
        layer.bindTooltip('Кыргызстан'); // Optional tooltip
      }
    };

    return (
      <GeoJSON
        data={kyrgyzstanData}
        style={kyrgyzstanStyle}
        onEachFeature={onEachFeature}
      />
    );
  };

  return (
    <div className="kyrgyzstan-map-container">
      {/* Top-Left Button: Control Panel Toggle */}
      <Button
        className={`top-left-button ${isControlPanelOpen ? 'active' : ''}`}
        onClick={() => setIsControlPanelOpen(!isControlPanelOpen)}
        variant="outline"
        aria-label="Toggle Control Panel"
      >
        ≡
      </Button>

      {/* Top-Right Button: Info Panel Toggle */}
      <Button
        className={`top-right-button ${isInfoPanelOpen ? 'active' : ''}`}
        onClick={() => setIsInfoPanelOpen(!isInfoPanelOpen)}
        variant="outline"
        aria-label="Toggle Info Panel"
      >
        ℹ️
      </Button>

      {/* Control Panel */}
      <div className={`control-panel ${isControlPanelOpen ? 'open' : ''}`}>
        <h3>Стили карты</h3>
        <div className="style-buttons">
          <Button
            onClick={() => handleChangeStyle('streets')}
            variant="outline"
            size="small"
            className={currentStyle === 'streets' ? 'active' : ''}
          >
            Улицы
          </Button>
          <Button
            onClick={() => handleChangeStyle('satellite')}
            variant="outline"
            size="small"
            className={currentStyle === 'satellite' ? 'active' : ''}
          >
            Спутник
          </Button>
          <Button
            onClick={() => handleChangeStyle('light')}
            variant="outline"
            size="small"
            className={currentStyle === 'light' ? 'active' : ''}
          >
            Светлый
          </Button>
          <Button
            onClick={() => handleChangeStyle('dark')}
            variant="outline"
            size="small"
            className={currentStyle === 'dark' ? 'active' : ''}
          >
            Темный
          </Button>
          <Button
            onClick={() => handleChangeStyle('outdoors')}
            variant="outline"
            size="small"
            className={currentStyle === 'outdoors' ? 'active' : ''}
          >
            На открытом воздухе
          </Button>
        </div>
      </div>

      {/* Info Panel */}
      <div className={`info-panel ${isInfoPanelOpen ? 'open' : ''}`}>
        <h3>Информация о Кыргызстане</h3>
        {kyrgyzstanInfo ? (
          <div>
            {/* Adjust fields based on kyrgyzstan.json structure */}
            <p><strong>Название:</strong> {kyrgyzstanInfo.ADMIN || kyrgyzstanInfo.NAME}</p>
            <p><strong>Столица:</strong> {kyrgyzstanInfo.CAPITAL}</p>
            <p><strong>Население:</strong> {kyrgyzstanInfo.POPULATION}</p>
            {/* Add more fields as necessary */}
          </div>
        ) : (
          <p>Нажмите на территорию Кыргызстана на карте, чтобы получить информацию.</p>
        )}
      </div>

      {/* Map Container */}
      <MapContainer
        center={center}
        zoom={7}
        minZoom={minZoom}
        maxZoom={maxZoom}
        maxBounds={bounds}
        style={{ height: '100vh', width: '100%' }}
        scrollWheelZoom={true}
      >
        {/* Tile Layer based on current style */}
        <TileLayer
          url={styleMap[currentStyle].url}
          attribution={styleMap[currentStyle].attribution}
        />

        {/* Shading for other countries */}
        <GeoJSON
          data={worldData}
          style={otherCountriesStyle}
          filter={(feature) => {
            const countryName = feature.properties.ADMIN || feature.properties.NAME;
            return countryName !== 'Kyrgyzstan';
          }}
        />

        {/* Interactive Kyrgyzstan Layer */}
        <KyrgyzstanGeoJSON />
      </MapContainer>
    </div>
  );
};

export default KyrgyzstanMap;