feat: Working on UI/UX for multiple storage backends.

app/(customer)/dashboard/(organization)/projects/[projectId]/database/[databaseId]/page.tsx

@@ -2,7 +2,6 @@ import {PageParams} from "@/types/next";
 import {notFound, redirect} from "next/navigation";
 import {Page, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {BackupButton} from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
-import {DatabaseTabs} from "@/components/wrappers/dashboard/projects/database/database-tabs";
 import {DatabaseKpi} from "@/components/wrappers/dashboard/projects/database/database-kpi";
 import {CronButton} from "@/components/wrappers/dashboard/database/cron-button/cron-button";
 import {db} from "@/db";
@@ -17,6 +16,8 @@ import {ImportModal} from "@/components/wrappers/dashboard/database/import/impor
 import {getOrganizationStorageChannels} from "@/db/services/storage-channel";
 import {ChannelPoliciesModal} from "@/components/wrappers/dashboard/database/channels-policy/policy-modal";
 import {HardDrive, Megaphone} from "lucide-react";
+import {BackupModalProvider} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
+import {DatabaseContent} from "@/components/wrappers/dashboard/projects/database/database-content";
 
 export default async function RoutePage(props: PageParams<{
     projectId: string;
@@ -54,6 +55,11 @@ export default async function RoutePage(props: PageParams<{
         where: eq(drizzleDb.schemas.backup.databaseId, dbItem.id),
         with: {
             restorations: true,
+            storages: {
+                with: {
+                    storageChannel: true
+                }
+            }
         },
         orderBy: (b, {desc}) => [desc(b.createdAt)],
     });
@@ -147,10 +153,16 @@ export default async function RoutePage(props: PageParams<{
             <PageContent className="flex flex-col w-full h-full">
                 <DatabaseKpi successRate={successRate} database={dbItem} availableBackups={availableBackups}
                              totalBackups={totalBackups}/>
-                <DatabaseTabs activeMember={activeMember} settings={settings} database={dbItem}
-                              isAlreadyRestore={isAlreadyRestore}
-                              backups={backups}
-                              restorations={restorations}/>
+                <BackupModalProvider>
+                    <DatabaseContent
+                        activeMember={activeMember}
+                        settings={settings}
+                        database={dbItem}
+                        isAlreadyRestore={isAlreadyRestore}
+                        restorations={restorations}
+                        backups={backups}
+                    />
+                </BackupModalProvider>
             </PageContent>
         </Page>
     );

app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx

@@ -15,11 +15,7 @@ import {eq} from "drizzle-orm";
 import {getActiveMember, getOrganization} from "@/lib/auth/auth";
 import * as drizzleDb from "@/db";
 import {capitalizeFirstLetter} from "@/utils/text";
-import {RetentionPolicySheet} from "@/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet";
-import {CronButton} from "@/components/wrappers/dashboard/database/cron-button/cron-button";
-import {AlertPolicyModal} from "@/components/wrappers/dashboard/database/alert-policy/alert-policy-modal";
-import {ImportModal} from "@/components/wrappers/dashboard/database/import/import-modal";
-import {BackupButton} from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
+
 
 export default async function RoutePage(props: PageParams<{
     projectId: string

app/(customer)/dashboard/layout.tsx

@@ -6,6 +6,7 @@ import {AppSidebar} from "@/components/wrappers/dashboard/common/sidebar/app-sid
 import {Header} from "@/features/layout/Header";
 import {currentUser} from "@/lib/auth/current-user";
 import {ThemeMetaUpdater} from "@/features/browser/theme-meta-updater";
+import {BackupModalProvider} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
 
 export default async function Layout({children}: { children: ReactNode }) {
     const user = await currentUser();

app/providers.tsx

@@ -6,6 +6,7 @@ import {ThemeProvider} from "@/features/theme/theme-provider";
 import {Toaster} from "@/components/ui/sonner";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {ThemeMetaUpdaterRoot} from "@/features/browser/theme-meta-updater-root";
+import {BackupModalProvider} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
 
 
 export type ProviderProps = PropsWithChildren<{}>;
@@ -21,8 +22,8 @@ export const Providers = (props: ProviderProps) => {
             >
                 <ThemeMetaUpdaterRoot/>
                 <QueryClientProvider client={queryClient}>
-                    <Toaster/>
-                    {props.children}
+                        <Toaster/>
+                        {props.children}
                 </QueryClientProvider>
             </ThemeProvider>
         </Suspense>

package.json

@@ -88,6 +88,7 @@
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",
     "sonner": "^2.0.3",
+    "swiper": "^12.0.3",
     "tailwind-merge": "^3.3.0",
     "uuid": "^11.1.0",
     "vaul": "^1.1.2",

pnpm-lock.yaml

@@ -230,6 +230,9 @@ importers:
       sonner:
         specifier: ^2.0.3
         version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      swiper:
+        specifier: ^12.0.3
+        version: 12.0.3
       tailwind-merge:
         specifier: ^3.3.0
         version: 3.4.0
@@ -6230,6 +6233,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  swiper@12.0.3:
+    resolution: {integrity: sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==}
+    engines: {node: '>= 4.7.0'}
+
   tailwind-merge@3.2.0:
     resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
 
@@ -13556,6 +13563,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  swiper@12.0.3: {}
+
   tailwind-merge@3.2.0: {}
 
   tailwind-merge@3.4.0: {}

src/components/wrappers/dashboard/admin/notifications/logs/columns.tsx

@@ -89,7 +89,7 @@ export function notificationLogsColumns(): ColumnDef<NotificationLogWithRelation
 }
 
 
-const getStatusIcon = (status: boolean) => {
+export const getStatusIcon = (status: boolean) => {
     switch (status) {
         case true:
             return <CheckCircle2 className="h-4 w-4"/>
@@ -98,10 +98,12 @@ const getStatusIcon = (status: boolean) => {
     }
 }
 
-const getStatusColor = (status: string) => {
+export const getStatusColor = (status: string) => {
     switch (status) {
         case "delivered":
             return "bg-green-100 dark:bg-green-100/10"
+        case "success":
+            return "bg-green-100 dark:bg-green-100/10"
         case "failed":
             return "bg-red-100 dark:bg-red-100/10"
         case "pending":

src/components/wrappers/dashboard/database/backup/actions/backup-actions-cell.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {BackupWith} from "@/db/schema/07_database";
+import {useBackupModal} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
+import {Button} from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator
+} from "@/components/ui/dropdown-menu";
+import {MoreHorizontal, Trash2, Download} from "lucide-react";
+import {ReloadIcon} from "@radix-ui/react-icons";
+import {cn} from "@/lib/utils";
+import {MemberWithUser} from "@/db/schema/03_organization";
+import {useMutation} from "@tanstack/react-query";
+import {deleteBackupAction} from "@/features/dashboard/restore/restore.action";
+import {toast} from "sonner";
+
+interface DatabaseActionsCellProps {
+    backup: BackupWith;
+    activeMember: MemberWithUser;
+}
+
+export function DatabaseActionsCell({backup, activeMember}: DatabaseActionsCellProps) {
+    const {openModal} = useBackupModal();
+
+
+    if (backup.deletedAt || activeMember.role === "member") return null;
+
+
+    return (
+        <div className={cn("flex items-center space-x-2")}>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="w-4 h-4"/>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                    <DropdownMenuItem onSelect={() => openModal("restore", backup)}>
+                        <ReloadIcon/> Restore
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onSelect={() => openModal("download", backup)}>
+                        <Download/> Download
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator/>
+                    <DropdownMenuItem onSelect={() => openModal("delete", backup)} className="text-red-600">
+                        <Trash2/> Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+
+    );
+}
+

src/components/wrappers/dashboard/database/backup/actions/backup-actions-form.tsx

@@ -0,0 +1,158 @@
+"use client"
+import {BackupWith} from "@/db/schema/07_database";
+import React, {useState} from "react";
+import {Swiper, SwiperSlide} from "swiper/react";
+
+import "swiper/css";
+import "swiper/css/pagination";
+
+import {Pagination, Mousewheel} from "swiper/modules";
+import {DatabaseActionKind} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
+import {
+    BackupActionsSchema,
+    BackupActionsType
+} from "@/components/wrappers/dashboard/database/backup/actions/backup-actions.schema";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {useMutation} from "@tanstack/react-query";
+import {BackupStorageWith} from "@/db/schema/14_storage-backup";
+import {TooltipProvider} from "@/components/ui/tooltip";
+import {getChannelIcon} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
+import {truncateWords} from "@/utils/text";
+import {useIsMobile} from "@/hooks/use-mobile";
+import {Badge} from "@/components/ui/badge";
+import {getStatusColor, getStatusIcon} from "@/components/wrappers/dashboard/admin/notifications/logs/columns";
+import {downloadBackupAction} from "@/components/wrappers/dashboard/database/backup/actions/backup-actions.action";
+import {toast} from "sonner";
+
+type BackupActionsFormProps = {
+    backup: BackupWith;
+    action: DatabaseActionKind;
+}
+
+export const BackupActionsForm = ({backup, action}: BackupActionsFormProps) => {
+    const isMobile = useIsMobile();
+
+    const form = useZodForm({
+        schema: BackupActionsSchema,
+    });
+
+    const mutation = useMutation({
+        mutationFn: async (values: BackupActionsType) => {
+            // implement your mutation logic here
+            console.log(values);
+
+            const result = await downloadBackupAction({backupStorageId: values.backupStorageId})
+
+            const inner = result?.data;
+
+            console.log(inner);
+
+
+            if (inner?.success) {
+                toast.success(inner.actionSuccess?.message);
+            } else {
+                toast.error(inner?.actionError?.message);
+            }
+
+
+        },
+    });
+
+
+    return (
+        <TooltipProvider>
+
+
+            {action == "delete" ?
+                <>
+                </>
+                :
+                <Form
+                    form={form}
+                    className="flex flex-col gap-4 mb-1"
+                    onSubmit={async (values) => {
+                        await mutation.mutateAsync(values);
+                    }}
+                >
+                    <FormField
+                        control={form.control}
+                        name="backupStorageId"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Choose a storage backup</FormLabel>
+                                <FormControl>
+                                    <div style={{height: "250px"}}>
+                                        <Swiper
+                                            direction="vertical"
+                                            slidesPerView={3.5}
+                                            spaceBetween={10}
+                                            // pagination={{ clickable: true }}
+                                            mousewheel={{releaseOnEdges: true, forceToAxis: true}}
+                                            modules={[Pagination, Mousewheel]}
+                                            className="mySwiper"
+                                            style={{height: "100%"}}
+                                        >
+                                            {backup.storages?.map((storage: BackupStorageWith) => (
+                                                <SwiperSlide key={storage.id}>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => field.onChange(storage.id)}
+                                                        className={`w-full h-full flex items-start gap-3 p-4 rounded-lg border text-left transition-colors ${
+                                                            field.value === storage.id
+                                                                ? "border-foreground bg-background"
+                                                                : "border-border bg-background hover:border-muted-foreground"
+                                                        }`}
+                                                    >
+                                                        <div
+                                                            className={`mt-0.5 h-4 w-4 shrink-0 rounded-full border ${
+                                                                field.value === storage.id ? "border-foreground" : "border-muted-foreground"
+                                                            } flex items-center justify-center`}
+                                                        >
+                                                            {field.value === storage.id &&
+                                                                <div className="h-2 w-2 rounded-full bg-foreground"/>}
+                                                        </div>
+                                                        <div className="flex-1 min-w-0">
+                                                            <div className="flex items-center gap-2">
+                                                                <div className="flex-1 min-w-0 flex flex-col gap-1">
+                                                                    <div className="flex items-center justify-between">
+                                                                        <div className="flex items-center gap-2">
+                                                                            {getChannelIcon(storage.storageChannel?.provider || "")}
+                                                                            <h3 className="font-medium text-foreground">{isMobile ? truncateWords(storage?.storageChannel?.name ?? "", 2) : storage.storageChannel?.name}</h3>
+                                                                            <Badge variant="secondary"
+                                                                                   className="text-xs font-mono">
+                                                                                {storage.storageChannel?.provider}
+                                                                            </Badge>
+                                                                        </div>
+                                                                        <Badge variant="outline"
+                                                                               className={`gap-1.5 ${getStatusColor(storage.status)}`}>
+                                                                            {getStatusIcon(storage.status === "success")}
+                                                                            <span
+                                                                                className="capitalize">  {storage.status.toUpperCase()}</span>
+                                                                        </Badge>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </button>
+                                                </SwiperSlide>
+
+                                            )) ?? <p>No storages available</p>}
+                                        </Swiper>
+                                    </div>
+                                </FormControl>
+                                <FormMessage/>
+                            </FormItem>
+                        )}
+                    />
+                    <div className="flex flex-col items-center gap-y-6 w-full">
+                        <ButtonWithLoading className="mt-2 w-full" isPending={mutation.isPending} disabled={mutation.isPending }>
+                            Confirm
+                        </ButtonWithLoading>
+                    </div>
+                </Form>
+            }
+
+        </TooltipProvider>
+    );
+}

src/components/wrappers/dashboard/database/backup/actions/backup-actions-modal.tsx

@@ -0,0 +1,39 @@
+"use client"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import {Separator} from "@/components/ui/separator";
+import {BackupActionsForm} from "@/components/wrappers/dashboard/database/backup/actions/backup-actions-form";
+import {
+    getBackupActionTextBasedOnActionKind,
+    useBackupModal
+} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
+
+
+type DatabaseActionsModalProps = {}
+
+
+export const DatabaseBackupActionsModal = ({}: DatabaseActionsModalProps) => {
+    const {open, action, backup, closeModal} = useBackupModal();
+    if (!backup || !action) return null;
+    const text = getBackupActionTextBasedOnActionKind(action);
+
+    return (
+        <Dialog open={open} onOpenChange={closeModal}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{text} storage backup ?</DialogTitle>
+                    <DialogDescription>
+                        Select the backup storage you want to {text.toLowerCase()}
+                    </DialogDescription>
+                    <Separator className="mt-3 mb-3"/>
+                </DialogHeader>
+                <BackupActionsForm backup={backup} action={action}/>
+            </DialogContent>
+        </Dialog>
+    )
+}

src/components/wrappers/dashboard/database/backup/actions/backup-actions.action.ts

@@ -0,0 +1,81 @@
+"use server"
+import {userAction} from "@/lib/safe-actions/actions";
+import {ServerActionResult} from "@/types/action-type";
+import {z} from "zod";
+import type {StorageInput} from "@/features/storages/types";
+import {dispatchStorage} from "@/features/storages/dispatch";
+import {db} from "@/db";
+import {eq} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+
+
+export const downloadBackupAction = userAction.schema(
+    z.object({
+        backupStorageId: z.string(),
+    })
+).action(async ({parsedInput}): Promise<ServerActionResult<string>> => {
+    const {backupStorageId} = parsedInput;
+    try {
+
+        const backupStorage = await db.query.backupStorage.findFirst({
+            where: eq(drizzleDb.schemas.backupStorage.id, backupStorageId),
+
+        });
+
+        if (!backupStorage) {
+            return {
+                success: false,
+                actionError: {
+                    message: "Backup storage not found.",
+                    status: 404,
+                    messageParams: {backupStorageId: backupStorageId},
+                },
+            };
+        }
+
+        console.log(backupStorage);
+
+        if (backupStorage.status != "success" || !backupStorage.path) {
+            return {
+                success: false,
+                actionError: {
+                    message: "An error occurred.",
+                    status: 500,
+                    messageParams: {backupStorageId: backupStorageId},
+                },
+            }
+        }
+
+        const input: StorageInput = {
+            action: "get",
+            data: {
+                path: backupStorage.path,
+                signedUrl: true,
+            },
+        };
+
+        const result = await dispatchStorage(input, undefined, backupStorage.storageChannelId);
+
+        console.log(result);
+
+        return {
+            success: true,
+            value: result.url,
+            actionSuccess: {
+                message: "Backup Storage downloaded successfully.",
+                messageParams: {backupStorageId: backupStorageId},
+            },
+        };
+    } catch (error) {
+        console.error("Error:", error);
+        return {
+            success: false,
+            actionError: {
+                message: "Failed to get presigned url.",
+                status: 500,
+                cause: error instanceof Error ? error.message : "Unknown error",
+                messageParams: {backupStorageId: backupStorageId},
+            },
+        };
+    }
+});

src/components/wrappers/dashboard/database/backup/actions/backup-actions.schema.ts

@@ -0,0 +1,10 @@
+"use client";
+
+import { z } from "zod";
+import {zString} from "@/lib/zod";
+
+export const BackupActionsSchema = z.object({
+    backupStorageId: zString(),
+});
+
+export type BackupActionsType = z.infer<typeof BackupActionsSchema>;

src/components/wrappers/dashboard/database/backup/backup-modal-context.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import {createContext, useContext, useState, ReactNode} from "react";
+import {BackupWith} from "@/db/schema/07_database";
+
+export type DatabaseActionKind = "restore" | "download" | "delete";
+
+export function getBackupActionTextBasedOnActionKind(kind: DatabaseActionKind) {
+    switch (kind) {
+        case "restore":
+            return "Restore";
+        case "download":
+            return "Download";
+        case "delete":
+            return "Delete";
+        default:
+            return "Unknown";
+    }
+}
+
+
+type BackupModalContextType = {
+    open: boolean;
+    action: DatabaseActionKind | null;
+    backup: BackupWith | null;
+    openModal: (action: DatabaseActionKind, backup: BackupWith) => void;
+    closeModal: () => void;
+};
+
+const BackupModalContext = createContext<BackupModalContextType | undefined>(undefined);
+
+export const BackupModalProvider = ({children}: { children: ReactNode }) => {
+    const [open, setOpen] = useState(false);
+    const [action, setAction] = useState<DatabaseActionKind | null>(null);
+    const [backup, setBackup] = useState<BackupWith | null>(null);
+
+    const openModal = (newAction: DatabaseActionKind, newBackup: BackupWith) => {
+        setAction(newAction);
+        setBackup(newBackup);
+        setOpen(true);
+    };
+
+    const closeModal = () => {
+        setOpen(false);
+        setAction(null);
+        setBackup(null);
+    };
+
+    return (
+        <BackupModalContext.Provider value={{open, action, backup, openModal, closeModal}}>
+            {children}
+        </BackupModalContext.Provider>
+    );
+};
+
+export const useBackupModal = () => {
+    const context = useContext(BackupModalContext);
+    if (!context) throw new Error("useBackupModal must be used within BackupModalProvider");
+    return context;
+};

src/components/wrappers/dashboard/projects/database/database-backup-list.tsx

@@ -6,7 +6,7 @@ import {MoreHorizontal, Trash2} from "lucide-react";
 import {FilterItem, FiltersDropdown} from "@/components/wrappers/common/table/filters";
 import {DataTable} from "@/components/wrappers/common/table/data-table";
 import {useMemo, useState} from "react";
-import {Backup, DatabaseWith} from "@/db/schema/07_database";
+import {Backup, BackupWith, DatabaseWith} from "@/db/schema/07_database";
 import {Setting} from "@/db/schema/01_setting";
 import {useMutation} from "@tanstack/react-query";
 import {deleteBackupAction} from "@/features/dashboard/restore/restore.action";
@@ -19,7 +19,7 @@ type DatabaseBackupListProps = {
     isAlreadyRestore: boolean;
     settings: Setting;
     database: DatabaseWith;
-    backups: Backup[];
+    backups: BackupWith[];
     activeMember: MemberWithUser
 }
 

src/components/wrappers/dashboard/projects/database/database-content.tsx

@@ -0,0 +1,39 @@
+"use client"
+import {DatabaseBackupActionsModal} from "@/components/wrappers/dashboard/database/backup/actions/backup-actions-modal";
+import {DatabaseTabs} from "@/components/wrappers/dashboard/projects/database/database-tabs";
+import {Setting} from "@/db/schema/01_setting";
+import {BackupWith, DatabaseWith, Restoration} from "@/db/schema/07_database";
+import {MemberWithUser} from "@/db/schema/03_organization";
+import {useBackupModal} from "@/components/wrappers/dashboard/database/backup/backup-modal-context";
+
+
+export type DatabaseContentProps = {
+    settings: Setting,
+    backups: BackupWith[],
+    restorations: Restoration[],
+    isAlreadyRestore: boolean,
+    database: DatabaseWith,
+    activeMember: MemberWithUser
+}
+
+
+export const DatabaseContent = ({
+                                    settings,
+                                    backups,
+                                    activeMember,
+                                    isAlreadyRestore,
+                                    restorations,
+                                    database
+                                }: DatabaseContentProps) => {
+    const {} = useBackupModal();
+
+    return (
+        <>
+            <DatabaseBackupActionsModal/>
+            <DatabaseTabs activeMember={activeMember} settings={settings} database={database}
+                          isAlreadyRestore={isAlreadyRestore}
+                          backups={backups}
+                          restorations={restorations}/>
+        </>
+    )
+}

src/components/wrappers/dashboard/projects/database/database-tabs.tsx

@@ -4,7 +4,7 @@ import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
 import {useEffect, useState} from "react";
 import {useRouter, useSearchParams} from "next/navigation";
 import {eventUpdate} from "@/types/events";
-import {Backup, Database, DatabaseWith, Restoration} from "@/db/schema/07_database";
+import {BackupWith, DatabaseWith, Restoration} from "@/db/schema/07_database";
 import {Setting} from "@/db/schema/01_setting";
 import {DatabaseBackupList} from "@/components/wrappers/dashboard/projects/database/database-backup-list";
 import {DatabaseRestoreList} from "@/components/wrappers/dashboard/projects/database/database-restore-list";
@@ -12,7 +12,7 @@ import {MemberWithUser} from "@/db/schema/03_organization";
 
 export type DatabaseTabsProps = {
     settings: Setting,
-    backups: Backup[],
+    backups: BackupWith[],
     restorations: Restoration[],
     isAlreadyRestore: boolean,
     database: DatabaseWith,
@@ -39,6 +39,7 @@ export const DatabaseTabs = (props: DatabaseTabsProps) => {
         };
     }, []);
 
+
     useEffect(() => {
         const newTab = searchParams.get("tab") ?? "backup";
         setTab(newTab);

src/db/schema/07_database.ts

@@ -8,7 +8,7 @@ import {z} from "zod";
 import {timestamps} from "@/db/schema/00_common";
 import {AlertPolicy, alertPolicy} from "@/db/schema/10_alert-policy";
 import {StoragePolicy, storagePolicy} from "@/db/schema/13_storage-policy";
-import {backupStorage} from "@/db/schema/14_storage-backup";
+import {BackupStorage, backupStorage} from "@/db/schema/14_storage-backup";
 
 export const database = pgTable("databases", {
     id: uuid("id").primaryKey().defaultRandom(),
@@ -126,3 +126,10 @@ export type DatabaseWith = Database & {
     storagePolicies?: StoragePolicy[] | null;
 };
 
+
+export type BackupWith = Backup & {
+    restorations?: Restoration[] | null;
+    storages?: BackupStorage[] | null;
+};
+
+

src/db/schema/14_storage-backup.ts

@@ -1,8 +1,10 @@
 import { pgTable, uuid, text, integer, pgEnum } from "drizzle-orm/pg-core";
 import { timestamps } from "@/db/schema/00_common";
-import { storageChannel } from "@/db/schema/12_storage-channel";
-import {backup} from "@/db/schema/07_database";
+import {StorageChannel, storageChannel} from "@/db/schema/12_storage-channel";
+import {Backup, backup, Restoration} from "@/db/schema/07_database";
 import {relations} from "drizzle-orm";
+import {createSelectSchema} from "drizzle-zod";
+import {z} from "zod";
 
 export const backupStorageStatusEnum = pgEnum("backup_storage_status", [
     "pending",
@@ -35,4 +37,14 @@ export const backupStorageRelations = relations(backupStorage, ({ one }) => ({
         fields: [backupStorage.storageChannelId],
         references: [storageChannel.id],
     }),
-}));
+}));
+
+
+export const backupStorageSchema = createSelectSchema(backupStorage);
+export type BackupStorage = z.infer<typeof backupStorageSchema>;
+
+export type BackupStorageWith = BackupStorage & {
+    storageChannel?: StorageChannel | null;
+};
+
+

src/db/services/backup.ts

@@ -0,0 +1,19 @@
+"use server"
+import {eq} from "drizzle-orm";
+import * as drizzleDb from "@/db";
+import {db} from "@/db";
+
+export async function getDatabaseBackups(databaseId: string) {
+    return await db.query.backup.findMany({
+        where: eq(drizzleDb.schemas.backup.databaseId, databaseId),
+        with: {
+            restorations: true,
+            storages: {
+                with: {
+                    storageChannel: true,
+                },
+            },
+        },
+        orderBy: (b, {desc}) => [desc(b.createdAt)],
+    });
+}

src/features/dashboard/backup/columns.tsx

@@ -32,6 +32,7 @@ import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/compon
 import {MemberWithUser} from "@/db/schema/03_organization";
 import {formatLocalizedDate} from "@/utils/date-formatting";
 import {formatBytes, isImportedFilename} from "@/utils/text";
+import {DatabaseActionsCell} from "@/components/wrappers/dashboard/database/backup/actions/backup-actions-cell";
 
 
 export function backupColumns(
@@ -92,6 +93,10 @@ export function backupColumns(
                 return <StatusBadge status={row.getValue("status")}/>;
             },
         },
+        {
+            id: "actions2",
+            cell: ({row}) => <DatabaseActionsCell activeMember={activeMember} backup={row.original}/>,
+        },
         {
             id: "actions",
             cell: ({row, table}) => {

src/features/storages/helpers.ts

@@ -1,11 +1,11 @@
-import { Backup, DatabaseWith } from "@/db/schema/07_database";
-import { dispatchStorage } from "@/features/storages/dispatch";
-import type { StorageInput, StorageResult } from "@/features/storages/types";
+import {Backup, DatabaseWith} from "@/db/schema/07_database";
+import {dispatchStorage} from "@/features/storages/dispatch";
+import type {StorageInput, StorageResult} from "@/features/storages/types";
 import * as drizzleDb from "@/db";
-import { withUpdatedAt } from "@/db/utils";
-import { eq } from "drizzle-orm";
-import { db } from "@/db";
-import { createHash } from "crypto";
+import {withUpdatedAt} from "@/db/utils";
+import {eq} from "drizzle-orm";
+import {db} from "@/db";
+import {createHash} from "crypto";
 
 function computeChecksum(buffer: Buffer): string {
     return createHash("sha256").update(buffer).digest("hex");
@@ -20,7 +20,7 @@ export async function storeBackupFiles(
 
     const settings = await db.query.setting.findFirst({
         where: eq(drizzleDb.schemas.setting.name, "system"),
-        with: { storageChannel: true },
+        with: {storageChannel: true},
     });
 
     const defaultPolicy = settings?.storageChannel
@@ -62,16 +62,16 @@ export async function storeBackupFiles(
 
             const input: StorageInput = {
                 action: "upload",
-                data: { path, file },
+                data: {path, file},
             };
 
             // const result = await dispatchStorage(input, policy.id);
             let result: StorageResult;
 
             try {
-                if (policy.id){
+                if (policy.id) {
                     result = await dispatchStorage(input, policy.id);
-                }else{
+                } else {
                     result = await dispatchStorage(input, undefined, policy.storageChannelId);
                 }
 
@@ -86,7 +86,7 @@ export async function storeBackupFiles(
 
             await db
                 .update(drizzleDb.schemas.backupStorage)
-                .set(withUpdatedAt({ status: result.success ? "success" : "failed" }))
+                .set(withUpdatedAt({status: result.success ? "success" : "failed"}))
                 .where(eq(drizzleDb.schemas.backupStorage.id, backupStorage.id));
 
             return result;
@@ -99,7 +99,10 @@ export async function storeBackupFiles(
 
     await db
         .update(drizzleDb.schemas.backup)
-        .set(withUpdatedAt({ status: backupStatus }))
+        .set(withUpdatedAt({
+            status: backupStatus,
+            fileSize: size
+        }))
         .where(eq(drizzleDb.schemas.backup.id, backup.id));
 
     return results;

src/features/storages/providers/local.ts

@@ -16,7 +16,7 @@ export async function uploadLocal(
 
     const dir = path.dirname(fullPath);
 
-    await mkdir(dir, { recursive: true });
+    await mkdir(dir, {recursive: true});
     await writeFile(fullPath, input.data.file);
 
     return {
@@ -31,14 +31,14 @@ export async function getLocal(
     input: { data: StorageGetInput }
 ): Promise<StorageResult> {
     const base = config.baseDir || BASE_DIR;
-    const filePath = path.join(base, input.data.path)
+    const filePath = path.join(process.cwd(), base, input.data.path)
     const fileName = path.basename(input.data.path);
-    const file = await readFile(filePath);
 
+    const file = await readFile(filePath);
 
     if (!fs.existsSync(filePath)) {
         console.error("File not found at:", filePath);
-        return({
+        return ({
             success: false,
             provider: 'local',
         });