add GA metrics to dashboard

index.html

@@ -5,19 +5,16 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="https://dtutimes.com/favicon.ico"
-    />
+      href="https://dtutimes.com/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Streamline your editorial workflow with DTU Times Team - the central hub for coordinating tasks, managing content, and driving collaboration among DTU Times members. Efficiently publish and oversee your stories with ease!"
-    />
+      content="Streamline your editorial workflow with DTU Times Team - the central hub for coordinating tasks, managing content, and driving collaboration among DTU Times members. Efficiently publish and oversee your stories with ease!" />
     <title>DTU Times Team</title>
     <!-- Google tag (gtag.js) -->
     <script
       async
-      src="https://www.googletagmanager.com/gtag/js?id=G-S1EN7D0LTZ"
-    ></script>
+      src="https://www.googletagmanager.com/gtag/js?id=G-S1EN7D0LTZ"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {

src/contexts/error.tsx

@@ -1,5 +1,8 @@
 import React from "react";
-import { CustomError, ErrorCtxType } from "@/commonlib/types/frontend/contextTypes";
+import {
+  CustomError,
+  ErrorCtxType,
+} from "@/commonlib/types/frontend/contextTypes";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";

src/pages/Dashboard/index.tsx

@@ -88,7 +88,7 @@ export default function Dashbboard() {
     );
   return (
     <div>
-      <div className="flex justify-start flex-col xl:flex-row">
+      <div className="flex justify-start flex-col xl:flex-row mt-8">
         <div className="flex justify-evenly flex-col lg:flex-row">
           <div className="m-6 w-[300px] h-[464px] border-black border-2 bg-gray-700 text-white rounded-xl overflow-hidden grid grid-rows-2">
             <div className="self-start flex flex-col">
@@ -153,6 +153,18 @@ export default function Dashbboard() {
         </div>
       </div>
 
+      <h1 style={{ marginTop: "30px", fontSize: "2rem" }}>Google Analytics</h1>
+      <div className="relative pb-[25%] h-0 overflow-hidden">
+        <iframe
+          title="GA Dashboard"
+          src="https://lookerstudio.google.com/embed/reporting/1b512a23-76f6-4a5a-8a41-b8c49fe08aff/page/bX1WF"
+          className="absolute top-10 left-10 w-[95%] h-full"
+          style={{ border: "0" }}
+          allowFullScreen
+          sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+        />
+      </div>
+
       <div className="p-8">
         <div className=" my-4">
           <Leaderboard topUsers={topUserData} />

src/pages/Member/AllMembers/index.tsx

@@ -4,7 +4,7 @@ import { Spinner } from "@/components/Spinner";
 import UserCard from "@/components/UserCard";
 import { ErrorContext } from "@/contexts/error";
 import API from "@/services/API";
-import {Member} from "@/commonlib/types/member";
+import { Member } from "@/commonlib/types/member";
 import React from "react";
 import { useEffect } from "react";
 import { MEMBERS_PER_PAGE as perPage } from "@/config";

src/services/localStorageParser.ts

@@ -1,5 +1,8 @@
 import Permission from "@/commonlib/types/permissions";
-import { GrantedPermissions, IUser } from "@/commonlib/types/frontend/contextTypes";
+import {
+  GrantedPermissions,
+  IUser,
+} from "@/commonlib/types/frontend/contextTypes";
 
 export const getUserFromStorage = () => {
   const data = localStorage.getItem("user");