Merge branch 'main' into glydric

Frontend/package.json

@@ -14,11 +14,13 @@
     "@types/react-redux": "^7.1.31",
     "antd": "^5.11.3",
     "axios": "^1.6.2",
+    "dayjs": "^1.11.10",
     "next": "14.0.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^4.12.0",
-    "react-redux": "^8.1.3"
+    "react-redux": "^8.1.3",
+    "recharts": "^2.10.3"
   },
   "devDependencies": {
     "@types/node": "^20",

Frontend/src/app/about-us/page.tsx

@@ -0,0 +1,17 @@
+import {
+  AboutUsOverviewContainer,
+  AboutUsSolutionContainer,
+  AboutUsMissionContainer,
+  AboutUsTeamContainer,
+} from "@/containers";
+
+export default function AboutUsPage() {
+  return (
+    <div className="flex flex-col">
+      <AboutUsOverviewContainer />
+      <AboutUsSolutionContainer />
+      <AboutUsMissionContainer />
+      <AboutUsTeamContainer />
+    </div>
+  );
+}

Frontend/src/app/analytics/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { AnalyticsContainer } from "@/containers";
+
+export default function Analytics() {
+  return (
+    <div>
+      <AnalyticsContainer />
+    </div>
+  );
+}

Frontend/src/app/authorized-entities/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { Table } from "@/components";
+import { authorizedEntitiesData, authorizedEntitiesColumns } from "@/data";
+
+export default function AuthorizedEntities() {
+  return (
+    <div>
+      <Table
+        columns={authorizedEntitiesColumns}
+        data={authorizedEntitiesData}
+        pagination={{ total: authorizedEntitiesData.length }}
+      />
+    </div>
+  );
+}

Frontend/src/app/contact-us/page.tsx

@@ -0,0 +1,7 @@
+import { ContactUsContainer } from "@/containers";
+
+export default function ContactUsPage() {
+  return (
+      <ContactUsContainer />
+  );
+}

Frontend/src/app/globals.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+html,body{
+    margin:0;
+    padding:0;
+}

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>
+  );
+}

Frontend/src/app/video-stream/page.tsx

@@ -1,9 +1,7 @@
 import { VideoStreamContainer } from "@/containers";
 
