From 290926dc81e7c3e1e7252eb88dd00e886998f286 Mon Sep 17 00:00:00 2001
From: computer <computer@localhost.localdomain>
Date: Sun, 21 Jan 2024 22:34:23 +0100
Subject: [PATCH 1/7] Fixed large screen resize and removed unwanted pages

---
 Backend/.env-openvidu                         |  2 +-
 Backend/src/app/login.controller.ts           |  6 ++---
 Backend/src/cameraStream/cameraData.ts        |  4 +++
 .../src/cameraStream/cameraStream.gateway.ts  |  2 +-
 .../video-recording-screen/video-player.tsx   |  9 +++----
 .../src/containers/video-stream-container.tsx | 25 ++++++++++++++++---
 Frontend/src/data/camera-data.tsx             | 12 +++++++++
 Frontend/src/data/navbar-data.tsx             | 24 +++++++++---------
 Frontend/src/hooks/use-camera-slice.ts        |  4 +--
 Frontend/src/store/slices/camera-slice.ts     |  7 ++++--
 10 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/Backend/.env-openvidu b/Backend/.env-openvidu
index 52fb6e3..93bf591 100644
--- a/Backend/.env-openvidu
+++ b/Backend/.env-openvidu
@@ -1,5 +1,5 @@
 OPENVIDU_SECRET=MY_SECRET
 OPENVIDU_WEBHOOK=true
