Delete user from settings.

src/components/wrappers/Button/ButtonWithLoading/ButtonWithLoading.tsx

@@ -11,14 +11,21 @@ export type VariantButton = {
     link: string
     destructive: string
 }
+export type sizeButton = {
+    default :string,
+    icon: string
+    sm: string
+    lg: string
+}
 
 export type ButtonWithConfirmProps = {
     icon?: any,
     text: string,
-    variant?:  keyof VariantButton ,
+    variant?: keyof VariantButton,
     className?: string,
     onClick: () => void,
-    isPending? : boolean
+    isPending?: boolean
+    size: keyof sizeButton
 };
 
 export const ButtonWithLoading = ({
@@ -28,9 +35,10 @@ export const ButtonWithLoading = ({
                                       className,
                                       onClick,
                                       isPending,
+                                      size,
                                       ...props // catch all remaining props
                                   }: ButtonWithConfirmProps & ButtonHTMLAttributes<HTMLButtonElement>) => {
-    return(
+    return (
         <Button
             onClick={() => {
                 onClick()
@@ -38,6 +46,8 @@ export const ButtonWithLoading = ({
             variant={variant ? variant : "default"}
             className={className}
             {...props} // forward the remaining props to the Button component
+            size={size || "default"}
+
         >
             {isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
             {text}

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

@@ -5,7 +5,9 @@ import {ButtonWithConfirm} from "@/components/wrappers/Button/ButtonWithConfirm/
 import {deleteUserAction} from "@/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/delete-account.action";
 import {Trash2} from "lucide-react";
 
-export type ButtonDeleteAccountProps = {}
+export type ButtonDeleteAccountProps = {
+    text? : string
+}
 
 export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {
 
@@ -18,7 +20,7 @@ export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {
 
     return (
         <ButtonWithConfirm
-            text={"Delete my account"}
+            text={props.text ? props.text : ""}
             onClick={() => {
                 mutation.mutate()
             }}

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

@@ -3,17 +3,19 @@ import {userAction} from "@/safe-actions";
 import {prisma} from "@/prisma";
 import {z} from "zod";
 import {v4 as uuidv4} from "uuid";
+import {EmailFormSchema} from "@/components/wrappers/Dashboard/Settings/SettingsEmailTab/EmailForm/email-form.schema";
 
 
 export const deleteUserAction = userAction
     .schema(z.string())
     .action(async ({parsedInput, ctx}) => {
+        const userId = parsedInput.length > 0 ? parsedInput : ctx.user.id;
 
         const uuid = uuidv4()
 
         const user = await prisma.user.update({
             where: {
-                id: ctx.user.id,
+                id: userId,
             },
             data: {
                 email: `${uuid}@portabase.com`,
@@ -24,7 +26,7 @@ export const deleteUserAction = userAction
 
         const account = await prisma.account.findFirst({
             where: {
-                userId: ctx.user.id,
+                userId: userId,
             }
         })
         if (account) {
@@ -35,9 +37,8 @@ export const deleteUserAction = userAction
 
             })
         }
-
-
         return {
             data: user,
         }
-    });
+    });
+

src/components/wrappers/Dashboard/Settings/SettingsEmailTab/SettingsEmailTab.tsx

@@ -48,6 +48,7 @@ export const SettingsEmailTab = (props: SettingsEmailTabProps) => {
                         }}
                         icon={<Send/>}
                         text="Send email test"
+                        size="default"
                     />
                 )}
 

src/components/wrappers/Dashboard/Settings/SettingsUsersTab/columns-users.tsx

@@ -8,6 +8,13 @@ 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 {Button} from "@/components/ui/button";
+import {ButtonDeleteAccount} from "@/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/ButtonDeleteAccount";
+import {deleteUserAction} from "@/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/delete-account.action";
+import {signOutAction} from "@/features/auth/auth.action";
+import {ButtonWithConfirm} from "@/components/wrappers/Button/ButtonWithConfirm/ButtonWithConfirm";
+import {ButtonWithLoading} from "@/components/wrappers/Button/ButtonWithLoading/ButtonWithLoading";
 
 export const usersColumns: ColumnDef<User>[] = [
     {
@@ -64,5 +71,36 @@ export const usersColumns: ColumnDef<User>[] = [
         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>
+            );
+        },
+    },
 ]