Refactor site root layout, routing based on user roles, and Introduce member dashboard page

package.json

@@ -45,6 +45,7 @@
         "@mantine/modals": "^7.16",
         "@mantine/notifications": "^7.16",
         "@mantinex/dev-icons": "^1.1.0",
+        "@phosphor-icons/react": "^2.1.7",
         "@sentry/nextjs": "^8.54.0",
         "@tabler/icons-react": "^3.29.0",
         "@tanstack/react-query": "^5.66.0",

src/app/globals.css

@@ -1 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
 @layer reset, base, tokens, recipes, utilities;

src/app/member/[memberIdentifier]/dashboard/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { AlertNotFound } from '@/components/errors'
+import { getMemberFromIdentifier } from '@/server/actions/member-actions'
+import { MemberDashboard } from '@/components/member/member-dashboard'
+
+export const dynamic = 'force-dynamic'
+
+export default async function MemberDashboardPage(props: { params: Promise<{ memberIdentifier: string }> }) {
+    const params = await props.params
+
+    const { memberIdentifier } = params
+
+    const member = await getMemberFromIdentifier(memberIdentifier)
+    if (!member) {
+        // TODO Redirect here with a mantine notification? generic 404 page?
+        return <AlertNotFound title="Member was not found" message="no such member exists" />
+    }
+
+    return <MemberDashboard member={member} />
+}

src/app/member/[memberIdentifier]/study/[studyIdentifier]/review/page.tsx

