feat: user management table

apps/app/src/pages/admin/management.tsx

@@ -0,0 +1,7 @@
+import { ManagementTable } from '@weareinreach/ui/components/data-portal/ManagementTable'
+
+export const Management = () => {
+	return <ManagementTable />
+}
+
+export default Management

apps/app/src/types/nextjs-routes.d.ts

@@ -19,6 +19,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/account/reviews">
     | StaticRoute<"/account/saved">
     | StaticRoute<"/admin">
+    | StaticRoute<"/admin/management">
     | StaticRoute<"/admin/quicklink/email">
     | StaticRoute<"/admin/quicklink">
     | StaticRoute<"/admin/quicklink/phone">

package.json

@@ -71,6 +71,8 @@
 	"pnpm": {
 		"peerDependencyRules": {
 			"allowedVersions": {
+				"react": "18",
+				"react-dom": "18",
 				"typescript": "5",
 				"webpack": "5"
 			}

packages/api/lib/permissions.ts

@@ -65,6 +65,10 @@ const system = {
 	getDetails: ['dataPortalBasic'],
 } satisfies PermissionDefs
 
+const user = {
+	viewAllUsers: ['dataPortalAdmin'],
+} satisfies PermissionDefs
+
 const permissions = {
 	...locations,
 	...organizations,
@@ -77,6 +81,7 @@ const permissions = {
 	...orgWebsite,
 	...reviews,
 	...system,
+	...user,
 } satisfies PermissionDefs
 
 export const getPermissions = (procedure: PermissionedProcedure): { hasPerm: Permission | Permission[] } => ({

packages/api/router/user/index.ts

@@ -2,6 +2,7 @@ import {
 	adminProcedure,
 	defineRouter,
 	importHandler,
+	permissionedProcedure,
 	protectedProcedure,
 	publicProcedure,
 } from '~api/lib/trpc'
@@ -91,4 +92,13 @@ export const userRouter = defineRouter({
 		)
 		return handler({ input, ctx })
 	}),
+	forUserTable: permissionedProcedure('viewAllUsers')
+		.input(schema.ZForUserTableSchema)
+		.query(async (opts) => {
+			const handler = await importHandler(
+				namespaced('forUserTable'),
+				() => import('./query.forUserTable.handler')
+			)
+			return handler(opts)
+		}),
 })

packages/api/router/user/query.forUserTable.handler.ts

@@ -0,0 +1,21 @@
+import { prisma } from '@weareinreach/db'
+import { type TRPCHandlerParams } from '~api/types/handler'
+
+import { type TForUserTableSchema } from './query.forUserTable.schema'
+
+const forUserTable = async ({ input }: TRPCHandlerParams<TForUserTableSchema>) => {
+	const userResults = await prisma.user.findMany({
+		where: input,
+		select: {
+			id: true,
+			name: true,
+			email: true,
+			active: true,
+			createdAt: true,
+			emailVerified: true,
+			updatedAt: true,
+		},
+	})
+	return userResults
+}
+export default forUserTable

packages/api/router/user/query.forUserTable.schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const ZForUserTableSchema = z
+	.object({
+		active: z.boolean().default(true),
+	})
+	.partial()
+	.optional()
+export type TForUserTableSchema = z.infer<typeof ZForUserTableSchema>

packages/api/router/user/schemas.ts

@@ -6,4 +6,5 @@ export * from './mutation.deleteAccount.schema'
 export * from './mutation.forgotPassword.schema'
 export * from './mutation.resetPassword.schema'
 export * from './mutation.submitSurvey.schema'
+export * from './query.forUserTable.schema'
 // codegen:end

packages/ui/components/data-portal/ManagementTable.stories.tsx

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import { user } from '~ui/mockData/user'
+
+import { ManagementTable } from './ManagementTable'
+
+export default {
+	title: 'Data Portal/Tables/User Management',
+	component: ManagementTable,
+	parameters: {
+		msw: [user.forUserTable],
+		rqDevtools: true,
+	},
+} satisfies Meta<typeof ManagementTable>
+
+type StoryDef = StoryObj<typeof ManagementTable>
+
+export const Default = {} satisfies StoryDef

packages/ui/components/data-portal/ManagementTable.tsx

@@ -0,0 +1,143 @@
+import { Button, Group, NativeSelect, Stack, Text } from '@mantine/core'
+import {
+	MantineReactTable,
+	type MRT_ColumnDef,
+	MRT_GlobalFilterTextInput,
+	type MRT_Icons,
+	MRT_TablePagination,
+	useMantineReactTable,
+} from 'mantine-react-table'
+import { useMemo } from 'react'
+
+import { type ApiOutput } from '@weareinreach/api'
+import { Icon } from '~ui/icon'
+import { trpc as api } from '~ui/lib/trpcClient'
+
+const customIcons: Partial<MRT_Icons> = {
+	IconSortAscending: () => <Icon icon={'carbon:chevron-up'} color='black' />,
+	IconSortDescending: () => <Icon icon={'carbon:chevron-down'} color='black' />,
+}
+
+export const ManagementTable = () => {
+	const { data: userData } = api.user.forUserTable.useQuery()
+
+	const columns = useMemo<MRT_ColumnDef<UserDataRecord>[]>(
+		() => [
+			{
+				accessorKey: 'name',
+				header: 'Name',
+			},
+			{
+				accessorKey: 'email',
+				header: 'Email',
+			},
+			{
+				accessorKey: 'emailVerified',
+				header: 'Email Verified',
+				Cell: ({ cell }) => {
+					const cellValue = cell.getValue()
+					if (cellValue instanceof Date) {
+						return cellValue.toISOString()
+					}
+					return null
+				},
+			},
+			{
+				accessorKey: 'updatedAt',
+				header: 'Last updated',
+				Cell: ({ cell }) => {
+					return cell.getValue<Date>().toISOString()
+				},
+			},
+			{
+				accessorKey: 'createdAt',
+				header: 'Created At',
+				Cell: ({ cell }) => {
+					return cell.getValue<Date>().toISOString()
+				},
+			},
+			{
+				accessorKey: 'active',
+				header: 'Active',
+			},
+		],
+		[]
+	)
+
+	const table = useMantineReactTable({
+		columns,
+		data: userData ?? [],
+		icons: customIcons,
+		enableGlobalFilter: true,
+		enableFilterMatchHighlighting: false,
+		positionGlobalFilter: 'left',
+		enableRowSelection: true,
+		mantineSearchTextInputProps: {
+			placeholder: 'Enter Name',
+			sx: { minWidth: '734px', height: '48px' },
+		},
+		initialState: {
+			showGlobalFilter: true,
+		},
+		enableTopToolbar: false,
+		enableBottomToolbar: false,
+		enablePagination: true,
+		mantinePaginationProps: {
+			withEdges: false,
+			siblings: 0,
+			showRowsPerPage: false,
+		},
+		paginationDisplayMode: 'pages',
+		layoutMode: 'semantic',
+	})
+
+	return (
+		<Stack>
+			<Text size='16px' fw={500} style={{ marginBottom: '-1rem' }}>
+				Total: {userData?.length ?? 0}
+			</Text>
+			<Group
+				noWrap={true}
+				position='left'
+				spacing={'16px'}
+				style={{
+					marginBottom: '4px',
+				}}
+			>
+				<MRT_GlobalFilterTextInput table={table} />
+				<NativeSelect
+					rightSection={<Icon icon='carbon:chevron-down' />}
+					data={['Data Entry Teams']}
+					styles={{
+						root: {
+							width: '208px',
+							height: '48px',
+						},
+						input: { paddingLeft: '16px', paddingRight: '16px', paddingTop: '12px', paddingBottom: '12px' },
+					}}
+				/>
+				<Button
+					styles={{
+						root: {
+							backgroundColor: 'inherit',
+							border: 'none',
+							width: '48px',
+							height: '48px',
+							padding: '12px',
+							marginTop: '10px',
+						},
+						label: { color: 'black' },
+					}}
+				>
+					<Icon icon='carbon:overflow-menu-horizontal' />
+				</Button>
+			</Group>
+			<Stack>
+				<MantineReactTable table={table} />
+				<MRT_TablePagination table={table} />
+			</Stack>
+		</Stack>
+	)
+}
+
+type UserDataRecord = NonNullable<ApiOutput['user']['forUserTable']>[number]

packages/ui/mockData/user.ts

@@ -8,4 +8,20 @@ export const user = {
 			return data
 		},
 	}),
+	forUserTable: getTRPCMock({
+		path: ['user', 'forUserTable'],
+		response: async (filterInput) => {
+			const data = (await import('./json/user.forUserTable.json')).default
+			const reformatted = data.map((item) => ({
+				...item,
+				createdAt: new Date(item.createdAt),
+				updatedAt: new Date(item.updatedAt),
+				...(item.emailVerified ? { emailVerified: new Date(item.emailVerified) } : { emailVerified: null }),
+			}))
+			if (filterInput?.active !== undefined) {
+				return reformatted.filter((item) => filterInput.active === item.active)
+			}
+			return reformatted
+		},
+	}),
 } satisfies MockHandlerObject<'user'>