-export default function Home() {
+export default function VideoStreamPage() {
   return (
-    <main>
       <VideoStreamContainer />
-    </main>
   );
 }

Frontend/src/components/button/button.tsx

@@ -0,0 +1,73 @@
+import {
+  ConfigProvider,
+  theme as antTheme,
+  Button as AntButton,
+  Tooltip,
+} from "antd";
+import type { ButtonProps } from "antd/es/button/button";
+import { PropsWithChildren } from "react";
+import { ColorVariant } from "@/types";
+import { theme } from "../../../theme";
+
+type PropsType = {
+  variant?: ColorVariant;
+  toolTipText?: string;
+} & ButtonProps;
+
+type ButtonWrapperPropsType = {
+  toolTipText?: string;
+};
+
+const getButtonColor = (variant: ColorVariant) => {
+  switch (variant) {
+    case "danger": {
+      return theme.colors.dangerColor;
+    }
+
+    case "warning": {
+      return theme.colors.warningColor;
+    }
+  }
+  return theme.colors.secondaryColor;
+};
+
+const { useToken } = antTheme;
+
+const ButtonWrapper: React.FC<PropsWithChildren<ButtonWrapperPropsType>> = ({
+  toolTipText,
+  children,
+}) => (
+  <>
+    {toolTipText ? <Tooltip title={toolTipText}>{children}</Tooltip> : children}
+  </>
+);
+
+/**  This component renders a button */
+export const Button: React.FC<PropsWithChildren<PropsType>> = ({
+  children,
+  variant = "primary",
+  toolTipText,
+  type = "primary",
+  ...props
+}) => {
+  const { token } = useToken();
+  const buttonColor: string = getButtonColor(variant);
+  const modifiedTheme = {
+    token: {
+      ...token,
+      colorPrimary: buttonColor,
+      colorPrimaryHover: buttonColor + "AA",
+      colorPrimaryActive: buttonColor,
+    },
+  };
+
+  return (
+    <ConfigProvider theme={modifiedTheme}>
+      <ButtonWrapper toolTipText={toolTipText}>
+        <AntButton type="primary" {...props}>
+          {children}
+        </AntButton>
+      </ButtonWrapper>
+    </ConfigProvider>
+  );
+};

Frontend/src/components/card/card.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+
+type PropsType = {
+  header?: React.ReactNode;
+};
+
+/**  This component renders a card*/
+export const Card: React.FC<PropsWithChildren<PropsType>> = ({
+  children,
+  header,
+}) => {
+  return (
+    <div className="min-w-[200px] inline-block border-solid border border-gray-200 rounded-md shadow-md">
+      <div className="p-4 border-0 border-solid border-b border-gray-200 font-bold">
+        {header && <>{header}</>}
+      </div>
+      <div className="p-4">{children}</div>
+    </div>
+  );
+};

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";

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<T extends AnyObject> = {
+  data: T[];
+  columns: ColumnsType<T>;
+  pagination?: TablePaginationConfig;
+  loading?: boolean;
+};
+
+/**  This component renders a table */
+export const Table: <T extends AnyObject>(
+  props: PropsType<T>
+) => React.ReactElement = ({ columns, data, loading = false, pagination }) => {
+  return (
+    <div>
+      <AntTable
+        className="overflow-x-auto"
+        columns={columns}
+        dataSource={data}
+        loading={loading}
+        pagination={pagination ? pagination : false}
+      />
+    </div>
+  );
+};

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 (
+    <div className="grid md:grid-cols-2 gap-x-8 px-4 py-12">
+      <div>
+        <h2 className="text-center text-secondary">
+          {aboutUsData.missionHeading}
+        </h2>
+        <p className="leading-relaxed text-justify">{aboutUsData.missionParagraph}</p>
+      </div>
+      <div className="flex items-center">
+        <img
+          className="max-w-full rounded-lg"
+          src={aboutUsData.missionImage}
+          alt="Overview image"
+        />
+      </div>
+    </div>
+  );
+};

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 (
+    <div className="grid md:grid-cols-2 gap-x-8 px-4 py-12">
+      <div>
+        <h2 className="text-center text-secondary">
+          {aboutUsData.overviewHeading}
+        </h2>
+        <p className="leading-relaxed text-justify">{aboutUsData.overviewParagraph}</p>
+      </div>
+      <div className="flex items-center">
+        <img
+          className="max-w-full rounded-lg"
+          src={aboutUsData.overviewImage}
+          alt="Overview image"
+        />
+      </div>
+    </div>
+  );
+};

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 (
+    <div className="grid md:grid-cols-2 gap-x-8 bg-primary text-white px-4 py-12">
+      <div className="md:order-last">
+        <h2 className="text-center">
+          {aboutUsData.solutionHeading}
+        </h2>
+        <p className="leading-relaxed text-justify">{aboutUsData.solutionParagraph}</p>
+      </div>
+      <div className="flex items-center">
+        <img
+          className="max-w-full rounded-lg"
+          src={aboutUsData.solutionImage}
+          alt="Overview image"
+        />
+      </div>
+    </div>
+  );
+};

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 (
+    <div className="flex flex-col items-center bg-primary text-white px-4 py-12">
+      <h2 className="text-center">{aboutUsData.teamHeading}</h2>
+      <p className="leading-relaxed pb-3 sm:w-1/2 text-center">
+        {aboutUsData.teamParagraph}
+      </p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-x-8 gap-y-8">
+        {aboutUsData.teamMembers.map((item, index) => (
+          <div className="flex flex-col gap-y-4 items-center" key={index}>
+            <img
+              className="block rounded-lg w-full max-h-72 object-cover"
+              src={item.image}
+              alt="Overview image"
+            />
+            <span className="font-bold text-lg">{item.name}</span>
+            <span className="">{item.title}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

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 (
+    <div>
+      <div className="grid gap-4 grid-cols-3">
+        <UnauthorizedCounterContainer />
+
+        <AuthorizedCounterContainer />
+
+        <AuthorizedUnauthorizedPieContainer />
+      </div>
+
+      <div className="grid pt-4 grid-cols-1">
+        <AuthorizedUnauthorizedLineContainer />
+      </div>
+      <div className="grid pt-4 grid-cols-1">
+        <UserAreaBarContainer />
+      </div>
+
+      <div className="grid py-4 gap-4 grid-cols-2">
+        <RecentAuthorizedContainer />
+
+        <RecentUnauthorizedContainer />
+      </div>
+    </div>
+  );
+};