@@ -37,13 +37,6 @@ export default async function StudyReviewPage(props: {
                         <Title>
                             {study.title} | {study.piName}
                         </Title>
-                        {/* <Flex justify="space-between" align="center" mb="lg">
-                            <Flex gap="md" direction="column">
-                                <Link href={`/member/${memberIdentifier}/studies/review`}>
-                                    <Button color="blue">Back to pending review</Button>
-                                </Link>
-                            </Flex>
-                        </Flex> */}
                     </Group>
 
                     <Text c="#7F7D7D" mb={30} pt={10} fz="lg" fs="italic">

src/app/page.tsx

@@ -2,6 +2,8 @@ import { Title } from '@mantine/core'
 import { UserNav } from './user-nav'
 import { pageStyles, mainStyles, footerStyles } from '@/styles/common'
 
+// TODO Remove this root page?,
+//  or route users based on their roles to correct pages?
 export default function Home() {
     return (
         <div className={pageStyles}>

src/app/providers.tsx

@@ -9,14 +9,18 @@ import { ClerkProvider } from '@clerk/nextjs'
 // reference: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
 //
 import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { FC, ReactNode } from 'react'
 
 function makeQueryClient() {
     return new QueryClient({
         defaultOptions: {
             queries: {
                 // With SSR, we usually want to set some default staleTime
-                // above 0 to avoid refetching immediately on the client
+                // above 0 to avoid re-fetching immediately on the client
                 staleTime: 60 * 1000,
+                refetchOnWindowFocus: false,
+                // Every 15 minutes - open to input on this
+                refetchInterval: 15 * 1000 * 60,
             },
         },
     })
@@ -25,7 +29,7 @@ function makeQueryClient() {
 let browserQueryClient: QueryClient | undefined = undefined
 
 type Props = {
-    children: React.ReactNode
+    children: ReactNode
 }
 
 export function getQueryClient() {
@@ -42,7 +46,7 @@ export function getQueryClient() {
     }
 }
 
-export const Providers: React.FC<Props> = ({ children }) => {
+export const Providers: FC<Props> = ({ children }) => {
     const queryClient = getQueryClient()
 
     return (

src/app/user-nav.tsx

@@ -1,13 +1,22 @@
 'use client'
 
 import Link from 'next/link'
-import { Button, Title } from '@mantine/core'
+import { Button, LoadingOverlay, Title } from '@mantine/core'
 
 import { useAuthInfo } from '@/components/auth'
+import { redirect } from 'next/navigation'
 
 export const UserNav = () => {
     const auth = useAuthInfo()
 
+    if (!auth.isLoaded) {
+        return <LoadingOverlay />
+    }
+
+    if (auth.isMember) {
+        redirect(`/member/${auth.orgSlug}/dashboard`)
+    }
+
     return (
         <div>
             <Title order={4}>

src/components/app-layout.tsx

@@ -1,29 +1,75 @@
-import { Group, AppShell, AppShellHeader, AppShellMain } from '@mantine/core'
+import {
+    AppShell,
+    AppShellFooter,
+    AppShellMain,
+    AppShellNavbar,
+    AppShellSection,
+    Group,
+    NavLink,
+    ScrollArea,
+    Text,
+} from '@mantine/core'
 import { SafeInsightsLogo } from './si-logo'
-import { NavAuthMenu } from './nav-auth-menu'
 import Link from 'next/link'
 import { Notifications } from '@mantine/notifications'
-
 import '@mantine/notifications/styles.css'
+import { IconHome } from '@tabler/icons-react'
+import { OrganizationSwitcher, SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs'
+import { Gear } from '@phosphor-icons/react/dist/ssr'
+import { ReactNode } from 'react'
 
 type Props = {
-    children: React.ReactNode
+    children: ReactNode
 }
 
 export function AppLayout({ children }: Props) {
     return (
-        <AppShell header={{ height: 60 }} padding="md">
+        <AppShell footer={{ height: 60 }} navbar={{ width: 250, breakpoint: 'sm' }} padding="md">
             <Notifications />
-            <AppShellHeader>
-                <Group h="100%" px="md" justify="space-between">
+
+            <AppShellNavbar p="md" bg="dark">
+                <AppShellSection>
                     <Link href="/">
                         <SafeInsightsLogo height={30} />
                     </Link>
-                    <NavAuthMenu />
-                </Group>
-            </AppShellHeader>
+                </AppShellSection>
+                <AppShellSection grow my="md" component={ScrollArea}>
+                    <NavLink
+                        href="/member/openstax/dashboard"
+                        c="white"
+                        label="Dashboard"
+                        leftSection={<IconHome size={16} stroke={1.5} />}
+                    />
+                </AppShellSection>
+                <AppShellSection>
+                    {/* TODO Flesh out styles for this stuff with UX */}
+                    <SignedOut>
+                        <SignInButton />
+                    </SignedOut>
 
+                    <SignedIn>
+                        <Group>
+                            <OrganizationSwitcher />
+                            <UserButton />
+                        </Group>
+                    </SignedIn>
+                    {/* TODO open the user settings in a modal? page? flesh out */}
+                    <NavLink
+                        component="button"
+                        // onClick={}
+                        // href="/settings"
+                        c="white"
+                        label="Settings"
+                        leftSection={<Gear size={16} />}
+                    />
+                </AppShellSection>
+            </AppShellNavbar>
             <AppShellMain>{children}</AppShellMain>
+            <AppShellFooter p="md" bg="gray">
+                <Group justify="center">
+                    <Text>© 2025 - SafeInsights</Text>
+                </Group>
+            </AppShellFooter>
         </AppShell>
     )
 }

src/components/member/member-dashboard.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useUser } from '@clerk/nextjs'
+import { Divider, LoadingOverlay, Stack, Text, Title } from '@mantine/core'
+import React, { FC } from 'react'
+import { Member } from '@/schema/member'
+import { StudiesTable } from '@/components/member/studies-table'
+
+export const MemberDashboard: FC<{ member: Member }> = ({ member }) => {
+    const { isLoaded, user } = useUser()
+
+    if (!isLoaded) {
+        return <LoadingOverlay />
+    }
+
+    return (
+        <Stack px="lg" gap="lg">
+            <Title mb="lg">Hi {user?.firstName}!</Title>
+            <Text>Welcome to SafeInsights</Text>
+            <Text>Placeholder text</Text>
+            <Divider />
+            <StudiesTable member={member} />
+            <Divider />
+        </Stack>
+    )
+}

src/components/member/studies-table.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import React, { FC } from 'react'
+import { Member } from '@/schema/member'
+import { Stack, Table, Title, Text } from '@mantine/core'
+import { fetchStudiesForMember } from '@/server/actions/study-actions'
+import { useQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { humanizeStatus } from '@/lib/status'
+import Link from 'next/link'
+
+export const StudiesTable: FC<{ member: Member }> = ({ member }) => {
+    const { data: studies } = useQuery({
+        queryKey: ['studiesForMember', member.identifier],
+        initialData: [],
+        queryFn: () => {
+            return fetchStudiesForMember(member.identifier)
+        },
+    })
+
+    console.log(studies)
+
+    const rows = studies.map((study) => (
+        <Table.Tr key={study.id}>
+            <Table.Td>{study.title}</Table.Td>
+            <Table.Td>
+                <Text>{dayjs(study.createdAt).format('MM/DD/YYYY')}</Text>
+            </Table.Td>
+            {/*TODO pull out researcher date from query?*/}
+            <Table.Td>{study.researcherId}</Table.Td>
+            {/*TODO Reviewed by?*/}
+            {/*<Table.Td>{study.reviewedBy}</Table.Td>*/}
+            <Table.Td>{humanizeStatus(study.status)}</Table.Td>
+            <Table.Td>
+                <Link href={`/studies/${study.id}`}>View</Link>
+            </Table.Td>
+        </Table.Tr>
+    ))
+
+    return (
+        <Stack px="lg" gap="lg">
+            <Title order={4}>Review Studies</Title>
+            <Table>
+                <Table.Thead>
+                    <Table.Tr>
+                        <Table.Th>Study Name</Table.Th>
+                        <Table.Th>Submitted On</Table.Th>
+                        <Table.Th>Researcher</Table.Th>
+                        {/*TODO Reviewd by above*/}
+                        {/*<Table.Th>Reviewed By</Table.Th>*/}
+                        <Table.Th>Status</Table.Th>
+                        <Table.Th>Details</Table.Th>
+                    </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>{rows}</Table.Tbody>
+            </Table>
+        </Stack>
+    )
+}

src/middleware.ts

@@ -79,6 +79,12 @@ export default clerkMiddleware(async (auth, req) => {
     if (!userRoles.hasMFA && !req.nextUrl.pathname.startsWith(MFA_ROUTE)) {
     }
 
+    // TODO Redirect users to different URIs based on their role? ie:
+    //  member -> /member
+    //  researcher -> /researcher
+    //  admin -> /admin
+    //  or should this happen somewhere else
+
     // Route protection
     const routeProtection = {
         member: isMemberRoute(req) && !userRoles.isMember && !userRoles.isAdmin,

src/server/actions/study-actions.ts

@@ -1,3 +1,5 @@
+'use server'
+
 import { db } from '@/database'
 
 export const fetchStudiesForMember = async (memberIdentifier: string) => {
@@ -7,7 +9,8 @@ export const fetchStudiesForMember = async (memberIdentifier: string) => {
             join.on('member.identifier', '=', memberIdentifier).onRef('study.memberId', '=', 'member.id'),
         )
         .orderBy('study.createdAt', 'desc')
-        .select(['study.id', 'piName', 'status', 'title'])
+        .selectAll()
+        // .select(['study.id', 'piName', 'status', 'title'])
         .where('study.status', '!=', 'INITIATED')
         .execute()
 }

src/theme.ts

@@ -1,6 +1,5 @@
 import { createTheme } from '@mantine/core'
 
 export const theme = createTheme({
-    /** Your theme override here */
-    fontFamily: 'Roboto Mono, monospace',
+    fontFamily: 'Open Sans',
 })