Feature/66 admin dashboard users tab

app/(authenticated)/layout.tsx

@@ -28,7 +28,7 @@ export default function AuthenticatedLayout({
          <SidebarProvider>
             <AppSidebar />
             <SidebarInset>
-               <div className="flex flex-1 flex-col gap-4 p-4">
+               <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
                   <Suspense fallback={null}>
                      <AuthGate>{children}</AuthGate>
                   </Suspense>

app/(authenticated)/page.tsx

@@ -9,6 +9,7 @@ import {
    CardHeader,
    CardTitle,
 } from "@/components/ui/card";
+import { UserPlus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { CheckoutButton } from "@/components/subscribe-button";
 
@@ -38,9 +39,15 @@ async function HomeContent() {
       <main className="min-h-screen p-4 w-full">
          <div className="flex flex-row gap-4 w-full">
             <Card className="flex-1">
-               <CardHeader>
-                  <CardTitle className="text-2xl">Welcome t</CardTitle>
-                  <CardDescription>You are signed in as</CardDescription>
+               <CardHeader className="flex flex-row items-center justify-between">
+                  <div className="space-y-1.5">
+                     <CardTitle className="text-2xl">Welcome</CardTitle>
+                     <CardDescription>You are signed in as</CardDescription>
+                  </div>
+                  <Button variant="outline" className="gap-2">
+                     <UserPlus className="h-4 w-4" />
+                     Add User
+                  </Button>
                </CardHeader>
                <CardContent className="space-y-4">
                   <p className="text-sm font-medium">{user.email}</p>

app/(authenticated)/users/_components/users-client.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+   Select,
+   SelectContent,
+   SelectItem,
+   SelectTrigger,
+   SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ArrowDownAZ, ArrowUpZA, Search } from "lucide-react";
+import { UsersDataTable } from "./users-data-table";
+import { usersColumns } from "./users-columns";
+import type { UserRow } from "../profile-role-label";
+
+const USER_SUBSCRIPTION_VIEW_TABS = [
+   { value: "all", label: "All Users" },
+   { value: "active", label: "Active" },
+   { value: "inactive", label: "Inactive" },
+] as const;
+
+export type UserSubscriptionViewTab =
+   (typeof USER_SUBSCRIPTION_VIEW_TABS)[number]["value"];
+
+type SortDir = "asc" | "desc";
+
+export interface RoleFilterOption {
+   value: string;
+   label: string;
+}
+
+interface UsersClientProps {
+   users: UserRow[];
+   roleFilterOptions: RoleFilterOption[];
+}
+
+export function UsersClient({ users, roleFilterOptions }: UsersClientProps) {
+   const [tab, setTab] = useState<UserSubscriptionViewTab>("all");
+   const [roleFilter, setRoleFilter] = useState<string>("all");
+   const [nameQuery, setNameQuery] = useState<string>("");
+   const [sortDir, setSortDir] = useState<SortDir>("asc");
+
+   const filtered = useMemo(() => {
+      const query = nameQuery.trim().toLowerCase();
+
+      return users
+         .filter((u) => {
+            if (!query) return true;
+            return `${u.firstName} ${u.lastName}`.toLowerCase().includes(query);
+         })
+         .filter((u) => {
+            if (tab === "all") return true;
+            if (tab === "active") return u.isActive;
+            return !u.isActive;
+         })
+         .filter((u) => {
+            if (roleFilter === "all") return true;
+            return u.role === roleFilter;
+         })
+         .sort((a, b) => {
+            const nameA = `${a.firstName} ${a.lastName}`.toLowerCase();
+            const nameB = `${b.firstName} ${b.lastName}`.toLowerCase();
+            return sortDir === "asc"
+               ? nameA.localeCompare(nameB)
+               : nameB.localeCompare(nameA);
+         });
+   }, [users, nameQuery, tab, roleFilter, sortDir]);
+
+   return (
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+         <Tabs
+            value={tab}
+            onValueChange={(v) => setTab(v as UserSubscriptionViewTab)}
+            className="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden"
+         >
+         <div className="flex w-full min-w-0 shrink-0 flex-wrap items-center justify-between gap-x-3 gap-y-2">
+            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2 sm:gap-3">
+               <div className="relative p-0.5 min-w-[min(100%,10rem)] max-w-full grow sm:max-w-xs sm:grow-0 sm:basis-56">
+                  <Search className="absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+                  <Input
+                     id="users-search"
+                     placeholder="Search by name..."
+                     value={nameQuery}
+                     onChange={(e) => setNameQuery(e.target.value)}
+                     className="w-full min-w-0 pl-9"
+                  />
+               </div>
+
+               <TabsList className="h-auto min-h-8 max-w-full min-w-0 flex-wrap justify-start border border-border">
+                  {USER_SUBSCRIPTION_VIEW_TABS.map(({ value, label }) => (
+                     <TabsTrigger key={value} value={value}>
+                        {label}
+                     </TabsTrigger>
+                  ))}
+               </TabsList>
+            </div>
+
+            <div className="flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-2">
+               <Select value={roleFilter} onValueChange={setRoleFilter}>
+                  <SelectTrigger
+                     id="users-role-filter"
+                     className="w-[min(100%,11rem)] min-w-[8.5rem] sm:w-[140px]"
+                  >
+                     <SelectValue placeholder="All Roles" />
+                  </SelectTrigger>
+                  <SelectContent>
+                     {roleFilterOptions.map(({ value, label }) => (
+                        <SelectItem key={value} value={value}>
+                           {label}
+                        </SelectItem>
+                     ))}
+                  </SelectContent>
+               </Select>
+
+               <Button
+                  id="users-sort-toggle"
+                  variant="outline"
+                  size="icon"
+                  className="shrink-0"
+                  onClick={() =>
+                     setSortDir((prev) => (prev === "asc" ? "desc" : "asc"))
+                  }
+                  aria-label={
+                     sortDir === "asc" ? "Sort Z to A" : "Sort A to Z"
+                  }
+               >
+                  {sortDir === "asc" ? (
+                     <ArrowDownAZ className="h-4 w-4" />
+                  ) : (
+                     <ArrowUpZA className="h-4 w-4" />
+                  )}
+               </Button>
+            </div>
+         </div>
+
+         <TabsContent
+            value={tab} 
+            className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden focus-visible:outline-none"
+         >
+            <UsersDataTable
+               columns={usersColumns}
+               data={filtered}
+               emptyMessage="No users match the current filters."
+               rowLabel={(n) => `${n} user${n === 1 ? "" : "s"}`}
+            />
+         </TabsContent>
+      </Tabs>
+      </div>
+   );
+}

app/(authenticated)/users/_components/users-columns.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { Pencil, Tag } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { profileRoleLabel, type UserRow } from "../profile-role-label";
+
+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>
+   );
+}
+
+export const usersColumns: ColumnDef<UserRow>[] = [
+   {
+      id: "profile",
+      header: "User Profile",
+      meta: {
+         colWidth: "32%",
+         tdClassName: "whitespace-normal align-middle",
+      },
+      cell: ({ row }) => {
+         const u = row.original;
+         const fullName = `${u.firstName} ${u.lastName}`;
+         const email = `${u.firstName.toLowerCase()}.${u.lastName.toLowerCase()}@mcld.ca`;
+         return (
+            <div className="flex min-w-0 max-w-full items-center gap-2 sm:gap-3">
+               <AvatarCircle name={fullName} />
+               <div className="flex min-w-0 flex-1 flex-col">
+                  <span className="truncate font-semibold text-sm">
+                     {fullName}
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                     {email}
+                  </span>
+               </div>
+            </div>
+         );
+      },
+   },
+   {
+      accessorKey: "role",
+      header: "Role",
+      meta: { colWidth: "14%" },
+      cell: ({ row }) => (
+         <span className="inline-flex max-w-full min-w-0 items-center rounded-full border border-border px-2 py-0.5 text-xs font-medium capitalize text-foreground">
+            <span className="truncate">
+               {profileRoleLabel(row.original.role)}
+            </span>
+         </span>
+      ),
+   },
+   {
+      id: "status",
+      header: "Status",
+      meta: { colWidth: "14%" },
+      cell: ({ row }) => {
+         const active = row.original.isActive;
+         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>
+         );
+      },
+   },
+   {
+      id: "lastLoginAt",
+      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.lastLoginAt || "Never Logged in" ))} 
+         </span>
+      ),
+   },
+   {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      meta: {
+         colWidth: "22%",
+         thClassName: "text-right",
+         tdClassName: "text-right",
+      },
+      cell: () => (
+         <div className="flex items-center justify-end gap-0.5">
+            <Tooltip>
+               <TooltipTrigger asChild>
+                  <Button
+                     variant="ghost"
+                     size="icon-sm"
+                     aria-label="Edit user"
+                     disabled
+                  >
+                     <Pencil />
+                  </Button>
+               </TooltipTrigger>
+               <TooltipContent>Edit (coming soon)</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+               <TooltipTrigger asChild>
+                  <Button
+                     variant="ghost"
+                     size="icon-sm"
+                     aria-label="Give discount"
+                     disabled
+                  >
+                     <Tag />
+                  </Button>
+               </TooltipTrigger>
+               <TooltipContent>Give coupon (coming soon)</TooltipContent>
+            </Tooltip>
+         </div>
+      ),
+   },
+];