Feature/66 admin dashboard users tab by Berny-ft · Pull Request #67 · hack4impact/mcld-project

Berny-ft · 2026-05-14T21:42:04Z

Closes #66

Overview

Implemented the fully functional Admin Users Dashboard. This includes a new /users route with server-side data fetching and a dynamic client-side interface for managing user records.

Key Changes:

Server-Side Integration: Implemented data fetching for user profiles and subscriptions, including a query to list distinct roles for filtering.
Dynamic Data Table: Created UsersDataTable which uses a ResizeObserver to automatically calculate the optimal number of rows to display based on available vertical screen space.
Robust Filtering & Sorting: Added UsersClient to manage status tabs (All, Active, Inactive), a role-based filter dropdown, and a real-time name search.
UI/UX Refinements:
- Fixed table borders to wrap tightly around content rather than stretching to the bottom.
- Resolved focus-ring clipping on the search input.
- Enhanced pagination button visibility with blue-tinted hover states.
- Implemented a pinned footer to keep pagination controls always accessible.

Testing

Manual Testing:

Verified that the table correctly measures available space and updates the pageSize when the browser window is resized.
Tested the Search bar with various names to ensure immediate filtering.
Validated Status Tabs (All/Active/Inactive) correctly filter based on subscription data.
Confirmed the Role Filter dropdown dynamically populates and filters correctly.
Verified that Sorting (A-Z/Z-A) works across the entire filtered dataset.
Checked that Pagination controls are disabled/enabled appropriately based on the number of results.

Checklist

Code is neat, readable, and works
Code is commented where appropriate and well-documented
Commit messages follow our guidelines
Issue number is linked
Branch is linked
Reviewers are assigned

Notes

The dynamic pagination logic in UsersDataTable relies on the parent container having a bounded height (implemented in users/layout.tsx).
The bottom border of the table is now decoupled from the scroll container to ensure it always hugs the last row, providing a cleaner look when there are few entries.
The db schema was modified to add a last logged in property and its documentation was also modified accordingly.

Copilot

Pull request overview

Implements the Admin Users dashboard route with server-side user data loading and a client-side table for filtering, sorting, and pagination.

Changes:

