feat: add admin pages

Author: joshunrau

apps/web/src/Routes.tsx

@@ -5,6 +5,7 @@ import type { RouteObject } from 'react-router-dom';
 
 import { Layout } from './components/Layout';
 import { aboutRoute } from './features/about';
+import { adminRoute } from './features/admin';
 import { authRoutes } from './features/auth';
 import { contactRoute } from './features/contact';
 import { dashboardRoute } from './features/dashboard';
@@ -36,6 +37,7 @@ const protectedRoutes: RouteObject[] = [
       </DisclaimerProvider>
     ),
     children: [
+      adminRoute,
       aboutRoute,
       contactRoute,
       datahubRoute,

apps/web/src/components/Navbar/Navbar.tsx

@@ -97,7 +97,6 @@ export const Navbar = () => {
           </div>
         </Sheet.Footer>
       </Sheet.Content>
-      <Sheet.Overlay />
     </Sheet>
   );
 };

apps/web/src/features/admin/hooks/useCreateGroupMutation.ts

@@ -0,0 +1,16 @@
+import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import type { CreateGroupData } from '@opendatacapture/schemas/group';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function useCreateGroupMutation() {
+  const queryClient = useQueryClient();
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  return useMutation({
+    mutationFn: ({ data }: { data: CreateGroupData }) => axios.post('/v1/groups', data),
+    onSuccess() {
+      addNotification({ type: 'success' });
+      void queryClient.invalidateQueries({ queryKey: ['groups'] });
+    }
+  });
+}

apps/web/src/features/admin/hooks/useCreateUserMutation.ts

@@ -0,0 +1,16 @@
+import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import type { CreateUserData } from '@opendatacapture/schemas/user';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function useCreateUserMutation() {
+  const queryClient = useQueryClient();
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  return useMutation({
+    mutationFn: ({ data }: { data: CreateUserData }) => axios.post('/v1/users', data),
+    onSuccess() {
+      addNotification({ type: 'success' });
+      void queryClient.invalidateQueries({ queryKey: ['users'] });
+    }
+  });
+}

apps/web/src/features/admin/hooks/useDeleteGroupMutation.ts

@@ -0,0 +1,15 @@
+import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function useDeleteGroupMutation() {
+  const queryClient = useQueryClient();
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  return useMutation({
+    mutationFn: ({ id }: { id: string }) => axios.delete(`/v1/groups/${id}`),
+    onSuccess() {
+      addNotification({ type: 'success' });
+      void queryClient.invalidateQueries({ queryKey: ['groups'] });
+    }
+  });
+}

apps/web/src/features/admin/hooks/useDeleteUserMutation.ts

@@ -0,0 +1,15 @@
+import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function useDeleteUserMutation() {
+  const queryClient = useQueryClient();
+  const addNotification = useNotificationsStore((store) => store.addNotification);
+  return useMutation({
+    mutationFn: ({ id }: { id: string }) => axios.delete(`/v1/users/${id}`),
+    onSuccess() {
+      addNotification({ type: 'success' });
+      void queryClient.invalidateQueries({ queryKey: ['users'] });
+    }
+  });
+}

apps/web/src/features/admin/hooks/useGroupsQuery.ts

@@ -0,0 +1,13 @@
+import { $Group } from '@opendatacapture/schemas/group';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function useGroupsQuery() {
+  return useSuspenseQuery({
+    queryFn: async () => {
+      const response = await axios.get('/v1/groups');
+      return $Group.array().parse(response.data);
+    },
+    queryKey: ['groups']
+  });
+}

apps/web/src/features/admin/hooks/useUsersQuery.ts

@@ -0,0 +1,13 @@
+import { $User } from '@opendatacapture/schemas/user';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export function useUsersQuery() {
+  return useSuspenseQuery({
+    queryFn: async () => {
+      const response = await axios.get('/v1/users');
+      return $User.array().parse(response.data);
+    },
+    queryKey: ['users']
+  });
+}

apps/web/src/features/admin/index.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable perfectionist/sort-objects */
+
+import type { RouteObject } from 'react-router-dom';
+
+import { CreateGroupPage } from './pages/CreateGroupPage';
+import { CreateUserPage } from './pages/CreateUserPage';
+import { ManageGroupsPage } from './pages/ManageGroupsPage';
+import { ManageUsersPage } from './pages/ManageUsersPage';
+
+export const adminRoute: RouteObject = {
+  path: 'admin',
+  children: [
+    {
+      path: 'groups',
+      children: [
+        {
+          index: true,
+          element: <ManageGroupsPage />
+        },
+        {
+          path: 'create',
+          element: <CreateGroupPage />
+        }
+      ]
+    },
+    {
+      path: 'users',
+      children: [
+        {
+          index: true,
+          element: <ManageUsersPage />
+        },
+        {
+          path: 'create',
+          element: <CreateUserPage />
+        }
+      ]
+    }
+  ]
+};

apps/web/src/features/admin/pages/CreateGroupPage.tsx

@@ -0,0 +1,53 @@
+import { Form, Heading } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { $CreateGroupData, type CreateGroupData } from '@opendatacapture/schemas/group';
+import { useNavigate } from 'react-router-dom';
+
+import { PageHeader } from '@/components/PageHeader';
+
+import { useCreateGroupMutation } from '../hooks/useCreateGroupMutation';
+
+export const CreateGroupPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const createGroupMutation = useCreateGroupMutation();
+
+  const handleSubmit = (data: CreateGroupData) => {
+    createGroupMutation.mutate({ data });
+    navigate('..');
+  };
+
+  return (
+    <div>
+      <PageHeader>
+        <Heading className="text-center" variant="h2">
+          {t({
+            en: 'Add Group',
+            fr: 'Ajouter un groupe'
+          })}
+        </Heading>
+      </PageHeader>
+      <Form
+        className="mx-auto max-w-3xl"
+        content={{
+          name: {
+            kind: 'string',
+            label: t('common.groupName'),
+            variant: 'input'
+          },
+          type: {
+            kind: 'string',
+            label: t('common.groupType'),
+            options: {
+              CLINICAL: t('common.clinical'),
+              RESEARCH: t('common.research')
+            },
+            variant: 'select'
+          }
+        }}
+        validationSchema={$CreateGroupData}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+};