Refactoring user Page in admin panel.

2026-07-14 11:16:13 +02:00 · 2025-12-30 13:38:01 +01:00
parent 8e3eb32631
commit c18a9da0d3
31 changed files with 1032 additions and 252 deletions
@@ -0,0 +1,42 @@
+import * as React from "react";
+import EmailLayout from "./email-layout";
+import {Heading, Text, Section, Button} from "@react-email/components";
+import {getServerUrl} from "@/utils/get-server-url";
+import {env} from "@/env.mjs";
+
+interface EmailCreateUserProps {
+    email: string;
+    password: string;
+}
+
+export const EmailCreateUser = ({email, password}: EmailCreateUserProps) => {
+    const baseUrl = getServerUrl();
+
+
+    return (
+        <EmailLayout preview="Portabase Dashboard">
+            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
+                Your account on {env.PROJECT_NAME} has just been created!
+            </Heading>
+
+            <Text className="text-[14px] text-black leading-[24px]">
+                <strong>Email: </strong>{email}
+            </Text>
+
+            <Text className="text-[14px] text-black leading-[24px]">
+                <strong>Default password: </strong>{password}
+            </Text>
+
+            <Section className="mt-[32px] mb-[32px] text-center">
+                <Button
+                    className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
+                    href={baseUrl}
+                >
+                    Sign in
+                </Button>
+            </Section>
+        </EmailLayout>
+    );
+};
+
+export default EmailCreateUser;
@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Organization } from "@/db/schema/03_organization";
+import {AdminUserForm} from "@/components/wrappers/dashboard/admin/users/admin-user-form";
+
+type AdminUserAddModalProps = {
+    organizations: Organization[];
+};
+
+export const AdminUserAddModal = ({ organizations }: AdminUserAddModalProps) => {
+
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button>
+                    <Plus /> Create a user
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Create a new user</DialogTitle>
+                    <DialogDescription>To create a new user please provide following informations</DialogDescription>
+                        <AdminUserForm organizations={organizations} onSuccess={() => setOpen(false)} />
+                </DialogHeader>
+            </DialogContent>
+        </Dialog>
+    );
+};
@@ -0,0 +1,65 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { User } from "@/db/schema/02_user";
+import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { requestPasswordReset } from "@/lib/auth/auth-client";
+import { toast } from "sonner";
+
+type AdminUserChangePasswordProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminUserChangePassword = ({ user, open, onOpenChange }: AdminUserChangePasswordProps) => {
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            await requestPasswordReset(
+                {
+                    email: user.email,
+
+                },
+                {
+                    onSuccess: () => {
+                        toast.success("Reset password request successfully sent!");
+                        onOpenChange(false);
+                    },
+                    onError: (error) => {
+                        toast.error(error.error.message);
+                    },
+                }
+            );
+        },
+        onError: (error) => {
+            toast.error(error.message);
+        },
+    });
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Change {user.name}'s password</AlertDialogTitle>
+                    <AlertDialogDescription>This action will send an email to the user to reset their password.</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <ButtonWithLoading onClick={async () => await mutation.mutateAsync()} isPending={mutation.isPending}>
+                        Validate
+                    </ButtonWithLoading>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { authClient } from "@/lib/auth/auth-client";
+import { User } from "@/db/schema/02_user";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
+
+type AdminUserChangeRoleModalProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminUserChangeRoleModal = (props: AdminUserChangeRoleModalProps) => {
+
+
+    const { user, open, onOpenChange } = props;
+    const router = useRouter();
+    const [role, setRole] = useState<string | null>(user.role);
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            await authClient.admin.setRole(
+                {
+                    userId: user.id,
+                    // @ts-ignore
+                    role: role,
+                },
+                {
+                    onSuccess: async (response) => {
+                        toast.success("User role changed successfully.");
+                        onOpenChange(false);
+                        router.refresh();
+                    },
+                    onError: async (error) => {
+                        console.error("AdminUserChangeRoleModal - setRole", error);
+                        toast.error("An error occurred while updating user roles.");
+                        onOpenChange(false);
+                    },
+                }
+            );
+        },
+    });
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Change the user's role</DialogTitle>
+                    <DialogDescription>Modify this user's role within your organization.</DialogDescription>
+                </DialogHeader>
+                <Select defaultValue={user.role ?? ""} onValueChange={setRole}>
+                    <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Sélectionnez un rôle" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="pending">Pending</SelectItem>
+                        <SelectItem value="user">User</SelectItem>
+                        <SelectItem value="admin">Admin</SelectItem>
+                    </SelectContent>
+                </Select>
+                <DialogFooter>
+                    <div className="flex gap-4 justify-end">
+                        <ButtonWithLoading
+                            variant="outline"
+                            onClick={() => {
+                                onOpenChange(false);
+                            }}
+                        >
+                            Cancel
+                        </ButtonWithLoading>
+                        <ButtonWithLoading
+                            isPending={mutation.isPending}
+                            onClick={async () => {
+                                await mutation.mutateAsync();
+                            }}
+                        >
+                            Validate
+                        </ButtonWithLoading>
+                    </div>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};
@@ -0,0 +1,75 @@
+"use client";
+
+import {useMutation} from "@tanstack/react-query";
+import {User} from "@/db/schema/02_user";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {useRouter} from "next/navigation";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {authClient} from "@/lib/auth/auth-client";
+import {toast} from "sonner";
+import {setSuperAdminOwnerOfOrganizationsOwnedByUser} from "@/components/wrappers/dashboard/admin/users/user.action";
+
+type AdminDeleteUserModalProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminDeleteUserModal = ({user, open, onOpenChange}: AdminDeleteUserModalProps) => {
+    const router = useRouter();
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            const res = await setSuperAdminOwnerOfOrganizationsOwnedByUser({userId: user.id});
+            const result = res?.data;
+            if (result?.success) {
+                await authClient.admin.removeUser(
+                    {
+                        userId: user.id,
+                    },
+                    {
+                        onSuccess: async (response) => {
+                            toast.success(`User ${user.name} successfully deleted`);
+                            onOpenChange(false);
+                            router.refresh();
+                        },
+                        onError: async (error) => {
+                            toast.error("An error has occurred while deleting user");
+                            onOpenChange(false);
+                        },
+                    }
+                );
+            } else {
+                toast.error("An error has occurred while deleting user");
+            }
+        },
+        onError: (error) => {
+            toast.error(error.message);
+        },
+    });
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Are you sure you want to delete {user.name} ?</AlertDialogTitle>
+                    <AlertDialogDescription>This action is irreversible: it will lead to the deletion of the user's
+                        data.</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <ButtonWithLoading
+                        onClick={async () => await mutation.mutateAsync()}>Confirm</ButtonWithLoading>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
@@ -0,0 +1,100 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
+import {Button} from "@/components/ui/button";
+import {UserEditSchema, UserEditType, UserSchema} from "@/components/wrappers/dashboard/admin/users/user.schema";
+import {updateUserAction} from "@/components/wrappers/dashboard/admin/users/user.action";
+type AdminUserEditFormProps = {
+    onSuccess?: () => void;
+    defaultValues: {
+        id: string;
+    } & UserEditType;
+};
+
+export const AdminUserEditForm = ({ onSuccess, defaultValues }: AdminUserEditFormProps) => {
+
+
+    const router = useRouter();
+    const form = useZodForm({
+        schema: defaultValues ? UserEditSchema : UserSchema,
+        defaultValues: {
+            name: defaultValues.name,
+            email: defaultValues.email,
+        },
+    });
+
+    const onCancel = () => {
+        form.reset();
+        onSuccess?.();
+    };
+
+    const mutation = useMutation({
+        mutationFn: async (data: UserEditType) => {
+            const result = await updateUserAction({
+                ...data,
+                id: defaultValues?.id || "",
+            });
+            console.log(result)
+            const inner = result?.data;
+            if (inner?.success) {
+                toast.success("User Successfully updated");
+                onSuccess?.();
+                router.refresh();
+            } else {
+                toast.error("An error occurred");
+                onSuccess?.();
+            }
+        },
+    });
+
+    return (
+        <Form
+            form={form}
+            className="flex flex-col gap-4"
+            onSubmit={async (values) => {
+                await mutation.mutateAsync(values);
+            }}
+        >
+            <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                    <FormItem>
+                        <FormLabel>Name</FormLabel>
+                        <FormControl>
+                            <Input placeholder="Enter a name" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+
+                name="email"
+                render={({ field }) => (
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                            <Input disabled placeholder="Fill user email" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+
+            <div className="flex gap-4 justify-end">
+                <Button type="button" variant="outline" onClick={onCancel}>
+                    Cancel
+                </Button>
+                <ButtonWithLoading type="submit" isPending={mutation.isPending}>Validate</ButtonWithLoading>
+            </div>
+        </Form>
+    );
+};
@@ -0,0 +1,43 @@
+"use client";
+
+import {User} from "@/db/schema/02_user";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from "@/components/ui/dialog";
+import {AdminUserEditForm} from "./admin-user-edit-form";
+
+type AdminUserEditPasswordProps = {
+    open: boolean;
+    user: User;
+    onOpenChange: (open: boolean) => void;
+};
+
+export const AdminUserEdit = ({user, open, onOpenChange}: AdminUserEditPasswordProps) => {
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Edit ${user.name}'s profile</DialogTitle>
+                    <DialogDescription>Update following information</DialogDescription>
+                </DialogHeader>
+                <DialogContent
+                    onOpenAutoFocus={(e) => e.preventDefault()}
+                >
+                    <AdminUserEditForm
+                        defaultValues={{
+                            name: user.name,
+                            email: user.email,
+                            id: user.id,
+                        }}
+                        onSuccess={() => onOpenChange(false)}
+                    />
+                </DialogContent>
+            </DialogContent>
+        </Dialog>
+    );
+};
@@ -0,0 +1,95 @@
+"use client";
+
+import {useRouter} from "next/navigation";
+import {useMutation} from "@tanstack/react-query";
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+import {Organization} from "@/db/schema/03_organization";
+import {Input} from "@/components/ui/input";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {Button} from "@/components/ui/button";
+import {UserSchema, UserType} from "@/components/wrappers/dashboard/admin/users/user.schema";
+import {toast} from "sonner";
+import {createUserAction} from "@/components/wrappers/dashboard/admin/users/user.action";
+
+type AdminUserFormProps = {
+    onSuccess?: () => void;
+    organizations: Organization[];
+};
+
+export const AdminUserForm = ({onSuccess, organizations}: AdminUserFormProps) => {
+
+
+    const router = useRouter();
+    const form = useZodForm({
+        schema: UserSchema,
+    });
+
+
+    const onCancel = () => {
+        form.reset();
+        onSuccess?.();
+    };
+
+    const mutation = useMutation({
+        mutationFn: async (data: UserType) => {
+            const result = await createUserAction(data);
+            const inner = result?.data;
+            if (inner?.success) {
+                toast.success("User Successfully created");
+                onSuccess?.();
+                router.refresh();
+            } else {
+                toast.error("An error occurred");
+                onSuccess?.();
+            }
+        },
+    });
+
+    return (
+        <Form
+            form={form}
+            className="flex flex-col gap-4"
+            onSubmit={async (values) => {
+                await mutation.mutateAsync(values);
+            }}
+        >
+            <FormField
+                control={form.control}
+                name="name"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Name</FormLabel>
+                        <FormControl>
+                            <Input placeholder="Enter a name" {...field} value={field.value ?? ""}/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+            <FormField
+                control={form.control}
+                name="email"
+                render={({field}) => (
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                            <Input placeholder="Fill user email" {...field} value={field.value ?? ""}/>
+                        </FormControl>
+                        <FormMessage/>
+                    </FormItem>
+                )}
+            />
+
+
+            <div className="flex gap-4 justify-end">
+                <Button type="button" variant="outline" onClick={onCancel}>
+                    Cancel
+                </Button>
+                <ButtonWithLoading type="submit" isPending={mutation.isPending}>
+                    Validate
+                </ButtonWithLoading>
+            </div>
+        </Form>
+    );
+};
@@ -0,0 +1,12 @@
+"use client";
+import { DataTable } from "@/components/wrappers/common/table/data-table";
+import {usersListColumns} from "@/components/wrappers/dashboard/admin/users/table-colums";
+import {User} from "@/db/schema/02_user";
+
+type AdminUserListProps = {
+    users: User[];
+};
+
+export const AdminUserList = ({ users }: AdminUserListProps) => {
+    return <DataTable columns={usersListColumns()} data={users} enablePagination={true} enableSelect={false} />;
+};
@@ -0,0 +1,91 @@
+import {ColumnDef} from "@tanstack/react-table";
+import {User} from "@/db/schema/02_user";
+import {Badge} from "@/components/ui/badge";
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
+import {formatLocalizedDate, timeAgo} from "@/utils/date-formatting";
+import {Tooltip, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
+import {TooltipContent} from "@radix-ui/react-tooltip";
+import {Info} from "lucide-react";
+import {Table, TableBody, TableCell, TableRow} from "@/components/ui/table";
+import {UserActionsCell} from "@/components/wrappers/dashboard/admin/users/user-actions-cell";
+
+export function usersListColumns(): ColumnDef<User>[] {
+
+    return [
+        {
+            accessorKey: "name",
+            header: "Profile",
+            cell: ({row}) => {
+
+                return (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger>
+                                <div className="flex flex-row items-center gap-x-2">
+                                    <Avatar>
+                                        <AvatarImage src={row.original.image ?? ""} alt={row.original.name}/>
+                                        <AvatarFallback>
+                                            {row.original.name
+                                                .split(" ")
+                                                .map((n) => n[0])
+                                                .join("")}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <div className="flex flex-row items-center gap-x-2">
+                                        <div className="font-medium">{row.original.name}</div>
+                                        <Info size={16} aria-hidden="true" className="text-muted-foreground"/>
+                                    </div>
+                                </div>
+                            </TooltipTrigger>
+                            <TooltipContent className="bg-background shadow-lg border border-border z-20 rounded-md"
+                                            side="bottom">
+                                <Table>
+                                    <TableBody>
+                                        <TableRow>
+                                            <TableCell>Joined</TableCell>
+                                            <TableCell
+                                                className="text-right text-muted-foreground">{formatLocalizedDate(row.original.createdAt)}</TableCell>
+                                        </TableRow>
+                                        {/*{row.original.lastConnectedAt && (*/}
+                                        {/*    <TableRow>*/}
+                                        {/*        <TableCell>Last connected</TableCell>*/}
+                                        {/*        <TableCell className="text-right text-muted-foreground">*/}
+                                        {/*            {formatLocalizedDate(row.original.lastConnectedAt)} ({timeAgo(row.original.lastConnectedAt, locale)})*/}
+                                        {/*        </TableCell>*/}
+                                        {/*    </TableRow>*/}
+                                        {/*)}*/}
+                                        {row.original.lastChangedPasswordAt && (
+                                            <TableRow>
+                                                <TableCell>Last password change</TableCell>
+                                                <TableCell className="text-right text-muted-foreground">
+                                                    {formatLocalizedDate(row.original.lastChangedPasswordAt)} ({timeAgo(row.original.lastChangedPasswordAt)})
+                                                </TableCell>
+                                            </TableRow>
+                                        )}
+                                    </TableBody>
+                                </Table>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                );
+            },
+        },
+        {
+            accessorKey: "email",
+            header: "Email",
+        },
+        {
+            accessorKey: "role",
+            header: "Role",
+            cell: ({row}) => {
+                const role = row.original.role!;
+                return <Badge>{role}</Badge>;
+            },
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({row}) => <UserActionsCell user={row.original}/>,
+        },
+    ];
+}
@@ -0,0 +1,78 @@
+"use client";
+
+import {useState} from "react";
+import {Button} from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import {MoreHorizontal, Settings, Trash2, RotateCcwKey, UserCog} from "lucide-react";
+import {authClient} from "@/lib/auth/auth-client";
+import {cn} from "@/lib/utils";
+import {User} from "@/db/schema/02_user";
+import {AdminUserChangePassword} from "./admin-user-change-password-modal";
+import {AdminUserEdit} from "./admin-user-edit-modal";
+import {AdminUserChangeRoleModal} from "@/components/wrappers/dashboard/admin/users/admin-user-change-role-modal";
+import {AdminDeleteUserModal} from "@/components/wrappers/dashboard/admin/users/admin-user-delete-modal";
+
+interface UserActionsCellProps {
+    user: User;
+}
+
+export function UserActionsCell({user}: UserActionsCellProps) {
+
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isModalChangePasswordOpen, setIsModalChangePasswordOpen] = useState(false);
+    const [isModalEditUserOpen, setIsModalEditUserOpen] = useState(false);
+    const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
+    const {data: session, isPending, error} = authClient.useSession();
+    if (isPending || error) return null;
+    const isCurrentUser = session?.user?.id === user.id;
+    const isSuperAdmin = session?.user?.role === "superadmin";
+
+    if (isCurrentUser || user.role === "superadmin") return null;
+
+    return (
+        <>
+            <AdminUserChangeRoleModal user={user} open={isModalOpen} onOpenChange={setIsModalOpen}/>
+            <AdminDeleteUserModal user={user} open={isModalDeleteOpen} onOpenChange={setIsModalDeleteOpen}/>
+            <AdminUserChangePassword user={user} open={isModalChangePasswordOpen}
+                                     onOpenChange={setIsModalChangePasswordOpen}/>
+            <AdminUserEdit user={user} open={isModalEditUserOpen} onOpenChange={setIsModalEditUserOpen}/>
+            <div className={cn("flex items-center space-x-2")}>
+                <Button variant="outline" size="icon" onClick={() => setIsModalChangePasswordOpen(true)}>
+                    <RotateCcwKey className="w-4 h-4"/>
+                </Button>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <MoreHorizontal className="w-4 h-4"/>
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem onSelect={() => setIsModalOpen(true)}>
+                            <Settings className="w-4 h-4 mr-2"/>
+                            Role
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onSelect={() => setIsModalEditUserOpen(true)}>
+                            <UserCog className="w-4 h-4 mr-2"/>
+                            Edit User
+                        </DropdownMenuItem>
+                        {isSuperAdmin && (
+                            <>
+                                <DropdownMenuSeparator/>
+                                <DropdownMenuItem onSelect={() => setIsModalDeleteOpen(true)} className="text-red-600">
+                                    <Trash2 className="w-4 h-4 mr-2"/>
+                                    Delete
+                                </DropdownMenuItem>
+                            </>
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </>
+    );
+}
@@ -0,0 +1,191 @@
+"use server";
+
+import * as drizzleDb from "@/db";
+import {ServerActionResult} from "@/types/action-type";
+import {render} from "@react-email/render";
+import {UserSchema} from "@/components/wrappers/dashboard/admin/users/user.schema";
+import {extractNameFromEmail} from "@/utils/name-from-email";
+import {generateValidPassword} from "@/utils/password";
+import {auth} from "@/lib/auth/auth";
+import {z} from "zod";
+import {Organization} from "@/db/schema/03_organization";
+import {db} from "@/db";
+import {and, eq} from "drizzle-orm";
+
+import {zEmail, zString} from "@/lib/zod";
+import {withUpdatedAt} from "@/db/utils";
+import {userAction} from "@/lib/safe-actions/actions";
+import {
+    addMemberOrganizationAction
+} from "@/components/wrappers/dashboard/admin/organizations/organization/details/add-member.action";
+import {sendEmail} from "@/lib/email/email-helper";
+import EmailCreateUser from "@/components/emails/email-create-user";
+import {SignUpUser} from "@/types/auth";
+import {createUserDb} from "@/db/services/user";
+import {User} from "@/db/schema/02_user";
+
+export const createUserAction = userAction.schema(UserSchema).action(async ({parsedInput}): Promise<ServerActionResult<User>> => {
+    try {
+        const password = generateValidPassword();
+
+        const userData: SignUpUser = {
+            name: parsedInput.name || extractNameFromEmail(parsedInput.email),
+            email: parsedInput.email,
+            password: password,
+            theme: "dark",
+            role: "user",
+        };
+
+        const newUser = await createUserDb(userData);
+
+        if (newUser) {
+
+            await sendEmail({
+                to: parsedInput.email,
+                subject: "Your account is created",
+                html: await render(EmailCreateUser({
+                    password: password,
+                    email: parsedInput.email,
+                })),
+            });
+
+            const defaultOrganization = await db.query.organization.findFirst({
+                where: eq(drizzleDb.schemas.organization.slug, "default"),
+            });
+
+            if (defaultOrganization) {
+                await auth.api.addMember({
+                    body: {
+                        userId: newUser.id,
+                        organizationId: defaultOrganization.id,
+                        role: "admin",
+                    },
+                });
+            }
+
+            return {
+                success: true,
+                value: newUser,
+                actionSuccess: {
+                    message: "user_created",
+                },
+            };
+        }
+        return {
+            success: false,
+            actionError: {
+                message: "user_created",
+                cause: "Unknown error",
+            },
+        };
+    } catch (error) {
+        return {
+            success: false,
+            actionError: {
+                message: "user_created",
+                cause: error instanceof Error ? error.message : "Unknown error",
+            },
+        };
+    }
+});
+
+export const updateUserAction = userAction
+    .schema(
+        z.object({
+            id: zString(),
+            name: zString().optional(),
+            email: zEmail(),
+        })
+    )
+    .action(async ({parsedInput, ctx}): Promise<ServerActionResult<{}>> => {
+        try {
+
+
+            const [updatedUser] = await db.update(drizzleDb.schemas.user).set(withUpdatedAt({
+                name: parsedInput.name ? parsedInput.name : extractNameFromEmail(parsedInput.email),
+                email: parsedInput.email,
+                emailVerified: false
+            })).where(eq(drizzleDb.schemas.user.id, parsedInput.id)).returning();
+
+
+            if (updatedUser) {
+                return {
+                    success: true,
+                    actionSuccess: {
+                        message: "user_updated",
+                    },
+                };
+            }
+
+            return {
+                success: false,
+                actionError: {
+                    message: "user_updated",
+                    cause: "Unknown error",
+                },
+            };
+        } catch (error) {
+            return {
+                success: false,
+                actionError: {
+                    message: "user_updated",
+                    cause: error instanceof Error ? error.message : "Unknown error",
+                },
+            };
+        }
+    });
+
+export const setSuperAdminOwnerOfOrganizationsOwnedByUser = userAction
+    .schema(
+        z.object({
+            userId: z.string(),
+        })
+    )
+    .action(async ({parsedInput}): Promise<ServerActionResult<Organization[]>> => {
+        try {
+            const organizationsWhereUserIsMemberAndOwner = await db.query.member.findMany({
+                where: and(eq(drizzleDb.schemas.member.role, "owner"), eq(drizzleDb.schemas.member.userId, parsedInput.userId)),
+                with: {
+                    organization: true,
+                },
+            });
+
+            const superAdminUser = await db.query.user.findFirst();
+            if (!superAdminUser) {
+                return {
+                    success: false,
+                    actionError: {
+                        message: "set_super_admin_owner_of_organizations_owned_by_user",
+                        cause: "Unknown error",
+                    },
+                };
+            }
+
+            for (let {organization} of organizationsWhereUserIsMemberAndOwner) {
+                await addMemberOrganizationAction({
+                    userId: superAdminUser.id,
+                    organizationId: organization.id,
+                    role: "owner",
+                });
+            }
+            const organizations = organizationsWhereUserIsMemberAndOwner.map(
+                (organizationWhereUserIsMemberAndOwner) => organizationWhereUserIsMemberAndOwner.organization
+            );
+
+            return {
+                success: true,
+                value: organizations as unknown as Organization[],
+                actionSuccess: {
+                    message: "set_super_admin_owner_of_organizations_owned_by_user",
+                },
+            };
+        } catch (error) {
+            return {
+                success: false,
+                actionError: {
+                    message: "error_set_super_admin_owner_of_organizations_owned_by_user",
+                    cause: error instanceof Error ? error.message : "Unknown error",
+                },
+            };
+        }
+    });
@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { zEmail, zString } from "@/lib/zod";
+
+export const UserSchema = z.object({
+    email: zEmail(),
+    name: zString(),
+});
+
+export type UserType = z.infer<typeof UserSchema>;
+
+export const UserEditSchema = z.object({
+    email: zEmail(),
+    name: zString(),
+});
+
+export type UserEditType = z.infer<typeof UserEditSchema>;
@@ -4,7 +4,7 @@ import { UploadIcon } from "lucide-react";
 import { toast } from "sonner";
 import { uploadImageAction } from "@/features/upload/public/upload.action";
 import { useMutation } from "@tanstack/react-query";
-import { updateImageUserAction } from "@/components/wrappers/dashboard/profile2/avatar/avatar.action";
+import { updateImageUserAction } from "@/components/wrappers/dashboard/profile/actions/avatar.action";
 import { useRouter } from "next/navigation";
 import { User } from "@/db/schema/02_user";
 import React, {ChangeEvent} from "react";
@@ -1,80 +0,0 @@
-"use client";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { UploadIcon } from "lucide-react";
-import { toast } from "sonner";
-import { uploadImageAction } from "@/features/upload/public/upload.action";
-import { useMutation } from "@tanstack/react-query";
-import { updateImageUserAction } from "@/components/wrappers/dashboard/profile2/avatar/avatar.action";
-import { useRouter } from "next/navigation";
-import { User } from "@/db/schema/02_user";
-import {ChangeEvent} from "react";
-
-export type AvatarWithUploadProps = {
-    user: User;
-};
-
-export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
-    const user = props.user;
-    const router = useRouter();
-
-    const submitImage = useMutation({
-        mutationFn: async (file: File) => {
-            const formData = new FormData();
-            formData.set("file", file);
-            const uploadImage = await uploadImageAction(formData);
-            const data = uploadImage?.data?.data;
-
-            if (uploadImage?.serverError || !data) {
-                console.log(uploadImage?.serverError);
-                toast.error(uploadImage?.serverError);
-                return;
-            }
-
-            const updateUser = await updateImageUserAction(data.url);
-            const dataUser = updateUser?.data?.data;
-
-            if (updateUser?.serverError || !dataUser) {
-                console.log(updateUser?.serverError);
-                toast.error(updateUser?.serverError);
-                return;
-            }
-
-            toast.success("Successfully uploaded user image!");
-            router.refresh();
-        },
-    });
-
-    const handleImageUpload = async (event: ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0];
-        if (!file) return;
-        if (!file.type.includes("image")) {
-            toast.error("File not an image");
-            return;
-        }
-        submitImage.mutate(file);
-    };
-
-
-
-    return (
-        <div className="relative ">
-            <Avatar className="size-14 mr-3 ">
-                <AvatarFallback>{user.name[0]}</AvatarFallback>
-                {user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
-            </Avatar>
-            <div
-                onClick={() => {
-                    const fileInput = document.createElement("input");
-                    fileInput.type = "file";
-                    fileInput.accept = "image/*";
-                    // @ts-ignore
-                    fileInput.onchange = handleImageUpload;
-                    fileInput.click();
-                }}
-                className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-100 hover:bg-gray-500 hover:bg-opacity-50 rounded-full size-14"
-            >
-                <UploadIcon className="w-8 h-8 text-primary" />
-            </div>
-        </div>
-    );
-};
@@ -1,15 +0,0 @@
-"use server";
-import { db } from "@/db";
-import {userAction} from "@/lib/safe-actions/actions";
-import { eq } from "drizzle-orm";
-import { z } from "zod";
-import * as drizzleDb from "@/db";
-
-
-export const updateImageUserAction = userAction.schema(z.string()).action(async ({ parsedInput, ctx }) => {
-    const [updatedUser] = await db.update(drizzleDb.schemas.user).set({ image: parsedInput }).where(eq(drizzleDb.schemas.user.id, ctx.user.id)).returning();
-
-    return {
-        data: updatedUser,
-    };
-});
@@ -58,4 +58,4 @@ export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {


    );
-};
+};
@@ -33,4 +33,4 @@ export const deleteUserAction = userAction.schema(z.string()).action(async ({ pa
    return {
        data: deletedUser,
    };
-});
+});
@@ -1,22 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { currentUser } from "@/lib/auth/current-user";
-import { notFound } from "next/navigation";
-
-export type UserAvatarProps = {};
-
-export const UserAvatar = async () => {
-    const user = await currentUser();
-
-    if (!user) {
-        return notFound();
-    }
-
-    return (
-        <div>
-            <Avatar className="size-6">
-                <AvatarFallback>{user.name[0]}</AvatarFallback>
-                {user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
-            </Avatar>
-        </div>
-    );
-};
@@ -1,122 +0,0 @@
-"use client";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Form } from "@/components/ui/form";
-import { Button } from "@/components/ui/button";
-import { useRouter } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { UserSchema, UserType } from "@/components/wrappers/dashboard/profile2/user-form/user-form.schema";
-import { toast } from "sonner";
-import { updateUserAction } from "@/components/wrappers/dashboard/profile2/user-form/user-form.action";
-import {DataTable} from "@/components/wrappers/common/table/data-table";
-import {sessionsColumns} from "@/components/wrappers/dashboard/admin/users/sessions/table-columns";
-import {accountsColumns} from "@/components/wrappers/dashboard/admin/users/accounts/table-columns";
-import {Account, Session} from "better-auth";
-
-export type UserFormProps = {
-    defaultValues?: UserType;
-    userId?: string;
-    sessions: Session[];
-    accounts?: Account[];
-};
-
-export const UserForm = (props: UserFormProps) => {
-    const isCreate = !Boolean(props.defaultValues);
-
-    const form = useZodForm({
-        schema: UserSchema,
-        defaultValues: props.defaultValues,
-    });
-
-    const router = useRouter();
-
-    const mutation = useMutation({
-        mutationFn: async (values: UserType) => {
-            const updateUser = await updateUserAction({
-                id: props.userId ?? "-",
-                data: values,
-            });
-
-            const data = updateUser?.data?.data;
-            if (updateUser?.serverError || !data) {
-                toast.error(updateUser?.serverError);
-                return;
-            }
-
-            toast.success(`Profile updated successfully.`);
-            router.refresh();
-            router.push(`/dashboard/profile`);
-        },
-    });
-
-    return (
-        <div className="flex flex-col gap-y-4 h-full py-4">
-        <TooltipProvider>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Account</CardTitle>
-                    <CardDescription>Your informations</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <Form
-                        form={form}
-                        className="flex flex-col gap-4"
-                        onSubmit={async (values) => {
-                            await mutation.mutateAsync(values);
-                        }}
-                    >
-                        <FormField
-                            control={form.control}
-                            name="name"
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Name</FormLabel>
-                                    <FormControl>
-                                        <Input placeholder={"Your Name"} {...field} />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
-                        <FormField
-                            control={form.control}
-                            name="email"
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Email</FormLabel>
-                                    <FormControl>
-                                        <Input placeholder={"exemple@portabase.com"} disabled {...field} value={field.value ?? ""} />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
-                        <Button>{isCreate ? `` : `Save`}</Button>
-                    </Form>
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Active sessions</CardTitle>
-                    <CardDescription>Manage your active sessions</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <DataTable columns={sessionsColumns} data={props.sessions} enableSelect={false}/>
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Auth providers</CardTitle>
-                    <CardDescription>Manage your active auth providers</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <DataTable columns={accountsColumns} data={props.accounts ?? []} enableSelect={false}/>
-                </CardContent>
-            </Card>
-        </TooltipProvider>
-        </div>
-    );
-};
@@ -126,6 +126,10 @@ export const projectRelations = relations(project, ({one}) => ({
 export const userSchema = createSelectSchema(user);
 export type User = z.infer<typeof userSchema>;

+export const userThemeEnumSchema = createSelectSchema(userThemeEnum)
+export type UserThemeEnum = z.infer<typeof userThemeEnumSchema>;
+
+
 export const sessionSchema = createSelectSchema(session);
 export type Session = z.infer<typeof sessionSchema>;

@@ -0,0 +1,34 @@
+import {SignUpUser} from "@/types/auth";
+import {hashPassword} from "better-auth/crypto";
+import {db} from "@/db";
+import * as drizzleDb from "@/db";
+import {User, UserThemeEnum} from "@/db/schema/02_user";
+
+
+export async function createUserDb(data: SignUpUser): Promise<User> {
+    const now = new Date();
+    const hashedPassword = await hashPassword(data.password);
+    const userId = crypto.randomUUID();
+
+    const [newUser] = await db.insert(drizzleDb.schemas.user).values({
+        id: userId,
+        name: data.name,
+        email: data.email,
+        emailVerified: true,
+        role: data.role,
+        createdAt: now,
+        updatedAt: now,
+        theme: data.theme as UserThemeEnum,
+    }).returning();
+
+    await db.insert(drizzleDb.schemas.account).values({
+        providerId: "credential",
+        accountId: userId,
+        userId: userId,
+        password: hashedPassword,
+        createdAt: now,
+        updatedAt: now,
+    });
+
+    return newUser
+}
@@ -4,8 +4,8 @@ export type SignUpUser = {
    email: string
    password: string
    callbackURL?: string
+    role?: string
    theme: string
-    isDefaultPassword: boolean
 }


@@ -0,0 +1,11 @@
+export function extractNameFromEmail(email: string): string {
+    const localPart = email.split("@")[0];
+    const nameParts = localPart
+        .replace(/[_\.\-]/g, " ") // Replace underscores, dots, and hyphens with spaces
+        .split(" ") // Split into parts
+        .filter(Boolean); // Remove empty strings
+
+    return nameParts
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) // Capitalize each part
+        .join(" ");
+}
@@ -0,0 +1,27 @@
+export function generateValidPassword(length = 12) {
+    const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const lower = 'abcdefghijklmnopqrstuvwxyz';
+    const numbers = '0123456789';
+    const special = '#?!@$%^&*-';
+    const all = upper + lower + numbers + special;
+
+    const getRandomChar = (set: string) => set[Math.floor(Math.random() * set.length)];
+
+    const passwordChars = [
+        getRandomChar(upper),
+        getRandomChar(lower),
+        getRandomChar(numbers),
+        getRandomChar(special),
+    ];
+
+    for (let i = passwordChars.length; i < length; i++) {
+        passwordChars.push(getRandomChar(all));
+    }
+
+    for (let i = passwordChars.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [passwordChars[i], passwordChars[j]] = [passwordChars[j], passwordChars[i]];
+    }
+
+    return passwordChars.join('');
+}