From 707d22bad0b4f266194829d65c7429be99649f12 Mon Sep 17 00:00:00 2001
From: Spytex <ivan.mishko21@gmail.com>
Date: Thu, 20 Jul 2023 12:01:26 +0300
Subject: [PATCH] Format code. Added API implementation.

---
 package-lock.json                             | 83 ++++++++++++++-----
 package.json                                  |  6 +-
 src/components/layout/Layout.tsx              | 20 ++---
 src/components/layout/footer/Footer.tsx       | 33 ++++----
 src/components/layout/header/Header.tsx       | 40 ++++-----
 .../screens/dashboard/Dashboard.tsx           | 62 ++++++++++++++
 src/components/screens/home/Home.tsx          | 59 ++++++-------
 src/components/screens/photos/Photos.tsx      | 45 ++++------
 src/components/screens/wagon/Wagon.tsx        | 14 ----
 src/components/screens/wagon/WagonSingle.tsx  | 20 +++++
 src/components/ui/photo/PhotoItem.tsx         | 22 ++---
 src/components/ui/photo/PhotoSort.tsx         | 29 +++----
 src/components/ui/wagon/WagonItem.tsx         | 30 +++----
 src/components/ui/wagon/WagonItemSingle.tsx   | 16 ----
 src/components/ui/wagon/WagonSearch.tsx       | 10 +--
 src/components/ui/wagon/WagonSort.tsx         | 31 +++----
 src/interfaces/photo.interface.ts             |  4 +-
 src/interfaces/wagon.interface.ts             |  2 +-
 src/pages/[VagonNumber].tsx                   | 21 +++--
 src/pages/_app.tsx                            | 12 +--
 src/pages/_document.tsx                       |  8 +-
 src/pages/api/keys.ts                         | 34 ++++++++
 src/pages/api/photo.ts                        |  8 +-
 src/pages/api/wagons.ts                       | 32 +++----
 src/pages/dashboard.tsx                       |  7 ++
 src/pages/index.tsx                           | 14 ++--
 src/pages/photos.tsx                          | 14 ++--
 src/service/key.service.ts                    | 17 ++++
 src/service/photo.service.ts                  | 16 ++--
 src/service/wagon.service.ts                  | 17 ++--
 30 files changed, 425 insertions(+), 301 deletions(-)
 create mode 100644 src/components/screens/dashboard/Dashboard.tsx
 delete mode 100644 src/components/screens/wagon/Wagon.tsx
 create mode 100644 src/components/screens/wagon/WagonSingle.tsx
 delete mode 100644 src/components/ui/wagon/WagonItemSingle.tsx
 create mode 100644 src/pages/api/keys.ts
 create mode 100644 src/pages/dashboard.tsx
 create mode 100644 src/service/key.service.ts

diff --git a/package-lock.json b/package-lock.json
index d88debf..6d5957b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,12 @@
         "@chakra-ui/react": "^2.7.1",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@node-redis/client": "^1.0.6",
         "@types/formidable": "^3.4.0",
-        "@types/node": "20.4.0",
+        "@types/node": "^20.4.0",
         "@types/react": "18.2.14",
         "@types/react-dom": "18.2.6",
+        "@types/uuid": "^9.0.2",
         "axios": "^1.4.0",
         "cypress": "^12.17.1",
         "cypress-file-upload": "^5.0.8",
@@ -29,7 +31,7 @@
         "react-icons": "^4.10.1",
         "react-query": "^3.39.3",
         "typescript": "5.1.6",
-        "uuid-by-string": "^4.0.0"
+        "uuid": "^9.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1627,6 +1629,36 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@node-redis/client": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@node-redis/client/-/client-1.0.6.tgz",
+      "integrity": "sha512-SRlHlrz2xAg1o5j9ZdnoF2fA8EZydbXr1mdUv35w0O0NP3XcYt3nQ7WAtmOu13kUa90PhmVoqTDMsTereAETfg==",
+      "dependencies": {
+        "cluster-key-slot": "1.1.0",
+        "generic-pool": "3.8.2",
+        "redis-parser": "3.0.0",
+        "yallist": "4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@node-redis/client/node_modules/cluster-key-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.0.tgz",
+      "integrity": "sha512-2Nii8p3RwAPiFwsnZvukotvow2rIHM+yQ6ZcBXGHdniadkYGZYiGmkHJIbZPIV9nfv7m/U1IPMVVcAhoWFeklw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@node-redis/client/node_modules/generic-pool": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.8.2.tgz",
+      "integrity": "sha512-nGToKy6p3PAbYQ7p1UlWl6vSPwfwU6TMSWK7TTu+WUY4ZjyZQGniGGt2oNVvyNSpyZYSB43zMXVLcBm08MTMkg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -1713,6 +1745,11 @@
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
       "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.2.tgz",
+      "integrity": "sha512-kNnC1GFBLuhImSnV7w4njQkUiJi0ZXUycu1rUaouPqiKlXkh77JKgdRnTAp1x5eBwcIwbtI+3otwzuIDEuDoxQ=="
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
@@ -3132,16 +3169,6 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
     },
-    "node_modules/js-md5": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
-      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
-    },
-    "node_modules/js-sha1": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/js-sha1/-/js-sha1-0.6.0.tgz",
-      "integrity": "sha512-01gwBFreYydzmU9BmZxpVk6svJJHrVxEN3IOiGl6VO93bVKYETJ0sIth6DASI6mIFdt7NmfX9UiByRzsYHGU9w=="
-    },
     "node_modules/js-sha3": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
@@ -4057,6 +4084,25 @@
         }
       }
     },
+    "node_modules/redis-errors": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
+      "integrity": "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/redis-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
+      "integrity": "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==",
+      "dependencies": {
+        "redis-errors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -4554,13 +4600,12 @@
         }
       }
     },
