Start working on the profile refactoring.

src/components/wrappers/dashboard/profile2/avatar/avatar-with-upload.tsx

@@ -0,0 +1,80 @@
+"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>
+    );
+};

src/components/wrappers/dashboard/profile2/avatar/avatar.action.ts

@@ -0,0 +1,15 @@
+"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,
+    };
+});

src/components/wrappers/dashboard/profile2/button-delete-account/button-delete-account.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {useMutation} from "@tanstack/react-query";
+import {Trash2} from "lucide-react";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {signOut} from "@/lib/auth/auth-client";
+import {useRouter} from "next/navigation";
+import {deleteUserAction} from "./delete-account.action";
+
+export type ButtonDeleteAccountProps = {
+    text?: string;
+};
+
+export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {
+    const router = useRouter();
+
+    const mutation = useMutation({
+        mutationFn: () => deleteUserAction(""),
+        onSuccess: async () => {
+            await signOut({
+                fetchOptions: {
+                    onSuccess: () => {
+                        router.push("/login");
+                    },
+                },
+            });
+        },
+    });
+
+    return (
+        <ButtonWithConfirm
+            title={props.text ? props.text : ""}
+            description="Are you sure you want to delete your account ? This action cannot be undone."
+            button={{
+                main: {
+                    text: props.text ? props.text : "",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
+            }}
+            isPending={mutation.isPending}
+        />
+
+
+    );
+};

src/components/wrappers/dashboard/profile2/button-delete-account/delete-account.action.ts

@@ -0,0 +1,36 @@
+"use server";
+import {userAction} from "@/lib/safe-actions/actions";
+import { z } from "zod";
+import { v4 as uuidv4 } from "uuid";
+import { db } from "@/db";
+import { eq } from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {authClient} from "@/lib/auth/auth-client";
+import {auth} from "@/lib/auth/auth";
+
+
+export const deleteUserAction = userAction.schema(z.string()).action(async ({ parsedInput, ctx }) => {
+    const userId = parsedInput.length > 0 ? parsedInput : ctx.user.id;
+    const uuid = uuidv4();
+
+
+    // const [updatedUser] = await db
+    //     .update(drizzleDb.schemas.user)
+    //     .set({
+    //         email: `${uuid}@portabase.com`,
+    //         name: `${uuid}`,
+    //         //deleted: true,
+    //         //todo: add deleted
+    //     })
+    //     .where(eq(drizzleDb.schemas.user.id, userId))
+    //     .returning();
+    const [deletedUser] = await db
+        .delete(drizzleDb.schemas.user)
+        .where(eq(drizzleDb.schemas.user.id, userId))
+        .returning();
+
+
+    return {
+        data: deletedUser,
+    };
+});

src/components/wrappers/dashboard/profile2/user-avatar/user-avatar.tsx

@@ -0,0 +1,22 @@
+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>
+    );
+};

src/components/wrappers/dashboard/profile2/user-form/user-form.action.ts

@@ -0,0 +1,43 @@
+"use server";
+import {userAction} from "@/lib/safe-actions/actions";
+import { z } from "zod";
+import { UserSchema } from "@/components/wrappers/dashboard/profile2/user-form/user-form.schema";
+import { db } from "@/db";
+import { eq } from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {revokeSession, unlinkAccount} from "@/lib/auth/auth";
+import {withUpdatedAt} from "@/db/utils";
+
+export const updateUserAction = userAction
+    .schema(
+        z.object({
+            id: z.string(),
+            data: UserSchema,
+        })
+    )
+    .action(async ({ parsedInput }) => {
+        const [updatedUser] = await db.update(drizzleDb.schemas.user).set(withUpdatedAt(parsedInput.data)).where(eq(drizzleDb.schemas.user.id, parsedInput.id)).returning();
+        return {
+            data: updatedUser,
+        };
+    });
+
+
+export const deleteUserSessionAction = userAction.schema(z.string()).action(async ({ parsedInput }) => {
+    const status = await revokeSession(parsedInput);
+    return status;
+});
+
+
+export const unlinkUserProviderAction = userAction
+    .schema(
+        z.object({
+            provider: z.string(),
+            account: z.string(),
+        })
+    )
+    .action(async ({ parsedInput }) => {
+        const status = await unlinkAccount(parsedInput.provider, parsedInput.account);
+
+        return status;
+    });

src/components/wrappers/dashboard/profile2/user-form/user-form.schema.ts

@@ -0,0 +1,9 @@
+import {z} from "zod";
+
+export const UserSchema = z.object({
+    name: z.string().optional(),
+    email: z.string().optional(),
+    role: z.string().optional(),
+});
+
+export type UserType = z.infer<typeof UserSchema>;

src/components/wrappers/dashboard/profile2/user-form/user-form.tsx

@@ -0,0 +1,122 @@
+"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>
+    );
+};