Moving files and rename some of them.

src/components/wrappers/dashboard/settings/SettingsTabs/SettingsTabs.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
+import {DataTableWithPagination} from "@/components/wrappers/common/table/data-table-with-pagination";
+import {usersColumns} from "@/components/wrappers/dashboard/settings/SettingsUsersTab/columns-users";
+import {User, Settings} from "@prisma/client";
+import {backupColumns} from "@/features/backup/columns";
+import {SettingsEmailTab} from "@/components/wrappers/dashboard/admin/AdminEmailTab/SettingsEmailTab";
+import {SettingsStorageTab} from "@/components/wrappers/dashboard/admin/AdminStorageTab/SettingsStorageTab";
+import {SettingsUsersTab} from "@/components/wrappers/dashboard/settings/SettingsUsersTab/SettingsUsersTab";
+
+
+export type SettingsTabsProps = {
+    currentUser: User;
+    users: User[];
+    settings: Settings;
+}
+
+export const SettingsTabs = (props: SettingsTabsProps) => {
+
+    const {currentUser, users} = props;
+
+    return (
+
+        // <Tabs defaultValue="informations" >
+        //     <TabsList className="w-full">
+        //         <TabsTrigger className="w-full " value="informations">Info</TabsTrigger>
+        //         <TabsTrigger className="w-full " value="users">Users</TabsTrigger>
+        //         <TabsTrigger className="w-full " value="email">Email</TabsTrigger>
+        //         <TabsTrigger className="w-full " value="storage">Storage</TabsTrigger>
+        //     </TabsList>
+        //     <TabsContent value="informations">
+        //         <div className="flex flex-1 flex-col gap-4 py-4">
+        //             <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        //                 <div className="aspect-video rounded-xl bg-muted/50"/>
+        //                 <div className="aspect-video rounded-xl bg-muted/50"/>
+        //                 <div className="aspect-video rounded-xl bg-muted/50"/>
+        //             </div>
+        //             <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
+        //         </div>
+        //     </TabsContent>
+        //     <TabsContent value="users" >
+        <SettingsUsersTab currentUser={currentUser} users={users}/>
+        //     </TabsContent>
+        //     <TabsContent value="email">
+        //         <SettingsEmailTab settings={props.settings}/>
+        //     </TabsContent>
+        //     <TabsContent value="storage">
+        //         <SettingsStorageTab settings={props.settings}/>
+        //     </TabsContent>
+        // </Tabs>
+
+    )
+}

src/components/wrappers/dashboard/settings/SettingsUsersTab/SettingsUsersTab.tsx

@@ -0,0 +1,31 @@
+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 {UsersDataTable} from "@/components/wrappers/dashboard/admin/admin-user-table";
+
+
+export type SettingsUsersTabProps = {
+    currentUser: User;
+    users: User[]
+}
+
+export const SettingsUsersTab = (props: SettingsUsersTabProps) => {
+
+    const {currentUser, users} = props;
+
+    return (
+        <div className="flex flex-col h-full  py-4">
+            <div className="flex gap-4 h-fit justify-between">
+                <h1>List of organization's users</h1>
+            </div>
+            <div className="mt-5">
+                <DataTableWithPagination
+                    columns={usersColumns}
+                    data={users}
+                    DataTable={UsersDataTable}
+                    dataTableProps={{currentUser}}
+                />
+            </div>
+        </div>
+    )
+}

src/components/wrappers/dashboard/settings/SettingsUsersTab/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/ButtonWithLoading/ButtonWithLoading";
+
+export const usersColumns: 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: "createdAt",
+        header: "Created At",
+        cell: ({row}) => {
+            return new Date(row.getValue("createdAt")).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>
+            );
+        },
+    },
+]

src/components/wrappers/dashboard/settings/SettingsUsersTab/settings-user-tab.action.ts

@@ -0,0 +1,2 @@
+
+