-    "node_modules/uuid-by-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/uuid-by-string/-/uuid-by-string-4.0.0.tgz",
-      "integrity": "sha512-88ZSfcSkN04juiLqSsuyteqlSrXNFdsEPzSv3urnElDXNsZUXQN0smeTnh99x2DE15SCUQNgqKBfro54CuzHNQ==",
-      "dependencies": {
-        "js-md5": "^0.7.3",
-        "js-sha1": "^0.6.0"
+    "node_modules/uuid": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
       }
     },
     "node_modules/verror": {
diff --git a/package.json b/package.json
index a1b5246..6b70ace 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,12 @@
     "@chakra-ui/react": "^2.7.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@node-redis/client": "^1.0.6",
     "@types/formidable": "^3.4.0",
-    "@types/node": "20.4.0",
+    "@types/node": "^20.4.0",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
+    "@types/uuid": "^9.0.2",
     "axios": "^1.4.0",
     "cypress": "^12.17.1",
     "cypress-file-upload": "^5.0.8",
@@ -30,6 +32,6 @@
     "react-icons": "^4.10.1",
     "react-query": "^3.39.3",
     "typescript": "5.1.6",
-    "uuid-by-string": "^4.0.0"
+    "uuid": "^9.0.0"
   }
 }
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index a9e0d37..5798acb 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,17 +1,17 @@
-import { FC, PropsWithChildren } from "react";
+import {FC, PropsWithChildren} from "react";
 import Header from "./header/Header";
 import Footer from "./footer/Footer";
 import {Box, Flex} from "@chakra-ui/react";
 
