Working on add/delete users to workspace. Edit workspaces and some permissions.

src/components/wrappers/dashboard/admin/admin-user-table.tsx

@@ -2,9 +2,9 @@ import {flexRender, Row, RowData} from "@tanstack/react-table";
 
 import {User} from "@prisma/client";
 import {DataTableWithPagination} from "@/components/wrappers/common/table/data-table-with-pagination";
-import {usersColumns} from "@/components/wrappers/dashboard/settings/SettingsUsersTab/columns-users";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {cn} from "@/lib/utils";
+import {usersColumnsAdmin} from "@/components/wrappers/dashboard/admin/columns-users";
 
 export type AdminUsersTableProps = {
     currentUser: User;
@@ -14,7 +14,6 @@ export type AdminUsersTableProps = {
 export const AdminUsersTable = (props: AdminUsersTableProps) => {
 
     const {currentUser, users} = props;
-
     return (
         <div className="flex flex-col h-full  py-4">
             <div className="flex gap-4 h-fit justify-between">
@@ -22,7 +21,7 @@ export const AdminUsersTable = (props: AdminUsersTableProps) => {
             </div>
             <div className="mt-5">
                 <DataTableWithPagination
-                    columns={usersColumns}
+                    columns={usersColumnsAdmin}
                     data={users}
                     DataTable={UsersDataTable}
                     dataTableProps={{currentUser}}

src/components/wrappers/dashboard/admin/columns-users.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import {ColumnDef} from "@tanstack/react-table"
+import {Badge} from "@/components/ui/badge";
+import {User} from "@prisma/client";
+import {updateUserAction} from "@/components/wrappers/dashboard/profile/UserForm/user-form.action";
+import {useMutation} from "@tanstack/react-query";
+import {toast} from "sonner";
+import {useRouter} from "next/navigation";
+import {useState} from "react";
+import {Trash2} from "lucide-react";
+import {deleteUserAction} from "@/components/wrappers/dashboard/profile/ButtonDeleteAccount/delete-account.action";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+
+export const usersColumnsAdmin: ColumnDef<User>[] = [
+    {
+        accessorKey: "role",
+        header: "Role",
+        cell: ({row}) => {
+            const router = useRouter();
+            const [role, setRole] = useState<string>(row.getValue("role"))
+
+            const updateMutation = useMutation({
+                mutationFn: () => updateUserAction({id: row.original.id, data: {role: role}}),
+                onSuccess: () => {
+                    toast.success(`User updated successfully.`);
+                    router.refresh()
+
+                },
+                onError: () => {
+                    toast.error(`An error occurred while updating user information.`);
+                },
+            });
+
+            const handleUpdateRole = async () => {
+                const nextRole = role === "admin" ? "pending"
+                    : role === "pending" ? "user"
+                        : "admin";
+                setRole(nextRole);
+                await updateMutation.mutateAsync()
+            };
+
+            return <Badge
+                className="cursor-pointer"
+                onClick={() => handleUpdateRole()}
+                variant="outline">{role}</Badge>
+        },
+    },
+    {
+        accessorKey: "name",
+        header: "Name"
+    },
+    {
+        accessorKey: "email",
+        header: "Email"
+    },
+    {
+        accessorKey: "updatedAt",
+        header: "Updated At",
+        cell: ({row}) => {
+            return new Date(row.getValue("updatedAt")).toLocaleString("fr-FR");
+        },
+    },
+    {
+        accessorKey: "authMethod",
+        header: "Method",
+        cell: ({row}) => {
+            return <Badge variant="outline">{row.getValue("authMethod")}</Badge>
+        },
+    },
+    {
+        header: "Action",
+        id: "actions",
+        cell: ({ row, table }) => {
+
+            const router = useRouter();
+            const mutation = useMutation({
+                mutationFn: () => deleteUserAction(row.original.id),
+                onSuccess: async () => {
+                   toast.success('User deleted successfully.');
+                   router.refresh()
+                },
+            })
+
+
+            return (
+                <div className="flex items-center gap-2">
+                    <ButtonWithLoading
+                        variant="outline"
+                        text=""
+                        icon={<Trash2 color="red" size={15} />}
+                        onClick={async () => {
+                            await mutation.mutateAsync();
+                        }}
+                        size="icon"
+                    />
+
+                </div>
+            );
+        },
+    },
+]