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

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);