Better map

client/src/pages/Boilers.tsx

@@ -1,7 +1,7 @@
 import { GridColDef } from '@mui/x-data-grid'
 import { useEffect, useState } from 'react'
 import { useBoilers } from '../hooks/swrHooks'
-import { Badge, Flex, Table, Text } from '@mantine/core'
+import { Badge, ScrollAreaAutosize, Table, Text } from '@mantine/core'
 
 function Boilers() {
     const [boilersPage, setBoilersPage] = useState(1)
@@ -33,7 +33,7 @@ function Boilers() {
     ]
 
     return (
-        <Flex direction='column' gap='sm' p='sm'>
+        <ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
             <Text size="xl" fw={600}>
                 Котельные
             </Text>
@@ -78,7 +78,7 @@ function Boilers() {
                     </Table.Tbody>
                 </Table>
             }
-        </Flex>
+        </ScrollAreaAutosize>
     )
 }
 

client/src/pages/Main.tsx

@@ -34,7 +34,7 @@ export default function Main() {
     }
 
     return (
-        <Flex direction='column' gap='sm' p='sm'>
+        <Flex w={'100%'} h={'100%'} direction='column' gap='sm' p='sm'>
             <Text size="xl" fw={700}>
                 Главная
             </Text>

client/src/pages/NotFound.tsx

@@ -3,14 +3,13 @@ import { IconError404 } from "@tabler/icons-react";
 
 export default function NotFound() {
     return (
-        <Flex p='sm' gap='sm' align='center' justify='center'>
+        <Flex w={'100%'} h={'100%'} p='sm' gap='sm' align='center' justify='center'>
             <Flex direction='column' gap='sm' align='center'>
                 <IconError404 size={100} />
                 <Text size="xl" fw={500} ta='center'>
                     Запрашиваемая страница не найдена.
                 </Text>
             </Flex>
-
         </Flex>
     )
 }

client/src/pages/Reports.tsx

@@ -3,7 +3,7 @@ import { useCities, useReport, useReportExport } from "../hooks/swrHooks"
 import { useDebounce } from "@uidotdev/usehooks"
 import { ICity } from "../interfaces/fuel"
 import { mutate } from "swr"
-import { ActionIcon, Autocomplete, Badge, Button, CloseButton, Flex, Table } from "@mantine/core"
+import { ActionIcon, Autocomplete, Badge, Button, CloseButton, Flex, ScrollAreaAutosize, Table } from "@mantine/core"
 import { IconRefresh } from "@tabler/icons-react"
 
 export default function Reports() {
@@ -40,7 +40,7 @@ export default function Reports() {
     }
 
     return (
-        <Flex direction='column' gap='sm' p='sm'>
+        <ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
             <Flex component="form" gap={'sm'}>
                 {/* <SearchableSelect /> */}
                 <Autocomplete
@@ -201,6 +201,6 @@ export default function Reports() {
                 onProcessRowUpdateError={() => {
                 }}
             /> */}
-        </Flex>
+        </ScrollAreaAutosize>
     )
 }

client/src/pages/Roles.tsx

@@ -3,7 +3,7 @@ import { useRoles } from '../hooks/swrHooks'
 import { CreateField } from '../interfaces/create'
 import RoleService from '../services/RoleService'
 import FormFields from '../components/FormFields'
-import { Button, Flex, Loader, Modal, Table } from '@mantine/core'
+import { Button, Loader, Modal, ScrollAreaAutosize, Table } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 
 export default function Roles() {
@@ -26,7 +26,7 @@ export default function Roles() {
   if (isLoading) return <Loader />
 
   return (
-    <Flex direction='column' align='flex-start' gap='sm' p='sm'>
+    <ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
       <Button onClick={open}>
         Добавить роль
       </Button>
@@ -78,6 +78,6 @@ export default function Roles() {
         onProcessRowUpdateError={() => {
         }}
       /> */}
-    </Flex>
+    </ScrollAreaAutosize>
   )
 }

client/src/pages/Servers.tsx

@@ -3,13 +3,13 @@ import ServersView from "../components/ServersView"
 import ServerIpsView from "../components/ServerIpsView"
 import ServerHardware from "../components/ServerHardware"
 import ServerStorage from "../components/ServerStorages"
-import { Flex, Tabs } from "@mantine/core"
+import { Flex, ScrollAreaAutosize, Tabs } from "@mantine/core"
 
 export default function Servers() {
     const [currentTab, setCurrentTab] = useState<string | null>('0')
 
     return (
-        <Flex gap='sm' p='sm' direction='column'>
+        <ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
             <Flex gap='sm' direction='column'>
                 <Tabs value={currentTab} onChange={setCurrentTab}>
                     <Tabs.List>
@@ -43,6 +43,6 @@ export default function Servers() {
                     width={500}
                     height={300}
                 /> */}
-        </Flex>
+        </ScrollAreaAutosize>
     )
 }

client/src/pages/Settings.tsx

@@ -5,7 +5,7 @@ import { CreateField } from "../interfaces/create"
 import { IUser } from "../interfaces/user"
 import FormFields from "../components/FormFields"
 import AuthService from "../services/AuthService"
-import { Flex } from "@mantine/core"
+import { Flex, ScrollAreaAutosize } from "@mantine/core"
 
 export default function Settings() {
     const { token } = useAuthStore()
@@ -39,10 +39,9 @@ export default function Settings() {
     ]
 
     return (
-        <Flex
-            direction='column'
-            align='flex-start'
-            gap='sm'
+        <ScrollAreaAutosize
+            w={'100%'}
+            h={'100%'}
             p='sm'
         >
             {currentUser &&
@@ -64,6 +63,6 @@ export default function Settings() {
                     />
                 </Flex>
             }
-        </Flex>
+        </ScrollAreaAutosize>
     )
 }

client/src/pages/TableTest.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Flex } from '@mantine/core';
 import CustomTable from '../components/CustomTable';
 
@@ -6,24 +5,6 @@ function TableTest() {
 
     return (
         <Flex direction='column' align='flex-start' gap='sm' p='sm'>
-            {/* <Table
-                columns={[
-                    { key: 'column1', title: 'Column 1', dataType: DataType.String },
-                    { key: 'column2', title: 'Column 2', dataType: DataType.String },
-                    { key: 'column3', title: 'Column 3', dataType: DataType.String },
-                    { key: 'column4', title: 'Column 4', dataType: DataType.String },
-                ]}
-                data={Array(100).fill(undefined).map(
-                    (_, index) => ({
-                        column1: `column:1 row:${index}`,
-                        column2: `column:2 row:${index}`,
-                        column3: `column:3 row:${index}`,
-                        column4: `column:4 row:${index}`,
-                        id: index,
-                    }),
-                )}
-                rowKeyField={'id'}
-            /> */}
             <CustomTable />
         </Flex>
     )

client/src/pages/Users.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react"
 import { CreateField } from "../interfaces/create"
 import UserService from "../services/UserService"
 import FormFields from "../components/FormFields"
-import { Badge, Button, Flex, Loader, Modal, Pagination, Select, Table } from "@mantine/core"
+import { Badge, Button, Flex, Loader, Modal, Pagination, ScrollAreaAutosize, Select, Table } from "@mantine/core"
 import { useDisclosure } from "@mantine/hooks"
 
 export default function Users() {
@@ -65,7 +65,7 @@ export default function Users() {
     }
 
     return (
-        <Flex direction='column' align='flex-start' gap='sm' p='sm'>
+        <ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
             <Button onClick={open}>
                 Добавить пользователя
             </Button>
@@ -157,6 +157,6 @@ export default function Users() {
                 onProcessRowUpdateError={() => {
                 }}
             /> */}
-        </Flex>
+        </ScrollAreaAutosize>
     )
 }