From 38e86dac4bb7c756c661451344d12a615a71f614 Mon Sep 17 00:00:00 2001
From: Nabil Mohammed <nabil.nablotech@gmail.com>
Date: Thu, 14 Dec 2023 22:55:58 +0100
Subject: [PATCH] recent activities page UI complete

---
 Frontend/src/app/recent-activities/page.tsx  | 15 +++++
 Frontend/src/data/camera-data.tsx            | 40 ++++++++++++
 Frontend/src/data/index.ts                   |  5 ++
 Frontend/src/data/recent-activities-data.tsx | 69 ++++++++++++++++++++
 Frontend/src/store/slices/camera-slice.ts    | 40 +-----------
 Frontend/src/types/index.ts                  |  1 +
 Frontend/src/types/models/activity.ts        | 12 ++++
 Frontend/tailwind.config.ts                  |  5 +-
 Frontend/theme.ts                            |  1 +
 9 files changed, 149 insertions(+), 39 deletions(-)
 create mode 100644 Frontend/src/app/recent-activities/page.tsx
 create mode 100644 Frontend/src/data/camera-data.tsx
 create mode 100644 Frontend/src/data/recent-activities-data.tsx
 create mode 100644 Frontend/src/types/models/activity.ts

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 (
+    <div>
+      <Table
+        columns={recentActivitiesColumns}
+        data={recentActivitiesData}
+        pagination={{ total: recentActivitiesData.length }}
+      />
+    </div>
+  );
+}
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<Activity> = [
+  {
+    title: "Time",
+    dataIndex: "timestamp",
+    key: "timestamp",
+  },
+  {
+    title: "Camera",
+    dataIndex: "camera",
+    render: (_, record) => <span>{record.camera.name}</span>,
+  },
+  {
+    title: "Entity",
+    dataIndex: "entity",
+    render: (_, record) => (
+      <span className={`${record.entity ? "text-success" : "text-danger"}`}>
+        {record.entity ? record.entity.name : "Unkown"}
+      </span>
+    ),
+  },
+  {
+    title: "Action",
+    key: "action",
+    render: (_, record) => (
+      <Space size="middle">
+        <Button toolTipText="View screenshot" icon={<CameraOutlined />} />
+        <Button
+          toolTipText={"View video playback"}
+          icon={<VideoCameraOutlined />}
+        />
+      </Space>
+    ),
+  },
+];
+
+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",