Index: sources/client/src/components/admin/EmployeesTable/index.js
===================================================================
--- sources/client/src/components/admin/EmployeesTable/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeesTable/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,121 +1,171 @@
+import { useEffect } from 'react';
 import { useHistory } from 'react-router';
 
 import {
-  TableContainer,
-  TableHeaderWrapper,
-  TableTitle,
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-  ButtonTableCell,
-  ToggleAccoutStatusButton,
-  CreateEmployeeButton,
-  AddIcon,
-  SearchField,
-  IdentityIcon,
+    TableContainer,
+    TableHeaderWrapper,
+    TableTitle,
+    Table,
+    TableHead,
+    TableRow,
+    TableBody,
+    TableCell,
+    ButtonTableCell,
+    ToggleAccoutStatusButton,
+    CreateEmployeeButton,
+    AddIcon,
+    SearchField,
+    IdentityIcon,
 } from './styles';
 
 import InputAdornment from '@mui/material/InputAdornment';
+import DropdownViewer from '../../DropdownViewer';
 
 import { employeeStatus, accountStatus } from '../../../config/enums';
+import useGetData from '../../../hooks/useGetData';
+import useToggleAccountStatus from '../../../hooks/useToggleAccountStatus';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
 
-import { employees } from './mockData';
+// import { employees } from './mockData';
 import { useState } from 'react';
 
 const EmployeesTable = () => {
-  let history = useHistory();
-  const [filteredEmployees, setFilteredEmployees] = useState(employees);
-  const [search, setSearch] = useState('');
+    let history = useHistory();
+    const { toggleAccountStatus, isLoading: isLoadingAccountStatus } =
+        useToggleAccountStatus();
+    const { data: employees, isLoading: isLoadingEmployees } = useGetData({
+        url: `/vraboten`,
+    });
+    const [filteredEmployees, setFilteredEmployees] = useState([]);
+    const [search, setSearch] = useState('');
+    const onRowClick = (workerId) => {
+        history.push(`/employees/${workerId}`);
+    };
+    const changeAccoutStatusOnEmployee = ({ workerId }) => {
+        const emp = filteredEmployees.find((e) => e.workerId === workerId);
+        emp.accountNonLocked = !emp.accountNonLocked;
+    };
+    const onAccountStatusClick = (event, workerId) => {
+        event.stopPropagation();
+        toggleAccountStatus({ workerId, changeAccoutStatusOnEmployee });
+    };
 
-  const onRowClick = (id) => {
-    history.push(`/employees/${id}`);
-  };
+    const onChangeSearch = (e) => {
+        let newSearchValue = e.target.value;
+        setSearch(newSearchValue);
+        const filteredData = employees.filter((employee) =>
+            employee.firstName
+                .concat(` ${employee.lastName}`)
+                .toLowerCase()
+                .includes(newSearchValue.trim().toLowerCase())
+        );
 
-  const onAccountStatusClick = (event, id) => {
-    event.stopPropagation();
-    console.log(`Disable or activate user acc with id: ${id}`);
-  };
+        setFilteredEmployees(filteredData);
+    };
 
-  const onChangeSearch = (e) => {
-    let newSearchValue = e.target.value;
-    setSearch(newSearchValue);
-    const filteredData = employees.filter((employee) =>
-      employee.firstName
-        .concat(` ${employee.lastName}`)
-        .toLowerCase()
-        .includes(newSearchValue.trim().toLowerCase())
+    useEffect(() => {
+        setFilteredEmployees(employees);
+    }, [employees]);
+
+    return (
+        !isLoadingEmployees && (
+            <TableContainer>
+                <TableHeaderWrapper>
+                    {isLoadingAccountStatus ? (
+                        <AbsoluteLoader
+                            containerStyle={{
+                                position: 'absolute',
+                                left: '65%',
+                                width: '42px',
+                                height: '42px',
+                            }}
+                        />
+                    ) : null}
+                    <TableTitle variant='h5'>Вработени</TableTitle>
+                    <SearchField
+                        value={search}
+                        onChange={(e) => onChangeSearch(e)}
+                        placeholder='Пребарај...'
+                        InputProps={{
+                            startAdornment: (
+                                <InputAdornment position='start'>
+                                    <IdentityIcon />
+                                </InputAdornment>
+                            ),
+                        }}
+                    />
+                    <CreateEmployeeButton
+                        onClick={() => history.push('/employees/create')}
+                    >
+                        <AddIcon />
+                        Додади вработен
+                    </CreateEmployeeButton>
+                </TableHeaderWrapper>
+                <Table aria-label='simple table'>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell align='left'>Емаил</TableCell>
+                            <TableCell align='center'>Име и Презиме</TableCell>
+                            <TableCell align='center'>Зона</TableCell>
+                            <TableCell align='center'>Телефон</TableCell>
+                            <TableCell align='center'>Статус</TableCell>
+                            <TableCell align='center'>Акаунт</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {filteredEmployees.map((employeeData) => (
+                            <TableRow
+                                key={employeeData.workerId}
+                                onClick={() =>
+                                    onRowClick(employeeData.workerId)
+                                }
+                            >
+                                <TableCell align='left'>
+                                    {employeeData.email}
+                                </TableCell>
+                                <TableCell align='center'>
+                                    {employeeData.firstName}{' '}
+                                    {employeeData.lastName}
+                                </TableCell>
+                                <TableCell
+                                    align='center'
+                                    style={{ padding: 0, width: '200px' }}
+                                >
+                                    <DropdownViewer
+                                        data={employeeData.parkingZones.map(
+                                            (z) => z.pzName
+                                        )} // TODO DELETE - after backend fix
+                                        width='200px'
+                                    />
+                                </TableCell>
+                                <TableCell align='center'>
+                                    {employeeData.mobile}
+                                </TableCell>
+                                <TableCell align='center'>
+                                    {employeeStatus[employeeData.status]}
+                                </TableCell>
+                                <ButtonTableCell align='center'>
+                                    <ToggleAccoutStatusButton
+                                        onClick={(event) =>
+                                            onAccountStatusClick(
+                                                event,
+                                                employeeData.workerId
+                                            )
+                                        }
+                                        $enabled={employeeData.accountNonLocked}
+                                    >
+                                        {/* $ added because https://styled-components.com/docs/api#transient-props*/}
+                                        {employeeData.accountNonLocked
+                                            ? accountStatus.enabled
+                                            : accountStatus.disabled}
+                                    </ToggleAccoutStatusButton>
+                                </ButtonTableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        )
     );
-
-    setFilteredEmployees(filteredData);
-  };
-
-  return (
-    <TableContainer>
-      <TableHeaderWrapper>
-        <TableTitle variant='h5'>Вработени</TableTitle>
-        <SearchField
-          value={search}
-          onChange={(e) => onChangeSearch(e)}
-          placeholder='Пребарај...'
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position='start'>
-                <IdentityIcon />
-              </InputAdornment>
-            ),
-          }}
-        />
-        <CreateEmployeeButton onClick={() => history.push('/employees/create')}>
-          <AddIcon />
-          Додади вработен
-        </CreateEmployeeButton>
-      </TableHeaderWrapper>
-      <Table aria-label='simple table'>
-        <TableHead>
-          <TableRow>
-            <TableCell align='left'>Емаил</TableCell>
-            <TableCell align='center'>Име и Презиме</TableCell>
-            <TableCell align='center'>Зона</TableCell>
-            <TableCell align='center'>Телефон</TableCell>
-            <TableCell align='center'>Статус</TableCell>
-            <TableCell align='center'>Акаунт</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {filteredEmployees.map((employeeData) => (
-            <TableRow
-              key={employeeData.id}
-              onClick={() => onRowClick(employeeData.id)}
-            >
-              <TableCell align='left'>{employeeData.email}</TableCell>
-              <TableCell align='center'>
-                {employeeData.firstName} {employeeData.lastName}
-              </TableCell>
-              <TableCell align='center'>{employeeData.zone}</TableCell>
-              <TableCell align='center'>{employeeData.phoneNumber}</TableCell>
-              <TableCell align='center'>
-                {employeeStatus[employeeData.status]}
-              </TableCell>
-              <ButtonTableCell align='center'>
-                <ToggleAccoutStatusButton
-                  onClick={(event) =>
-                    onAccountStatusClick(event, employeeData.id)
-                  }
-                  $enabled={employeeData.accountActive}
-                >
-                  {/* $ added because https://styled-components.com/docs/api#transient-props*/}
-                  {employeeData.accountActive
-                    ? accountStatus.enabled
-                    : accountStatus.disabled}
-                </ToggleAccoutStatusButton>
-              </ButtonTableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
 };
 