Adds /users page structure, bounded layout, profile role helpers, and role query.
Adds users table components with name/status/role filtering, alphabetical sorting, dynamic page sizing, and action icons.
Updates shared authenticated layout and generic data table pagination styling/behavior.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`components/data-table.tsx`	Updates generic table footer to show page counts and numbered pagination.
`app/(authenticated)/users/queries.ts`	Adds query for distinct profile roles.
`app/(authenticated)/users/profile-role-label.ts`	Adds role label mapping and shared `UserRow` type.
`app/(authenticated)/users/page.tsx`	Adds server-side user fetching and renders the users dashboard.
`app/(authenticated)/users/layout.tsx`	Adds bounded-height layout for the users route.
`app/(authenticated)/users/_components/users-data-table.tsx`	Adds dynamic paginated users table with resize-based page sizing.
`app/(authenticated)/users/_components/users-columns.tsx`	Defines users table columns and row actions.
`app/(authenticated)/users/_components/users-client.tsx`	Adds client-side filters, tabs, search, sort, and table wiring.
`app/(authenticated)/layout.tsx`	Adjusts authenticated layout sizing/overflow for nested dashboard content.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+async function UsersContent() {
+   const [users, distinctRoles] = await Promise.all([
+      fetchUsers(),
+      listDistinctProfileRoles(),
+   ]);


+         const fullName = `${u.firstName} ${u.lastName}`;
+         const email = `${u.firstName.toLowerCase()}.${u.lastName.toLowerCase()}@mcld.ca`;


+      id: "createdAt",
+      header: "Last Login",
+      meta: { colWidth: "18%" },
+      cell: ({ row }) => (
+         <span className="block min-w-0 truncate text-sm text-muted-foreground">
+            {new Intl.DateTimeFormat("en-CA", {
+               year: "numeric",
+               month: "short",
+               day: "numeric",
+            }).format(new Date(row.original.createdAt))}


… functional button to add users in the dashboard

RenaudBernier

Looks good to me

RenaudBernier

Add loader for when the table is loading
Remove the Add user button, you can add it in your next issue

…d remove unused button

…g indication in UsersPage

Berny-ft · 2026-05-17T05:07:56Z

Add loader for when the table is loading

Remove the Add user button, you can add it in your next issue

done

martin0024

Good job, nothing to say really. Looks good.
Only thing is why everyone is Last Login is 16 of May, check it works.

martin0024 · 2026-05-17T14:05:08Z

+function AvatarCircle({ name }: { name: string }) {
+   const [first = "", last = ""] = name.trim().split(" ");
+   const initials = `${first[0] ?? ""}${last[0] ?? ""}`.toUpperCase();
+   return (
+      <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
+         {initials}
+      </span>
+   );


Please use avatar component: npx shadcn@latest add avatar

Please use avatar component: npx shadcn@latest add avatar

done

martin0024 · 2026-05-17T14:10:30Z

+         return (
+            <span className="inline-flex items-center gap-1.5 text-sm">
+               <span
+                  className={`h-2 w-2 rounded-full ${
+                     active ? "bg-green-500" : "bg-muted-foreground/50"
+                  }`}
+               />
+               <span
+                  className={
+                     active ? "text-foreground" : "text-muted-foreground"
+                  }
+               >
+                  {active ? "Active" : "Inactive"}
+               </span>
+            </span>
+         );


Suggested change

return (







{active ? "Active" : "Inactive"}





);

<Badge variant={active ? "default" : "secondary"} className="gap-1.5">



{active ? "Active" : "Inactive"}

</Badge>

martin0024 · 2026-05-17T14:47:33Z

utils/supabase/middleware.ts gates /dashboard/* on ROLES.ADMIN but /users is unprotected, so any signed-in user can access the page.

martin0024 · 2026-05-17T14:48:16Z

+      cell: ({ row }) => {
+         const u = row.original;
+         const fullName = `${u.firstName} ${u.lastName}`;
+         const email = `${u.firstName.toLowerCase()}.${u.lastName.toLowerCase()}@mcld.ca`;


why is there fake email rendered in the table?

why is there fake email rendered in the table?

fixed

martin0024 · 2026-05-17T14:58:52Z

@@ -0,0 +1,18 @@
+import { LoaderIcon } from "lucide-react";


Suggested change

import { LoaderIcon } from "lucide-react";

import { Loader2Icon } from "lucide-react";

martin0024 · 2026-05-17T14:59:04Z

+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+   return (
+      <div className="flex flex-1 items-center justify-center">
+         <LoaderIcon


Suggested change

<LoaderIcon

<Loader2Icon

… loading animation

…o include emails, and enhanced search functionality to filter by email

…tatus indicator with Badge for improved UI consistency

RenaudBernier

Good work, lgtm

Berny-ft added 9 commits May 13, 2026 11:16

initial design of the Users page

f178ca6

layout corrections

9736545

small ui fixes

f80d744

refactored code

fb69210

small ui fixes

d7947ec

fixed scrolling and adaptive entry count depending on page size

392f020

fixed table bottom border stretch

3a4d63e

fixed search box padding and page indicator color

646ff7d

adding string type for state variable

065f534

Berny-ft requested review from RenaudBernier, Copilot and martin0024 May 14, 2026 21:42

Copilot started reviewing on behalf of Berny-ft May 14, 2026 21:42 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

Berny-ft added 2 commits May 16, 2026 00:47

added last login to the user profile in the db schema and added a non…

0cb63c0

… functional button to add users in the dashboard

updated schema documentation

470351e

RenaudBernier approved these changes May 16, 2026

View reviewed changes

RenaudBernier requested changes May 16, 2026

View reviewed changes

Berny-ft added 2 commits May 17, 2026 00:43

refactored card header in authenticated page to simplify structure an…

f0b3534

…d remove unused button

replaced UsersPageSkeleton with Spinner component for improved loadin…

d04ba7c

…g indication in UsersPage

martin0024 requested changes May 17, 2026

View reviewed changes

Berny-ft added 4 commits May 18, 2026 01:12

replaced LoaderIcon with Loader2Icon in Spinner component for updated…

07d050b

… loading animation

refactored UsersPage to require admin access, updated user fetching t…

423f492

…o include emails, and enhanced search functionality to filter by email

refactored user avatar display to use Avatar component and replaced s…

9cf31e5

…tatus indicator with Badge for improved UI consistency

fix(users): fetch roles after users to limit concurrent DB connections

f403d3f

Berny-ft requested review from RenaudBernier and martin0024 May 18, 2026 19:39

RenaudBernier approved these changes May 19, 2026

View reviewed changes

martin0024 approved these changes May 19, 2026

View reviewed changes

Berny-ft merged commit f9efa90 into develop May 19, 2026
1 check passed

		const fullName = `${u.firstName} ${u.lastName}`;
		const email = `${u.firstName.toLowerCase()}.${u.lastName.toLowerCase()}@mcld.ca`;

	import { LoaderIcon } from "lucide-react";
	import { Loader2Icon } from "lucide-react";

Conversation

Berny-ft commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Testing

Checklist

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

RenaudBernier left a comment

Choose a reason for hiding this comment

Uh oh!

RenaudBernier left a comment

Choose a reason for hiding this comment

Uh oh!

Berny-ft commented May 17, 2026

Uh oh!

martin0024 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RenaudBernier left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Berny-ft commented May 14, 2026 •

edited

Loading