feat/implement last login user

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
@@ -39,6 +40,7 @@
     "@react-email/components": "0.0.21",
     "@react-email/tailwind": "^0.0.18",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tanstack/react-table": "^8.20.1",
     "@types/jest-axe": "^3.5.9",
     "axios": "^1.7.3",
     "class-variance-authority": "^0.7.0",

src/actions/user.ts

@@ -0,0 +1,39 @@
+"use server";
+
+import axios from "axios";
+
+import { auth } from "~/lib/auth";
+import { getApiUrl } from "./getApiUrl";
+
+export const fetchUserData = async () => {
+  try {
+    const apiUrl = await getApiUrl();
+    const session = await auth();
+
+    if (!session?.access_token) {
+      return {
+        error: "Authentication token is missing.",
+        status: 401,
+      };
+    }
+
+    // Making the API request
+    const response = await axios.get(`${apiUrl}/api/last-login`, {
+      headers: {
+        Authorization: `Bearer ${session.access_token}`,
+      },
+    });
+
+    return {
+      data: response.data,
+      status: response.status,
+    };
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response) {
+      return {
+        error: error.response.data.message || "Unable to fetch user data.",
+        status: error.response.status,
+      };
+    }
+  }
+};

src/app/dashboard/(user-dashboard)/_components/UserTable/page.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { CaretSortIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import Image from "next/image";
+import * as React from "react";
+
+import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+
+interface MemberDetailsProperties {
+  data: UserLoginData[];
+}
+export type UserLoginData = {
+  id: string;
+  ipAddress: string;
+  loginTime: string;
+  logoutTime: string | null;
+  role: string;
+  name: string;
+  email: string;
+  img: string;
+};
+
+const columns: ColumnDef<UserLoginData>[] = [
+  {
+    accessorKey: "id",
+    header: "ID",
+    cell: ({ row }) => <div>{row.getValue("id")}</div>,
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        className=""
+      >
+        Name
+      </Button>
+    ),
+    cell: ({ row }) => {
+      const avatarUrl = row.getValue("img") as string;
+      return (
+        <div className="flex">
+          <Image
+            src={avatarUrl}
+            alt="Avatar"
+            width={30}
+            height={30}
+            className="h-8 w-8 rounded-full"
+          />
+          <div className="ml-2">
+            <div className="text-[#353535]">{row.getValue("name")}</div>
+            <div className="text-[#6e7079]">{row.getValue("email")}</div>
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "email",
+    enableHiding: false,
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          <CaretSortIcon className="ml-2 hidden h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => (
+      <div className="hidden text-[#6e7079]"> {row.getValue("email")}</div>
+    ),
+  },
+  {
+    accessorKey: "role",
+    header: "Role",
+    cell: ({ row }) => <div>{row.getValue("role")}</div>,
+  },
+  {
+    accessorKey: "ipAddress",
+    header: "IP Address",
+    cell: ({ row }) => <div>{row.getValue("ipAddress")}</div>,
+  },
+  {
+    accessorKey: "loginTime",
+    header: "Login Time",
+    cell: ({ row }) => <div>{row.getValue("loginTime")}</div>,
+  },
+  {
+    accessorKey: "logoutTime",
+    header: "Logout Time",
+    cell: ({ row }) => (
+      <div>{row.getValue("logoutTime") || "Still Logged In"}</div>
+    ),
+  },
+  {
+    id: "actions",
+    header: "Actions",
+    cell: () => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <DotsHorizontalIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+];
+
+export function UserTable({ data }: MemberDetailsProperties) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4"></div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id} className="font-bold text-black">
+                    {header.isPlaceholder
+                      ? undefined
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

src/app/dashboard/(user-dashboard)/_components/layout/navbar/navlinks.tsx

@@ -21,6 +21,11 @@ const links = [
     link: "/dashboard/products",
     id: "products",
   },
+  {
+    route: "Users",
+    link: "/dashboard/users",
+    id: "Users",
+  },
 ];
 
 type NavlinksProperties = {