feat: add pie chart of registration % on admin page for kishan (#203)

Co-authored-by: Nishant Aanjaney Jalan <[email protected]>

Author: Dropheart

app/pages/index.vue

@@ -4,7 +4,7 @@
       <h1 class="font-ichack text-center text-4xl">Coming Soon...</h1>
       <p class="mt-5 text-center text-2xl">
         Come back nearer to the hackathon for your dashboard, profiles, teams,
-        and more!
+        our Discord server, and more!
       </p>
     </div>
   </div>

bun.lock

@@ -14,6 +14,7 @@
         "@types/nunjucks": "^3.2.6",
         "argon2": "^0.41.1",
         "build-url-ts": "^6.1.7",
+        "chart.js": "^4.4.7",
         "csv-parse": "^5.6.0",
         "cva": "npm:class-variance-authority",
         "date-fns": "^4.1.0",
@@ -38,6 +39,7 @@
         "@inquirer/confirm": "^5.1.3",
         "@inquirer/select": "^4.0.6",
         "@types/bun": "^1.1.6",
+        "@types/chart.js": "^2.9.41",
         "@types/matter-js": "^0.19.8",
         "@types/nodemailer": "^6.4.17",
         "@types/pg": "^8.11.6",
@@ -298,6 +300,8 @@
 
     "@koa/router": ["@koa/[email protected]", "", { "dependencies": { "debug": "^4.3.4", "http-errors": "^2.0.0", "koa-compose": "^4.1.0", "methods": "^1.1.2", "path-to-regexp": "^6.3.0" } }, "sha512-sYcHglGKTxGF+hQ6x67xDfkE9o+NhVlRHBqq6gLywaMc6CojK/5vFZByphdonKinYlMLkEkacm+HEse9HzwgTA=="],
 
+    "@kurkle/color": ["@kurkle/[email protected]", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
+
     "@kwsites/file-exists": ["@kwsites/[email protected]", "", { "dependencies": { "debug": "^4.1.1" } }, "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw=="],
 
     "@kwsites/promise-deferred": ["@kwsites/[email protected]", "", {}, "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="],
@@ -526,6 +530,8 @@
 
     "@types/bun": ["@types/[email protected]", "", { "dependencies": { "bun-types": "1.1.43" } }, "sha512-E+ue6NMcn4FXC5bDRE1W/BXUVs01h5Mt02qH8/8HGCox9akuh8KNOFdwvaQS9TDgT2RmUyJYFRRqA60WtTnm2g=="],
 
+    "@types/chart.js": ["@types/[email protected]", "", { "dependencies": { "moment": "^2.10.2" } }, "sha512-3dvkDvueckY83UyUXtJMalYoH6faOLkWQoaTlJgB4Djde3oORmNP0Jw85HtzTuXyliUHcdp704s0mZFQKio/KQ=="],
+
     "@types/estree": ["@types/[email protected]", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
 
     "@types/hast": ["@types/[email protected]", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
@@ -776,6 +782,8 @@
 
     "character-entities-legacy": ["[email protected]", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
 
+    "chart.js": ["[email protected]", "", { "dependencies": { "@kurkle/color": "^0.3.0" } }, "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw=="],
+
     "check-error": ["[email protected]", "", {}, "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw=="],
 
     "cheerio": ["[email protected]", "", { "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.1.0", "encoding-sniffer": "^0.2.0", "htmlparser2": "^9.1.0", "parse5": "^7.1.2", "parse5-htmlparser2-tree-adapter": "^7.0.0", "parse5-parser-stream": "^7.1.2", "undici": "^6.19.5", "whatwg-mimetype": "^4.0.0" } }, "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww=="],
@@ -1382,6 +1390,8 @@
 
     "mlly": ["[email protected]", "", { "dependencies": { "acorn": "^8.14.0", "pathe": "^1.1.2", "pkg-types": "^1.2.1", "ufo": "^1.5.4" } }, "sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A=="],
 
+    "moment": ["[email protected]", "", {}, "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="],
+
     "mrmime": ["[email protected]", "", {}, "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw=="],
 
     "ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],

package.json

@@ -23,6 +23,7 @@
     "@inquirer/confirm": "^5.1.3",
     "@inquirer/select": "^4.0.6",
     "@types/bun": "^1.1.6",
+    "@types/chart.js": "^2.9.41",
     "@types/matter-js": "^0.19.8",
     "@types/nodemailer": "^6.4.17",
     "@types/pg": "^8.11.6",
@@ -58,6 +59,7 @@
     "@types/nunjucks": "^3.2.6",
     "argon2": "^0.41.1",
     "build-url-ts": "^6.1.7",
+    "chart.js": "^4.4.7",
     "csv-parse": "^5.6.0",
     "cva": "npm:class-variance-authority",
     "date-fns": "^4.1.0",

packages/admin/components/PieChart.vue

@@ -0,0 +1,65 @@
+<template>
+  <UCard>
+    <!-- <h3 class="text-center font-semibold">{{ title }}</h3> -->
+    <canvas ref="chart" />
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import {
+  Chart,
+  PieController,
+  ArcElement,
+  Tooltip,
+  Legend,
+  Title
+} from 'chart.js';
+
+type Props = {
+  title: string;
+  labels: string[];
+  data: number[];
+  color: string[];
+};
+
+const props = defineProps<Props>();
+
+const chart = useTemplateRef<HTMLCanvasElement>('chart');
+
+onMounted(() => {
+  Chart.register(PieController, ArcElement, Tooltip, Legend, Title);
+  try {
+    new Chart(chart.value!.getContext('2d')!, {
+      type: 'pie',
+      data: {
+        labels: props.labels,
+        datasets: [
+          {
+            data: props.data,
+            backgroundColor: props.color
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: true,
+            position: 'bottom'
+          },
+          title: {
+            display: true,
+            text: props.title,
+            font: {
+              size: 24
+            }
+          }
+        }
+      }
+    });
+  } catch (e: any) {
+    console.log(e);
+  }
+});
+</script>

packages/admin/pages/admin/index.vue

@@ -1,10 +1,49 @@
 <script lang="ts" setup>
+const { getRegistrationStats } = useProfile();
+const { value: registrationStats } = await getRegistrationStats();
+const calculateStats = (stats: {
+  registered_users: number;
+  all_users: number;
+}) => [stats.registered_users, stats.all_users - stats.registered_users];
+const hackerStats = calculateStats(registrationStats!.hacker);
+const volunteerStats = calculateStats(registrationStats!.volunteer);
+const adminStats = calculateStats(registrationStats!.admin);
+
 definePageMeta({
   middleware: ['require-auth'],
   layout: 'admin'
 });
+useHead({
+  title: 'Admin Dashboard'
+});
 </script>
 
 <template>
-  <div></div>
+  <h2 class="pt-12 text-center text-5xl font-semibold">Admin Dashboard</h2>
+
+  <div class="mx-8 mt-8 grid grid-cols-3">
+    <UCard class="col-span-2 row-span-2">
+      <div class="grid grid-cols-2 gap-4">
+        <h3 class="col-span-2 text-center text-3xl">Registration Statistics</h3>
+
+        <PieChart
+          title="Hacker Stats"
+          :labels="['Registered', 'Non-registered']"
+          :data="hackerStats"
+          :color="['#0060E6', '#D62D3B']" />
+
+        <PieChart
+          title="Volunteer Stats"
+          :labels="['Registered', 'Non-registered']"
+          :data="volunteerStats"
+          :color="['#0060E6', '#D62D3B']" />
+
+        <PieChart
+          title="Admin Stats"
+          :labels="['Registered', 'Non-registered']"
+          :data="adminStats"
+          :color="['#0060E6', '#D62D3B']" />
+      </div>
+    </UCard>
+  </div>
 </template>

packages/admin/pages/admin/users.vue

@@ -27,7 +27,7 @@ const tableColumns = [
 ];
 
 // List of users related properties
-const { getProfiles, getSelf } = useProfile();
+const { getProfiles, getSelf, getRegistrationStats } = useProfile();
 const { deleteUser, createUser } = useAdmin();
 const { profile } = useProfileStore();
 const { data, refresh, status, error } = await useAsyncData(
@@ -99,11 +99,8 @@ definePageMeta({
 
 <template>
   <UContainer class="relative max-h-full overflow-y-scroll">
-    <h2 class="text-center text-5xl font-semibold">Manage Users</h2>
-    <UButton
-      label="Add User"
-      @click="isAddUserPopupOpen = true"
-      v-if="profile!.role == 'god'" />
+    <h2 class="pt-12 text-center text-5xl font-semibold">Manage Users</h2>
+
     <UAlert v-if="error" :title="error.message" />
     <UTable
       v-else

packages/common/composables/useProfile.ts

@@ -55,9 +55,22 @@ export default () => {
       return;
     });
 
+  const getRegistrationStats = async () =>
+    Result.try(async () => {
+      const res = await client.profile.register.stats.$get();
+
+      if (!res.ok) {
+        const errorMessage = await res.text();
+        throw new Error(errorMessage);
+      }
+
+      return res.json();
+    });
+
   return {
     getProfiles,
     getSelf,
-    register
+    register,
+    getRegistrationStats
   };
 };

server/src/profile/__tests__/registerUser.test.ts

@@ -1,4 +1,11 @@
-import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import {
+  afterAll,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  test
+} from 'bun:test';
 import { profiles, type Profile, type SelectedProfile } from '../schema';
 import { db } from '../../drizzle';
 import { users, userSession, userToken } from '../../auth/schema';
@@ -23,7 +30,7 @@ const expectedSkeleton = {
 const expectedGet: Partial<Record<Role, SelectedProfile>> = {};
 const expectedSearch: Partial<Record<Role, Profile>> = {};
 
-beforeAll(async () => {
+beforeEach(async () => {
   // Insert sample users into the database & sign in as one
   await db.execute(sql`TRUNCATE ${userSession} CASCADE`);
   await db.execute(sql`TRUNCATE ${users} CASCADE`);
@@ -271,3 +278,103 @@ describe('Profiles module > POST /register', () => {
     await db.delete(userToken).where(eq(userToken.id, token));
   });
 });
+
+describe('Profile Modules > GET /register/stats', () => {
+  test('can get registration stats', async () => {
+    const res = await baseRoute.register.stats.$get(undefined, {
+      headers: {
+        Cookie: `auth_session=${sessionIds.god!!}`
+      }
+    });
+    expect(res.status).toBe(200);
+    const json = await res.json();
+
+    expect(json.hacker).toMatchObject({
+      all_users: 1,
+      registered_users: 1
+    });
+
+    expect(json.volunteer).toMatchObject({
+      all_users: 1,
+      registered_users: 1
+    });
+
+    expect(json.admin).toMatchObject({
+      all_users: 1,
+      registered_users: 1
+    });
+  });
+
+  test('registration stats is accurate', async () => {
+    // Create new user
+    const { userId, sessionId } = await createUserWithSession('hacker', {
+      name: 'Jay Silver',
+      email: '[email protected]',
+      password: null
+    });
+
+    // Expect all_users to increase by 1
+    let res = await baseRoute.register.stats.$get(undefined, {
+      headers: {
+        Cookie: `auth_session=${sessionIds.god!!}`
+      }
+    });
+    expect(res.status).toBe(200);
+    let json = await res.json();
+    expect(json.hacker).toMatchObject({
+      all_users: 2,
+      registered_users: 1
+    });
+
+    // Register user
+    const token = 'funnyLittleToken';
+    await db.insert(userToken).values({
+      id: token,
+      userId: userId,
+      expiresAt: tomorrow,
+      type: 'registration_link'
+    });
+
+    const registrationRes = await baseRoute.register.$post(
+      {
+        query: {
+          token: token
+        },
+        form: {
+          registrationDetails: JSON.stringify({
+            password: 'This12Secure@',
+            tShirtSize: 'M',
+            dietary_restrictions: ['halal', 'green'],
+            photos_opt_out: false,
+            pronouns: ''
+          })
+        }
+      },
+      undefined
+    );
+    expect(registrationRes.status).toBe(200);
+
+    // Expect registered_users to increase by 1
+    res = await baseRoute.register.stats.$get(undefined, {
+      headers: {
+        Cookie: `auth_session=${sessionIds.god!!}`
+      }
+    });
+    expect(res.status).toBe(200);
+    json = await res.json();
+    expect(json.hacker).toMatchObject({
+      all_users: 2,
+      registered_users: 2
+    });
+  });
+
+  test('only admins can get registration stats', async () => {
+    const res = await baseRoute.register.stats.$get(undefined, {
+      headers: {
+        Cookie: `auth_session=${sessionIds.hacker!!}`
+      }
+    });
+    // @ts-expect-error - auth error :3
+    expect(res.status).toBe(403);
+  });
+});