Profile Page with update user information.

app/(customer)/dashboard/profile/page.tsx

@@ -6,6 +6,11 @@ import {requiredCurrentUser} from "@/auth/current-user";
 import {UserForm} from "@/components/wrappers/Dashboard/Profile/UserForm/UserForm";
 import {prisma} from "@/prisma";
 import {Badge} from "@/components/ui/badge";
+import Link from "next/link";
+import {Button} from "@/components/ui/button";
+import {ButtonWithConfirm} from "@/components/wrappers/Button/ButtonWithConfirm/ButtonWithConfirm";
+import {ButtonDeleteAccount} from "@/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/ButtonDeleteAccount";
+import {useIsMobile} from "@/hooks/use-mobile";
 
 export default async function RoutePage(props: PageParams<{}>) {
 
@@ -22,23 +27,32 @@ export default async function RoutePage(props: PageParams<{}>) {
 
     console.log(userInfo)
 
+    const test = () => {
+        console.log("test")
+    }
+
     return (
         <Page>
-            <PageHeader>
-                <PageTitle className="flex items-center">
-                    <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>
-                    {user.name}
-                    <Badge className="ml-3">{userInfo.authMethod}</Badge>
-                </PageTitle>
-            </PageHeader>
+            {/*<PageHeader>*/}
+                <div className="justify-between gap-2 sm:flex">
+                    <PageTitle className="flex items-center">
+                        <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>
+                        {user.name}
+                        <Badge className="ml-3 hidden lg:block">{userInfo.authMethod}</Badge>
+                    </PageTitle>
+                    <PageActions className={"mt-2"}>
+                        <ButtonDeleteAccount/>
+                    </PageActions>
+                </div>
+            {/*</PageHeader>*/}
             <PageContent>
-                <UserForm userId={userInfo.id} defaultValues={userInfo} />
+                <UserForm userId={userInfo.id} defaultValues={userInfo}/>
             </PageContent>
         </Page>
-)
+    )
 }

package.json

@@ -66,6 +66,7 @@
     "sonner": "^1.6.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.0.3",
     "vaul": "^1.1.1",
     "zod": "^3.23.8"
   },

src/components/wrappers/Button/ButtonWithConfirm/ButtonWithConfirm.tsx

@@ -0,0 +1,45 @@
+"use client"
+import {Button} from "@/components/ui/button";
+import {useState} from "react";
+import {Loader2} from "lucide-react";
+
+export type VariantButton = {
+    secondary: string
+    default: string
+    outline: string
+    ghost: string
+    link: string
+    destructive: string
+}
+
+export type ButtonWithConfirmProps = {
+    icon?: any,
+    text: string,
+    variant?:  keyof VariantButton ,
+    className?: string,
+    onClick?: () => void,
+    isPending? : boolean
+};
+
+export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
+    const [isConfirming, setIsConfirming] = useState(false)
+    return(
+        <Button
+            onClick={() => {
+                if (isConfirming) {
+                    props.onClick()
+                } else {
+                    setIsConfirming(true);
+                }
+            }}
+            variant={props.variant ? props.variant : "default"}
+            className={props.className}
+        >
+            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+            {isConfirming ? "Are you sure ?" : `${props.text}`}
+            <>
+                {props.icon ? props.icon : null}
+            </>
+        </Button>
+    )
+}

src/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/ButtonDeleteAccount.tsx

@@ -0,0 +1,32 @@
+"use client"
+import {useMutation} from "@tanstack/react-query";
+import {useRouter} from "next/navigation";
+import {signOutAction} from "@/features/auth/auth.action";
+import {ButtonWithConfirm} from "@/components/wrappers/Button/ButtonWithConfirm/ButtonWithConfirm";
+import {deleteUserAction} from "@/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/delete-account.action";
+import {Trash2} from "lucide-react";
+
+export type ButtonDeleteAccountProps = {}
+
+export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {
+
+    const mutation = useMutation({
+        mutationFn: () => deleteUserAction(""),
+        onSuccess: async () => {
+            await signOutAction();
+        },
+    })
+
+    return (
+        <ButtonWithConfirm
+            text={"Delete my account"}
+            onClick={() => {
+                mutation.mutate()
+            }}
+            variant={"destructive"}
+            isPending={mutation.isPending}
+            className="gap-2"
+            icon={<Trash2/>}
+        />
+    )
+}

src/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/delete-account.action.ts

@@ -0,0 +1,42 @@
+"use server"
+import {userAction} from "@/safe-actions";
+import {prisma} from "@/prisma";
+import {z} from "zod";
+import {v4 as uuidv4} from "uuid";
+
+
+export const deleteUserAction = userAction
+    .schema(z.string())
+    .action(async ({parsedInput, ctx}) => {
+
+        const uuid = uuidv4()
+
+        const user = await prisma.user.update({
+            where: {
+                id: ctx.user.id,
+            },
+            data: {
+                email: `${uuid}@portabase.com`,
+                name: `${uuid}`,
+            }
+        })
+
+        const account = await prisma.account.findFirst({
+            where: {
+                userId: ctx.user.id,
+            }
+        })
+        if(account){
+            await prisma.account.delete({
+                where: {
+                    id: account.id
+                }
+
+            })
+        }
+
+
+        return {
+            data: user,
+        }
+    });

src/features/layout/page.tsx

@@ -8,12 +8,9 @@ export const Page = ({children}: PropsWithChildren<{}>) => {
     );
 };
 
-export const PageHeader = ({children}: PropsWithChildren<{}>) => {
-    return (
-        <div className="flex justify-between">{children}</div>
-    );
-};
-
+export const PageHeader = twx.div((props)=>[
+    cn(`flex justify-between`, props.className),
+])
 
 export const PageTitle = twx.h1((props)=>[
     cn(`text-3xl font-bold mb-6`, props.className),
@@ -26,11 +23,9 @@ export const PageDescription = twx.h2((props)=>[
 ])
 
 
-export const PageActions = ({children}: PropsWithChildren<{}>) => {
-    return (
-        <h1 className="flex gap-4">{children}</h1>
-    );
-};
+export const PageActions = twx.h1((props)=>[
+    cn(`flex gap-4`, props.className),
+])
 
 
 export const PageContent = ({children}: PropsWithChildren<{}>) => {

yarn.lock

@@ -4276,6 +4276,11 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.0.3.tgz#248451cac9d1a4a4128033e765d137e2b2c49a3d"
+  integrity sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==
+
 vaul@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/vaul/-/vaul-1.1.1.tgz#93aceaad16f7c53aacf28a2609b2dd43b5a91fa0"