Index: sources/client/src/components/admin/ParkingZoneSessions/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -1,3 +1,3 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Wrapper,
@@ -9,11 +9,56 @@
   StatsKey,
   StatsValue,
+  SearchField,
+  SearchIcon,
 } from './styles';
 import SessionCard from './SessionCard';
 import { sessionStatus } from '../../../config/enums';
-import { sessionsData } from './mockData';
+import useGetSessions from '../../../hooks/useGetSessions';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
+
+import useActivateSession from '../../../hooks/useActivateSession';
+
+const sortSessions = (a, b) => {
+  // first - yellow/idle, second - red/finished, third - green/active
+  switch (a.status) {
+    case sessionStatus.active:
+      switch (b.status) {
+        case sessionStatus.active:
+          return -1;
+        case sessionStatus.over:
+        case sessionStatus.idle:
+          return 1;
+        default:
+          return 1;
+      }
+    case sessionStatus.over:
+      switch (b.status) {
+        case sessionStatus.active:
+        case sessionStatus.over:
+          return -1;
+        case sessionStatus.idle:
+          return 1;
+        default:
+          return 1;
+      }
+    case sessionStatus.idle:
+      switch (b.status) {
+        case sessionStatus.active:
+        case sessionStatus.over:
+        case sessionStatus.idle:
+          return -1;
+        default:
+          return 1;
+      }
+    default:
+      return -1;
+  }
+};
 
 const ParkingZoneSessions = ({ zone }) => {
-  const [sessions, setSession] = useState(sessionsData);
+  const { isLoading: isLoadingActivateSession, activateSession } =
+    useActivateSession();
+  const { data: sessions, isLoading: isLoadingSessions, setData: setSessions } = useGetSessions(zone.pzId); 
+  const [search, setSearch] = useState('');
   const [stats, setStats] = useState({
     activeSessions: 0,
@@ -21,4 +66,5 @@
     overSessions: 0,
   });
+
   const setSessionsStats = () => {
     let aS = 0;
@@ -26,17 +72,17 @@
     let oS = 0;
     sessions.forEach((s) => {
-      switch (s.status) {
-        case sessionStatus.active:
-          aS += 1;
-          break;
-        case sessionStatus.idle:
-          iS += 1;
-          break;
-        case sessionStatus.over:
-          oS += 1;
-          break;
-        default:
-          break;
-      }
+        switch (s.status) {
+            case sessionStatus.active:
+                aS += 1;
+                break;
+            case sessionStatus.idle:
+                iS += 1;
+                break;
+            case sessionStatus.over:
+                oS += 1;
+                break;
+            default:
+                break;
+        }
     });
     setStats({
@@ -47,4 +93,24 @@
   };
 
+  const onActivateSession = ({ updatedSession  }) => {
+    const updatedSessions = sessions.filter(
+        (s) => s.pssId !== updatedSession.pssId
+    );
+    setSessions([...updatedSessions, updatedSession]);  
+  };
+
+  const handleActivateSession = ({ pssId, parkingSpaceName }) => {
+    activateSession({ pssId, parkingSpaceName, onActivateSession });
+  };
+
+  const onDeleteSession = ({ pssId }) => {
+    setSessions((prevState) => prevState.filter((s) => s.pssId !== pssId));
+  };
+
+  const freeParkingSpaces = useMemo(() => {
+    if(!zone) return 0;
+    return zone.parkingSpaces.length - stats.activeSessions
+  }, [zone?.parkingSpaces, stats])
+
   useEffect(() => {
     setSessionsStats();
@@ -52,46 +118,84 @@
 
   return (
-    <Wrapper>
-      <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
-      <StatsWrapper>
-        <Stats>
-          {/* PARKING SPACES STATS*/}
-          <KeyValueWrapper>
-            <StatsKey>Вкупно паркинг места:</StatsKey>
-            <StatsValue>{zone.parkingSpaces}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Слободни паркинг места:</StatsKey>
-            <StatsValue>
-              {zone.parkingSpaces - zone.takenParkingSpaces}
-            </StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Зафатени паркинг места:</StatsKey>
-            <StatsValue>{zone.takenParkingSpaces}</StatsValue>
-          </KeyValueWrapper>
-        </Stats>
-        {/* SESSIONS STATS*/}
-        <Stats>
-          <KeyValueWrapper>
-            <StatsKey>Активни паркинг сесии:</StatsKey>
-            <StatsValue>{stats.activeSessions}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Завршени паркинг сесии:</StatsKey>
-            <StatsValue>{stats.overSessions}</StatsValue>
-          </KeyValueWrapper>
-          <KeyValueWrapper>
-            <StatsKey>Неактивни паркинг сесии:</StatsKey>
-            <StatsValue>{stats.idleSessions}</StatsValue>
-          </KeyValueWrapper>
-        </Stats>
-      </StatsWrapper>
-      <SessionsWrapper>
-        {sessions.map((session) => (
-          <SessionCard key={session.id} {...session} />
-        ))}
-      </SessionsWrapper>
-    </Wrapper>
+      <Wrapper>
+          <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
+          <StatsWrapper>
+              <Stats>
+                  {/* PARKING SPACES STATS*/}
+                  <KeyValueWrapper>
+                      <StatsKey>Вкупно паркинг места:</StatsKey>
+                      <StatsValue>{zone.parkingSpaces.length}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Слободни паркинг места:</StatsKey>
+                      <StatsValue>{freeParkingSpaces}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Зафатени паркинг места:</StatsKey>
+                      <StatsValue>
+                          {zone.parkingSpaces.length - freeParkingSpaces}
+                      </StatsValue>
+                  </KeyValueWrapper>
+              </Stats>
+              {/* SESSIONS STATS*/}
+              <Stats>
+                  <KeyValueWrapper>
+                      <StatsKey>Активни паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.activeSessions}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Завршени паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.overSessions}</StatsValue>
+                  </KeyValueWrapper>
+                  <KeyValueWrapper>
+                      <StatsKey>Неактивни паркинг сесии:</StatsKey>
+                      <StatsValue>{stats.idleSessions}</StatsValue>
+                  </KeyValueWrapper>
+              </Stats>
+          </StatsWrapper>
+          <SearchField
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              InputProps={{
+                  startAdornment: <SearchIcon />,
+              }}
+          />
+          <SessionsWrapper>
+              {isLoadingSessions ? (
+                  <AbsoluteLoader
+                      containerStyle={{
+                          width: '150px',
+                          height: '150px',
+                          margin: 'auto',
+                          marginTop: '50px',
+                      }}
+                  />
+              ) : (
+                  <>
+                      {sessions
+                          .filter((session) =>
+                              session.plate.plate
+                                  .concat(
+                                      ` ${session.parkingSpace?.psName ?? ''}`
+                                  )
+                                  .toLowerCase()
+                                  .includes(search.trim().toLowerCase())
+                          )
+                          .sort(sortSessions)
+                          .map((session) => (
+                              <SessionCard
+                                  key={session.pssId}
+                                  {...session}
+                                  handleActivateSession={handleActivateSession}
+                                  isLoadingActivateSession={
+                                      isLoadingActivateSession
+                                  }
+                                  onDeleteSession={onDeleteSession}
+                              />
+                          ))}
+                  </>
+              )}
+          </SessionsWrapper>
+      </Wrapper>
   );
 };
