From c4045795ee574a94a02467798eb913c5b9aee7f7 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Tue, 29 Apr 2025 22:01:30 -0600
Subject: [PATCH] Refactor ShowBackups component to improve UI and enhance
 backup information display. Introduce database type icons for better visual
 representation and reorganize backup details layout for clarity. Update
 styles for hover effects and button sizes to enhance user experience.

---
 .../database/backups/show-backups.tsx         | 163 +++++++++++-------
 1 file changed, 100 insertions(+), 63 deletions(-)

diff --git a/apps/dokploy/components/dashboard/database/backups/show-backups.tsx b/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
index 0a6517f96..ff31da750 100644
--- a/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
@@ -23,6 +23,12 @@ import { RestoreBackup } from "./restore-backup";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { HandleBackup } from "./handle-backup";
 import { cn } from "@/lib/utils";
+import {
+	MariadbIcon,
+	MongodbIcon,
+	MysqlIcon,
+	PostgresqlIcon,
+} from "@/components/icons/data-tools-icons";
 
 interface Props {
 	id: string;
@@ -169,78 +175,109 @@ export const ShowBackups = ({
 								<div className="flex flex-col gap-6">
 									{postgres?.backups.map((backup) => (
 										<div key={backup.backupId}>
-											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
-												<div
-													className={cn(
-														"grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 flex-col gap-8",
-														backup.backupType === "compose" && "xl:grid-cols-8",
-													)}
-												>
-													{backup.backupType === "compose" && (
-														<>
-															<div className="flex flex-col gap-1">
-																<span className="font-medium">
-																	Service Name
-																</span>
-																<span className="text-sm text-muted-foreground">
-																	{backup.serviceName}
+											<div className="flex w-full flex-col md:flex-row md:items-start justify-between gap-4 border rounded-lg p-4 hover:bg-muted/50 transition-colors">
+												<div className="flex flex-col w-full gap-4">
+													<div className="flex items-center gap-3">
+														{backup.backupType === "compose" && (
+															<div className="flex items-center justify-center size-10 rounded-lg">
+																{backup.databaseType === "postgres" && (
+																	<PostgresqlIcon className="size-7" />
+																)}
+																{backup.databaseType === "mysql" && (
+																	<MysqlIcon className="size-7" />
+																)}
+																{backup.databaseType === "mariadb" && (
+																	<MariadbIcon className="size-7" />
+																)}
+																{backup.databaseType === "mongo" && (
+																	<MongodbIcon className="size-7" />
+																)}
+															</div>
+														)}
+														<div className="flex flex-col gap-1">
+															{backup.backupType === "compose" && (
+																<div className="flex items-center gap-2">
+																	<h3 className="font-medium">
+																		{backup.serviceName}
+																	</h3>
+																	<span className="px-1.5 py-0.5 rounded-full bg-muted text-xs font-medium capitalize">
+																		{backup.databaseType}
+																	</span>
+																</div>
+															)}
+															<div className="flex items-center gap-2">
+																<div
+																	className={cn(
+																		"size-1.5 rounded-full",
+																		backup.enabled
+																			? "bg-green-500"
+																			: "bg-red-500",
+																	)}
+																/>
+																<span className="text-xs text-muted-foreground">
+																	{backup.enabled ? "Active" : "Inactive"}
 																</span>
 															</div>
+														</div>
+													</div>
 
-															<div className="flex flex-col gap-1">
-																<span className="font-medium">
-																	Database Type
-																</span>
-																<span className="text-sm text-muted-foreground">
-																	{backup.databaseType}
-																</span>
-															</div>
-														</>
-													)}
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Destination</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.destination.name}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Database</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.database}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Scheduled</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.schedule}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Prefix Storage</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.prefix}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Enabled</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.enabled ? "Yes" : "No"}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Keep Latest</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.keepLatestCount || "All"}
-														</span>
+													<div className="flex flex-wrap gap-x-8 gap-y-2">
+														<div className="min-w-[200px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Destination
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.destination.name}
+															</p>
+														</div>
+
+														<div className="min-w-[150px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Database
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.database}
+															</p>
+														</div>
+
+														<div className="min-w-[120px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Schedule
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.schedule}
+															</p>
+														</div>
+
+														<div className="min-w-[150px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Prefix Storage
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.prefix}
+															</p>
+														</div>
+
+														<div className="min-w-[100px]">
+															<span className="text-sm font-medium text-muted-foreground">
+																Keep Latest
+															</span>
+															<p className="font-medium text-sm mt-0.5">
+																{backup.keepLatestCount || "All"}
+															</p>
+														</div>
 													</div>
 												</div>
-												<div className="flex flex-row gap-4">
+
+												<div className="flex flex-row md:flex-col gap-1.5">
 													<TooltipProvider delayDuration={0}>
 														<Tooltip>
 															<TooltipTrigger asChild>
 																<Button
 																	type="button"
 																	variant="ghost"
+																	size="icon"
+																	className="size-8"
 																	isLoading={
 																		isManualBackup &&
 																		activeManualBackup === backup.backupId
@@ -263,7 +300,7 @@ export const ShowBackups = ({
 																		setActiveManualBackup(undefined);
 																	}}
 																>
-																	<Play className="size-5  text-muted-foreground" />
+																	<Play className="size-4 text-muted-foreground" />
 																</Button>
 															</TooltipTrigger>
 															<TooltipContent>Run Manual Backup</TooltipContent>
@@ -295,7 +332,7 @@ export const ShowBackups = ({
 														<Button
 															variant="ghost"
 															size="icon"
-															className="group hover:bg-red-500/10"
+															className="group hover:bg-red-500/10 size-8"
 															isLoading={isRemoving}
 														>
 															<Trash2 className="size-4 text-primary group-hover:text-red-500" />