feat: Add project and user cards, implement settings and list view components, and update dependencies

tasker-client/src/app/users/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { useGetUsersQuery } from "@/state/api";
+import { useAppSelector } from "@/app/redux";
+import React from "react";
+import Header from "@/app/components/Header";
+import {
+  DataGrid,
+  GridColDef,
+  GridToolbarContainer,
+  GridToolbarExport,
+  GridToolbarFilterButton,
+} from "@mui/x-data-grid";
+import Image from "next/image";
+import { dataGridSxStyles } from "@/lib/utils";
+
+const CustomToolbar = () => (
+  <GridToolbarContainer className="toolbar flex gap-2">
+    <GridToolbarFilterButton />
+    <GridToolbarExport />
+  </GridToolbarContainer>
+);
+
+const columns: GridColDef[] = [
+  { field: "userId", headerName: "ID", width: 100 },
+  { field: "username", headerName: "Username", width: 150 },
+  {
+    field: "profilePictureUrl",
+    headerName: "Profile Picture",
+    width: 100,
+    renderCell: (params) => (
+      <div className="flex h-full w-full items-center justify-center">
+        <div className="h-9 w-9">
+          <Image
+            src={`${params.value}`}
+            alt={params.row.username}
+            width={100}
+            height={50}
+            className="h-full rounded-full object-cover"
+          />
+        </div>
+      </div>
+    ),
+  },
+];
+
+const Users = () => {
+  const { data: users, isLoading, isError } = useGetUsersQuery();
+  const isDarkMode = useAppSelector((state) => state.global.isDarkMode);
+
+  if (isLoading) return <div>Loading...</div>;
+  if (isError || !users) return <div>Error fetching users</div>;
+
+  return (
+    <div className="flex w-full flex-col p-8">
+      <Header name="Users" />
+      <div style={{ height: 650, width: "100%" }}>
+        <DataGrid
+          rows={users || []}
+          columns={columns}
+          getRowId={(row) => row.userId}
+          pagination
+          slots={{
+            toolbar: CustomToolbar,
+          }}
+          className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
+          sx={dataGridSxStyles(isDarkMode)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Users;