add leaderboard in dashbaord

src/app/dashboard/info/points.tsx

@@ -0,0 +1,75 @@
+'use client'
+import { Column } from 'primereact/column'
+import { DataTable } from 'primereact/datatable'
+
+import { JsonUser } from '@/lib/db/models/User'
+
+import { AppPermissions } from '@/lib/db/models/Role'
+import { useImmer } from 'use-immer'
+
+export interface UserDataTableProps {
+	users: JsonUser[]
+	perms: AppPermissions
+	allRoles: readonly string[]
+}
+
+export default function UserDataTable({
+	users: initialUsers,
+}: UserDataTableProps) {
+	const [users] = useImmer(initialUsers)
+
+	const sortedUsers = [...users].sort((a, b) =>
+		(b.pointsObtained || 0) - (a.pointsObtained || 0)
+	)
+
+	const modifiedUsers = sortedUsers.map((user) => {
+		return {
+			...user,
+			pointsObtained: user.pointsObtained === undefined
+				? 0
+				: user.pointsObtained,
+		}
+	})
+
+	return (
+		<div className="flex flex-col gap-2">
+			<h2 className="text-2xl font-bold mb-2">Leaderboard</h2>
+			<DataTable
+				value={modifiedUsers}
+				// pagination
+				paginator
+				rows={5}
+				rowsPerPageOptions={[5, 10, 25, 50]}
+				// row expansion
+
+				// selection
+				selectionPageOnly
+				// sort
+				removableSort
+				sortMode="multiple"
+				// misc
+				className="text-sm shadow-md rounded-lg"
+				emptyMessage="No users found."
+			>
+				<Column expander />
+				<Column header="Email" field="email" filter />
+				<Column
+					header="First Name"
+					field="application.firstName"
+					filter
+				/>
+				<Column
+					header="Last Name"
+					field="application.lastName"
+					filter
+				/>
+				<Column
+					header="Points"
+					field="pointsObtained"
+					sortField="pointsObtained"
+					sortable
+				/>
+			</DataTable>
+		</div>
+	)
+}

src/app/dashboard/page.tsx

@@ -7,6 +7,7 @@ import { getEnhancedSession } from '@/lib/utils/server'
 
 import { canAccessDashboard } from '@/lib/auth/shared'
 import Cards from './Cards'
+import Users from './score'
 
 // https://beta.nextjs.org/docs/api-reference/segment-config#dynamic
 // We read from the database on this route, so this has to be dynamic.
@@ -35,6 +36,8 @@ export default async function Dashboard() {
 				className={classNames('flex-1 gap-8')}
 			>
 			</Box>
+
+			<Users />
 		</Box>
 	)
 }

src/app/dashboard/score.tsx

@@ -0,0 +1,29 @@
+import clientPromise from '@/lib/db'
+import { Role } from '@/lib/db/models/Role'
+import User from '@/lib/db/models/User'
+import { getEnhancedSession } from '@/lib/utils/server'
+import { headers } from 'next/headers'
+import UserDataTable from './info/points'
+
+export default async function Users() {
+	const { perms } = getEnhancedSession(headers())
+	const client = await clientPromise
+	const roles = await client.db()
+		.collection<Role>('roles')
+		.find({}, { projection: { granted: 0 } })
+		.toArray()
+	const users = await client.db()
+		.collection<User>('users')
+		.find({}, { projection: { 'application.resume': 0 } })
+		.toArray()
+	return (
+		<>
+			<UserDataTable
+				allRoles={roles.map((r) => r._id)}
+				users={JSON.parse(JSON.stringify(users))}
+				perms={perms}
+			/>
+			<br />
+		</>
+	)
+}