+
+ );
+};
diff --git a/Frontend/src/components/index.ts b/Frontend/src/components/index.ts
index b6382c2..4d72aad 100644
--- a/Frontend/src/components/index.ts
+++ b/Frontend/src/components/index.ts
@@ -1 +1,4 @@
export { VideoRecordingScreen } from "./video-recording-screen/video-recording-screen";
+export { Table } from "./table/table";
+export { Button } from "./button/button";
+export { Card } from "./card/card";
diff --git a/Frontend/src/components/table/table.tsx b/Frontend/src/components/table/table.tsx
new file mode 100644
index 0000000..73bdab9
--- /dev/null
+++ b/Frontend/src/components/table/table.tsx
@@ -0,0 +1,27 @@
+import type { ColumnsType, TablePaginationConfig } from "antd/es/table";
+import { Table as AntTable } from "antd";
+import { AnyObject } from "@/types";
+
+type PropsType
+ {header && <>{header}}
+
+ {children}
+
+
+ );
+};
diff --git a/Frontend/src/containers/about-us-container/about-us-mission-container.tsx b/Frontend/src/containers/about-us-container/about-us-mission-container.tsx
new file mode 100644
index 0000000..9ecde1c
--- /dev/null
+++ b/Frontend/src/containers/about-us-container/about-us-mission-container.tsx
@@ -0,0 +1,25 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsMissionContainer: FC = () => {
+ return (
+
+
+ );
+};
diff --git a/Frontend/src/containers/about-us-container/about-us-overview-container.tsx b/Frontend/src/containers/about-us-container/about-us-overview-container.tsx
new file mode 100644
index 0000000..354d712
--- /dev/null
+++ b/Frontend/src/containers/about-us-container/about-us-overview-container.tsx
@@ -0,0 +1,25 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsOverviewContainer: FC = () => {
+ return (
+
+
+ + {aboutUsData.missionHeading} +
+{aboutUsData.missionParagraph}
+
+ 
+
+
+
+ );
+};
diff --git a/Frontend/src/containers/about-us-container/about-us-solution-container.tsx b/Frontend/src/containers/about-us-container/about-us-solution-container.tsx
new file mode 100644
index 0000000..03c23ae
--- /dev/null
+++ b/Frontend/src/containers/about-us-container/about-us-solution-container.tsx
@@ -0,0 +1,25 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsSolutionContainer: FC = () => {
+ return (
+
+
+ + {aboutUsData.overviewHeading} +
+{aboutUsData.overviewParagraph}
+
+ 
+
+
+
+ );
+};
diff --git a/Frontend/src/containers/about-us-container/about-us-team-container.tsx b/Frontend/src/containers/about-us-container/about-us-team-container.tsx
new file mode 100644
index 0000000..c394d67
--- /dev/null
+++ b/Frontend/src/containers/about-us-container/about-us-team-container.tsx
@@ -0,0 +1,30 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { aboutUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const AboutUsTeamContainer: FC = () => {
+ return (
+
+
+ + {aboutUsData.solutionHeading} +
+{aboutUsData.solutionParagraph}
+
+ 
+
+
+
+ );
+};
diff --git a/Frontend/src/containers/analytics-container/analytics-container.tsx b/Frontend/src/containers/analytics-container/analytics-container.tsx
new file mode 100644
index 0000000..18ad429
--- /dev/null
+++ b/Frontend/src/containers/analytics-container/analytics-container.tsx
@@ -0,0 +1,38 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { AuthorizedCounterContainer } from "./authorized-counter/authorized-counter";
+import { UnauthorizedCounterContainer } from "./unauthorized-counter/unauthorized-counter";
+import { AuthorizedUnauthorizedPieContainer } from "./authorized-unauthorized-pie/authorized-unauthorized-pie";
+import { AuthorizedUnauthorizedLineContainer } from "./authorized-unauthorized-line/authorized-unauthorized-line";
+import { UserAreaBarContainer } from "./user-area-bar/user-area-bar";
+import { RecentAuthorizedContainer } from "./recent-authorized/recent-authorized";
+import { RecentUnauthorizedContainer } from "./recent-unauthorized/recent-unauthorized";
+
+/* This container renders analytics sections */
+export const AnalyticsContainer: FC = () => {
+ return (
+ {aboutUsData.teamHeading}
++ {aboutUsData.teamParagraph} +
+ +
+ {aboutUsData.teamMembers.map((item, index) => (
+
+
+ 
+ {item.name}
+ {item.title}
+
+ ))}
+
+
+ );
+};
diff --git a/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx b/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx
new file mode 100644
index 0000000..24a326c
--- /dev/null
+++ b/Frontend/src/containers/analytics-container/authorized-counter/authorized-counter.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import type { FC } from "react";
+import { SecurityScanOutlined } from "@ant-design/icons";
+import { Statistic, Select, DatePicker } from "antd";
+import { Card } from "@/components";
+import dayjs from "dayjs";
+import type { Dayjs } from "dayjs";
+import { theme } from "../../../../theme";
+
+export const AuthorizedCounterContainer: FC = () => {
+ const [timeOption, setTimeOption] = useState<"day" | "month">("day");
+ const [date, setDate] = useState
+
+
+
+
+
+
+
+
+
+
+ Authorized access
+
+
+ );
+ };
+
+ return (
+ <>
+
+ No of attempts on:
+
+
+
+ );
+};
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
new file mode 100644
index 0000000..ecc5cf8
--- /dev/null
+++ b/Frontend/src/containers/analytics-container/authorized-unauthorized-line/authorized-unauthorized-line.tsx
@@ -0,0 +1,511 @@
+import React, { useState } from "react";
+import type { FC } from "react";
+import { Select, DatePicker } from "antd";
+import { Card } from "@/components";
+import dayjs from "dayjs";
+import type { Dayjs } from "dayjs";
+import { theme } from "../../../../theme";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ Label,
+} from "recharts";
+
+export const AuthorizedUnauthorizedLineContainer: FC = () => {
+ const [timeOption, setTimeOption] = useState<"day" | "month">("day");
+ const [date, setDate] = useState
+
+
+ Detection Summary
+
+
+ );
+ };
+
+ return (
+ <>
+
+ Date:
+
+
+
+ );
+};
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
new file mode 100644
index 0000000..e6e0019
--- /dev/null
+++ b/Frontend/src/containers/analytics-container/authorized-unauthorized-pie/authorized-unauthorized-pie.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import type { FC } from "react";
+import { Select, DatePicker } from "antd";
+import { Card } from "@/components";
+import dayjs from "dayjs";
+import type { Dayjs } from "dayjs";
+import { theme } from "../../../../theme";
+import { PieChart, Pie, Tooltip, ResponsiveContainer } from "recharts";
+
+export const AuthorizedUnauthorizedPieContainer: FC = () => {
+ const [timeOption, setTimeOption] = useState<"day" | "month">("day");
+ const [date, setDate] = useState
+
+
+ Access proportion
+
+
+ );
+ };
+
+ return (
+ <>
+
+ Date:
+
+
+
+ );
+};
diff --git a/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx b/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx
new file mode 100644
index 0000000..f66c579
--- /dev/null
+++ b/Frontend/src/containers/analytics-container/recent-authorized/recent-authorized.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import type { FC } from "react";
+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);
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ Unauthorized access
+
+
+ );
+ };
+
+ return (
+ <>
+
+ No of attempts on:
+
+
+
+ );
+};
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
new file mode 100644
index 0000000..4d0e545
--- /dev/null
+++ b/Frontend/src/containers/analytics-container/user-area-bar/user-area-bar.tsx
@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Select, DatePicker } from "antd";
+import type { SelectProps } from "antd";
+import { Card } from "@/components";
+import dayjs from "dayjs";
+import type { Dayjs } from "dayjs";
+import { theme } from "../../../../theme";
+import {
+ BarChart,
+ Bar,
+ LabelList,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from "recharts";
+import { cameras, authorizedEntitiesData } from "@/data";
+import { getObjectArray } from "@/utils";
+import type { AnyObject, AuthorizedEntity, Camera } from "@/types";
+
+export const UserAreaBarContainer: FC = () => {
+ const cameraOptions = cameras.map((item) => ({
+ label: item.name,
+ value: item.key,
+ }));
+ const entityOptions = authorizedEntitiesData.map((item) => ({
+ label: item.name,
+ value: item.id,
+ }));
+ const [timeOption, setTimeOption] = useState<"day" | "month">("day");
+ const [date, setDate] = useState
+
+
+ Detection of Authorized Entity per Camera Summary
+
+
+ );
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/Frontend/src/containers/contact-us-container.tsx b/Frontend/src/containers/contact-us-container.tsx
new file mode 100644
index 0000000..dda76e3
--- /dev/null
+++ b/Frontend/src/containers/contact-us-container.tsx
@@ -0,0 +1,41 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { contactUsData } from "@/data";
+
+/* This container renders contact us sections */
+export const ContactUsContainer: FC = () => {
+ return (
+
+ Date:
+
+
+
+ Entities:
+
+
+
+
+ Cameras :
+
+
+
+
+ );
+};
diff --git a/Frontend/src/containers/index.ts b/Frontend/src/containers/index.ts
index cbeccbb..f790699 100644
--- a/Frontend/src/containers/index.ts
+++ b/Frontend/src/containers/index.ts
@@ -1,2 +1,8 @@
export { LayoutContainer } from "./layout-container";
export { VideoStreamContainer } from "./video-stream-container";
+export { ContactUsContainer } from "./contact-us-container";
+export { AboutUsOverviewContainer } from "./about-us-container/about-us-overview-container";
+export { AboutUsSolutionContainer } from "./about-us-container/about-us-solution-container";
+export { AboutUsTeamContainer } from "./about-us-container/about-us-team-container";
+export { AboutUsMissionContainer } from "./about-us-container/about-us-mission-container";
+export { AnalyticsContainer } from "./analytics-container/analytics-container";
diff --git a/Frontend/src/containers/layout-container.tsx b/Frontend/src/containers/layout-container.tsx
index 705e5b2..6f6dd6b 100644
--- a/Frontend/src/containers/layout-container.tsx
+++ b/Frontend/src/containers/layout-container.tsx
@@ -50,7 +50,7 @@ export const LayoutContainer = ({
+
+ We're here
+Our door is always open for a good cup of coffee.
+ +
+
+ Our Office
+Le Mosse Colle Pardiso
+Macerata, Camerino 62032
+Italy, IT
+
+
+ Let's talk
+Share your excitment with us.
+ +
+
+ Lets talk through
+
+ {contactUsData.map((item, index) => (
+
+
+
+ {item.icon}
+
+
+ ))}
+ {item.label}
+
= [
+ {
+ title: "Name",
+ dataIndex: "name",
+ key: "name",
+ },
+ {
+ title: "Type",
+ dataIndex: "entityType",
+ key: "entityType",
+ },
+ {
+ title: "Registration Date",
+ dataIndex: "registrationDate",
+ key: "registrationDate",
+ },
+ {
+ title: "Photo",
+ dataIndex: "photoUrl",
+ key: "photoUrl",
+ render: (_, record) => (
+