From a529e85b73e8db0bdf7d03ded32f509e323f2e41 Mon Sep 17 00:00:00 2001
From: Dean Jones <deanjones2001@gmail.com>
Date: Fri, 19 Nov 2021 12:26:57 -0800
Subject: [PATCH] Add dashboard tab for Admin/basic query for mentors/mentees

---
 src/components/icons/Database.svg             |  6 ++
 src/components/icons/index.ts                 |  1 +
 src/layouts/TabLayout/AdminTabLayout.tsx      |  6 ++
 .../[slug]/[profileRoute]/dashboard.tsx       | 69 +++++++++++++++++++
 4 files changed, 82 insertions(+)
 create mode 100755 src/components/icons/Database.svg
 create mode 100644 src/pages/program/[slug]/[profileRoute]/dashboard.tsx

diff --git a/src/components/icons/Database.svg b/src/components/icons/Database.svg
new file mode 100755
index 00000000..64219898
--- /dev/null
+++ b/src/components/icons/Database.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+ stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database">
+ <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+</svg>
\ No newline at end of file
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index a84306a7..03d3710d 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -4,6 +4,7 @@ export { default as CircledCheck } from "./CircledCheck.svg";
 export { default as CircledCheckSolid } from "./CircledCheckSolid.svg";
 export { default as CircledCross } from "./CircledCross.svg";
 export { default as Clipboard } from "./Clipboard.svg";
+export { default as Database } from "./Database.svg";
 export { default as Edit } from "./Edit.svg";
 export { default as Filter } from "./Filter.svg";
 export { default as Home } from "./Home.svg";
diff --git a/src/layouts/TabLayout/AdminTabLayout.tsx b/src/layouts/TabLayout/AdminTabLayout.tsx
index f84de9f6..afea3bc8 100644
--- a/src/layouts/TabLayout/AdminTabLayout.tsx
+++ b/src/layouts/TabLayout/AdminTabLayout.tsx
@@ -2,6 +2,7 @@ import {
   Clipboard,
   Edit,
   Home,
+  Database,
   Settings,
   User,
   Users,
@@ -17,6 +18,11 @@ const AdminTabLayout: React.FC<BaseTabLayoutProps> = ({
   return (
     <TabLayout currentPageChildren={children}>
       <PageItem label="Homepage" Icon={Home} path={joinPath(basePath)} />
+      <PageItem
+        label="Dashboard"
+        Icon={Database}
+        path={joinPath(basePath, "dashboard")}
+      />
       <PageItem
         label="Settings"
         Icon={Settings}
diff --git a/src/pages/program/[slug]/[profileRoute]/dashboard.tsx b/src/pages/program/[slug]/[profileRoute]/dashboard.tsx
new file mode 100644
index 00000000..448beba3
--- /dev/null
+++ b/src/pages/program/[slug]/[profileRoute]/dashboard.tsx
@@ -0,0 +1,69 @@
+import React, { Fragment } from "react";
+import { Card, Text } from "../../../../components/atomic";
+import {
+  ProfileType,
+  useGetProfilesQuery,
+} from "../../../../generated/graphql";
+import { AuthorizationLevel, useCurrentProgram } from "../../../../hooks";
+import AuthorizationWrapper from "../../../../layouts/AuthorizationWrapper";
+import ChooseTabLayout from "../../../../layouts/ChooseTabLayout";
+import PageContainer from "../../../../layouts/PageContainer";
+import Page from "../../../../types/Page";
+
+const DashboardPage: Page = () => {
+  const { currentProgram } = useCurrentProgram();
+  const { programId } = currentProgram || {
+    programId: ""
+  };
+
+  const mentors = useGetProfilesQuery({
+    variables: {
+      programId: programId,
+      profileType: ProfileType.Mentor,
+    },
+  });
+
+  const mentees = useGetProfilesQuery({
+    variables: {
+      programId: programId,
+      profileType: ProfileType.Mentee,
+    },
+  });
+
+  if (!currentProgram || mentors.error || mentees.error) return <Fragment />;
+
+  return (
+    <Fragment>
+      <Text h2 b>
+        Dashboard
+      </Text>
+      <div className="h-4"></div>
+      <Card className="flex flex-col p-12 space-y-6 overflow-y-auto">
+        <div className="grid grid-cols-4 gap-4 justify-center items-center">
+          <Text b secondary className="col-span-1">
+            Mentors (#):
+          </Text>
+          <Text b>
+            {mentors.data?.getProfiles.length}
+          </Text>
+          <Text b secondary className="col-span-1">
+            Mentees (#):
+          </Text>
+          <Text b>
+            {mentees.data?.getProfiles.length}
+          </Text>
+        </div>
+      </Card>
+    </Fragment>
+  );
+};
+
+DashboardPage.getLayout = (page, pageProps) => (
+  <AuthorizationWrapper canView={[AuthorizationLevel.Admin]}>
+    <ChooseTabLayout {...pageProps}>
+      <PageContainer>{page}</PageContainer>
+    </ChooseTabLayout>
+  </AuthorizationWrapper>
+);
+
+export default DashboardPage;