wrapping some agent components.

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/components/wrappers/cards-with-pagination.tsx

@@ -42,14 +42,14 @@ export const CardsWithPagination = (props: cardsWithPaginationProps) => {
 
 
     return (
-        <div className={cn("flex flex-col h-full justify-between", className)}>
-            <div className={cn(`grid h-max auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
+        <div className={cn("", className)}>
+            <div className={cn(`grid auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
                 {currentCards.map((card, key) => (
                     <CardItem key={key} {...card}/>
                 ))}
             </div>
             <PaginationNavigation
-                className="justify-end"
+                className="mt-8 justify-end"
                 totalPages={totalPages}
                 currentPage={currentPage}
                 goToPage={goToPage}

src/components/wrappers/pagination/pagination-navigation.tsx

@@ -25,7 +25,7 @@ export const PaginationNavigation = (props: paginationNavigationProps) => {
     const {className, totalPages, currentPage, goToPage, goToPrevPage, goToNextPage, maxVisiblePages = 3} = props
 
     return (
-        <Pagination className={cn("", className)}>
+        <Pagination className={cn("w-auto m-0", className)}>
             <PaginationContent>
                 <PaginationItem>
                     <PaginationPrevious onClick={goToPrevPage}/>

src/components/wrappers/table/data-table-with-pagination.tsx

@@ -30,9 +30,9 @@ export function DataTableWithPagination<TData, TValue>({columns, data}: DataTabl
     })
 
     return (
-        <div className="flex flex-col justify-between h-full">
+        <div>
             <DataTable table={table}/>
-            <TablePagination table={table} pageSizeOptions={[5, 10, 20, 50, 100]}/>
+            <TablePagination table={table}/>
         </div>
     )
 }

src/components/wrappers/table/table-pagination-size.tsx

@@ -1,4 +1,3 @@
-import {useEffect} from "react";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
 import {cn} from "@/lib/utils";
 
@@ -13,12 +12,8 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
 
     const {className, table, pageSizeOptions = [10, 20, 30, 40, 50]} = props
 
-    useEffect(() => {
-        table.setPageSize(Number(pageSizeOptions[0]))
-    }, []);
-
     return (
-        <div className={cn("flex items-center justify-center space-x-2", className)}>
+        <div className={cn("flex items-center space-x-2", className)}>
             <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
             <Select
                 value={`${table.getState().pagination.pageSize}`}

src/components/wrappers/table/table-pagination.tsx

@@ -8,17 +8,16 @@ interface tablePaginationProps {
     className?: string
     table: any
     maxVisiblePages?: number
-    pageSizeOptions?: number[]
 }
 
 export function TablePagination(props: tablePaginationProps) {
 
-    const {className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50]} = props
+    const {className, table, maxVisiblePages = 3} = props
 
     return (
-        <div className={cn("flex mt-6", className)}>
-            <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions}/>
-            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end"/>
+        <div className={cn("flex justify-between mt-8", className)}>
+            <TablePaginationSize table={table}/>
+            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages}/>
         </div>
     )
 }