-const Layout: FC<PropsWithChildren<unknown>> = ({ children }) => {
-    return (
-        <Flex direction="column" minH="100vh">
-            <Header/>
-            <Box as="main" flex="1">
-                {children}
-            </Box>
-            <Footer/>
-        </Flex>
+const Layout: FC<PropsWithChildren<unknown>> = ({children}) => {
+  return (
+    <Flex direction="column" minH="100vh">
+      <Header/>
+      <Box as="main" flex="1">
+        {children}
+      </Box>
+      <Footer/>
+    </Flex>
   );
 }
 
diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
index 1e8c53e..6763c41 100644
--- a/src/components/layout/footer/Footer.tsx
+++ b/src/components/layout/footer/Footer.tsx
@@ -7,17 +7,17 @@ import {
   Text,
   useColorModeValue,
   VisuallyHidden,
-    Image,
+  Image,
 } from '@chakra-ui/react';
-import { FaInstagram, FaTwitter, FaYoutube } from 'react-icons/fa';
-import { ReactNode } from 'react';
+import {FaInstagram, FaTwitter, FaYoutube} from 'react-icons/fa';
+import {ReactNode} from 'react';
 import LogoTitle from "public/train_logo_title.png";
 
 const SocialButton = ({
-  children,
-  label,
-  href,
-}: {
+                        children,
+                        label,
+                        href,
+                      }: {
   children: ReactNode;
   label: string;
   href: string;
@@ -56,12 +56,13 @@ export default function Footer() {
         spacing={4}
         justify={'center'}
         align={'center'}>
-          <Link href="/">
-                <Image src={LogoTitle.src} alt="logo" height="50px"  objectFit="cover" />
-              </Link>
+        <Link href="/">
+          <Image src={LogoTitle.src} alt="logo" height="50px" objectFit="cover"/>
+        </Link>
         <Stack direction={'row'} spacing={6}>
           <Link href={'/'}>Home</Link>
           <Link href={'/photos'}>Photos</Link>
+          <Link href={'/dashboard'}>Dashboard</Link>
         </Stack>
       </Container>
 
@@ -73,20 +74,20 @@ export default function Footer() {
           as={Stack}
           maxW={'6xl'}
           py={4}
-          direction={{ base: 'column', md: 'row' }}
+          direction={{base: 'column', md: 'row'}}
           spacing={4}
-          justify={{ base: 'center', md: 'space-between' }}
-          align={{ base: 'center', md: 'center' }}>
+          justify={{base: 'center', md: 'space-between'}}
+          align={{base: 'center', md: 'center'}}>
           <Text>© 2023 Wagon. All rights reserved</Text>
           <Stack direction={'row'} spacing={6}>
             <SocialButton label={'Twitter'} href={'https://www.twitter.com/'}>
-              <FaTwitter />
+              <FaTwitter/>
             </SocialButton>
             <SocialButton label={'YouTube'} href={'https://www.youtube.com/'}>
-              <FaYoutube />
+              <FaYoutube/>
             </SocialButton>
             <SocialButton label={'Instagram'} href={'https://www.instagram.com/'}>
-              <FaInstagram />
+              <FaInstagram/>
             </SocialButton>
           </Stack>
         </Container>
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 310e028..3e1e2f6 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import {ReactNode} from 'react';
 import {
   Box,
   Flex,
@@ -13,15 +13,15 @@ import {
 import {MoonIcon, SunIcon, CloseIcon, HamburgerIcon} from '@chakra-ui/icons';
 import Logo from "public/train_logo.png";
 
-const Links = ['Home', 'Photos'];
-const Hrefs = ['/', 'photos'];
+const Links = ['Home', 'Photos', 'Dashboard'];
+const Hrefs = ['/', 'photos', 'dashboard'];
 
 interface NavLinkProps {
   children: ReactNode;
   href: string;
 }
 
-const NavLink = ({ children, href }: NavLinkProps) => (
+const NavLink = ({children, href}: NavLinkProps) => (
   <Link
     px={2}
     py={1}
@@ -36,8 +36,8 @@ const NavLink = ({ children, href }: NavLinkProps) => (
 );
 
 export default function Header() {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {colorMode, toggleColorMode} = useColorMode();
+  const {isOpen, onOpen, onClose} = useDisclosure();
   return (
     <>
       <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} position="sticky" top={0} zIndex="1">
@@ -45,34 +45,34 @@ export default function Header() {
 
           <IconButton
             size={'md'}
-            icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+            icon={isOpen ? <CloseIcon/> : <HamburgerIcon/>}
             aria-label={'Open Menu'}
-            display={{ md: 'none' }}
+            display={{md: 'none'}}
             onClick={isOpen ? onClose : onOpen}
           />
 
           <HStack spacing={8} alignItems={'center'}>
             <Box>
               <Link href="/">
-                <Image src={Logo.src} alt="logo" boxSize="50px" objectFit="cover" />
+                <Image src={Logo.src} alt="logo" boxSize="50px" objectFit="cover"/>
               </Link>
             </Box>
             <HStack
               as={'nav'}
               spacing={4}
-              display={{ base: 'none', md: 'flex' }}>
+              display={{base: 'none', md: 'flex'}}>
               {Links.map((link, index) => (
-                  <NavLink key={link} href={Hrefs[index]}>
-                    {link}
-                  </NavLink>
-                ))}
+                <NavLink key={link} href={Hrefs[index]}>
+                  {link}
+                </NavLink>
+              ))}
             </HStack>
           </HStack>
 
           <Flex alignItems={'center'}>
             <Stack direction={'row'} spacing={7}>
               <Button onClick={toggleColorMode}>
-                {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+                {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}
               </Button>
             </Stack>
           </Flex>
@@ -80,13 +80,13 @@ export default function Header() {
         </Flex>
 
         {isOpen ? (
-          <Box pb={4} display={{ md: 'none' }}>
+          <Box pb={4} display={{md: 'none'}}>
             <Stack as={'nav'} spacing={4}>
               {Links.map((link, index) => (
-                  <NavLink key={link} href={Hrefs[index]}>
-                    {link}
-                  </NavLink>
-                ))}
+                <NavLink key={link} href={Hrefs[index]}>
+                  {link}
+                </NavLink>
+              ))}
             </Stack>
           </Box>
         ) : null}
diff --git a/src/components/screens/dashboard/Dashboard.tsx b/src/components/screens/dashboard/Dashboard.tsx
new file mode 100644
index 0000000..05e7a45
--- /dev/null
+++ b/src/components/screens/dashboard/Dashboard.tsx
@@ -0,0 +1,62 @@
+import {FC, useEffect, useState} from 'react';
+import Layout from '@/components/layout/Layout';
+import {Box, Button, Center, Container, Divider, Flex, IconButton, Text, VStack} from '@chakra-ui/react';
+import {DeleteIcon} from '@chakra-ui/icons';
+import {KeyService} from "@/service/key.service";
+
+const Dashboard: FC = () => {
+  const [apiKeys, setApiKeys] = useState<string[]>([]);
+
+  const handleCreateApiKey = async () => {
+    await KeyService.postApiKey()
+    await fetchData();
+  };
+
+  const handleDeleteApiKey = async (key: string) => {
+    await KeyService.deleteApiKey(key)
+    await fetchData();
+  };
+
+  const fetchData = async () => {
+    try {
+      const data = await KeyService.getApiKeys();
+      setApiKeys(data);
+    } catch (error) {
+      console.error('Error fetching API keys:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <Layout>
+      <Container maxWidth="4xl">
+        <Flex p={4}>
+          <Box borderWidth={1} p={4} borderRadius="md" w="100%">
+            <Center>
+              <Button onClick={handleCreateApiKey}>Create API Key</Button>
+            </Center>
+            <Divider orientation="horizontal" py={2}/>
+            <VStack py={4}>
+              {apiKeys.map((apiKey, index) => (
+                <Box key={index} display="flex" alignItems="center">
+                  <Text>{apiKey}</Text>
+                  <IconButton
+                    ml={2}
+                    icon={<DeleteIcon/>}
+                    aria-label="Delete"
+                    onClick={() => handleDeleteApiKey(apiKey)}
+                  ></IconButton>
+                </Box>
+              ))}
+            </VStack>
+          </Box>
+        </Flex>
+      </Container>
+    </Layout>
+  );
+};
+
+export default Dashboard;
diff --git a/src/components/screens/home/Home.tsx b/src/components/screens/home/Home.tsx
index 2820184..6ea539c 100644
--- a/src/components/screens/home/Home.tsx
+++ b/src/components/screens/home/Home.tsx
@@ -1,36 +1,25 @@
-import { FC, useState } from 'react';
+import {FC, useState} from 'react';
 import Layout from '@/components/layout/Layout';
-import { IWagonData } from '@/interfaces/wagon.interface';
-import { WagonItem } from '@/components/ui/wagon/WagonItem';
+import {IWagonData} from '@/interfaces/wagon.interface';
+import {WagonItem} from '@/components/ui/wagon/WagonItem';
 import {Box, Flex, SimpleGrid, Button} from '@chakra-ui/react';
 import WagonSort from '@/components/ui/wagon/WagonSort';
 import WagonSearch from '@/components/ui/wagon/WagonSearch';
 
-const Home: FC<IWagonData> = ({ Vagons }) => {
+const Home: FC<IWagonData> = ({Vagons}) => {
   const [sortField, setSortField] = useState<string | string[]>('VagonNumber');
   const [sortOrder, setSortOrder] = useState<string | string[]>('asc');
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [itemsPerPage, setItemsPerPage] = useState<number>(25);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const handleSortFieldChange = (value: string | string[]) => {
-    setSortField(value);
-  };
-
-  const handleSortOrderChange = (value: string | string[]) => {
-    setSortOrder(value);
-  };
 
-  const handleSearchQueryChange = (value: string) => {
-    setSearchQuery(value);
-  };
-
-  const sortedVagons = Vagons.sort((a, b) => {
+  const sortedWagons = Vagons.sort((a, b) => {
     let compareResult = 0;
     if (sortField === 'VagonNumber') {
-      const vagonNumberA = parseInt(a.VagonNumber);
-      const vagonNumberB = parseInt(b.VagonNumber);
-      compareResult = vagonNumberA - vagonNumberB;
+      const wagonNumberA = parseInt(a.VagonNumber);
+      const wagonNumberB = parseInt(b.VagonNumber);
+      compareResult = wagonNumberA - wagonNumberB;
     } else if (sortField === 'DepartureStationName') {
       compareResult = a.DepartureStationName.localeCompare(b.DepartureStationName);
     }
@@ -38,11 +27,11 @@ const Home: FC<IWagonData> = ({ Vagons }) => {
     return sortOrder === 'asc' ? compareResult : -compareResult;
   });
 
-  const filteredVagons = sortedVagons.filter(wagon =>
+  const filteredWagons = sortedWagons.filter(wagon =>
     wagon.VagonNumber.toString().includes(searchQuery)
   );
 
-  const visibleVagons = filteredVagons.slice(0, currentPage * itemsPerPage);
+  const visibleWagons = filteredWagons.slice(0, currentPage * itemsPerPage);
 
   const handleLoadMore = () => {
     setCurrentPage(currentPage + 1);
@@ -50,22 +39,22 @@ const Home: FC<IWagonData> = ({ Vagons }) => {
 
   return (
     <Layout>
-      <Flex justifyContent="center" alignItems="center" mt={4} >
-      <WagonSearch searchQuery={searchQuery} onSearchQueryChange={handleSearchQueryChange} />
-        <Box ml={4} />
-      <WagonSort
-        sortField={sortField}
-        sortOrder={sortOrder}
-        onSortFieldChange={handleSortFieldChange}
-        onSortOrderChange={handleSortOrderChange}
-      />
-        </Flex>
-      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3, xl: 5 }} spacing={4} px={4} py={4}>
-        {visibleVagons.map(wagon => (
-          <WagonItem key={wagon.VagonNumber} Vagons={wagon} />
+      <Flex justifyContent="center" alignItems="center" mt={4}>
+        <WagonSearch searchQuery={searchQuery} onSearchQueryChange={setSearchQuery}/>
+        <Box ml={4}/>
+        <WagonSort
+          sortField={sortField}
+          sortOrder={sortOrder}
+          onSortFieldChange={setSortField}
+          onSortOrderChange={setSortOrder}
+        />
+      </Flex>
+      <SimpleGrid columns={{sm: 1, md: 2, lg: 3, xl: 5}} spacing={4} px={4} py={4}>
+        {visibleWagons.map(wagon => (
+          <WagonItem key={wagon.VagonNumber} Wagon={wagon}/>
         ))}
       </SimpleGrid>
-      {filteredVagons.length > currentPage * itemsPerPage && (
+      {filteredWagons.length > currentPage * itemsPerPage && (
         <Flex justifyContent="center" mb={4}>
           <Button onClick={handleLoadMore}>Show more</Button>
         </Flex>
diff --git a/src/components/screens/photos/Photos.tsx b/src/components/screens/photos/Photos.tsx
index 6d03ca7..70f82ee 100644
--- a/src/components/screens/photos/Photos.tsx
+++ b/src/components/screens/photos/Photos.tsx
@@ -1,35 +1,24 @@
-import { FC, useState } from "react";
+import {FC, useState} from "react";
 import Layout from "@/components/layout/Layout";
-import { IPhoto } from "@/interfaces/photo.interface";
+import {IPhoto} from "@/interfaces/photo.interface";
 import {SimpleGrid, Button, Flex, Box} from "@chakra-ui/react";
-import { PhotoItem } from "@/components/ui/photo/PhotoItem";
-import PhotoSort  from "@/components/ui/photo/PhotoSort";
-import PhotoSearch  from "@/components/ui/wagon/WagonSearch";
+import {PhotoItem} from "@/components/ui/photo/PhotoItem";
+import PhotoSort from "@/components/ui/photo/PhotoSort";
+import PhotoSearch from "@/components/ui/wagon/WagonSearch";
 
-const Photos: FC<IPhoto> = ({ dirs }) => {
+const Photos: FC<IPhoto> = ({photoPaths}) => {
   const [sortField, setSortField] = useState<string | string[]>('VagonNumber');
   const [sortOrder, setSortOrder] = useState<string | string[]>('asc');
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [itemsPerPage, setItemsPerPage] = useState<number>(25);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const handleSortFieldChange = (value: string | string[]) => {
-    setSortField(value);
-  };
-
-  const handleSortOrderChange = (value: string | string[]) => {
-    setSortOrder(value);
-  };
-
-  const handleSearchQueryChange = (value: string) => {
-    setSearchQuery(value);
-  };
 
-  const filteredDirs = dirs.filter((dir) =>
-    dir.toLowerCase().includes(searchQuery.toLowerCase())
+  const filteredPhotoPaths = photoPaths.filter((path) =>
+    path.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
-  const sortedDirs = filteredDirs.sort((a, b) => {
+  const sortedPhotoPaths = filteredPhotoPaths.sort((a, b) => {
     if (sortField === "VagonNumber") {
       return sortOrder === "asc" ? a.localeCompare(b) : b.localeCompare(a);
     } else {
@@ -37,7 +26,7 @@ const Photos: FC<IPhoto> = ({ dirs }) => {
     }
   });
 
-  const visibleDirs = sortedDirs.slice(0, currentPage * itemsPerPage);
+  const visibleDirs = sortedPhotoPaths.slice(0, currentPage * itemsPerPage);
 
   const handleLoadMore = () => {
     setCurrentPage(currentPage + 1);
@@ -48,22 +37,22 @@ const Photos: FC<IPhoto> = ({ dirs }) => {
       <Flex justifyContent="center" alignItems="center" mt={4}>
         <PhotoSearch
           searchQuery={searchQuery}
-          onSearchQueryChange={handleSearchQueryChange}
+          onSearchQueryChange={setSearchQuery}
         />
-        <Box ml={4} />
+        <Box ml={4}/>
         <PhotoSort
           sortField={sortField}
           sortOrder={sortOrder}
-          onSortFieldChange={handleSortFieldChange}
-          onSortOrderChange={handleSortOrderChange}
+          onSortFieldChange={setSortField}
+          onSortOrderChange={setSortOrder}
         />
       </Flex>
-      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3, xl: 5 }} spacing={4} px={4} py={4}>
+      <SimpleGrid columns={{sm: 1, md: 2, lg: 3, xl: 5}} spacing={4} px={4} py={4}>
         {visibleDirs.map((dir) => (
-            <PhotoItem key={dir} dirs={dir} />
+          <PhotoItem key={dir} photoPath={dir}/>
         ))}
       </SimpleGrid>
-      {filteredDirs.length > currentPage * itemsPerPage && (
+      {filteredPhotoPaths.length > currentPage * itemsPerPage && (
         <Flex justifyContent="center" mb={4}>
           <Button onClick={handleLoadMore}>Show more</Button>
         </Flex>
diff --git a/src/components/screens/wagon/Wagon.tsx b/src/components/screens/wagon/Wagon.tsx
deleted file mode 100644
index a11cf0c..0000000
--- a/src/components/screens/wagon/Wagon.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import Layout from "@/components/layout/Layout";
-import {IWagonDataSingle} from "@/interfaces/wagon.interface";
-import {WagonItemSingle} from "@/components/ui/wagon/WagonItemSingle";
-
-const Wagon: FC<IWagonDataSingle> = ({Vagons}) => {
-  return (
-    <Layout>
-      <WagonItemSingle Vagons={Vagons} />
-    </Layout>
-  )
-}
-
-export default Wagon;
\ No newline at end of file
diff --git a/src/components/screens/wagon/WagonSingle.tsx b/src/components/screens/wagon/WagonSingle.tsx
new file mode 100644
index 0000000..c8da070
--- /dev/null
+++ b/src/components/screens/wagon/WagonSingle.tsx
@@ -0,0 +1,20 @@
+import {FC} from 'react';
+import Layout from "@/components/layout/Layout";
+import {IWagonDataSingle} from "@/interfaces/wagon.interface";
+import {Box, Text} from "@chakra-ui/react";
+
+const WagonSingle: FC<IWagonDataSingle> = ({Wagon}) => {
+  return (
+    <Layout>
+      <Box p={4} w="100%">
+        {Object.entries(Wagon).map(([key, value]) => (
+          <Text key={key}>
+            <strong>{key}:</strong> {value.toString()}
+          </Text>
+        ))}
+      </Box>
+    </Layout>
+  )
+}
+
+export default WagonSingle;
\ No newline at end of file
diff --git a/src/components/ui/photo/PhotoItem.tsx b/src/components/ui/photo/PhotoItem.tsx
index 4d47ee3..81cc827 100644
--- a/src/components/ui/photo/PhotoItem.tsx
+++ b/src/components/ui/photo/PhotoItem.tsx
@@ -1,11 +1,11 @@
-import { FC } from "react";
+import {FC} from "react";
 import {Box, Flex, IconButton, Image, Text} from "@chakra-ui/react";
-import { IPhotoSingle } from "@/interfaces/photo.interface";
-import { PhotoService } from "@/service/photo.service";
-import { DeleteIcon } from "@chakra-ui/icons";
+import {IPhotoSingle} from "@/interfaces/photo.interface";
+import {PhotoService} from "@/service/photo.service";
+import {DeleteIcon} from "@chakra-ui/icons";
 
-export const PhotoItem: FC<IPhotoSingle> = ({ dirs }) => {
-  const fileName = dirs.split(".")[0];
+export const PhotoItem: FC<IPhotoSingle> = ({photoPath}) => {
+  const fileName = photoPath.split(".")[0];
 
   const handleFileDelete = async () => {
     try {
@@ -18,14 +18,14 @@ export const PhotoItem: FC<IPhotoSingle> = ({ dirs }) => {
   };
 
   return (
-    <Box key={dirs} borderWidth={1} p={4} borderRadius="md">
+    <Box key={photoPath} borderWidth={1} p={4} borderRadius="md">
       <Flex direction="column" align="center">
-        <Image src={"/photos/" + dirs} alt={fileName} maxW="200px" maxH="200px" />
+        <Image src={"/photos/" + photoPath} alt={fileName} maxW="200px" maxH="200px"/>
         <Text>{fileName}</Text>
         <IconButton
-            onClick={handleFileDelete}
-            icon={<DeleteIcon />}
-            aria-label="Delete">
+          onClick={handleFileDelete}
+          icon={<DeleteIcon/>}
+          aria-label="Delete">
         </IconButton>
       </Flex>
     </Box>
diff --git a/src/components/ui/photo/PhotoSort.tsx b/src/components/ui/photo/PhotoSort.tsx
index dfe4ef4..b3db038 100644
--- a/src/components/ui/photo/PhotoSort.tsx
+++ b/src/components/ui/photo/PhotoSort.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import {FC} from 'react';
 import {
   Button,
   Menu,
@@ -20,32 +20,25 @@ interface IPhotoSort {
 }
 
 const PhotoSort: FC<IPhotoSort> = ({
-  sortField,
-  sortOrder,
-  onSortFieldChange,
-  onSortOrderChange,
-}) => {
-  const handleSortFieldChange = (value: string | string[]) => {
-    onSortFieldChange(value);
-  };
-
-  const handleSortOrderChange = (value: string | string[]) => {
-    onSortOrderChange(value);
-  };
+                                     sortField,
+                                     sortOrder,
+                                     onSortFieldChange,
+                                     onSortOrderChange,
+                                   }) => {
 
   return (
     <Menu closeOnSelect={false}>
       <MenuButton as={Button}>
         <Flex alignItems="center">
-          <Icon as={FaSort} />
+          <Icon as={FaSort}/>
         </Flex>
       </MenuButton>
       <MenuList minWidth='240px'>
-        <MenuOptionGroup defaultValue={sortField} title='Sort By' type='radio' onChange={handleSortFieldChange}>
-          <MenuItemOption value='VagonNumber'>VagonNumber</MenuItemOption>
+        <MenuOptionGroup defaultValue={sortField} title='Sort By' type='radio' onChange={onSortFieldChange}>
+          <MenuItemOption value='VagonNumber'>Wagon Number</MenuItemOption>
         </MenuOptionGroup>
-        <MenuDivider />
-        <MenuOptionGroup defaultValue={sortOrder} title='Order' type='radio' onChange={handleSortOrderChange}>
+        <MenuDivider/>
+        <MenuOptionGroup defaultValue={sortOrder} title='Order' type='radio' onChange={onSortOrderChange}>
           <MenuItemOption value='asc'>Ascending</MenuItemOption>
           <MenuItemOption value='desc'>Descending</MenuItemOption>
         </MenuOptionGroup>
diff --git a/src/components/ui/wagon/WagonItem.tsx b/src/components/ui/wagon/WagonItem.tsx
index 457fdf2..0972095 100644
--- a/src/components/ui/wagon/WagonItem.tsx
+++ b/src/components/ui/wagon/WagonItem.tsx
@@ -1,11 +1,11 @@
-import { FC, useRef, useState } from "react";
-import { IWagonDataSingle } from "@/interfaces/wagon.interface";
+import {FC, useRef, useState} from "react";
+import {IWagonDataSingle} from "@/interfaces/wagon.interface";
 import {Box, Button, Center, Flex, Link, Text, useToast, VStack} from "@chakra-ui/react";
-import { PhotoService } from "@/service/photo.service";
+import {PhotoService} from "@/service/photo.service";
 import QRCode from "qrcode.react";
 import Barcode from "react-barcode";
 
-export const WagonItem: FC<IWagonDataSingle> = ({ Vagons }) => {
+export const WagonItem: FC<IWagonDataSingle> = ({Wagon}) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const toast = useToast();
   const [showQRCode, setShowQRCode] = useState(false);
@@ -23,7 +23,7 @@ export const WagonItem: FC<IWagonDataSingle> = ({ Vagons }) => {
       try {
         const formData = new FormData();
         formData.append("myImage", file);
-        const response = await PhotoService.uploadPhoto(Vagons.VagonNumber, formData);
+        const response = await PhotoService.uploadPhoto(Wagon.VagonNumber, formData);
         console.log("File uploaded:", response.data);
         toast({
           position: "bottom-right",
@@ -57,23 +57,23 @@ export const WagonItem: FC<IWagonDataSingle> = ({ Vagons }) => {
 
   return (
     <Box borderWidth={1} p={4} borderRadius="md" w="100%">
-      <Flex align="center" justify="space-between" >
-        <Link href={`/${Vagons.VagonNumber}`}>
+      <Flex align="center" justify="space-between">
+        <Link href={`/${Wagon.VagonNumber}`}>
           <Box>
             <Text>
-              <strong>Vagon Number:</strong> {Vagons.VagonNumber}
+              <strong>Wagon Number:</strong> {Wagon.VagonNumber}
             </Text>
             <Text>
-              <strong>Vagon Type:</strong> {Vagons.VagonType}
+              <strong>Wagon Type:</strong> {Wagon.VagonType}
             </Text>
             <Text>
-              <strong>Cargo Name:</strong> {Vagons.CargoName}
+              <strong>Cargo Name:</strong> {Wagon.CargoName}
             </Text>
             <Text>
-              <strong>Owner Name:</strong> {Vagons.OwnerName}
+              <strong>Owner Name:</strong> {Wagon.OwnerName}
             </Text>
             <Text>
-              <strong>Departure Station:</strong> {Vagons.DepartureStationName}
+              <strong>Departure Station:</strong> {Wagon.DepartureStationName}
             </Text>
           </Box>
         </Link>
@@ -92,15 +92,15 @@ export const WagonItem: FC<IWagonDataSingle> = ({ Vagons }) => {
       </Flex>
       {showQRCode && (
         <Center mt={4}>
-          <QRCode value={Vagons.VagonNumber} />
+          <QRCode value={Wagon.VagonNumber}/>
         </Center>
       )}
       {showBarcode && (
         <Center mt={4} textAlign="center">
-          <Barcode value={Vagons.VagonNumber.toString().padStart(12, "0")} format="EAN13" />
+          <Barcode value={Wagon.VagonNumber.toString().padStart(12, "0")} format="EAN13"/>
         </Center>
       )}
-      <input type="file" accept="image/*" ref={fileInputRef} hidden onChange={handleFileUpload} />
+      <input type="file" accept="image/*" ref={fileInputRef} hidden onChange={handleFileUpload}/>
     </Box>
   );
 };
diff --git a/src/components/ui/wagon/WagonItemSingle.tsx b/src/components/ui/wagon/WagonItemSingle.tsx
deleted file mode 100644
index c10e2bf..0000000
--- a/src/components/ui/wagon/WagonItemSingle.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {FC} from "react";
-import {IWagonDataSingle} from "@/interfaces/wagon.interface";
-import {Box, Text} from "@chakra-ui/react";
-
-export const WagonItemSingle: FC<IWagonDataSingle> = ({Vagons}) => {
-
-  return (
-    <Box p={4} w="100%">
-      {Object.entries(Vagons).map(([key, value]) => (
-        <Text key={key}>
-          <strong>{key}:</strong> {value.toString()}
-        </Text>
-      ))}
-    </Box>
-  );
-}
diff --git a/src/components/ui/wagon/WagonSearch.tsx b/src/components/ui/wagon/WagonSearch.tsx
index 24d1408..2e95ab2 100644
--- a/src/components/ui/wagon/WagonSearch.tsx
+++ b/src/components/ui/wagon/WagonSearch.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import {FC} from 'react';
 import {Box, Input} from '@chakra-ui/react';
 
 interface IWagonSearch {
@@ -6,15 +6,15 @@ interface IWagonSearch {
   onSearchQueryChange: (value: string) => void;
 }
 
-const WagonSearch: FC<IWagonSearch> = ({ searchQuery, onSearchQueryChange }) => {
+const WagonSearch: FC<IWagonSearch> = ({searchQuery, onSearchQueryChange}) => {
   const handleSearchQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onSearchQueryChange(event.target.value);
   };
 
   return (
-      <Box>
-          <Input placeholder="VagonNumber" id="search-query" value={searchQuery} onChange={handleSearchQueryChange} />
-      </Box>
+    <Box>
+      <Input placeholder="VagonNumber" id="search-query" value={searchQuery} onChange={handleSearchQueryChange}/>
+    </Box>
   );
 };
 
diff --git a/src/components/ui/wagon/WagonSort.tsx b/src/components/ui/wagon/WagonSort.tsx
index b745f5c..4c863b9 100644
--- a/src/components/ui/wagon/WagonSort.tsx
+++ b/src/components/ui/wagon/WagonSort.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import {FC} from 'react';
 import {
   Button,
   Menu,
@@ -20,33 +20,26 @@ interface IWagonSort {
 }
 
 const WagonSort: FC<IWagonSort> = ({
-  sortField,
-  sortOrder,
-  onSortFieldChange,
-  onSortOrderChange,
-}) => {
-  const handleSortFieldChange = (value: string | string[]) => {
-    onSortFieldChange(value);
-  };
-
-  const handleSortOrderChange = (value: string | string[]) => {
-    onSortOrderChange(value);
-  };
+                                     sortField,
+                                     sortOrder,
+                                     onSortFieldChange,
+                                     onSortOrderChange,
+                                   }) => {
 
   return (
     <Menu closeOnSelect={false}>
       <MenuButton as={Button}>
         <Flex alignItems="center">
-          <Icon as={FaSort} />
+          <Icon as={FaSort}/>
         </Flex>
       </MenuButton>
       <MenuList minWidth='240px'>
-        <MenuOptionGroup defaultValue={sortField} title='Sort By' type='radio' onChange={handleSortFieldChange}>
-          <MenuItemOption value='VagonNumber'>VagonNumber</MenuItemOption>
-          <MenuItemOption value='DepartureStationName'>DepartureStationName</MenuItemOption>
+        <MenuOptionGroup defaultValue={sortField} title='Sort By' type='radio' onChange={onSortFieldChange}>
+          <MenuItemOption value='VagonNumber'>Wagon Number</MenuItemOption>
+          <MenuItemOption value='DepartureStationName'>Departure Station</MenuItemOption>
         </MenuOptionGroup>
-        <MenuDivider />
-        <MenuOptionGroup defaultValue={sortOrder} title='Order' type='radio' onChange={handleSortOrderChange}>
+        <MenuDivider/>
+        <MenuOptionGroup defaultValue={sortOrder} title='Order' type='radio' onChange={onSortOrderChange}>
           <MenuItemOption value='asc'>Ascending</MenuItemOption>
           <MenuItemOption value='desc'>Descending</MenuItemOption>
         </MenuOptionGroup>
diff --git a/src/interfaces/photo.interface.ts b/src/interfaces/photo.interface.ts
index 6af1e7f..7289418 100644
--- a/src/interfaces/photo.interface.ts
+++ b/src/interfaces/photo.interface.ts
@@ -1,7 +1,7 @@
 export interface IPhoto {
-  dirs: string[];
+  photoPaths: string[];
 }
 
 export interface IPhotoSingle{
-  dirs: string;
+  photoPath: string;
 }
diff --git a/src/interfaces/wagon.interface.ts b/src/interfaces/wagon.interface.ts
index 6a8da78..d320063 100644
--- a/src/interfaces/wagon.interface.ts
+++ b/src/interfaces/wagon.interface.ts
@@ -33,5 +33,5 @@ export interface IWagonData {
 }
 
 export interface IWagonDataSingle {
-  Vagons: IWagon;
+  Wagon: IWagon;
 }
diff --git a/src/pages/[VagonNumber].tsx b/src/pages/[VagonNumber].tsx
index b092b1a..1e442be 100644
--- a/src/pages/[VagonNumber].tsx
+++ b/src/pages/[VagonNumber].tsx
@@ -1,24 +1,23 @@
-import { FC } from 'react';
-import { GetServerSideProps, NextPage } from 'next';
+import {FC} from 'react';
+import {GetServerSideProps, NextPage} from 'next';
 import {IWagonDataSingle} from '@/interfaces/wagon.interface';
-import { WagonService } from '@/service/wagon.service';
-import Wagon from "@/components/screens/wagon/Wagon";
+import {WagonService} from '@/service/wagon.service';
+import WagonSingle from "@/components/screens/wagon/WagonSingle";
 
-const WagonPage: FC<IWagonDataSingle> = ({ Vagons }) => {
-  return <Wagon Vagons={Vagons} />;
+const WagonPage: FC<IWagonDataSingle> = ({Wagon}) => {
+  return <WagonSingle Wagon={Wagon}/>;
 };
 
 export const getServerSideProps: GetServerSideProps<IWagonDataSingle> = async (context) => {
-  const { VagonNumber } = context.query;
+  const {VagonNumber} = context.query;
 
   try {
-    const allWagons = await WagonService.getAll();
-    const Vagons = allWagons.Vagons.find((Vagons) => Vagons.VagonNumber === VagonNumber);
+    const Wagon = await WagonService.getOne(VagonNumber as string);
 
-    if (Vagons) {
+    if (Wagon) {
       return {
         props: {
-          Vagons,
+          Wagon,
         },
       };
     } else {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3eca6fc..3d58488 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,11 +1,11 @@
-import type { AppProps } from 'next/app'
+import type {AppProps} from 'next/app'
 
-import { ChakraProvider } from "@chakra-ui/react"
+import {ChakraProvider} from "@chakra-ui/react"
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function App({Component, pageProps}: AppProps) {
   return (
-      <ChakraProvider>
-        <Component {...pageProps} />
-      </ChakraProvider>
+    <ChakraProvider>
+      <Component {...pageProps} />
+    </ChakraProvider>
   )
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 54e8bf3..4f5959f 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,12 +1,12 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import {Html, Head, Main, NextScript} from 'next/document'
 
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head/>
       <body>
-        <Main />
-        <NextScript />
+      <Main/>
+      <NextScript/>
       </body>
     </Html>
   )
diff --git a/src/pages/api/keys.ts b/src/pages/api/keys.ts
new file mode 100644
index 0000000..c9f2442
--- /dev/null
+++ b/src/pages/api/keys.ts
@@ -0,0 +1,34 @@
+import {NextApiRequest, NextApiResponse} from 'next';
+import {v4 as uuidv4} from 'uuid';
+import {createClient} from '@node-redis/client';
+
+const client = createClient();
+
+const redisKey = 'apiKeys';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!client.isOpen) {
+    await client.connect();
+  }
+
+  if (req.method === 'POST') {
+    await client.sAdd(redisKey, uuidv4());
+    res.status(200).end();
+
+  } else if (req.method === 'GET') {
+    const elements = await client.sMembers(redisKey);
+    res.status(200).json(elements);
+  } else if (req.method === 'DELETE') {
+    const {apiKey} = req.query;
+    if (typeof apiKey === 'string') {
+      await client.sRem(redisKey, apiKey);
+      res.status(200).end();
+
+    } else {
+      res.status(400).json({message: 'Invalid request'});
+    }
+  } else {
+    res.setHeader('Allow', ['POST', 'GET', 'DELETE']);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/src/pages/api/photo.ts b/src/pages/api/photo.ts
index 0be384d..62b9e9c 100644
--- a/src/pages/api/photo.ts
+++ b/src/pages/api/photo.ts
@@ -1,4 +1,4 @@
-import { NextApiHandler, NextApiRequest } from "next";
+import {NextApiHandler, NextApiRequest} from "next";
 import formidable from "formidable";
 import path from "path";
 import fs from "fs/promises";
@@ -25,13 +25,13 @@ const readFile = (
   return new Promise((resolve, reject) => {
     form.parse(req, (err, fields, files) => {
       if (err) reject(err);
-      resolve({ fields, files });
+      resolve({fields, files});
     });
   });
 };
 
 const deleteFile = async (req: NextApiRequest) => {
-  const { VagonNumber } = req.query;
+  const {VagonNumber} = req.query;
   const filePath = path.join(process.cwd(), "public", "photos", `${VagonNumber}.jpg`);
   try {
     await fs.unlink(filePath);
@@ -59,7 +59,7 @@ const handler: NextApiHandler = async (req, res) => {
     await readFile(req, true);
     res.json({done: "ok"});
   } else {
-    res.status(405).json({ message: "Method not supported" });
+    res.status(405).json({message: "Method not supported"});
   }
 };
 
diff --git a/src/pages/api/wagons.ts b/src/pages/api/wagons.ts
index b57b03f..62a723c 100644
--- a/src/pages/api/wagons.ts
+++ b/src/pages/api/wagons.ts
@@ -1,17 +1,25 @@
-import { NextApiRequest, NextApiResponse } from 'next';
-import { WagonService } from '@/service/wagon.service';
-import getUuidByString  from 'uuid-by-string';
+import {NextApiRequest, NextApiResponse} from 'next';
+import {WagonService} from '@/service/wagon.service';
+import {KeyService} from "@/service/key.service";
+import {createClient} from "@node-redis/client";
 
-const wordID = 'WagonInfo';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const { query } = req;
+    const {query} = req;
     const apiKey = query.apiKey as string;
+    const redisKey = 'apiKeys';
 
-    // Validate the apiKey (UUID v5)
-    if (!apiKey || !validateUuid(apiKey)) {
-      return res.status(400).json({ error: 'Invalid API key' });
+    const client = createClient();
+
+    if (!client.isOpen) {
+      await client.connect();
+    }
+
+    const validation = await client.sIsMember(redisKey, apiKey);
+
+    if (!apiKey || !validation) {
+      return res.status(401).json({error: 'Invalid API key'});
     }
 
     const wagonNumber = query.VagonNumber as string;
@@ -24,16 +32,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const wagon = await WagonService.getOne(wagonNumber);
 
     if (!wagon) {
-      return res.status(404).json({ error: 'Wagon not found' });
+      return res.status(404).json({error: 'Wagon not found'});
     }
 
     return res.status(200).json(wagon);
   } catch (error) {
     console.error('Error retrieving wagon:', error);
-    return res.status(500).json({ error: 'Internal server error' });
+    return res.status(500).json({error: 'Internal server error'});
   }
 }
-
-function validateUuid(uuid: string): boolean {
-  return getUuidByString(wordID) === uuid;
-}
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
new file mode 100644
index 0000000..054e5cc
--- /dev/null
+++ b/src/pages/dashboard.tsx
@@ -0,0 +1,7 @@
+import Dashboard from "@/components/screens/dashboard/Dashboard";
+
+const DashBoardPage = () => {
+  return <Dashboard/>;
+};
+
+export default DashBoardPage;
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b1d8eaf..1f7f1a3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,14 @@
 import Home from "@/components/screens/home/Home";
-import { GetServerSideProps, NextPage } from "next";
-import { IWagon } from "@/interfaces/wagon.interface";
-import { WagonService } from "@/service/wagon.service";
+import {GetServerSideProps, NextPage} from "next";
+import {IWagonData} from "@/interfaces/wagon.interface";
+import {WagonService} from "@/service/wagon.service";
 
-const HomePage: NextPage<{ Vagons: IWagon[] }> = ({ Vagons }) => {
-  return <Home Vagons={Vagons} />;
+const HomePage: NextPage<IWagonData> = ({Vagons}) => {
+  return <Home Vagons={Vagons}/>;
 };
 
-export const getServerSideProps: GetServerSideProps<{ Vagons: IWagon[] }> = async () => {
-  const { Vagons } = await WagonService.getAll();
+export const getServerSideProps: GetServerSideProps<IWagonData> = async () => {
+  const {Vagons} = await WagonService.getAll();
 
   return {
     props: {
diff --git a/src/pages/photos.tsx b/src/pages/photos.tsx
index 69b4692..73515b9 100644
--- a/src/pages/photos.tsx
+++ b/src/pages/photos.tsx
@@ -4,19 +4,19 @@ import fs from "fs/promises";
 import path from "path";
 import {IPhoto} from "@/interfaces/photo.interface";
 
-const PhotosPage: NextPage<IPhoto> = ({ dirs}) => {
-  return <Photos dirs={dirs}/>
+const PhotosPage: NextPage<IPhoto> = ({photoPaths}) => {
+  return <Photos photoPaths={photoPaths}/>
 }
 
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const props = { dirs: [] };
+  const props = {photoPaths: []};
   try {
-    const dirs = await fs.readdir(path.join(process.cwd(), "/public/photos"));
-    props.dirs = dirs as any;
-    return { props };
+    const photoPaths = await fs.readdir(path.join(process.cwd(), "/public/photos"));
+    props.photoPaths = photoPaths as any;
+    return {props};
   } catch (error) {
-    return { props };
+    return {props};
   }
 };
 
diff --git a/src/service/key.service.ts b/src/service/key.service.ts
new file mode 100644
index 0000000..4aff9f1
--- /dev/null
+++ b/src/service/key.service.ts
@@ -0,0 +1,17 @@
+import axios from "axios";
+
+
+export const KeyService = {
+  async getApiKeys() {
+    const {data} = await axios.get('/api/keys');
+    return data;
+  },
+
+  async deleteApiKey(key: string) {
+    await axios.delete(`/api/keys?apiKey=${encodeURIComponent(key)}`);
+  },
+
+  async postApiKey() {
+    await axios.post('/api/keys');
+  },
+}
\ No newline at end of file
diff --git a/src/service/photo.service.ts b/src/service/photo.service.ts
index 6fe6800..3ff056c 100644
--- a/src/service/photo.service.ts
+++ b/src/service/photo.service.ts
@@ -1,13 +1,13 @@
 import axios from "axios";
 
 export const PhotoService = {
-    async uploadPhoto(VagonNumber: string, formData: FormData){
-        const {data} = await axios.post(`/api/photo?VagonNumber=${VagonNumber}`, formData);
-        return data
-    },
+  async uploadPhoto(VagonNumber: string, formData: FormData) {
+    const {data} = await axios.post(`/api/photo?VagonNumber=${VagonNumber}`, formData);
+    return data
+  },
 
-    async deletePhoto(VagonNumber: string){
-        const {data} = await axios.delete(`/api/photo?VagonNumber=${VagonNumber}`);
-        return data
-    },
+  async deletePhoto(VagonNumber: string) {
+    const {data} = await axios.delete(`/api/photo?VagonNumber=${VagonNumber}`);
+    return data
+  },
 }
diff --git a/src/service/wagon.service.ts b/src/service/wagon.service.ts
index a33e84d..266545d 100644
--- a/src/service/wagon.service.ts
+++ b/src/service/wagon.service.ts
@@ -2,15 +2,14 @@ import axios from "axios";
 import {IWagonData} from "@/interfaces/wagon.interface";
 
 const API_URL = "https://rwl.artport.pro"
-axios.defaults.baseURL = API_URL;
 
 export const WagonService = {
-    async getAll(){
-        const {data} = await axios.get<IWagonData>('/commercialAgent/hs/CarrWorkApp/VagonInfo')
-        return data
-    },
-    async getOne(VagonNumber: string){
-        const {data} = await axios.get<IWagonData>('/commercialAgent/hs/CarrWorkApp/VagonInfo')
-        return data.Vagons.find((Vagons) => Vagons.VagonNumber === VagonNumber)
-    },
+  async getAll() {
+    const {data} = await axios.get<IWagonData>(`${API_URL}/commercialAgent/hs/CarrWorkApp/VagonInfo`)
+    return data
+  },
+  async getOne(VagonNumber: string) {
+    const {data} = await axios.get<IWagonData>(`${API_URL}/commercialAgent/hs/CarrWorkApp/VagonInfo`)
+    return data.Vagons.find((Vagons) => Vagons.VagonNumber === VagonNumber)
+  },
 }