-OPENVIDU_WEBHOOK_ENDPOINT=https://localhost:8080/media-server
+OPENVIDU_WEBHOOK_ENDPOINT=https://192.168.129.175:8080/media-server
 
 
diff --git a/Backend/src/app/login.controller.ts b/Backend/src/app/login.controller.ts
index 7cf7940..a01077c 100644
--- a/Backend/src/app/login.controller.ts
+++ b/Backend/src/app/login.controller.ts
@@ -24,13 +24,13 @@ export class LoginController {
     examples: {
       a: {
         summary: 'Existing user',
-        value: {
+        value: {   
           name: process.env.CSD_USER,
           password: process.env.CSD_PASSWORD,
         },
       },
-      b: {
-        summary: 'Non existing user',
+      b: { 
+        summary: 'Non existing user', 
         value: { name: 'non', password: 'Basic' },
       },
     },
diff --git a/Backend/src/cameraStream/cameraData.ts b/Backend/src/cameraStream/cameraData.ts
index b6ca116..26dc72f 100644
--- a/Backend/src/cameraStream/cameraData.ts
+++ b/Backend/src/cameraStream/cameraData.ts
@@ -2,6 +2,8 @@ export type Camera = {
   id: string;
   name: string;
   rtspUrl: string;
+  ip: string;
+  port: string;
 };
 
 export const cameraData: Camera[] = [
@@ -9,6 +11,8 @@ export const cameraData: Camera[] = [
     id: '1',
     name: 'Mainroad',
     rtspUrl: 'rtsp://192.168.129.244:554',
+    ip: '192.168.129.244',
+    port: '554',
   },
   /*  {
     id: 2,
diff --git a/Backend/src/cameraStream/cameraStream.gateway.ts b/Backend/src/cameraStream/cameraStream.gateway.ts
index e8d0a6c..ee430c5 100644
--- a/Backend/src/cameraStream/cameraStream.gateway.ts
+++ b/Backend/src/cameraStream/cameraStream.gateway.ts
@@ -62,7 +62,7 @@ export class CameraStreamGateway implements OnGatewayConnection {
           type: ConnectionType.IPCAM,
           rtspUri: camera.rtspUrl,
           adaptativeBitrate: true,
-          onlyPlayWithSubscribers: false,
+          onlyPlayWithSubscribers: true,
           networkCache: 1000,
           data: camera.id,
         };
diff --git a/Frontend/src/components/video-recording-screen/video-player.tsx b/Frontend/src/components/video-recording-screen/video-player.tsx
index d808b6e..8b2ad77 100644
--- a/Frontend/src/components/video-recording-screen/video-player.tsx
+++ b/Frontend/src/components/video-recording-screen/video-player.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Camera } from "@/types";
-import { Tooltip } from "antd";
+import { Tooltip, Spin } from "antd";
 import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
 
 const VideoPlayer = ({
@@ -12,6 +12,7 @@ const VideoPlayer = ({
 }) => {
   const [fullScreen, setFullScreen] = useState(false);
   const [videoControlHidden, setvideoControlHidden] = useState(false);
+  const [loading, setLoading] = useState(true);
   const intervalRef: any = useRef(null);
 
   /* event handlers */
@@ -58,10 +59,8 @@ const VideoPlayer = ({
   }, []);
 
   return (
-    <div
-      className="w-full min-h-[250px] video-container relative"
-      onKeyDown={onScreenSizeToggle}
-    >
+    <div className="w-full min-h-[250px] video-container relative">
+      {/* <Spin className="absolute top-1/2 left-1/2" /> */}
       <video
         ref={(el) => {
           videoRef.current = { ...videoRef.current, [camera.key]: el };
diff --git a/Frontend/src/containers/video-stream-container.tsx b/Frontend/src/containers/video-stream-container.tsx
index d07ed35..a6541a3 100644
--- a/Frontend/src/containers/video-stream-container.tsx
+++ b/Frontend/src/containers/video-stream-container.tsx
@@ -40,13 +40,22 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
     const elem = document.documentElement;
     if (elem.requestFullscreen && !isFullScreenGrid) {
       elem.requestFullscreen();
+      toggleIsFullScreenGrid(true);
+      console.log("Setting true");
     }
 
     if (document.exitFullscreen && isFullScreenGrid) {
       document.exitFullscreen();
+      toggleIsFullScreenGrid(false);
+      console.log("Setting false");
     }
+  };
 
-    toggleIsFullScreenGrid();
+  const onExitFullScreenEscape = () => {
+    if (!document.fullscreen) {
+      document.body.style.overflow = "auto";
+      toggleIsFullScreenGrid(false);
+    }
   };
 
   /* useEffect hooks */
@@ -79,12 +88,18 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
         // On every Stream destroyed...
         session.on("streamDestroyed", (event) => {
           // Remove the stream from 'subscribers' array
+          console.log(event);
           const streamManager = event.stream.streamManager;
           setSubscribers(
             subscribers.filter((subscriber) => subscriber != streamManager)
           );
         });
 
+        // On every Stream destroyed...
+        session.on("streamPropertyChanged", (event) => {
+          console.log(event);
+        });
+
         // On every asynchronous exception...
         session.on("exception", (exception) => {
           console.error(exception);
@@ -149,7 +164,12 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
       console.log(data);
     });
 
-    return () => window.addEventListener("beforeunload", disconnectSession);
+    document.addEventListener("fullscreenchange", onExitFullScreenEscape);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", onExitFullScreenEscape);
+      window.addEventListener("beforeunload", disconnectSession);
+    };
   }, []);
 
   useEffect(() => {
@@ -160,7 +180,6 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
     );
   }, [subscribers]);
 
-  
   return (
     <>
       <div className="grid grid-cols-3 auto-rows-auto gap-1 items-stretch min-h-[80vh]">
diff --git a/Frontend/src/data/camera-data.tsx b/Frontend/src/data/camera-data.tsx
index a13f157..dde73cd 100644
--- a/Frontend/src/data/camera-data.tsx
+++ b/Frontend/src/data/camera-data.tsx
@@ -37,4 +37,16 @@ export const cameras: Camera[] = [
     isActive: false,
     url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
   },
+  {
+    key: "dinning-room",
+    name: "Dinning room",
+    isActive: false,
+    url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
+  },
+  {
+    key: "kitchen",
+    name: "Kitchen",
+    isActive: false,
+    url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
+  },
 ];
diff --git a/Frontend/src/data/navbar-data.tsx b/Frontend/src/data/navbar-data.tsx
index 9bf41a6..3805d99 100644
--- a/Frontend/src/data/navbar-data.tsx
+++ b/Frontend/src/data/navbar-data.tsx
@@ -19,24 +19,24 @@ export const loggedInNavBarItems: NavBarItem[] = [
     route: "/video-stream",
     icon: VideoCameraOutlined,
   },
-  {
-    key: "authorized-entites",
-    label: "Authorized Entities",
-    route: "/authorized-entities",
-    icon: UserOutlined,
-  },
+  // {
+  //   key: "authorized-entites",
+  //   label: "Authorized Entities",
+  //   route: "/authorized-entities",
+  //   icon: UserOutlined,
+  // },
   {
     key: "recent-activities",
     label: "Recent Activities",
     route: "/recent-activities",
     icon: HistoryOutlined,
   },
-  {
-    key: "playback",
-    label: "Playback",
-    route: "/playback",
-    icon: PlayCircleOutlined,
-  },
+  // {
+  //   key: "playback",
+  //   label: "Playback",
+  //   route: "/playback",
+  //   icon: PlayCircleOutlined,
+  // },
   {
     key: "analytics",
     label: "Analytics",
diff --git a/Frontend/src/hooks/use-camera-slice.ts b/Frontend/src/hooks/use-camera-slice.ts
index 4ca38f9..34a454c 100644
--- a/Frontend/src/hooks/use-camera-slice.ts
+++ b/Frontend/src/hooks/use-camera-slice.ts
@@ -28,8 +28,8 @@ export const useCameraSlice = () => {
     dispatch(updateCamera(updatedCamera));
   };
 
-  const toggleIsFullScreenGridState = () => {
-    dispatch(toggleIsFullScreenGrid());
+  const toggleIsFullScreenGridState = (value: boolean) => {
+    dispatch(toggleIsFullScreenGrid(value));
   };
 
   return {
diff --git a/Frontend/src/store/slices/camera-slice.ts b/Frontend/src/store/slices/camera-slice.ts
index 8847e24..1905f9f 100644
--- a/Frontend/src/store/slices/camera-slice.ts
+++ b/Frontend/src/store/slices/camera-slice.ts
@@ -38,8 +38,11 @@ export const cameraSlice = createSlice({
         return item;
       });
     },
-    toggleIsFullScreenGrid: (state: CameraStateType) => {
-      state.isFullScreenGrid = !state.isFullScreenGrid;
+    toggleIsFullScreenGrid: (
+      state: CameraStateType,
+      action: PayloadAction<boolean>
+    ) => {
+      state.isFullScreenGrid = action.payload;
     },
   },
 });

From acf631a508ef19b680b935d9aea8bd54d9baba73 Mon Sep 17 00:00:00 2001
From: computer <computer@localhost.localdomain>
Date: Wed, 24 Jan 2024 12:42:34 +0100
Subject: [PATCH 2/7] commit to pull latest

---
 Frontend/src/api/endpoints.ts                 |  2 +
 Frontend/src/api/index.ts                     |  2 +-
 Frontend/src/api/recent-activities.ts         | 29 ++++++++++-
 Frontend/src/containers/login-container.tsx   |  6 ---
 .../recent-activities-container.tsx           | 50 ++++++++++++++++---
 Frontend/src/data/recent-activities-data.tsx  |  4 +-
 Frontend/src/hooks/use-session-slice.ts       |  2 +-
 7 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/Frontend/src/api/endpoints.ts b/Frontend/src/api/endpoints.ts
index 8d0a526..131420e 100644
--- a/Frontend/src/api/endpoints.ts
+++ b/Frontend/src/api/endpoints.ts
@@ -2,4 +2,6 @@ export const endpoints = {
   /* authentication endpoints */
   login: "login",
   recentActivities: "intrusionDetection",
+  getCameraName: "shared/channel",
+  getIntrusionCount: "intrusionDetection/aggregate",
 };
diff --git a/Frontend/src/api/index.ts b/Frontend/src/api/index.ts
index 256cd62..755a7ca 100644
--- a/Frontend/src/api/index.ts
+++ b/Frontend/src/api/index.ts
@@ -3,4 +3,4 @@ export { axiosClient } from "./axios-client";
 
 /* authentication methods */
 export { login } from "./authentication/login";
-export { getRecentActivities } from "./recent-activities";
+export { getRecentActivities,getRecentActivitiesCount } from "./recent-activities";
diff --git a/Frontend/src/api/recent-activities.ts b/Frontend/src/api/recent-activities.ts
index 8bccca1..9acaa31 100644
--- a/Frontend/src/api/recent-activities.ts
+++ b/Frontend/src/api/recent-activities.ts
@@ -4,12 +4,37 @@ import { endpoints } from "./endpoints";
 
 type RecentActivitiesResponseDTO = {
   data: Activity[];
-  count: number;
 };
 
+type RecentActivitiesCountResponseDTO = {
+  _id: string;
+  count: number;
+}[];
+
 export const getRecentActivities = (top: number, skip: number) => {
   return () =>
     axiosClient
-      .get<RecentActivitiesResponseDTO>(`${endpoints.recentActivities}/${top}/${skip}`, {})
+      .get<RecentActivitiesResponseDTO>(
+        `${endpoints.recentActivities}/${top}/${skip}`,
+        {}
+      )
       .then((result) => result.data);
 };
+
+export const getRecentActivitiesCount = () => {
+  return () =>
+    axiosClient
+      .get<RecentActivitiesCountResponseDTO>(
+        `${endpoints.getIntrusionCount}`,
+        {}
+      )
+      .then((result) => {
+        let totalCount = 0;
+
+        result.data.forEach((item) => {
+          totalCount += item.count;
+        });
+
+        return totalCount;
+      });
+};
diff --git a/Frontend/src/containers/login-container.tsx b/Frontend/src/containers/login-container.tsx
index db681c2..0bf3dc9 100644
--- a/Frontend/src/containers/login-container.tsx
+++ b/Frontend/src/containers/login-container.tsx
@@ -31,12 +31,6 @@ export const LoginContainer: FC = () => {
       const result = await login(data);
       logIn({
         accessToken: result.data.access_token,
-        user: {
-          firstName: "Nabil Mohammed",
-          lastName: "Khelifa",
-          email: "nabil.nablotech@gmail.com",
-          mobileNumber: "393513117160",
-        },
       });
     } catch (error: any) {
       openNotification({
diff --git a/Frontend/src/containers/recent-activities-container.tsx b/Frontend/src/containers/recent-activities-container.tsx
index d0d13f8..ba849d8 100644
--- a/Frontend/src/containers/recent-activities-container.tsx
+++ b/Frontend/src/containers/recent-activities-container.tsx
@@ -3,25 +3,63 @@ import type { FC } from "react";
 import React, { useEffect, useRef, useState } from "react";
 import { Table } from "@/components";
 import { recentActivitiesData, recentActivitiesColumns } from "@/data";
-import { getRecentActivities } from "@/api";
+import { getRecentActivities, getRecentActivitiesCount } from "@/api";
 import { useQuery } from "react-query";
+import { openNotification } from "@/store";
 
 /* This container renders recent activites table */
 
 type PropsType = {};
 
 export const RecentActivitiesContainer: FC<PropsType> = () => {
-  const { isLoading, error, data } = useQuery(
-    "recentActivities",
-    getRecentActivities(10, 0)
+  const [pageNumber, setPageNumber] = useState<number>(0);
+
+  // Get total number of recent activities
+  const {
+    isLoading: isLoadingRecentActivitiesCount,
+    error: isErrorRecentActivitiesCount,
+    data: recentActivitiesCountFetchedData,
+  } = useQuery("recentActivitiesCount", getRecentActivitiesCount());
+
+  // get paginated recent activities
+  const {
+    isLoading: isLoadingRecentActivities,
+    error: isErrorRecentActivities,
+    data: recentActivitiesFetchedData,
+  } = useQuery(
+    ["recentActivities", pageNumber],
+    getRecentActivities(10, pageNumber),
+    { keepPreviousData: true }
   );
 
+    // get camera names
+    const {
+      isLoading: isLoadingRecentActivities,
+      error: isErrorRecentActivities,
+      data: recentActivitiesFetchedData,
+    } = useQuery(
+      ["cameraName", pageNumber],
+      getRecentActivities(10, pageNumber),
+      { keepPreviousData: true }
+    );
+
+  useEffect(() => {
+    if (isLoadingRecentActivities) {
+      openNotification({
+        type: "error",
+        message: isLoadingRecentActivities?.response?.data
+          ? isLoadingRecentActivities?.response?.data?.message
+          : isLoadingRecentActivities?.message,
+      });
+    }
+  }, [isLoadingRecentActivities]);
+
   return (
     <>
       <Table
         columns={recentActivitiesColumns}
-        data={data?.data}
-        pagination={{ total: data?.count }}
+        data={/* data?.data */ recentActivitiesData}
+        pagination={{ total: data?.count, onChange: setPageNumber }}
         rowKey={"id"}
         loading={isLoading}
       />
diff --git a/Frontend/src/data/recent-activities-data.tsx b/Frontend/src/data/recent-activities-data.tsx
index c13e654..d9bb90b 100644
--- a/Frontend/src/data/recent-activities-data.tsx
+++ b/Frontend/src/data/recent-activities-data.tsx
@@ -15,8 +15,8 @@ export const recentActivitiesColumns: ColumnsType<Activity> = [
   },
   {
     title: "Camera",
-    dataIndex: "camera",
-    render: (_, record) => <span>{record.camera.name}</span>,
+    dataIndex: "cameraName",
+    render: (_, record) => <span>{record.cameraName}</span>,
   },
   {
     title: "Action",
diff --git a/Frontend/src/hooks/use-session-slice.ts b/Frontend/src/hooks/use-session-slice.ts
index 532f58f..64e96d2 100644
--- a/Frontend/src/hooks/use-session-slice.ts
+++ b/Frontend/src/hooks/use-session-slice.ts
@@ -6,7 +6,7 @@ export const useSessionSlice = () => {
   const dispatch = useAppDispatch();
 
   /* redux session state properties */
-  const session: Session = useAppSelector(selectSession);
+  const session: Session | null = useAppSelector(selectSession);
 
   /* redux session state updaters */
   const logInState = (newSession: Session) => {

From 0435aaf85f492e893769dfc8aa9e5523530c5ee6 Mon Sep 17 00:00:00 2001
From: computer <computer@localhost.localdomain>
Date: Thu, 25 Jan 2024 11:58:49 +0100
Subject: [PATCH 3/7] Finished setting and view image

---
 .../src/app/frontend/frontend.controller.ts   |   5 +
 Backend/src/camera.config.ts                  |   1 +
 Backend/src/database/database.service.ts      |  18 +++-
 Frontend/src/api/cameras.ts                   |  27 +++++
 Frontend/src/api/endpoints.ts                 |   8 +-
 Frontend/src/api/index.ts                     |   7 +-
 Frontend/src/api/react-query-provider.tsx     |   2 +-
 Frontend/src/api/recent-activities.ts         |  14 +++
 Frontend/src/app/settings/page.tsx            |  10 ++
 .../src/components/button/view-screenshot.tsx |  75 +++++++++++++
 Frontend/src/components/index.ts              |   1 +
 .../video-recording-screen/video-player.tsx   |   2 +-
 Frontend/src/containers/index.ts              |   2 +
 Frontend/src/containers/layout-container.tsx  |  25 +++--
 Frontend/src/containers/modal-container.tsx   |  26 +++++
 .../recent-activities-container.tsx           |  64 +++++++----
 .../src/containers/settings-container.tsx     | 101 ++++++++++++++++++
 .../src/containers/video-stream-container.tsx |   1 -
 Frontend/src/data/camera-data.tsx             |  16 +--
 Frontend/src/data/form-schema-data.tsx        |   8 ++
 Frontend/src/data/navbar-data.tsx             |   2 +-
 Frontend/src/data/recent-activities-data.tsx  |  25 ++---
 Frontend/src/hooks/index.ts                   |   1 +
 Frontend/src/hooks/use-modal-slice.ts         |  41 +++++++
 Frontend/src/hooks/use-notification-slice.ts  |   2 +-
 Frontend/src/store/index.ts                   |   8 ++
 Frontend/src/store/slices/camera-slice.ts     |   3 +-
 Frontend/src/store/slices/modal-slice.ts      |  72 +++++++++++++
 Frontend/src/store/store.ts                   |   2 +
 Frontend/src/types/models/activity.ts         |   2 +-
 Frontend/src/types/models/camera.ts           |   2 +-
 Frontend/src/utils/generate-setting-schema.ts |  16 +++
 Frontend/src/utils/index.ts                   |   1 +
 33 files changed, 525 insertions(+), 65 deletions(-)
 create mode 100644 Backend/src/camera.config.ts
 create mode 100644 Frontend/src/api/cameras.ts
 create mode 100644 Frontend/src/app/settings/page.tsx
 create mode 100644 Frontend/src/components/button/view-screenshot.tsx
 create mode 100644 Frontend/src/containers/modal-container.tsx
 create mode 100644 Frontend/src/containers/settings-container.tsx
 create mode 100644 Frontend/src/hooks/use-modal-slice.ts
 create mode 100644 Frontend/src/store/slices/modal-slice.ts
 create mode 100644 Frontend/src/utils/generate-setting-schema.ts

diff --git a/Backend/src/app/frontend/frontend.controller.ts b/Backend/src/app/frontend/frontend.controller.ts
index b3ba4ef..10735d0 100644
--- a/Backend/src/app/frontend/frontend.controller.ts
+++ b/Backend/src/app/frontend/frontend.controller.ts
@@ -57,6 +57,11 @@ const filterParams = {
 export class FrontendController {
   constructor(private readonly databaseService: DatabaseService) {}
 
+  @Get(`cameras`)
+  getCameras() {
+    return this.databaseService.getCameras();
+  }
+
   @ApiParam(filterParams)
   @Get(`:filter(${filters.join('|')})/aggregate`)
   getAggregateValues(
diff --git a/Backend/src/camera.config.ts b/Backend/src/camera.config.ts
new file mode 100644
index 0000000..7fd32d2
--- /dev/null
+++ b/Backend/src/camera.config.ts
@@ -0,0 +1 @@
+export const cameraIds = [0, 1, 2, 3, 4, 5, 6, 7];
\ No newline at end of file
diff --git a/Backend/src/database/database.service.ts b/Backend/src/database/database.service.ts
index 559fe65..2b6e09f 100644
--- a/Backend/src/database/database.service.ts
+++ b/Backend/src/database/database.service.ts
@@ -20,6 +20,7 @@ import DataType from '../DataType';
 import { FiltersAvailable } from '../validators/filters/filters.pipe';
 import * as process from 'process';
 import * as bcrypt from 'bcrypt';
+import { cameraIds } from '../camera.config';
 
 const url = `${process.env.MONGO_PROTOCOL ?? 'mongodb'}://${
   process.env.MONGO_INITDB_ROOT_USERNAME
@@ -59,11 +60,22 @@ export class DatabaseService {
     );
   }
 
+  // If no camera exists it automatically creates one with the default config in camera.config.ts file
+  async initCameras() {
+    const size = await this.DB.collection('camera_names').countDocuments();
+    if (size == 0) {
+      await this.DB.collection(`camera_names`).insertMany(
+        cameraIds.map((id) => ({ id: id, name: 'No name' })),
+      );
+    }
+  }
+
   constructor() {
     const client = new MongoClient(url);
 
     this.DB = client.db('csd');
     this.initDBUser();
+    this.initCameras();
   }
 
   async addData(data: DataType<number>) {
@@ -101,6 +113,10 @@ export class DatabaseService {
     else return res.toArray();
   }
 
+  getCameras(): Promise<Document[]> {
+    return this.DB.collection('camera_names').find().toArray();
+  }
+
   aggregateCamera(filter?: FiltersAvailable): Promise<Document[]> {
     return this.DB.collection('cameras')
       .aggregate()
@@ -214,7 +230,7 @@ export class DatabaseService {
       {
         name: 'NVR',
         ip: process.env.NVR_IP_ADDRESS,
-        channels: [0, 1, 2, 3, 4, 5, 6, 7],
+        channels: cameraIds,
       },
     );
     return {
diff --git a/Frontend/src/api/cameras.ts b/Frontend/src/api/cameras.ts
new file mode 100644
index 0000000..197f37a
--- /dev/null
+++ b/Frontend/src/api/cameras.ts
@@ -0,0 +1,27 @@
+import { Activity, AnyObject, Camera } from "@/types";
+import { axiosClient } from "./axios-client";
+import { endpoints } from "./endpoints";
+
+type CamerasResponseDTO = Camera[];
+type CameraSettingUpdateResponseDTO = any;
+
+export const getCameras = () => {
+  return () =>
+    axiosClient
+      .get<CamerasResponseDTO>(`${endpoints.getCameras}`, {})
+      .then((result) => result.data);
+};
+
+export const updateCamera = async (configuration: AnyObject) => {
+  for (const key in configuration) {
+    try {
+      await axiosClient
+        .post<CamerasResponseDTO>(`${key}/${configuration[key]}`, {});
+    } catch (error: any) {
+      console.log(error);
+    }
+
+  }
+  return "Success"
+
+};
diff --git a/Frontend/src/api/endpoints.ts b/Frontend/src/api/endpoints.ts
index 131420e..0d27416 100644
--- a/Frontend/src/api/endpoints.ts
+++ b/Frontend/src/api/endpoints.ts
@@ -1,7 +1,11 @@
 export const endpoints = {
-  /* authentication endpoints */
+  // authentication endpoints
   login: "login",
+
+  // ِRecent activites endpoints
   recentActivities: "intrusionDetection",
-  getCameraName: "shared/channel",
   getIntrusionCount: "intrusionDetection/aggregate",
+
+  // Camera endpoints
+  getCameras: "cameras",
 };
diff --git a/Frontend/src/api/index.ts b/Frontend/src/api/index.ts
index 755a7ca..b2cadf8 100644
--- a/Frontend/src/api/index.ts
+++ b/Frontend/src/api/index.ts
@@ -1,6 +1,7 @@
-export { ReactQueryProvider } from "./react-query-provider";
+export { ReactQueryProvider, queryClient } from "./react-query-provider";
 export { axiosClient } from "./axios-client";
 
-/* authentication methods */
+
 export { login } from "./authentication/login";
-export { getRecentActivities,getRecentActivitiesCount } from "./recent-activities";
+export { getRecentActivities, getRecentActivitiesCount,getActivityImage } from "./recent-activities";
+export { getCameras, updateCamera } from "./cameras";
diff --git a/Frontend/src/api/react-query-provider.tsx b/Frontend/src/api/react-query-provider.tsx
index caa93ea..998ddbd 100644
--- a/Frontend/src/api/react-query-provider.tsx
+++ b/Frontend/src/api/react-query-provider.tsx
@@ -2,7 +2,7 @@
 
 import { QueryClient, QueryClientProvider } from "react-query";
 
-const queryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 export const ReactQueryProvider = ({
   children,
diff --git a/Frontend/src/api/recent-activities.ts b/Frontend/src/api/recent-activities.ts
index 9acaa31..038f1d6 100644
--- a/Frontend/src/api/recent-activities.ts
+++ b/Frontend/src/api/recent-activities.ts
@@ -11,6 +11,10 @@ type RecentActivitiesCountResponseDTO = {
   count: number;
 }[];
 
+type RecentActivityImageResponseDTO = {
+  data: any;
+};
+
 export const getRecentActivities = (top: number, skip: number) => {
   return () =>
     axiosClient
@@ -38,3 +42,13 @@ export const getRecentActivitiesCount = () => {
         return totalCount;
       });
 };
+
+export const getActivityImage = (id: string, timestamp: string) => {
+  return () =>
+    axiosClient
+      .get<RecentActivityImageResponseDTO>(
+        `${id}/${timestamp}`,
+        {}
+      )
+      .then((result) => result.data);
+};
diff --git a/Frontend/src/app/settings/page.tsx b/Frontend/src/app/settings/page.tsx
new file mode 100644
index 0000000..d0ff3c5
--- /dev/null
+++ b/Frontend/src/app/settings/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+import { SettingsContainer } from "@/containers";
+
+export default function Settings() {
+  return (
+    <div>
+      <SettingsContainer />
+    </div>
+  );
+}
diff --git a/Frontend/src/components/button/view-screenshot.tsx b/Frontend/src/components/button/view-screenshot.tsx
new file mode 100644
index 0000000..913baf7
--- /dev/null
+++ b/Frontend/src/components/button/view-screenshot.tsx
@@ -0,0 +1,75 @@
+import { Button } from "./button";
+import { CameraOutlined } from "@ant-design/icons";
+import { useModalSlice, useNotificationSlice } from "@/hooks";
+import { useQuery } from "react-query";
+import { getActivityImage } from "@/api";
+import { Spin } from "antd";
+import { useEffect } from "react";
+
+type PropsType = {
+  cameraId: string;
+  timestamp: string;
+};
+
+/**  This component renders screenshot button */
+export const ViewScreenshotButton: React.FC<PropsType> = ({
+  cameraId,
+  timestamp,
+}) => {
+  const { openModal, closeModal } = useModalSlice();
+  const { openNotification } = useNotificationSlice();
+
+  // Get total number of recent activities
+  const {
+    isLoading: isLoadingImage,
+    error: isErrorImage,
+    data: imageData,
+    refetch: fetchImage,
+  } = useQuery(
+    ["recentActivitiesCount", cameraId],
+    getActivityImage(cameraId, timestamp),
+    { enabled: false }
+  );
+
+  const onButtonClick = () => {
+    fetchImage();
+  };
+
+  useEffect(() => {
+    if (imageData) {
+      openModal({
+        title: timestamp,
+        modalContent: imageData.data,
+        isLoading: true,
+      });
+    }
+  }, [imageData]);
+
+  useEffect(() => {
+    if (isLoadingImage) {
+      openModal({
+        title: timestamp,
+        modalContent: "",
+        isLoading: true,
+      });
+    }
+  }, [isLoadingImage]);
+
+  useEffect(() => {
+    if (isErrorImage) {
+      openNotification({
+        type: "error",
+        message: "Could not fetch image.",
+      });
+      closeModal();
+    }
+  }, [isErrorImage]);
+
+  return (
+    <Button
+      toolTipText="View screenshot"
+      icon={<CameraOutlined />}
+      onClick={onButtonClick}
+    />
+  );
+};
diff --git a/Frontend/src/components/index.ts b/Frontend/src/components/index.ts
index 49d0f45..2caa9e1 100644
--- a/Frontend/src/components/index.ts
+++ b/Frontend/src/components/index.ts
@@ -1,5 +1,6 @@
 export { VideoRecordingScreen } from "./video-recording-screen/video-recording-screen";
 export { Table } from "./table/table";
 export { Button } from "./button/button";
+export { ViewScreenshotButton } from "./button/view-screenshot";
 export { Card } from "./card/card";
 export { Input } from "./input/input";
diff --git a/Frontend/src/components/video-recording-screen/video-player.tsx b/Frontend/src/components/video-recording-screen/video-player.tsx
index 8b2ad77..0824deb 100644
--- a/Frontend/src/components/video-recording-screen/video-player.tsx
+++ b/Frontend/src/components/video-recording-screen/video-player.tsx
@@ -63,7 +63,7 @@ const VideoPlayer = ({
       {/* <Spin className="absolute top-1/2 left-1/2" /> */}
       <video
         ref={(el) => {
-          videoRef.current = { ...videoRef.current, [camera.key]: el };
+          videoRef.current = { ...videoRef.current, [camera.id]: el };
         }}
         className={`${
           fullScreen
diff --git a/Frontend/src/containers/index.ts b/Frontend/src/containers/index.ts
index cea8cee..c4ee5ab 100644
--- a/Frontend/src/containers/index.ts
+++ b/Frontend/src/containers/index.ts
@@ -8,3 +8,5 @@ export { AboutUsMissionContainer } from "./about-us-container/about-us-mission-c
 export { AnalyticsContainer } from "./analytics-container/analytics-container";
 export { LoginContainer } from "./login-container";
 export { RecentActivitiesContainer } from "./recent-activities-container";
+export { SettingsContainer } from "./settings-container";
+export { ModalContainer } from "./modal-container";
diff --git a/Frontend/src/containers/layout-container.tsx b/Frontend/src/containers/layout-container.tsx
index f71cee2..1fb71e5 100644
--- a/Frontend/src/containers/layout-container.tsx
+++ b/Frontend/src/containers/layout-container.tsx
@@ -6,10 +6,12 @@ import { loggedInNavBarItems, guestNavBarItems } from "@/data";
 import { antTheme } from "../../theme";
 import type { NavBarItem } from "@/types";
 import { getCurrentNav } from "@/utils";
-import { BellOutlined } from "@ant-design/icons";
 import { useSessionSlice, useCameraSlice } from "@/hooks";
 import { ProtectionContainer } from "./protection-container";
 import { NotificationContainer } from "./notification-container";
+import { useQuery } from "react-query";
+import { getCameras } from "@/api";
+import { ModalContainer } from "./modal-container";
 const { Header, Content, Footer, Sider } = Layout;
 
 export const LayoutContainer = ({
@@ -19,12 +21,15 @@ export const LayoutContainer = ({
 }) => {
   /* state to check if ant design styled loaded */
   const { session, logOut } = useSessionSlice();
-  const { isFullScreenGrid } = useCameraSlice();
+  const { isFullScreenGrid, setCameras } = useCameraSlice();
   const [antStyleLoaded, setAntStyleLoaded] = useState<boolean>(false);
   const [currentNavMenu, setCurrentNavMenu] = useState<NavBarItem[]>([]);
   const router = useRouter();
   const pathname = usePathname();
 
+  // Initialize camera
+  const { data: camerasFetchedData } = useQuery("cameras", getCameras());
+
   /* event handler */
   const onMenuClick = (info: any) => {
     const selectedItem = currentNavMenu.find((item) => item.key === info.key);
@@ -41,6 +46,12 @@ export const LayoutContainer = ({
     setAntStyleLoaded(true);
   }, []);
 
+  useEffect(() => {
+    if (camerasFetchedData && session) {
+      setCameras(camerasFetchedData);
+    }
+  }, [camerasFetchedData, session]);
+
   useEffect(() => {
     /* navbar menu */
     if (session) {
@@ -81,11 +92,10 @@ export const LayoutContainer = ({
               <Layout>
                 <Header className="bg-primary flex justify-end" />
                 <Content
-                  className={`${
-                    isFullScreenGrid
-                      ? "fixed top-0 left-0 w-screen h-screen"
-                      : "pt-6 px-4 p-0"
-                  }`}
+                  className={`${isFullScreenGrid
+                    ? "fixed top-0 left-0 w-screen h-screen"
+                    : "pt-6 px-4 p-0"
+                    }`}
                 >
                   <div className="p-2 bg-white min-h-[360px]">{children}</div>
                 </Content>
@@ -96,6 +106,7 @@ export const LayoutContainer = ({
             </Layout>
           </ProtectionContainer>
         )}
+        <ModalContainer />
       </NotificationContainer>
     </ConfigProvider>
   );
diff --git a/Frontend/src/containers/modal-container.tsx b/Frontend/src/containers/modal-container.tsx
new file mode 100644
index 0000000..a843aa1
--- /dev/null
+++ b/Frontend/src/containers/modal-container.tsx
@@ -0,0 +1,26 @@
+"use client";
+import { useModalSlice } from "@/hooks";
+import { Modal, Spin } from "antd";
+import { useEffect } from "react";;
+
+export const ModalContainer = () => {
+  const { isModalOpen, closeModal, modalContent, isLoading , title} = useModalSlice();
+  /* onClose or cancel */
+  const onCancel = () => {
+    closeModal();
+  }
+
+  return (
+    <>
+      <Modal title={title} open={isModalOpen} onOk={onCancel} onCancel={onCancel} afterClose={onCancel}>
+        {modalContent}
+        {isLoading &&
+          <Spin/>
+        }
+        {!isLoading &&
+          <img src={modalContent} alt="Ima"/>
+        }
+      </Modal>
+    </>
+  );
+};
diff --git a/Frontend/src/containers/recent-activities-container.tsx b/Frontend/src/containers/recent-activities-container.tsx
index ba849d8..5c6ac87 100644
--- a/Frontend/src/containers/recent-activities-container.tsx
+++ b/Frontend/src/containers/recent-activities-container.tsx
@@ -1,18 +1,20 @@
 "use client";
 import type { FC } from "react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Table } from "@/components";
 import { recentActivitiesData, recentActivitiesColumns } from "@/data";
 import { getRecentActivities, getRecentActivitiesCount } from "@/api";
 import { useQuery } from "react-query";
 import { openNotification } from "@/store";
+import { useCameraSlice } from "@/hooks";
 
 /* This container renders recent activites table */
 
 type PropsType = {};
 
 export const RecentActivitiesContainer: FC<PropsType> = () => {
-  const [pageNumber, setPageNumber] = useState<number>(0);
+  const [pageNumber, setPageNumber] = useState<number>(1);
+  const { cameras } = useCameraSlice();
 
   // Get total number of recent activities
   const {
@@ -26,42 +28,58 @@ export const RecentActivitiesContainer: FC<PropsType> = () => {
     isLoading: isLoadingRecentActivities,
     error: isErrorRecentActivities,
     data: recentActivitiesFetchedData,
+    refetch: refechRecentActivites,
   } = useQuery(
     ["recentActivities", pageNumber],
-    getRecentActivities(10, pageNumber),
-    { keepPreviousData: true }
+    getRecentActivities(10, pageNumber - 1),
+    { keepPreviousData: true, enabled: false }
   );
 
-    // get camera names
-    const {
-      isLoading: isLoadingRecentActivities,
-      error: isErrorRecentActivities,
-      data: recentActivitiesFetchedData,
-    } = useQuery(
-      ["cameraName", pageNumber],
-      getRecentActivities(10, pageNumber),
-      { keepPreviousData: true }
-    );
+  useEffect(() => {
+    if (recentActivitiesCountFetchedData) {
+      console.log(recentActivitiesCountFetchedData);
+      refechRecentActivites();
+    }
+  }, [recentActivitiesCountFetchedData]);
 
   useEffect(() => {
-    if (isLoadingRecentActivities) {
+    if (isErrorRecentActivities) {
+      openNotification({
+        type: "error",
+        message: isErrorRecentActivities?.response?.data
+          ? isErrorRecentActivities?.response?.data?.message
+          : isErrorRecentActivities?.message,
+      });
+    }
+
+    if (isErrorRecentActivitiesCount) {
       openNotification({
         type: "error",
-        message: isLoadingRecentActivities?.response?.data
-          ? isLoadingRecentActivities?.response?.data?.message
-          : isLoadingRecentActivities?.message,
+        message: isErrorRecentActivitiesCount?.response?.data
+          ? isErrorRecentActivitiesCount?.response?.data?.message
+          : isErrorRecentActivitiesCount?.message,
       });
     }
-  }, [isLoadingRecentActivities]);
+  }, [isErrorRecentActivities, isErrorRecentActivitiesCount]);
 
   return (
     <>
       <Table
         columns={recentActivitiesColumns}
-        data={/* data?.data */ recentActivitiesData}
-        pagination={{ total: data?.count, onChange: setPageNumber }}
-        rowKey={"id"}
-        loading={isLoading}
+        data={
+          /* recentActivitiesFetchedData */ recentActivitiesData?.map(
+          (event) => ({
+            ...event,
+            cameraName: cameras.find((item) => item.id == event.cameraId)?.name,
+          })
+        )
+        }
+        pagination={{
+          total: recentActivitiesCountFetchedData,
+          onChange: setPageNumber,
+        }}
+        rowKey={"_id"}
+        loading={isLoadingRecentActivitiesCount || isLoadingRecentActivities}
       />
     </>
   );
diff --git a/Frontend/src/containers/settings-container.tsx b/Frontend/src/containers/settings-container.tsx
new file mode 100644
index 0000000..61c0969
--- /dev/null
+++ b/Frontend/src/containers/settings-container.tsx
@@ -0,0 +1,101 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import type { FC } from "react";
+import React from "react";
+import { generateSettingFormSchema } from "@/utils";
+import { Input, Button } from "@/components";
+import { updateCamera, queryClient } from "@/api";
+import { useCameraSlice, useNotificationSlice } from "@/hooks";
+import { useMutation } from "react-query";
+
+/* This container renders setting form  */
+
+type PropsType = {};
+
+export const SettingsContainer: FC<PropsType> = () => {
+  /* state*/
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { cameras } = useCameraSlice();
+  console.log(cameras);
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isValid },
+    setValue
+  } = useForm({
+    resolver: yupResolver(
+      generateSettingFormSchema(cameras.map((item) => item.id))
+    ),
+  });
+  const { openNotification } = useNotificationSlice();
+  const { mutate } = useMutation(updateCamera, {
+    onSuccess: () => {
+      queryClient.invalidateQueries('cameras')
+    },
+  });
+
+
+  /* event handlers */
+  const onSubmit = async (data: any) => {
+    try {
+      setIsLoading(true);
+      console.log(data);
+      mutate(data);
+      openNotification({
+        type: "success",
+        message: "Updated Successfully.",
+      });
+    } catch (error: any) {
+      openNotification({
+        type: "error",
+        message: error?.response?.data
+          ? error.response?.data?.message
+          : error.message,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (cameras.length > 0) {
+      cameras.forEach(
+        (camera) => { setValue(camera.id.toString(), camera.name) }
+      )
+    }
+
+  }, [cameras])
+
+  return (
+    <div className="flex flex-col">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {cameras.map((camera) => (
+          <Controller
+            key={camera.id}
+            name={camera.id.toString()}
+            control={control}
+            render={({ field }) => (
+              <Input
+                label={`Camera: ${camera.id}`}
+                error={errors?.[camera.id.toString()]?.message?.toString()}
+                {...field}
+              />
+            )}
+          />
+        ))}
+
+        <div className="pt-2">
+          <Button
+            htmlType="submit"
+            disabled={!isValid}
+            loading={isLoading}
+          >
+            Save
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/Frontend/src/containers/video-stream-container.tsx b/Frontend/src/containers/video-stream-container.tsx
index a6541a3..ec51d7f 100644
--- a/Frontend/src/containers/video-stream-container.tsx
+++ b/Frontend/src/containers/video-stream-container.tsx
@@ -60,7 +60,6 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
 
   /* useEffect hooks */
   useEffect(() => {
-    setCameras(camerasData);
     const openVidu = new OpenVidu();
     const session = openVidu.initSession();
 
diff --git a/Frontend/src/data/camera-data.tsx b/Frontend/src/data/camera-data.tsx
index dde73cd..921c1c3 100644
--- a/Frontend/src/data/camera-data.tsx
+++ b/Frontend/src/data/camera-data.tsx
@@ -2,49 +2,49 @@ import { Camera } from "@/types";
 
 export const cameras: Camera[] = [
   {
-    key: "1",
+    id: "0",
     name: "Backyard",
     isActive: true,
     url: "http://localhost:8080/hls/1",
   },
   {
-    key: "main-road",
+    id: "1",
     name: "Main road",
     isActive: false,
     url: "https://www.youtube.com/embed/yNQmth5kUZ0?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
   },
   {
-    key: "door",
+    id: "2",
     name: "Door",
     isActive: false,
     url: "https://www.youtube.com/embed/dV9ngLCKE7k?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
   },
   {
-    key: "pet-room",
+    id: "3",
     name: "Pet room",
     isActive: false,
     url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
   },
   {
-    key: "basement",
+    id: "4",
     name: "Basement",
     isActive: false,
     url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
   },
   {
-    key: "baby-room",
+    id: "5",
     name: "Baby room",
     isActive: false,
     url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
   },
   {
-    key: "dinning-room",
+    id: "6",
     name: "Dinning room",
     isActive: false,
     url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
   },
   {
-    key: "kitchen",
+    id: "7",
     name: "Kitchen",
     isActive: false,
     url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
diff --git a/Frontend/src/data/form-schema-data.tsx b/Frontend/src/data/form-schema-data.tsx
index 95af96f..5529e93 100644
--- a/Frontend/src/data/form-schema-data.tsx
+++ b/Frontend/src/data/form-schema-data.tsx
@@ -6,3 +6,11 @@ export const loginFormSchema = yup
     password: yup.string().required("This field is required"),
   })
   .required();
+
+
+  export const settingFormSchema = yup
+  .object({
+    name: yup.string().required("This field is required"),
+    password: yup.string().required("This field is required"),
+  })
+  .required();
diff --git a/Frontend/src/data/navbar-data.tsx b/Frontend/src/data/navbar-data.tsx
index fa25b17..4bd0720 100644
--- a/Frontend/src/data/navbar-data.tsx
+++ b/Frontend/src/data/navbar-data.tsx
@@ -46,7 +46,7 @@ export const loggedInNavBarItems: NavBarItem[] = [
   {
     key: "setting",
     label: "Setting",
-    route: "/setting",
+    route: "/settings",
     icon: SettingOutlined,
   },
   {
diff --git a/Frontend/src/data/recent-activities-data.tsx b/Frontend/src/data/recent-activities-data.tsx
index d9bb90b..38af6c1 100644
--- a/Frontend/src/data/recent-activities-data.tsx
+++ b/Frontend/src/data/recent-activities-data.tsx
@@ -1,11 +1,9 @@
 "use client";
 import { Activity } from "@/types";
-import { Button } from "@/components";
+import { ViewScreenshotButton } from "@/components";
 import { Space } from "antd";
-import { CameraOutlined, VideoCameraOutlined } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import { cameras } from "./camera-data";
-import { authorizedEntitiesData } from "./authorized-entities-data";
 
 export const recentActivitiesColumns: ColumnsType<Activity> = [
   {
@@ -23,7 +21,10 @@ export const recentActivitiesColumns: ColumnsType<Activity> = [
     key: "action",
     render: (_, record) => (
       <Space size="middle">
-        <Button toolTipText="View screenshot" icon={<CameraOutlined />} />
+        <ViewScreenshotButton
+          cameraId={record.cameraId}
+          timestamp={record.timestamp.replaceAll(" ", "")}
+        />
         {/* <Button
           toolTipText={"View video playback"}
           icon={<VideoCameraOutlined />}
@@ -35,23 +36,23 @@ export const recentActivitiesColumns: ColumnsType<Activity> = [
 
 export const recentActivitiesData: Activity[] = [
   {
-    id: "fad4sl3jf21oia32232sj",
+    _id: "fad4sl3jf21oia32232sj",
     timestamp: Date().toString().substring(0, 21),
-    cameraId: cameras[1].key,
+    cameraId: cameras[1].id,
   },
   {
-    id: "fad4sl3jf21oia322tesj",
+    _id: "fad4sl3jf21oia322tesj",
     timestamp: Date().toString().substring(0, 21),
-    cameraId: cameras[4].key,
+    cameraId: cameras[4].id,
   },
   {
-    id: "fad4sl3jflfoia32232sj",
+    _id: "fad4sl3jflfoia32232sj",
     timestamp: Date().toString().substring(0, 21),
-    cameraId: cameras[3].key,
+    cameraId: cameras[3].id,
   },
   {
-    id: "fad4sl3jf21oia72232sj",
+    _id: "fad4sl3jf21oia72232sj",
     timestamp: Date().toString().substring(0, 21),
-    cameraId: cameras[0].key,
+    cameraId: cameras[0].id,
   },
 ];
diff --git a/Frontend/src/hooks/index.ts b/Frontend/src/hooks/index.ts
index 6466cf4..2a518c5 100644
--- a/Frontend/src/hooks/index.ts
+++ b/Frontend/src/hooks/index.ts
@@ -2,3 +2,4 @@ export { useAppDispatch, useAppSelector } from "./store-hooks";
 export { useCameraSlice } from "./use-camera-slice";
 export { useSessionSlice } from "./use-session-slice";
 export { useNotificationSlice } from "./use-notification-slice";
+export { useModalSlice } from "./use-modal-slice";
diff --git a/Frontend/src/hooks/use-modal-slice.ts b/Frontend/src/hooks/use-modal-slice.ts
new file mode 100644
index 0000000..104c511
--- /dev/null
+++ b/Frontend/src/hooks/use-modal-slice.ts
@@ -0,0 +1,41 @@
+import { useAppDispatch, useAppSelector } from "./store-hooks";
+import {
+  selectIsModalOpen,
+  selectModalContent,
+  selectModalTitle,
+  openModal,
+  closeModal,
+  selectIsLoading,
+} from "@/store";
+
+export const useModalSlice = () => {
+  const dispatch = useAppDispatch();
+
+  /* redux modal state properties */
+  const isModalOpen = useAppSelector(selectIsModalOpen);
+  const modalContent = useAppSelector(selectModalContent);
+  const title = useAppSelector(selectModalTitle);
+  const isLoading = useAppSelector(selectIsLoading);
+
+  /* redux modal state updaters */
+  const setOpenModalState = (modalConfig: {
+    title: string;
+    modalContent: string;
+    isLoading: boolean;
+  }) => {
+    dispatch(openModal(modalConfig));
+  };
+
+  const setCloseModalState = () => {
+    dispatch(closeModal());
+  };
+
+  return {
+    isModalOpen: isModalOpen,
+    modalContent: modalContent,
+    title: title,
+    isLoading: isLoading,
+    openModal: setOpenModalState,
+    closeModal: setCloseModalState,
+  };
+};
diff --git a/Frontend/src/hooks/use-notification-slice.ts b/Frontend/src/hooks/use-notification-slice.ts
index f872074..71a2392 100644
--- a/Frontend/src/hooks/use-notification-slice.ts
+++ b/Frontend/src/hooks/use-notification-slice.ts
@@ -10,7 +10,7 @@ export const useNotificationSlice = () => {
   const dispatch = useAppDispatch();
 
   /* redux notification state properties */
-  const notification: Notification = useAppSelector(selectNotification);
+  const notification: Notification | null = useAppSelector(selectNotification);
 
   /* redux notification state updaters */
   const openNotificationState = (
diff --git a/Frontend/src/store/index.ts b/Frontend/src/store/index.ts
index 8b6a128..7fa31cd 100644
--- a/Frontend/src/store/index.ts
+++ b/Frontend/src/store/index.ts
@@ -15,3 +15,11 @@ export {
   openNotification,
   closeNotification,
 } from "./slices/notification-slice";
+export {
+  selectIsModalOpen,
+  selectModalContent,
+  selectModalTitle,
+  selectIsLoading,
+  openModal,
+  closeModal,
+} from "./slices/modal-slice";
diff --git a/Frontend/src/store/slices/camera-slice.ts b/Frontend/src/store/slices/camera-slice.ts
index 1905f9f..2ccd0db 100644
--- a/Frontend/src/store/slices/camera-slice.ts
+++ b/Frontend/src/store/slices/camera-slice.ts
@@ -3,7 +3,6 @@ import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
 import type { RootState } from "../store";
 import type { Camera } from "@/types";
-import { cameras } from "@/data";
 
 // CameraSlice State type
 type CameraStateType = {
@@ -32,7 +31,7 @@ export const cameraSlice = createSlice({
     },
     updateCamera: (state: CameraStateType, action: PayloadAction<Camera>) => {
       state.cameras = state.cameras.map((item) => {
-        if (item.key === action.payload.key) {
+        if (item.id === action.payload.id) {
           return action.payload;
         }
         return item;
diff --git a/Frontend/src/store/slices/modal-slice.ts b/Frontend/src/store/slices/modal-slice.ts
new file mode 100644
index 0000000..64e70ca
--- /dev/null
+++ b/Frontend/src/store/slices/modal-slice.ts
@@ -0,0 +1,72 @@
+"use client";
+import { createSlice } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+import type { RootState } from "../store";
+
+// Modal Slice State type
+type ModalStateType = {
+  recentActivityModal: {
+    title: string;
+    isModalOpen: boolean;
+    isLoading: boolean;
+    modalContent: string;
+  };
+};
+
+type OpenModalPayloadType = {
+  title: string;
+  modalContent: string;
+  isLoading: boolean;
+};
+
+// Define the initial state using that type
+const initialState = {
+  recentActivityModal: {
+    title: "",
+    isModalOpen: false,
+    isLoading: false,
+    modalContent: "",
+  },
+} as ModalStateType;
+
+export const modalSlice = createSlice({
+  name: "modal",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    openModal: (
+      state: ModalStateType,
+      action: PayloadAction<OpenModalPayloadType>
+    ) => {
+      state.recentActivityModal = {
+        ...state,
+        ...action.payload,
+        isModalOpen: true,
+      };
+    },
+    closeModal: (state: ModalStateType) => {
+      state.recentActivityModal = {
+        ...state.recentActivityModal,
+        title: "",
+        isModalOpen: false,
+        isLoading: false,
+        modalContent: "",
+      };
+    },
+  },
+});
+
+export const { openModal, closeModal } = modalSlice.actions;
+
+// Other code such as selectors can use the imported `RootState` type
+export const selectModalTitle = (state: RootState) =>
+  state.modal.recentActivityModal.title;
+export const selectIsLoading = (state: RootState) =>
+  state.modal.recentActivityModal.isLoading;
+export const selectModalContent = (state: RootState) =>
+  state.modal.recentActivityModal.modalContent;
+export const selectIsModalOpen = (state: RootState) =>
+  state.modal.recentActivityModal.isModalOpen;
+
+export default modalSlice.reducer;
diff --git a/Frontend/src/store/store.ts b/Frontend/src/store/store.ts
index a34849e..4dc88fc 100644
--- a/Frontend/src/store/store.ts
+++ b/Frontend/src/store/store.ts
@@ -2,11 +2,13 @@ import { configureStore } from "@reduxjs/toolkit";
 import sessionReducer from "./slices/session-slice";
 import cameraReducer from "./slices/camera-slice";
 import notificationReducer from "./slices/notification-slice";
+import modalReducer from "./slices/modal-slice";
 
 export const store = configureStore({
   reducer: {
     session: sessionReducer,
     camera: cameraReducer,
+    modal: modalReducer,
     notification: notificationReducer,
   },
 });
diff --git a/Frontend/src/types/models/activity.ts b/Frontend/src/types/models/activity.ts
index 61f1264..04dd81a 100644
--- a/Frontend/src/types/models/activity.ts
+++ b/Frontend/src/types/models/activity.ts
@@ -2,7 +2,7 @@
  * Activity is composed of properties such as id, timestamp, camera,entity etc.
  * */
 export type Activity = {
-  id: string;
+  _id: string;
   timestamp: string;
   cameraId: string;
   cameraName?: string;
diff --git a/Frontend/src/types/models/camera.ts b/Frontend/src/types/models/camera.ts
index fe241d8..7029016 100644
--- a/Frontend/src/types/models/camera.ts
+++ b/Frontend/src/types/models/camera.ts
@@ -2,7 +2,7 @@
  * properties such as key, name, isActive, etc.
  * */
 export type Camera = {
-  key: string;
+  id: string;
   name: string;
   isActive: boolean;
   url: string;
diff --git a/Frontend/src/utils/generate-setting-schema.ts b/Frontend/src/utils/generate-setting-schema.ts
new file mode 100644
index 0000000..3b9e588
--- /dev/null
+++ b/Frontend/src/utils/generate-setting-schema.ts
@@ -0,0 +1,16 @@
+import * as yup from "yup";
+import { AnyObject } from "@/types";
+
+export const generateSettingFormSchema = (cameras: string[] | number[]) => {
+  const schemaObject: AnyObject = {};
+
+  cameras.forEach((camera) => {
+    schemaObject[camera] = yup.string().required("This field is required");
+  });
+
+  return yup
+    .object({
+      ...schemaObject,
+    })
+    .required();
+};
diff --git a/Frontend/src/utils/index.ts b/Frontend/src/utils/index.ts
index 771ec39..9d1e0e9 100644
--- a/Frontend/src/utils/index.ts
+++ b/Frontend/src/utils/index.ts
@@ -3,3 +3,4 @@ export { getItemObject } from "./get-item-object";
 export { getObjectArray } from "./get-object-array";
 export { isEmptyObject } from "./is-empty-object";
 export { debounce } from "./debounce";
+export { generateSettingFormSchema } from "./generate-setting-schema";

From 307ee2964de026eb56aa9c1cf4df705b7d7d1a38 Mon Sep 17 00:00:00 2001
From: computer <computer@localhost.localdomain>
Date: Thu, 25 Jan 2024 16:24:32 +0100
Subject: [PATCH 4/7] Added docker and fixed build issues

---
 Backend/.env-openvidu                         |  2 +-
 Frontend/Dockerfile                           | 23 +++++++++++++++++
 .../api/{axios-client.ts => axios-client.tsx} |  4 ---
 Frontend/src/components/input/input.tsx       |  2 +-
 .../authorized-counter/authorized-counter.tsx |  4 +--
 .../authorized-unauthorized-line.tsx          |  4 +--
 .../authorized-unauthorized-pie.tsx           |  4 +--
 .../recent-authorized/recent-authorized.tsx   |  8 +++---
 .../recent-unauthorized.tsx                   |  8 +++---
 .../unauthorized-counter.tsx                  |  4 +--
 .../user-area-bar/user-area-bar.tsx           |  8 +++---
 Frontend/src/containers/layout-container.tsx  | 20 ++++++++++-----
 .../recent-activities-container.tsx           | 25 +++++++++++--------
 .../src/containers/settings-container.tsx     |  1 -
 .../src/containers/video-stream-container.tsx | 20 +++++++--------
 Frontend/src/store/slices/session-slice.ts    |  5 ----
 README.md                                     |  2 ++
 docker-compose.yml                            | 22 ++++++++++++++++
 18 files changed, 107 insertions(+), 59 deletions(-)
 create mode 100644 Frontend/Dockerfile
 rename Frontend/src/api/{axios-client.ts => axios-client.tsx} (80%)

diff --git a/Backend/.env-openvidu b/Backend/.env-openvidu
index 93bf591..b78fe81 100644
--- a/Backend/.env-openvidu
+++ b/Backend/.env-openvidu
@@ -1,5 +1,5 @@
 OPENVIDU_SECRET=MY_SECRET
 OPENVIDU_WEBHOOK=true
-OPENVIDU_WEBHOOK_ENDPOINT=https://192.168.129.175:8080/media-server
+OPENVIDU_WEBHOOK_ENDPOINT=https://backend:8080/media-server
 
 
diff --git a/Frontend/Dockerfile b/Frontend/Dockerfile
new file mode 100644
index 0000000..88045d0
--- /dev/null
+++ b/Frontend/Dockerfile
@@ -0,0 +1,23 @@
+# Use the official Node.js image as the base image
+FROM node:14-alpine
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the entire app to the working directory
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Expose the port that your Next.js app will run on
+EXPOSE 3000
+
+# Start the Next.js app
+CMD ["npm", "start"]
diff --git a/Frontend/src/api/axios-client.ts b/Frontend/src/api/axios-client.tsx
similarity index 80%
rename from Frontend/src/api/axios-client.ts
rename to Frontend/src/api/axios-client.tsx
index ba2a2b0..a4d6a52 100644
--- a/Frontend/src/api/axios-client.ts
+++ b/Frontend/src/api/axios-client.tsx
@@ -6,12 +6,8 @@ type RequestHeaderOptions = {
   Authorization?: string;
 };
 
-const accessToken = sessionStorage.getItem("access_token");
 const headers: RequestHeaderOptions = {};
 
-if (accessToken) {
-  headers.Authorization = `Bearer ${sessionStorage.getItem("access_token")}`;
-}
 export const axiosClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
   headers: { ...headers },
diff --git a/Frontend/src/components/input/input.tsx b/Frontend/src/components/input/input.tsx
index e52d71c..aaea80c 100644
--- a/Frontend/src/components/input/input.tsx
+++ b/Frontend/src/components/input/input.tsx
@@ -11,7 +11,7 @@ type PropsType = {
 
 /**  This component renders a input field */
 export const Input = React.forwardRef<HTMLInputElement, PropsType>(
-  ({ label, password = false, error = undefined, ...props }, ref) => {
+  ({ label, password = false, error = undefined, ...props }, ref:any) => {
     return (
       <div className="py-1">
         <div className={"font-bold pb-2"}>{label}</div>
diff --git a/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx b/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx
index 24a326c..6fcac2e 100644
--- a/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx
+++ b/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx
@@ -45,13 +45,13 @@ export const AuthorizedCounterContainer: FC = () => {
         <div className={"flex flex-col gap-2 justify-center items-center"}>
           <span>No of attempts on:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>
diff --git a/Frontend/src/containers/analytics-container/authorized-unauthorized-line/authorized-unauthorized-line.tsx b/Frontend/src/containers/analytics-container/authorized-unauthorized-line/authorized-unauthorized-line.tsx
index ecc5cf8..b246d94 100644
--- a/Frontend/src/containers/analytics-container/authorized-unauthorized-line/authorized-unauthorized-line.tsx
+++ b/Frontend/src/containers/analytics-container/authorized-unauthorized-line/authorized-unauthorized-line.tsx
@@ -496,13 +496,13 @@ export const AuthorizedUnauthorizedLineContainer: FC = () => {
         <div className={"pt-3 flex  gap-2 items-center"}>
           <span>Date:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>
diff --git a/Frontend/src/containers/analytics-container/authorized-unauthorized-pie/authorized-unauthorized-pie.tsx b/Frontend/src/containers/analytics-container/authorized-unauthorized-pie/authorized-unauthorized-pie.tsx
index e6e0019..1044ad1 100644
--- a/Frontend/src/containers/analytics-container/authorized-unauthorized-pie/authorized-unauthorized-pie.tsx
+++ b/Frontend/src/containers/analytics-container/authorized-unauthorized-pie/authorized-unauthorized-pie.tsx
@@ -58,13 +58,13 @@ export const AuthorizedUnauthorizedPieContainer: FC = () => {
         <div className={"flex flex-col gap-2 justify-center items-center"}>
           <span>Date:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>
diff --git a/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx b/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx
index ba70503..3df85a5 100644
--- a/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx
+++ b/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx
@@ -4,14 +4,14 @@ import { Card, Table } from "@/components";
 import { recentActivitiesData, recentActivitiesColumns } from "@/data";
 
 export const RecentAuthorizedContainer: FC = () => {
-  const authorizedEntities = recentActivitiesData
-    .filter((item) => item.entity !== undefined)
-    .slice(0, 5);
+  // const authorizedEntities = recentActivitiesData
+  //   .filter((item) => item.entity !== undefined)
+  //   .slice(0, 5);
   return (
     <>
       <Card header={"Recent Authorzied Activities"}>
         <div className="py-4">
-          <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} />
+          {/* <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} /> */}
         </div>
       </Card>
     </>
diff --git a/Frontend/src/containers/analytics-container/recent-unauthorized/recent-unauthorized.tsx b/Frontend/src/containers/analytics-container/recent-unauthorized/recent-unauthorized.tsx
index e8d5b43..597c049 100644
--- a/Frontend/src/containers/analytics-container/recent-unauthorized/recent-unauthorized.tsx
+++ b/Frontend/src/containers/analytics-container/recent-unauthorized/recent-unauthorized.tsx
@@ -4,14 +4,14 @@ import { Card, Table } from "@/components";
 import { recentActivitiesData, recentActivitiesColumns } from "@/data";
 
 export const RecentUnauthorizedContainer: FC = () => {
-  const authorizedEntities = recentActivitiesData
-    .filter((item) => item.entity === undefined)
-    .slice(0, 5);
+  // const authorizedEntities = recentActivitiesData
+  //   .filter((item) => item.entity === undefined)
+  //   .slice(0, 5);
   return (
     <>
       <Card header={"Recent Unauthorzied Activities"}>
         <div className="py-4">
-          <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} />
+          {/* <Table columns={recentActivitiesColumns} data={authorizedEntities} rowKey={"id"} /> */}
         </div>
       </Card>
     </>
diff --git a/Frontend/src/containers/analytics-container/unauthorized-counter/unauthorized-counter.tsx b/Frontend/src/containers/analytics-container/unauthorized-counter/unauthorized-counter.tsx
index aa0fee1..73b6013 100644
--- a/Frontend/src/containers/analytics-container/unauthorized-counter/unauthorized-counter.tsx
+++ b/Frontend/src/containers/analytics-container/unauthorized-counter/unauthorized-counter.tsx
@@ -45,13 +45,13 @@ export const UnauthorizedCounterContainer: FC = () => {
         <div className={"flex flex-col gap-2 justify-center items-center"}>
           <span>No of attempts on:</span>
           <div>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
         </div>
       </Card>
diff --git a/Frontend/src/containers/analytics-container/user-area-bar/user-area-bar.tsx b/Frontend/src/containers/analytics-container/user-area-bar/user-area-bar.tsx
index 4d0e545..5241b1d 100644
--- a/Frontend/src/containers/analytics-container/user-area-bar/user-area-bar.tsx
+++ b/Frontend/src/containers/analytics-container/user-area-bar/user-area-bar.tsx
@@ -24,7 +24,7 @@ import type { AnyObject, AuthorizedEntity, Camera } from "@/types";
 export const UserAreaBarContainer: FC = () => {
   const cameraOptions = cameras.map((item) => ({
     label: item.name,
-    value: item.key,
+    value: item.id,
   }));
   const entityOptions = authorizedEntitiesData.map((item) => ({
     label: item.name,
@@ -70,7 +70,7 @@ export const UserAreaBarContainer: FC = () => {
   };
 
   const handleCameraSelectChange = (value: string[]) => {
-    const selectedCamerasObject = getObjectArray(value, "key", cameras);
+    const selectedCamerasObject = getObjectArray(value, "id", cameras);
     setSelectedCameras(selectedCamerasObject);
   };
 
@@ -130,13 +130,13 @@ export const UserAreaBarContainer: FC = () => {
         <div className={"pt-3 flex  gap-4 items-center"}>
           <div className={"flex  gap-2 items-center"}>
             <span>Date:</span>
-            <DatePicker
+            {/* <DatePicker
               format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
               onChange={setDate}
               defaultValue={date}
               allowClear={false}
               picker={timeOption === "month" ? timeOption : undefined}
-            />
+            /> */}
           </div>
 
           <div className={"grow flex  gap-2 items-center"}>
diff --git a/Frontend/src/containers/layout-container.tsx b/Frontend/src/containers/layout-container.tsx
index 1fb71e5..6cdc7b9 100644
--- a/Frontend/src/containers/layout-container.tsx
+++ b/Frontend/src/containers/layout-container.tsx
@@ -10,7 +10,7 @@ import { useSessionSlice, useCameraSlice } from "@/hooks";
 import { ProtectionContainer } from "./protection-container";
 import { NotificationContainer } from "./notification-container";
 import { useQuery } from "react-query";
-import { getCameras } from "@/api";
+import { axiosClient, getCameras } from "@/api";
 import { ModalContainer } from "./modal-container";
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -20,7 +20,7 @@ export const LayoutContainer = ({
   children: React.ReactNode;
 }) => {
   /* state to check if ant design styled loaded */
-  const { session, logOut } = useSessionSlice();
+  const { session, logOut, logIn } = useSessionSlice();
   const { isFullScreenGrid, setCameras } = useCameraSlice();
   const [antStyleLoaded, setAntStyleLoaded] = useState<boolean>(false);
   const [currentNavMenu, setCurrentNavMenu] = useState<NavBarItem[]>([]);
@@ -44,6 +44,13 @@ export const LayoutContainer = ({
   /* useEffect */
   useEffect(() => {
     setAntStyleLoaded(true);
+    const accessToken = sessionStorage.getItem("access_token");
+    if (accessToken) {
+      axiosClient.defaults.headers.common[
+        "Authorization"
+      ] = `Bearer ${sessionStorage.getItem("access_token")}`;
+      logIn({ accessToken: accessToken });
+    }
   }, []);
 
   useEffect(() => {
@@ -92,10 +99,11 @@ export const LayoutContainer = ({
               <Layout>
                 <Header className="bg-primary flex justify-end" />
                 <Content
-                  className={`${isFullScreenGrid
-                    ? "fixed top-0 left-0 w-screen h-screen"
-                    : "pt-6 px-4 p-0"
-                    }`}
+                  className={`${
+                    isFullScreenGrid
+                      ? "fixed top-0 left-0 w-screen h-screen"
+                      : "pt-6 px-4 p-0"
+                  }`}
                 >
                   <div className="p-2 bg-white min-h-[360px]">{children}</div>
                 </Content>
diff --git a/Frontend/src/containers/recent-activities-container.tsx b/Frontend/src/containers/recent-activities-container.tsx
index 5c6ac87..d9cacac 100644
--- a/Frontend/src/containers/recent-activities-container.tsx
+++ b/Frontend/src/containers/recent-activities-container.tsx
@@ -44,20 +44,22 @@ export const RecentActivitiesContainer: FC<PropsType> = () => {
 
   useEffect(() => {
     if (isErrorRecentActivities) {
+      const error: any = isErrorRecentActivities;
       openNotification({
         type: "error",
-        message: isErrorRecentActivities?.response?.data
-          ? isErrorRecentActivities?.response?.data?.message
-          : isErrorRecentActivities?.message,
+        message: error?.response?.data
+          ? error?.response?.data?.message
+          : error?.message,
       });
     }
 
     if (isErrorRecentActivitiesCount) {
+      const error: any = isErrorRecentActivitiesCount;
       openNotification({
         type: "error",
-        message: isErrorRecentActivitiesCount?.response?.data
-          ? isErrorRecentActivitiesCount?.response?.data?.message
-          : isErrorRecentActivitiesCount?.message,
+        message: error?.response?.data
+          ? error?.response?.data?.message
+          : error?.message,
       });
     }
   }, [isErrorRecentActivities, isErrorRecentActivitiesCount]);
@@ -68,11 +70,12 @@ export const RecentActivitiesContainer: FC<PropsType> = () => {
         columns={recentActivitiesColumns}
         data={
           /* recentActivitiesFetchedData */ recentActivitiesData?.map(
-          (event) => ({
-            ...event,
-            cameraName: cameras.find((item) => item.id == event.cameraId)?.name,
-          })
-        )
+            (event) => ({
+              ...event,
+              cameraName: cameras.find((item) => item.id == event.cameraId)
+                ?.name,
+            })
+          )
         }
         pagination={{
           total: recentActivitiesCountFetchedData,
diff --git a/Frontend/src/containers/settings-container.tsx b/Frontend/src/containers/settings-container.tsx
index 61c0969..37509e3 100644
--- a/Frontend/src/containers/settings-container.tsx
+++ b/Frontend/src/containers/settings-container.tsx
@@ -18,7 +18,6 @@ export const SettingsContainer: FC<PropsType> = () => {
   /* state*/
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const { cameras } = useCameraSlice();
-  console.log(cameras);
   const {
     control,
     handleSubmit,
diff --git a/Frontend/src/containers/video-stream-container.tsx b/Frontend/src/containers/video-stream-container.tsx
index ec51d7f..37f2b14 100644
--- a/Frontend/src/containers/video-stream-container.tsx
+++ b/Frontend/src/containers/video-stream-container.tsx
@@ -17,16 +17,6 @@ const webSocketURL = process.env.NEXT_PUBLIC_BACKEND_URL
   ? process.env.NEXT_PUBLIC_BACKEND_URL
   : "";
 
-const socket = io(webSocketURL, {
-  transportOptions: {
-    polling: {
-      extraHeaders: {
-        Authorization: `Bearer ${sessionStorage.getItem("access_token")}`,
-      },
-    },
-  },
-});
-
 /* This container renders different video recording screens */
 export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
   const [subscribers, setSubscribers] = useState<any[]>([]);
@@ -60,6 +50,16 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
 
   /* useEffect hooks */
   useEffect(() => {
+    const socket = io(webSocketURL, {
+      transportOptions: {
+        polling: {
+          extraHeaders: {
+            Authorization: `Bearer ${sessionStorage.getItem("access_token")}`,
+          },
+        },
+      },
+    });
+
     const openVidu = new OpenVidu();
     const session = openVidu.initSession();
 
diff --git a/Frontend/src/store/slices/session-slice.ts b/Frontend/src/store/slices/session-slice.ts
index 2e6ff80..5f8c4de 100644
--- a/Frontend/src/store/slices/session-slice.ts
+++ b/Frontend/src/store/slices/session-slice.ts
@@ -10,11 +10,6 @@ let initialState = {
   currentSession: null,
 } as SessionState;
 
-const accessToken = sessionStorage.getItem("access_token");
-if (accessToken) {
-  initialState.currentSession = { accessToken: accessToken };
-}
-
 export const sessionSlice = createSlice({
   name: "session",
   // `createSlice` will infer the state type from the `initialState` argument
diff --git a/README.md b/README.md
index 1405059..40c3cb4 100644
--- a/README.md
+++ b/README.md
@@ -77,6 +77,8 @@ BCRYPT_SALT=...
 OPENVIDU_URL= http://localhost:4443/
 # Put the OPENVIDU_SECRET of the component that you have launched earlier
 OPENVIDU_SECRET=MY_SECRET 
+# NVR IP
+NVR_IP_ADDRESS=localhost:2314 
 ```
 Then you can run
 ```bash
diff --git a/docker-compose.yml b/docker-compose.yml
index 677bd1b..805a1d9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,11 +12,20 @@ services:
     env_file:
       - .secrets.yml
 
+  openvidu:
+    image: openvidu/openvidu-dev:2.29.0 
+    restart: on-failure # always
+    ports:
+      - "4443:4443"
+    env_file:
+      - ./Backend/.env-openvidu
+
   backend:
     container_name: backend
     image: node:21-alpine
     depends_on:
      - mongo
+     - openvidu
     restart: on-failure # always
     ports:
       - 8080:8080
@@ -26,3 +35,16 @@ services:
     env_file:
       - .secrets.yml
     command: npm run docker:dev
+
+  frontend:
+    build:
+      context: ./Frontend
+      dockerfile: Dockerfile
+    restart: on-failure # always
+    ports:
+      - "3000:3000"
+    env_file:
+      - ./Frontend/.env
+    depends_on:
+      - backend
+

From a1b9431b33795173ffc45aed9e3e25ed004895ed Mon Sep 17 00:00:00 2001
From: computer <computer@localhost.localdomain>
Date: Thu, 25 Jan 2024 19:35:49 +0100
Subject: [PATCH 5/7] set to run the application

---
 Backend/.env-openvidu                            | 2 +-
 Backend/src/cameraStream/cameraStream.gateway.ts | 6 +++---
 Backend/src/database/database.service.ts         | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/Backend/.env-openvidu b/Backend/.env-openvidu
index b78fe81..52fb6e3 100644
--- a/Backend/.env-openvidu
+++ b/Backend/.env-openvidu
@@ -1,5 +1,5 @@
 OPENVIDU_SECRET=MY_SECRET
 OPENVIDU_WEBHOOK=true
-OPENVIDU_WEBHOOK_ENDPOINT=https://backend:8080/media-server
+OPENVIDU_WEBHOOK_ENDPOINT=https://localhost:8080/media-server
 
 
diff --git a/Backend/src/cameraStream/cameraStream.gateway.ts b/Backend/src/cameraStream/cameraStream.gateway.ts
index c549446..dd20d06 100644
--- a/Backend/src/cameraStream/cameraStream.gateway.ts
+++ b/Backend/src/cameraStream/cameraStream.gateway.ts
@@ -58,14 +58,14 @@ export class CameraStreamGateway implements OnGatewayConnection {
     try {
       const session = await this.openvidu.instance.createSession({});
       this.sessionId = session.sessionId;
-
+ 
       const nvr = await this.database.getNVRData();
       nvr.channels.forEach((id: number) => {
         const connectionProperties: ConnectionProperties = {
           type: ConnectionType.IPCAM,
           rtspUri: `${nvr.ip}/ch${id}_0.264`,
-          adaptativeBitrate: true,
-          onlyPlayWithSubscribers: true,
+          adaptativeBitrate: true, 
+          onlyPlayWithSubscribers: false, 
           networkCache: 1000,
           data: id.toString(),
         };
diff --git a/Backend/src/database/database.service.ts b/Backend/src/database/database.service.ts
index 2b6e09f..ad7f68c 100644
--- a/Backend/src/database/database.service.ts
+++ b/Backend/src/database/database.service.ts
@@ -233,8 +233,9 @@ export class DatabaseService {
         channels: cameraIds,
       },
     );
+    
     return {
-      ip: array[0].ip,
+      ip: process.env.NVR_IP_ADDRESS,
       channels: array[0].channels,
     };
 

From b9c2402240c0fd9be91c14f85a991b25e418bccf Mon Sep 17 00:00:00 2001
From: computer <computer@localhost.localdomain>
Date: Thu, 25 Jan 2024 19:44:04 +0100
Subject: [PATCH 6/7] removed camera data

---
 Backend/src/cameraStream/cameraData.ts | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 Backend/src/cameraStream/cameraData.ts

diff --git a/Backend/src/cameraStream/cameraData.ts b/Backend/src/cameraStream/cameraData.ts
deleted file mode 100644
index 262acbd..0000000
--- a/Backend/src/cameraStream/cameraData.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type Camera = {
-  id: string;
-  name: string;
-  rtspUrl: string;
-  ip: string;
-  port: string;
-};

From 6c490612e0b868ef86a545ab42ccad56034646fb Mon Sep 17 00:00:00 2001
From: Glydric <git@miglio.dev>
Date: Thu, 25 Jan 2024 19:46:04 +0100
Subject: [PATCH 7/7] minors

---
 Backend/src/camera.config.ts                     | 2 +-
 Backend/src/cameraStream/cameraData.ts           | 3 ---
 Backend/src/cameraStream/cameraStream.gateway.ts | 6 +++---
 Backend/src/database/database.service.ts         | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/Backend/src/camera.config.ts b/Backend/src/camera.config.ts
index 7fd32d2..8871dae 100644
--- a/Backend/src/camera.config.ts
+++ b/Backend/src/camera.config.ts
@@ -1 +1 @@
-export const cameraIds = [0, 1, 2, 3, 4, 5, 6, 7];
\ No newline at end of file
+export const cameraIds = [0, 1, 2, 3, 4, 5, 6, 7];
diff --git a/Backend/src/cameraStream/cameraData.ts b/Backend/src/cameraStream/cameraData.ts
index 262acbd..2db6e19 100644
--- a/Backend/src/cameraStream/cameraData.ts
+++ b/Backend/src/cameraStream/cameraData.ts
@@ -1,7 +1,4 @@
 export type Camera = {
   id: string;
   name: string;
-  rtspUrl: string;
-  ip: string;
-  port: string;
 };
diff --git a/Backend/src/cameraStream/cameraStream.gateway.ts b/Backend/src/cameraStream/cameraStream.gateway.ts
index dd20d06..e4c4069 100644
--- a/Backend/src/cameraStream/cameraStream.gateway.ts
+++ b/Backend/src/cameraStream/cameraStream.gateway.ts
@@ -58,14 +58,14 @@ export class CameraStreamGateway implements OnGatewayConnection {
     try {
       const session = await this.openvidu.instance.createSession({});
       this.sessionId = session.sessionId;
- 
+
       const nvr = await this.database.getNVRData();
       nvr.channels.forEach((id: number) => {
         const connectionProperties: ConnectionProperties = {
           type: ConnectionType.IPCAM,
           rtspUri: `${nvr.ip}/ch${id}_0.264`,
-          adaptativeBitrate: true, 
-          onlyPlayWithSubscribers: false, 
+          adaptativeBitrate: true,
+          onlyPlayWithSubscribers: false,
           networkCache: 1000,
           data: id.toString(),
         };
diff --git a/Backend/src/database/database.service.ts b/Backend/src/database/database.service.ts
index ad7f68c..a3bb4a3 100644
--- a/Backend/src/database/database.service.ts
+++ b/Backend/src/database/database.service.ts
@@ -233,7 +233,7 @@ export class DatabaseService {
         channels: cameraIds,
       },
     );
-    
+
     return {
       ip: process.env.NVR_IP_ADDRESS,
       channels: array[0].channels,