diff --git a/Frontend/src/app/recent-activities/page.tsx b/Frontend/src/app/recent-activities/page.tsx
new file mode 100644
index 0000000..680a8be
--- /dev/null
+++ b/Frontend/src/app/recent-activities/page.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { Table } from "@/components";
+import { recentActivitiesData, recentActivitiesColumns } from "@/data";
+
+export default function RecentActivities() {
+ return (
+
+ );
+}
diff --git a/Frontend/src/data/camera-data.tsx b/Frontend/src/data/camera-data.tsx
new file mode 100644
index 0000000..02eaeac
--- /dev/null
+++ b/Frontend/src/data/camera-data.tsx
@@ -0,0 +1,40 @@
+import { Camera } from "@/types";
+
+export const cameras: Camera[] = [
+ {
+ key: "backyard",
+ name: "Backyard",
+ isActive: true,
+ url: "https://www.youtube.com/embed/Sv2h-csnlps?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
+ },
+ {
+ key: "main-road",
+ name: "Main road",
+ isActive: true,
+ url: "https://www.youtube.com/embed/yNQmth5kUZ0?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
+ },
+ {
+ key: "door",
+ name: "Door",
+ isActive: true,
+ url: "https://www.youtube.com/embed/dV9ngLCKE7k?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
+ },
+ {
+ key: "pet-room",
+ name: "Pet room",
+ isActive: true,
+ url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
+ },
+ {
+ key: "basement",
+ 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",
+ name: "Baby room",
+ 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/index.ts b/Frontend/src/data/index.ts
index 4bfa3b5..c5960e9 100644
--- a/Frontend/src/data/index.ts
+++ b/Frontend/src/data/index.ts
@@ -5,3 +5,8 @@ export {
} from "./authorized-entities-data";
export { contactUsData } from "./contact-us-data";
export { aboutUsData } from "./about-us-data";
+export { cameras } from "./camera-data";
+export {
+ recentActivitiesData,
+ recentActivitiesColumns,
+} from "./recent-activities-data";
diff --git a/Frontend/src/data/recent-activities-data.tsx b/Frontend/src/data/recent-activities-data.tsx
new file mode 100644
index 0000000..8dca1e4
--- /dev/null
+++ b/Frontend/src/data/recent-activities-data.tsx
@@ -0,0 +1,69 @@
+"use client";
+import { Activity } from "@/types";
+import { Button } 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 = [
+ {
+ title: "Time",
+ dataIndex: "timestamp",
+ key: "timestamp",
+ },
+ {
+ title: "Camera",
+ dataIndex: "camera",
+ render: (_, record) => {record.camera.name},
+ },
+ {
+ title: "Entity",
+ dataIndex: "entity",
+ render: (_, record) => (
+
+ {record.entity ? record.entity.name : "Unkown"}
+
+ ),
+ },
+ {
+ title: "Action",
+ key: "action",
+ render: (_, record) => (
+
+ } />
+ }
+ />
+
+ ),
+ },
+];
+
+export const recentActivitiesData: Activity[] = [
+ {
+ id: "fad4sl3jf21oia32232sj",
+ timestamp: Date().toString().substring(0, 21),
+ entity: authorizedEntitiesData[0],
+ camera: cameras[1],
+ },
+ {
+ id: "fad4sl3jf21oia322tesj",
+ timestamp: Date().toString().substring(0, 21),
+ entity: authorizedEntitiesData[2],
+ camera: cameras[4],
+ },
+ {
+ id: "fad4sl3jflfoia32232sj",
+ timestamp: Date().toString().substring(0, 21),
+ entity: authorizedEntitiesData[4],
+ camera: cameras[3],
+ },
+ {
+ id: "fad4sl3jf21oia72232sj",
+ timestamp: Date().toString().substring(0, 21),
+ camera: cameras[0],
+ },
+];
diff --git a/Frontend/src/store/slices/camera-slice.ts b/Frontend/src/store/slices/camera-slice.ts
index 8a74d2c..61a3590 100644
--- a/Frontend/src/store/slices/camera-slice.ts
+++ b/Frontend/src/store/slices/camera-slice.ts
@@ -2,6 +2,7 @@ import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import type { RootState } from "../store";
import { Camera } from "@/types";
+import { cameras } from "@/data";
// CameraSlice State type
type CameraStateType = {
@@ -13,44 +14,7 @@ type CameraStateType = {
// Define the initial state using that type
const initialState = {
- cameras: [
- {
- key: "backyard",
- name: "Backyard",
- isActive: true,
- url: "https://www.youtube.com/embed/Sv2h-csnlps?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
- },
- {
- key: "main-road",
- name: "Main road",
- isActive: true,
- url: "https://www.youtube.com/embed/yNQmth5kUZ0?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
- },
- {
- key: "door",
- name: "Door",
- isActive: true,
- url: "https://www.youtube.com/embed/dV9ngLCKE7k?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
- },
- {
- key: "pet-room",
- name: "Pet room",
- isActive: true,
- url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
- },
- {
- key: "basement",
- 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",
- name: "Baby room",
- isActive: false,
- url: "https://www.youtube.com/embed/ewEW_xAKRMg?modestbranding=1&showinfo=0&controls=0&autoplay=1&mute=1",
- },
- ],
+ cameras: cameras,
cameraCount: 8,
activeCameraCount: 4,
isFullScreenGrid: false,
diff --git a/Frontend/src/types/index.ts b/Frontend/src/types/index.ts
index f03516c..7a60f95 100644
--- a/Frontend/src/types/index.ts
+++ b/Frontend/src/types/index.ts
@@ -3,6 +3,7 @@ export type { User } from "./models/user";
export type { Session } from "./models/session";
export type { Camera } from "./models/camera";
export type { AuthorizedEntity } from "./models/authorized-entity";
+export type { Activity } from "./models/activity";
/* utils */
export type { ColorVariant } from "./utils/color-variant";
export type { NavBarItem } from "./utils/navbar-item";
diff --git a/Frontend/src/types/models/activity.ts b/Frontend/src/types/models/activity.ts
new file mode 100644
index 0000000..75ebae0
--- /dev/null
+++ b/Frontend/src/types/models/activity.ts
@@ -0,0 +1,12 @@
+import { Camera } from "./camera";
+import { AuthorizedEntity } from "./authorized-entity";
+
+/** This is a data type that denotes an activity (event) that took place at a certain time.
+ * Activity is composed of properties such as id, timestamp, camera,entity etc.
+ * */
+export type Activity = {
+ id: string;
+ timestamp: string;
+ entity?: AuthorizedEntity;
+ camera: Camera;
+};
diff --git a/Frontend/tailwind.config.ts b/Frontend/tailwind.config.ts
index c03610c..68272fe 100644
--- a/Frontend/tailwind.config.ts
+++ b/Frontend/tailwind.config.ts
@@ -4,6 +4,7 @@ import { theme } from "./theme";
const config: Config = {
content: [
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/data/**/*.{js,ts,jsx,tsx,mdx}",
"./src/containers/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
@@ -19,12 +20,14 @@ const config: Config = {
black: theme.colors.black,
primary: theme.colors.primaryColor,
secondary: theme.colors.secondaryColor,
+ success: theme.colors.successColor,
+ danger: theme.colors.dangerColor,
},
},
},
plugins: [],
corePlugins: {
- preflight: false // <== disable this!
+ preflight: false, // <== disable this!
},
};
export default config;
diff --git a/Frontend/theme.ts b/Frontend/theme.ts
index f9baee6..328a236 100644
--- a/Frontend/theme.ts
+++ b/Frontend/theme.ts
@@ -2,6 +2,7 @@ export const theme = {
colors: {
primaryColor: "#112236",
secondaryColor: "#588D9F",
+ successColor: "#52C41A",
dangerColor: "#ff4d4f",
warningColor: "#fcad03",
white: "#FFFFFF",