Index: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js
===================================================================
--- sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js	(revision 747e0ab7ec1a73abedd264cf9b326ea140f54964)
@@ -1,128 +1,256 @@
+import { useState } from 'react';
+import moment from 'moment';
+
 import {
-  Wrapper,
-  SessionChildWrapper,
-  SessionChildTitle,
-  SeessionChildData,
-  InputAndCheckIconWrapper,
-  ParkingSpaceNumberInput,
-  CheckIcon,
-  DeleteButton,
-  ContinueButton,
+    Wrapper,
+    SessionChildWrapper,
+    SessionChildTitle,
+    SeessionChildData,
+    InputAndCheckIconWrapper,
+    ParkingSpaceNumberInput,
+    CheckIcon,
+    DeleteButton,
 } from './styles';
 
 import { sessionStatus } from '../../../../config/enums';
+import { dateFormatString } from '../../../../config/utilities';
 import { IconButton } from '@mui/material';
-import { useState } from 'react';
+import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
+import useDeleteSession from '../../../../hooks/useDeleteSession';
+
 
 const sessionCardColors = {
-  active: '#389e0d',
-  idle: '#ffa940',
-  over: '#cf1322',
-};
-
-const ActiveCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
-      <SessionChildWrapper>
-        <SessionChildTitle>Почеток</SessionChildTitle>
-        <SeessionChildData>{start}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const IdleCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
-  const [parkingSpace, setParkingSpace] = useState(parkingSpaceNumber ?? '');
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
-      <SessionChildWrapper>
-        <SessionChildTitle>Почеток</SessionChildTitle>
-        <SeessionChildData>{start}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <InputAndCheckIconWrapper>
-          <ParkingSpaceNumberInput
-            value={parkingSpace}
-            onChange={(event) => setParkingSpace(event.target.value)}
-          />
-          {parkingSpace !== '' ? (
-            <IconButton>
-              <CheckIcon />
-            </IconButton>
-          ) : null}
-        </InputAndCheckIconWrapper>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const OverCard = ({ id, start, end, plate, status, parkingSpaceNumber }) => {
-  return (
-    <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
-      <SessionChildWrapper>
-        <SessionChildWrapper>
-          <SessionChildTitle>Почеток</SessionChildTitle>
-          <SeessionChildData>{start}</SeessionChildData>
-        </SessionChildWrapper>
-        <SessionChildWrapper>
-          <SessionChildTitle>Крај</SessionChildTitle>
-          <SeessionChildData>{end}</SeessionChildData>
-        </SessionChildWrapper>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Број на место</SessionChildTitle>
-        <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <SessionChildTitle>Регистрација</SessionChildTitle>
-        <SeessionChildData>{plate}</SeessionChildData>
-      </SessionChildWrapper>
-
-      <SessionChildWrapper>
-        <DeleteButton>ИЗБРИШИ</DeleteButton>
-        <ContinueButton>ПРОДОЛЖИ</ContinueButton>
-      </SessionChildWrapper>
-    </Wrapper>
-  );
-};
-
-const SessionCard = (props) => {
-  switch (props.status) {
-    case sessionStatus.active:
-      return <ActiveCard {...props} />;
-    case sessionStatus.idle:
-      return <IdleCard {...props} />;
-    case sessionStatus.over:
-      return <OverCard {...props} />;
-    default:
-      return null;
-  }
+    active: '#389e0d',
+    idle: '#ffa940',
+    over: '#cf1322',
+};
+
+const ActiveCard = ({
+    pssId,
+    timeStart,
+    zone,
+    plate,
+    status,
+    parkingSpace,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
+            <SessionChildWrapper>
+                <SessionChildTitle>Почеток</SessionChildTitle>
+                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const IdleCard = ({
+    pssId,
+    timeStart,
+    zone,
+    plate,
+    status,
+    handleActivateSession,
+    isLoadingActivateSession,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const [parkingSpaceName, setParkingSpaceName] = useState('');
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
+            <SessionChildWrapper>
+                <SessionChildTitle>Почеток</SessionChildTitle>
+                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <InputAndCheckIconWrapper>
+                    <ParkingSpaceNumberInput
+                        value={parkingSpaceName}
+                        onChange={(event) =>
+                            setParkingSpaceName(event.target.value.trim())
+                        }
+                    />
+                    {parkingSpaceName !== '' ? (
+                        <>
+                            {isLoadingActivateSession ? (
+                                <AbsoluteLoader
+                                    containerStyle={{
+                                        width: '2rem',
+                                        height: '2rem',
+                                        display: 'inline-block',
+                                    }}
+                                />
+                            ) : (
+                                <IconButton
+                                    onClick={() =>
+                                        handleActivateSession({
+                                            pssId,
+                                            parkingSpaceName,
+                                        })
+                                    }
+                                >
+                                    <CheckIcon />
+                                </IconButton>
+                            )}
+                        </>
+                    ) : null}
+                </InputAndCheckIconWrapper>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const OverCard = ({
+    pssId,
+    timeStart,
+    timeEnd,
+    zone,
+    plate,
+    status,
+    parkingSpace,
+    onDeleteSession,
+}) => {
+    const { isLoading: isLoadingDeleteSession, deleteSession } =
+        useDeleteSession();
+    const formatedTimeStart = moment(timeStart).format(dateFormatString);
+    const formatedTimeEnd = moment(timeEnd).format(dateFormatString);
+    return (
+        <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
+            <SessionChildWrapper>
+                <SessionChildWrapper style={{ margin: 0 }}>
+                    <SessionChildTitle>Почеток</SessionChildTitle>
+                    <SeessionChildData>{formatedTimeStart}</SeessionChildData>
+                </SessionChildWrapper>
+                <SessionChildWrapper style={{ marginTop: '5px' }}>
+                    <SessionChildTitle>Крај</SessionChildTitle>
+                    <SeessionChildData>{formatedTimeEnd}</SeessionChildData>
+                </SessionChildWrapper>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Број на место</SessionChildTitle>
+                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                <SessionChildTitle>Регистрација</SessionChildTitle>
+                <SeessionChildData>{plate.plate}</SeessionChildData>
+            </SessionChildWrapper>
+
+            <SessionChildWrapper>
+                {isLoadingDeleteSession ? (
+                    <div style={{ width: '104px', textAlign: 'center' }}>
+                        <AbsoluteLoader
+                            containerStyle={{
+                                width: '40px',
+                                height: '40px',
+                                display: 'inline-block',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <DeleteButton
+                        onClick={() => {
+                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
+                            deleteSession({ pssId, onDeleteSession });
+                        }}
+                    >
+                        ИЗБРИШИ
+                    </DeleteButton>
+                )}
+            </SessionChildWrapper>
+        </Wrapper>
+    );
+};
+
+const SessionCard = ({
+    handleActivateSession,
+    isLoadingActivateSession,
+    ...commponProps
+}) => {
+    switch (commponProps.status) {
+        case sessionStatus.active:
+            return <ActiveCard {...commponProps} />;
+        case sessionStatus.idle:
+            return (
+                <IdleCard
+                    {...commponProps}
+                    handleActivateSession={handleActivateSession}
+                    isLoadingActivateSession={isLoadingActivateSession}
+                />
+            );
+        case sessionStatus.over:
+            return <OverCard {...commponProps} />;
+        default:
+            return null;
+    }
 };
 
