Index: sources/client/src/hooks/useActivateSession.js
===================================================================
--- sources/client/src/hooks/useActivateSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useActivateSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,43 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useActivateSession = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+
+  const activateSession = async ({
+    pssId,
+    parkingSpaceName,
+    onActivateSession,
+  }) => {
+    setIsLoading(true);
+    axios
+        .put(
+            `/parkingSession/verify/${pssId}?parkingSpaceName=${parkingSpaceName}`)
+        .then((res) => {
+            // res.data is the new updated active zone
+            setAlert({
+                type: 'success',
+                msg: 'Сесијата е успешно активирана!',
+            });
+            onActivateSession({ updatedSession:res.data });
+        })
+        .catch((err) => {
+          console.log(err);
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!',
+            });
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+  return {
+    activateSession,
+    isLoading,
+  };
+};
+
+export default useActivateSession;
Index: sources/client/src/hooks/useCreateEmployee.js
===================================================================
--- sources/client/src/hooks/useCreateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useCreateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,39 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useCreateEmployee = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const history = useHistory();
+    const createEmployee = async ({ employee }) => {
+        setIsBackdropLoaderOpen(true);
+        console.log(employee);
+        await axios
+            .post(`/vraboten`, employee) // TODO CHANGE OBJECT
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Вработениот ${employee.firstName} ${employee.lastName} е успешно креирана!`,
+                });
+                history.push('/employees');
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        createEmployee,
+    };
+};
+
+export default useCreateEmployee;
Index: sources/client/src/hooks/useCreateZone.js
===================================================================
--- sources/client/src/hooks/useCreateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useCreateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,47 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useCreateZone = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+
+    const createZone = async ({
+        zoneName,
+        setModalInput,
+        setModalOpen,
+        addNewZoneToData,
+    }) => {
+        setIsLoading(true);
+        await axios
+            .post(`/parkingZoneName`, zoneName)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Зоната ${zoneName} е успешно креирана!`,
+                });
+                setModalOpen(false);
+                setModalInput('');
+                console.log(res.data);
+                addNewZoneToData({ ...res.data });
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+
+    return {
+        createZone,
+        isLoading,
+    };
+};
+
+export default useCreateZone;
Index: sources/client/src/hooks/useDeleteEmployee.js
===================================================================
--- sources/client/src/hooks/useDeleteEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useDeleteEmployee = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const history = useHistory();
+    const deleteEmployee = async ({ id }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .delete(`/vraboten/${id}`)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Вработениот е успешно избришан!`,
+                });
+                history.push('/employees');
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+                console.log(err);
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        deleteEmployee,
+    };
+};
+
+export default useDeleteEmployee;
Index: sources/client/src/hooks/useDeleteSession.js
===================================================================
--- sources/client/src/hooks/useDeleteSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useDeleteSession = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+
+  const deleteSession = async ({ pssId, onDeleteSession }) => {
+    setIsLoading(true);
+    await axios
+        .delete(`/parkingSession/${pssId}`) 
+        .then((res) => {
+            setAlert({
+                type: 'success',
+                msg: `Сесијата е успешно избришана!`, //
+            });
+
+            onDeleteSession({ pssId });
+        })
+        .catch((err) => {
+            // ALERT FOR ERROR WITH ERROR MSG
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!', // TODO change msg to err.message
+            });
+            console.log(err);
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+
+  return {
+    deleteSession,
+    isLoading,
+  };
+};
+
+export default useDeleteSession;
Index: sources/client/src/hooks/useDeleteUserPlate.js
===================================================================
--- sources/client/src/hooks/useDeleteUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+
+const useDeleteUserPlate = () => {
+    const { user } = useContext(UserContext);
+    const { setAlert } = useContext(AccessoriesContext);
+    const deleteUserPlate = async ({
+        deletePlate,
+        plate,
+        ind,
+        setIsLoadingDeletePlate,
+    }) => {
+        setIsLoadingDeletePlate({ state: true, itemInd: ind });
+        await axios
+            .delete(`/registriranParkirac/${user.id}/tablici/${plate}`) // TODO CHANGE OBJECT
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Таблицата е успешно избришана!`, // TODO Change MSG
+                });
+                deletePlate(plate); // or res.plate
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoadingDeletePlate({ state: false, itemInd: null });
+            });
+    };
+
+    return {
+        deleteUserPlate,
+    };
+};
+
+export default useDeleteUserPlate;
Index: sources/client/src/hooks/useDeleteZone.js
===================================================================
--- sources/client/src/hooks/useDeleteZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useDeleteZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useDeleteZone = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+  const history = useHistory();
+  const deleteZone = async ({ id }) => {
+    setIsLoading(true);
+    await axios
+      .delete(`/parkingZone/${id}`) // TODO CHANGE OBJECT
+      .then((res) => {
+        setAlert({
+          type: 'success',
+          msg: `Зоната е успешно избришана!`, // TODO Change MSG - add the first and last name of the deleted emoloyee
+        });
+        history.push('/');
+      })
+      .catch((err) => {
+        // ALERT FOR ERROR WITH ERROR MSG
+        setAlert({
+          type: 'error',
+          msg: 'Проблеми со серверот!', // TODO change msg to err.message
+        });
+        console.log(err);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  return {
+    deleteZone,
+    isLoading,
+  };
+};
+
+export default useDeleteZone;
Index: sources/client/src/hooks/useFindUser.js
===================================================================
--- sources/client/src/hooks/useFindUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useFindUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,74 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import jwt from 'jwt-decode';
+
+const useFindUser = ({ setAlert }) => {
+    const [user, setUser] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const location = useLocation();
+    const findUser = async () => {
+        let token = localStorage.getItem('token');
+        try {
+            if (!token) throw Error();
+            token = JSON.parse(token);
+        } catch (err) {
+            if (
+                location.state === undefined &&
+                location.pathname !== '/' &&
+                location.pathname !== '/login-guest' &&
+                location.pathname !== '/login' &&
+                location.pathname !== '/register'
+            ) {
+                setAlert({
+                    type: 'error',
+                    msg: 'Не Сте Логирани!', // TODO change msg to err.message
+                });
+            }
+            setIsLoading(false);
+            return;
+        }
+        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+        
+        await axios
+            .get(`/testToken`)
+            .then((res) => {
+                if(res.status !== 200) throw new Error('Invalid token!');
+                const user = jwt(token);
+                setUser({
+                    firstName: user.fullName.split(' ')[0] ?? '',
+                    lastName: user.fullName.split(' ')[1] ?? '',
+                    role: user.roles[0] ?? '',
+                    id: user.id,
+                });
+            })
+            .catch((err) => {
+                localStorage.clear();
+                if (
+                    location.state === undefined &&
+                    location.pathname !== '/' &&
+                    location.pathname !== '/login-guest' &&
+                    location.pathname !== '/register'
+                ) {
+                    setAlert({
+                        type: 'error',
+                        msg: 'Не Сте Логирани!', // TODO change msg to err.message
+                    });
+                }
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    useEffect(() => {
+        findUser();
+    }, []);
+
+    return {
+        user,
+        setUser,
+        isLoading,
+    };
+};
+
+export default useFindUser;
Index: sources/client/src/hooks/useForm.js
===================================================================
--- sources/client/src/hooks/useForm.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/hooks/useForm.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -10,8 +10,11 @@
     });
   };
-
+  const setNewData = (newData) => {
+    setData({...newData});
+  }
   return {
     data,
     onFormChange,
+    setNewData
   };
 };
Index: sources/client/src/hooks/useGetData.js
===================================================================
--- sources/client/src/hooks/useGetData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetData.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,38 @@
+import { useState, useEffect, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useGetData = ({ url }) => {
+    const [data, setData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const { setAlert } = useContext(AccessoriesContext);
+    const fetchData = async () => {
+        await axios
+            .get(url)
+            .then((res) => {
+                setData(res.data);
+                console.log(res.data);
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    useEffect(() => {
+        fetchData();
+    }, []);
+    return {
+        data,
+        setData,
+        isLoading,
+        fetchData
+    };
+};
+
+export default useGetData;
Index: sources/client/src/hooks/useGetSessionOverInfo.js
===================================================================
--- sources/client/src/hooks/useGetSessionOverInfo.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetSessionOverInfo.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import axios from 'axios';
+
+const useGetSessionOverInfo = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [totalPrice, setTotalPrice] = useState(null);
+
+    const getSessionInfoOver = async () => {
+        setIsLoading(true);
+        await axios
+            .get(`/parkingSession/end/calculate`)
+            .then((res) => {
+                // setTimeAndSessionPrice({totalTime: res.data.totalTime, totalPrice: res.data.totalPrice});
+                setTotalPrice(res.data);
+            })
+            .catch((err) => {
+                // setAlert({
+                //     type: 'error',
+                //     msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                // });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+
+    return {
+        getSessionInfoOver,
+        isLoading,
+        totalPrice,
+    };
+};
+
+export default useGetSessionOverInfo;
Index: sources/client/src/hooks/useGetSessions.js
===================================================================
--- sources/client/src/hooks/useGetSessions.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetSessions.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,43 @@
+import { useState, useEffect, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+// THIS HOOK SHOULD LISTEN ON SOME PORT FOR CHANGES
+
+const useGetSessions = (zoneId) => {
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { setAlert } = useContext(AccessoriesContext);
+  const fetchData = async () => {
+    await axios
+        .get(`/parkingSession/${zoneId}`)
+        .then((res) => {
+            setData(res.data);
+        })
+        .catch((err) => {
+            // ALERT FOR ERROR WITH ERROR MSG
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!', // TODO change msg to err.message
+            });
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+  useEffect(() => {
+    fetchData();
+    const fetchInterval = setInterval(fetchData, 30000);
+    return () => {
+      clearInterval(fetchInterval);
+    };
+  }, []);
+
+  return {
+    data,
+    isLoading,
+    setData
+  };
+};
+
+export default useGetSessions;
Index: sources/client/src/hooks/useGetZoneByName.js
===================================================================
--- sources/client/src/hooks/useGetZoneByName.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useGetZoneByName.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,36 @@
+import { useState,useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useGetZoneByName = (defaultZoneInfo) => {
+    const [zone, setZone] = useState(defaultZoneInfo);
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+    const fetchZone = async (pzName) => {
+        setIsLoading(true);
+        return await axios
+            .get(`/parkingZone/name/${pzName}`)
+            .then((res) => {
+                setZone(res.data);
+                return res.data;
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    return {
+        zone,
+        isLoading,
+        fetchZone,
+        setZone
+    };
+};
+
+export default useGetZoneByName;
Index: sources/client/src/hooks/useIsMobile.js
===================================================================
--- sources/client/src/hooks/useIsMobile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useIsMobile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+const mobile_max_width = 480;
+
+const useIsMobile = () => {
+  const [width, setWidth] = useState(window.innerWidth);
+  const [isMobile, setIsMobile] = useState(width < mobile_max_width);
+  function handleWindowSizeChange() {
+    setWidth(window.innerWidth);
+    setIsMobile(window.innerWidth < mobile_max_width);
+  }
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+  }, []);
+
+  return {
+    isMobile,
+  };
+};
+
+export default useIsMobile;
Index: sources/client/src/hooks/useLogin.js
===================================================================
--- sources/client/src/hooks/useLogin.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useLogin.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,46 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import jwt from 'jwt-decode';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+
+const useLogin = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const { setUser } = useContext(UserContext);
+    const loginUser = async ({ email, password }) => {
+        setIsBackdropLoaderOpen(true);
+        const formData = new FormData();
+        formData.append('username', email);
+        formData.append('password', password);
+        await axios
+            .post(`/api/login`, formData)
+            .then((res) => {
+                const token = res.data.access_token;
+                const user = jwt(token);
+                axios.defaults.headers.common['Authorization']= `Bearer ${token}`;
+                localStorage.setItem('token', JSON.stringify(token));
+                setUser({
+                    firstName: user.fullName.split(' ')[0] ?? '',
+                    lastName: user.fullName.split(' ')[1] ?? '',
+                    role: user.roles[0] ?? '',
+                    id: user.id,
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+    return {
+        loginUser,
+    };
+};
+
+export default useLogin;
Index: sources/client/src/hooks/useLoginGuest.js
===================================================================
--- sources/client/src/hooks/useLoginGuest.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useLoginGuest.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,38 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import jwt from 'jwt-decode';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+import useLogin from './useLogin';
+
+const useLoginGuest = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const { loginUser } = useLogin();
+    const loginGuest = async ({ credentials }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .post(`/guest`, credentials)
+            .then(async ({ data: guest }) => {
+                await loginUser({
+                    email: guest.email,
+                    password: guest.password,
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+    return {
+        loginGuest,
+    };
+};
+
+export default useLoginGuest;
Index: sources/client/src/hooks/useLogoutUser.js
===================================================================
--- sources/client/src/hooks/useLogoutUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useLogoutUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+import { useHistory } from 'react-router-dom';
+
+const useLogoutUser = () => {
+    const { setAlert } = useContext(AccessoriesContext);
+    const { setUser } = useContext(UserContext);
+    const history = useHistory();
+    const logoutUser = async () => {
+        setUser(null);
+        localStorage.clear();
+        setAlert({
+            type: 'success',
+            msg: 'Успешно Сте Одјавени!', // TODO change msg to err.message
+        });
+        history.push('/');
+    };
+    return {
+        logoutUser,
+    };
+};
+
+export default useLogoutUser;
Index: sources/client/src/hooks/useRegisterUser.js
===================================================================
--- sources/client/src/hooks/useRegisterUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useRegisterUser.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useRegisterUser = () => {
+    const history = useHistory();
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const registerUser = async (data) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .post(`/registriranParkirac/registration`, data)
+            .then((res) => {
+                history.replace('/login');
+                setAlert({
+                    type: 'success',
+                    msg: 'За активација проверете ја вашата емаил адреса!', // TODO change msg to err.message
+                });
+            })
+            .catch((err) => {
+                console.log(err);
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+    return {
+        registerUser,
+    };
+};
+
+export default useRegisterUser;
Index: sources/client/src/hooks/useSaveUserPlate.js
===================================================================
--- sources/client/src/hooks/useSaveUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useSaveUserPlate.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { UserContext } from '../context/UserContext';
+
+const useSaveUserPlate = () => {
+    const {user} = useContext(UserContext);
+    const { setAlert } = useContext(AccessoriesContext);
+    const saveUserPlate = async ({
+        savePlate,
+        plate,
+        setIsLoadingSavePlate,
+    }) => {
+        setIsLoadingSavePlate(true);
+        console.log(plate);
+        await axios
+            .put(`/registriranParkirac/${user.id}/tablici`, plate, {headers: {"Content-type" : 'application/json'}}) 
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Таблицата е успешно додадена!`,
+                });
+                savePlate(plate); // or res.plate
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoadingSavePlate(false);
+            });
+    };
+
+    return {
+        saveUserPlate,
+    };
+};
+
+export default useSaveUserPlate;
Index: sources/client/src/hooks/useToggleAccountStatus.js
===================================================================
--- sources/client/src/hooks/useToggleAccountStatus.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useToggleAccountStatus.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,39 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useToggleAccountStatus = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+
+    const toggleAccountStatus = async ({
+        workerId,
+        changeAccoutStatusOnEmployee,
+    }) => {
+        setIsLoading(true);
+        axios
+            .put(`/vraboten/lock/${workerId}`)
+            .then((res) => {
+                changeAccoutStatusOnEmployee({ workerId });
+                setAlert({
+                    type: 'success',
+                    msg: 'Успешно е променет статусот на акаунтот!',
+                });
+            })
+            .catch((err) => {
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    };
+    return {
+        toggleAccountStatus,
+        isLoading,
+    };
+};
+
+export default useToggleAccountStatus;
Index: sources/client/src/hooks/useUpdateEmployee.js
===================================================================
--- sources/client/src/hooks/useUpdateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUpdateEmployee.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+
+const useUpdateEmployee = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const history = useHistory();
+    const updateEmployee = async ({ employee }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .put(`/vraboten/${employee.workerId}`, employee)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Вработениот ${employee.firstName} ${employee.lastName} е успешно изменет!`,
+                });
+                console.log(employee);
+                history.push('/employees');
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+                console.log(err);
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        updateEmployee,
+    };
+};
+
+export default useUpdateEmployee;
Index: sources/client/src/hooks/useUpdateUserProfile.js
===================================================================
--- sources/client/src/hooks/useUpdateUserProfile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUpdateUserProfile.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useUpdateUserProfile = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const updateUserProfile = async ({ userData, id, successfulSave }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .put(`/registriranParkirac/${id}`, userData)
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Успешно ажурирање на податоците!`,
+                });
+                successfulSave();
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        updateUserProfile,
+    };
+};
+
+export default useUpdateUserProfile;
Index: sources/client/src/hooks/useUpdateZone.js
===================================================================
--- sources/client/src/hooks/useUpdateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUpdateZone.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,41 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+
+const useUpdateZone = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { setAlert } = useContext(AccessoriesContext);
+  const updateZone = async ({ zone, setEditMode, setZone }) => {
+    setIsLoading(true);
+    console.log(zone);
+    await axios
+        .put(`/parkingZone/${zone.pzId}`, zone) // TODO CHANGE OBJECT
+        .then((res) => {
+            setZone(res.data);
+            console.log(res.data);
+            setAlert({
+                type: 'success',
+                msg: `Зоната е успешно изменета!`,
+            });
+            setEditMode(false);
+        })
+        .catch((err) => {
+            // ALERT FOR ERROR WITH ERROR MSG
+            setAlert({
+                type: 'error',
+                msg: 'Проблеми со серверот!', // TODO change msg to err.message
+            });
+            console.log(err);
+        })
+        .finally(() => {
+            setIsLoading(false);
+        });
+  };
+
+  return {
+    updateZone,
+    isLoading,
+  };
+};
+
+export default useUpdateZone;
Index: sources/client/src/hooks/useUserFinishedSession.js
===================================================================
--- sources/client/src/hooks/useUserFinishedSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUserFinishedSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,37 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { sessionStatus } from '../config/enums';
+
+const useUserFinishedSession = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const userFinishedSession = async ({ setSession }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .put(`/parkingSession/end`) 
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: 'Успешно завршена сесија!', // TODO change msg
+                });
+                setSession(res.data);
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        userFinishedSession,
+    };
+};
+
+export default useUserFinishedSession;
Index: sources/client/src/hooks/useUserPayForSession.js
===================================================================
--- sources/client/src/hooks/useUserPayForSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUserPayForSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,52 @@
+import { useState, useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { useHistory } from 'react-router-dom';
+import { UserContext } from '../context/UserContext';
+import useLogoutUser from './useLogoutUser';
+import { roles } from '../config/enums';
+
+const useUserPayForSession = () => {
+    const {user} = useContext(UserContext);
+    const {logoutUser} = useLogoutUser();
+    const [isLoading, setIsLoading] = useState(false);
+    const { setAlert } = useContext(AccessoriesContext);
+    const history = useHistory();
+    const userPayForSession = async ({ method, paymentCredentials }) => {
+        setIsLoading(true);
+        await axios
+            .put(
+                `/parkingSession/pay?expireDate=${paymentCredentials?.cardExpDate ?? ''}`,
+                {
+                    method,
+                    paymentCredentials,
+                }
+            )
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Успешно плаќање!`,
+                });
+                if(user.role === roles.guest) {
+                    logoutUser();
+                } else {
+                    history.push('/');
+                }
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+                setIsLoading(false);
+            });
+    };
+
+    return {
+        userPayForSession,
+        isLoading,
+    };
+};
+
+export default useUserPayForSession;
Index: sources/client/src/hooks/useUserStartSession.js
===================================================================
--- sources/client/src/hooks/useUserStartSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
+++ sources/client/src/hooks/useUserStartSession.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import axios from 'axios';
+import { AccessoriesContext } from '../context/AccessoriesContext';
+import { sessionStatus } from '../config/enums';
+
+const useUserStartSession = () => {
+    const { setAlert, setIsBackdropLoaderOpen } =
+        useContext(AccessoriesContext);
+    const userStartSession = async ({ sessionData, setSession }) => {
+        setIsBackdropLoaderOpen(true);
+        await axios
+            .post(
+                `/parkingSession/${sessionData.zone}?tablicka=${sessionData.plate}`
+            ) // TODO CHANGE OBJECT
+            .then((res) => {
+                setAlert({
+                    type: 'success',
+                    msg: `Успешно започната сесија!`,
+                });
+                setSession(res.data);
+
+            })
+            .catch((err) => {
+                // ALERT FOR ERROR WITH ERROR MSG
+                setAlert({
+                    type: 'error',
+                    msg: 'Проблеми со серверот!', // TODO change msg to err.message
+                });
+            })
+            .finally(() => {
+                setIsBackdropLoaderOpen(false);
+            });
+    };
+
+    return {
+        userStartSession,
+    };
+};
+
+export default useUserStartSession;
