Update

client/src/pages/MapTest.tsx

@@ -1,8 +1,81 @@
+import { Container, Stack, Tabs } from '@mantine/core'
 import MapComponent from '../components/map/MapComponent'
+import { useEffect } from 'react'
+import { initializeObjectsState } from '../store/objects'
+import { deleteMapTab, setCurrentTab, useAppStore } from '../store/app'
+import { initializeMapState, useMapStore } from '../store/map'
+import { v4 as uuidv4 } from 'uuid'
 
 function MapTest() {
+    const { mapTab, currentTab } = useAppStore()
+    const { id } = useMapStore()
+
+    const tabs = [
+        {
+            id: uuidv4(),
+            year: 2023,
+            region: 11,
+            district: 145,
+        },
+        {
+            id: uuidv4(),
+            year: 2023,
+            region: 11,
+            district: 146,
+        },
+    ]
+
+    useEffect(() => {
+        tabs.map(tab => useAppStore.setState((state) => {
+            initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year)
+            initializeMapState(tab.id)
+
+            return {
+                mapTab: {
+                    ...state.mapTab,
+                    [tab.id]: {
+                        year: tab.year,
+                        region: tab.region,
+                        district: tab.district
+                    }
+                }
+            }
+        }))
+
+        setCurrentTab(tabs[0].id)
+
+        return () => {
+            tabs.map(tab => deleteMapTab(tab.id))
+        }
+    }, [])
+
     return (
-        <MapComponent />
+        <Container fluid w='100%' pos='relative' p={0}>
+            <Tabs h='100%' variant='default' value={currentTab} onChange={setCurrentTab} keepMounted={true}>
+                <Stack gap={0} h='100%'>
+                    <Tabs.List>
+                        {Object.entries(mapTab).map(([key]) => (
+                            <Tabs.Tab value={key} key={key}>
+                                {id[key]?.mapLabel}
+                            </Tabs.Tab>
+                        ))}
+                    </Tabs.List>
+
+                    {Object.entries(mapTab).map(([key]) => (
+                        <Tabs.Panel value={key} key={key} h='100%' pos='relative'>
+                            <MapComponent
+                                key={key}
+                                id={key}
+                                active={currentTab === key}
+                            />
+
+                        </Tabs.Panel>
+                    ))}
+                </Stack>
+
+            </Tabs>
+
+        </Container>
     )
 }