Completed analytcis-ui

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/analytics/page.tsx

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

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

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<Dayjs>(dayjs());
+
+  const CardHeader: FC = () => {
+    return (
+      <div className="text-sm flex gap-x-4 justify-between items-center">
+        <span>Authorized access</span>
+        <Select
+          popupMatchSelectWidth={false}
+          size="small"
+          defaultValue={timeOption}
+          onChange={setTimeOption}
+          options={[
+            { value: "day", label: "Day" },
+            { value: "month", label: "Month" },
+          ]}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <Card header={<CardHeader />}>
+        <Statistic
+          className="text-success py-4"
+          value={458}
+          valueStyle={{
+            color: theme.colors.successColor,
+            fontSize: "2rem",
+            textAlign: "center",
+          }}
+          prefix={<SecurityScanOutlined />}
+        />
+        <div className={"flex flex-col gap-2 justify-center items-center"}>
+          <span>No of attempts on:</span>
+          <div>
+            <DatePicker
+              format={timeOption === "month" ? "MMM-YYYY" : "DD-MMM-YYYY"}
+              onChange={setDate}
+              defaultValue={date}
+              allowClear={false}
+              picker={timeOption === "month" ? timeOption : undefined}
+            />
+          </div>
+        </div>
+      </Card>
+    </>
+  );
+};