Working on project front side.

src/components/wrappers/BackupButton/BackupButton.tsx

@@ -1,29 +1,44 @@
 "use client"
-import {Button} from "@/components/ui/button";
 import {useMutation} from "@tanstack/react-query";
 import {backupButtonAction} from "@/components/wrappers/BackupButton/backup-button.action";
+import {toast} from "sonner";
+import {Backup} from "@prisma/client";
+import {useRouter} from "next/navigation";
+import {ActionResult} from "@/types/action-type";
+import {ButtonWithLoading} from "@/components/wrappers/Button/ButtonWithLoading/ButtonWithLoading";
 
 export type BackupButtonProps = {
-    // databaseId: string;
+    databaseId: string;
 }
 
-export const BackupButton = () => {
-
 
+export const BackupButton = (props: BackupButtonProps) => {
+    const router = useRouter();
     const mutation = useMutation({
         mutationFn: async (databaseId: string) => {
-            const result = await backupButtonAction(databaseId)
-            console.log(result)
+            const backup = await backupButtonAction(databaseId)
+            console.log(backup)
+            if (backup.data.success) {
+                toast.success(backup.data.actionSuccess?.message || "Backup created successfully!");
+                router.refresh()
+            } else {
+                toast.error(backup.serverError || "Failed to create backup.");
+            }
         }
     })
+    const HandleAction = async () => {
+        await mutation.mutateAsync(props.databaseId)
+    }
 
 
     return (
-        <Button
-            onClick={() => {
-                mutation.mutateAsync("cm430tnop0001bcm0vo9b5nfx")
+        <ButtonWithLoading
+            text="Backup"
+            isPending={mutation.isPending}
+            size={"default"}
+            onClick={async () => {
+                await HandleAction()
             }}
-        >Backup
-        </Button>
+        />
     )
 }

src/components/wrappers/BackupButton/backup-button.action.ts

@@ -6,7 +6,6 @@ import {ServerActionResult} from "@/types/action-type";
 import {Backup} from "@prisma/client";
 
 
-
 export const backupButtonAction = userAction
     .schema(z.string())
     .action(async ({ parsedInput, ctx }): Promise<ServerActionResult<Backup>> => {
@@ -33,7 +32,7 @@ export const backupButtonAction = userAction
                 success: false,
                 actionError: {
                     message: "Failed to create backup.",
-                    status: 500, // Optional: Use a meaningful status code
+                    status: 500,
                     cause: error instanceof Error ? error.message : "Unknown error",
                     messageParams: { databaseId: parsedInput },
                 },

src/components/wrappers/Dashboard/Projects/Database/DatabaseTabs.tsx

@@ -0,0 +1,32 @@
+"use client"
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
+import {DataTableWithPagination} from "@/components/wrappers/table/data-table-with-pagination";
+import {backupColumns} from "@/features/backup/columns";
+import {restoreColumns} from "@/features/restore/columns";
+import {Backup, Restauration} from "@prisma/client";
+
+export type DatabaseTabsProps = {
+    backups: Backup[]
+    // restaurations: Restauration[]
+}
+
+export const DatabaseTabs = (props: DatabaseTabsProps) => {
+    return (
+        <Tabs className="flex flex-col flex-1" defaultValue="backup">
+
+            <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="backup">Backup</TabsTrigger>
+                <TabsTrigger value="restore">Restoration</TabsTrigger>
+            </TabsList>
+
+            <TabsContent className="h-full justify-between" value="backup">
+
+                    <DataTableWithPagination columns={backupColumns} data={props.backups}/>
+            </TabsContent>
+
+            {/*<TabsContent className="h-full justify-between" value="restore">*/}
+            {/*    <DataTableWithPagination columns={restoreColumns} data={props.restaurations}/>*/}
+            {/*</TabsContent>*/}
+        </Tabs>
+    )
+}

src/components/wrappers/Dashboard/Projects/ProjectsForm/ProjectForm.tsx

@@ -17,7 +17,7 @@ import {useMutation} from "@tanstack/react-query";
 import {ProjectSchema, ProjectType} from "@/components/wrappers/Dashboard/Projects/ProjectsForm/ProjectForm.schema";
 import {createProjectAction, updateProjectAction} from "@/components/wrappers/Dashboard/Projects/ProjectsForm/project-form.action";
 import {useRouter} from "next/navigation";
-import {Database, Organization, Project, Projects} from "@prisma/client"
+import {Database, Organization, Projects} from "@prisma/client"
 import {MultiSelect} from "@/components/wrappers/MultiSelect/MultiSelect";
 import {ZodString} from "zod";
 import {toast} from "sonner";

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

@@ -77,6 +77,7 @@ export const SettingsStorageTab = (props: SettingsStorageTabProps) => {
                     </div>
                     <div>
                         <ButtonWithLoading
+                            size={"default"}
                             disabled={!isSwitched}
                             isPending={mutation.isPending}
                             onClick={async () => {

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

@@ -9,11 +9,7 @@ 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>[] = [

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

@@ -6,6 +6,7 @@ export type dataTableProps = {
 }
 
 export const DataTable = ({table}: dataTableProps) => {
+
     return (
         <div className="rounded-md border w-full ">
             <Table className="w-full">
@@ -53,4 +54,56 @@ export const DataTable = ({table}: dataTableProps) => {
             </Table>
         </div>
     )
-}
+}
+// import { useMemo } from "react";
+// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+// import { flexRender } from "@tanstack/react-table";
+//
+// export type dataTableProps = {
+//     table: any;
+// };
+//
+// export const DataTable = ({ table }: dataTableProps) => {
+//     // Memoize the header and rows to prevent unnecessary re-renders
+//     const headerGroups = useMemo(() => table.getHeaderGroups(), [table]);
+//     const rows = useMemo(() => table.getRowModel().rows, [table]);
+//
+//     return (
+//         <div className="rounded-md border w-full ">
+//             <Table className="w-full">
+//                 <TableHeader>
+//                     {headerGroups.map((headerGroup) => (
+//                         <TableRow key={headerGroup.id}>
+//                             {headerGroup.headers.map((header) => (
+//                                 <TableHead key={header.id}>
+//                                     {header.isPlaceholder
+//                                         ? null
+//                                         : flexRender(header.column.columnDef.header, header.getContext())}
+//                                 </TableHead>
+//                             ))}
+//                         </TableRow>
+//                     ))}
+//                 </TableHeader>
+//                 <TableBody>
+//                     {rows?.length ? (
+//                         rows.map((row) => (
+//                             <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+//                                 {row.getVisibleCells().map((cell) => (
+//                                     <TableCell key={cell.id}>
+//                                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
+//                                     </TableCell>
+//                                 ))}
+//                             </TableRow>
+//                         ))
+//                     ) : (
+//                         <TableRow>
+//                             <TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
+//                                 No results.
+//                             </TableCell>
+//                         </TableRow>
+//                     )}
+//                 </TableBody>
+//             </Table>
+//         </div>
+//     );
+// };

src/features/backup/columns.tsx

@@ -12,12 +12,9 @@ import {
 import {Button} from "@/components/ui/button";
 import {Download, MoreHorizontal, Trash2} from "lucide-react";
 import {ReloadIcon} from "@radix-ui/react-icons";
+import {Backup} from "@prisma/client";
+
 
-export type Backup = {
-    id: string
-    createdAt: string
-    status: "pending" | "processing" | "success" | "failed"
-}
 
 export const backupColumns: ColumnDef<Backup>[] = [
     {
@@ -41,7 +38,6 @@ export const backupColumns: ColumnDef<Backup>[] = [
     {
         id: "actions",
         cell: ({row}) => {
-            const payment = row.original
 
             return (
                 <DropdownMenu>

src/features/restore/columns.tsx

@@ -6,20 +6,17 @@ import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
-    DropdownMenuLabel, DropdownMenuSeparator,
+    DropdownMenuLabel,
     DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
 import {Button} from "@/components/ui/button";
 import {Download, MoreHorizontal, Trash2} from "lucide-react";
 import {ReloadIcon} from "@radix-ui/react-icons";
+import {Restauration} from "@prisma/client";
 
-export type Restore = {
-    id: string
-    createdAt: string
-    status: "pending" | "processing" | "success" | "failed"
-}
 
-export const restoreColumns: ColumnDef<Restore>[] = [
+
+export const restoreColumns: ColumnDef<Restauration>[] = [
     {
         accessorKey: "id",
         header: "Reference",

src/types/action-type.ts

@@ -1,6 +1,23 @@
+import {SafeActionResult} from "next-safe-action";
+import {ZodString} from "zod";
 
-export type ServerActionResult<T> = { success: true; value: T; actionSuccess?: ActionSuccessMessage } | { success: false; actionError: ActionErrorMessage };
+export type ServerActionResult<T> = { success: true; value?: T; actionSuccess?: ActionSuccessMessage } | {
+    success: false;
+    actionError?: ActionErrorMessage
+};
 
-export type ActionErrorMessage = { message?: string; status?: number; cause?: string; messageParams?: Record<string, string | number> };
+export type ActionErrorMessage = {
+    message?: string;
+    status?: number;
+    cause?: string;
+    messageParams?: Record<string, string | number>
+};
 
-export type ActionSuccessMessage = { message?: string; messageParams?: Record<string, string | number> };
+export type ActionSuccessMessage = { message?: string; messageParams?: Record<string, string | number> };
+
+
+
+export type ActionResult<T> = SafeActionResult<string, ZodString, readonly [], {
+    formErrors: string[];
+    fieldErrors: {};
+}, readonly [], ServerActionResult<T>, object>