feat: initial commit

components/dashboard/postgres/backups/show-backup-postgres.tsx

@@ -0,0 +1,179 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { DatabaseBackup, Play } from "lucide-react";
+import Link from "next/link";
+import { AddBackup } from "../../database/backups/add-backup";
+import { DeleteBackup } from "../../database/backups/delete-backup";
+import { UpdateBackup } from "../../database/backups/update-backup";
+import { toast } from "sonner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+interface Props {
+	postgresId: string;
+}
+
+export const ShowBackupPostgres = ({ postgresId }: Props) => {
+	const { data } = api.destination.all.useQuery();
+	const { data: postgres, refetch: refetchPostgres } =
+		api.postgres.one.useQuery(
+			{
+				postgresId,
+			},
+			{
+				enabled: !!postgresId,
+			},
+		);
+
+	const { mutateAsync: manualBackup, isLoading: isManualBackup } =
+		api.backup.manualBackupPostgres.useMutation();
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between gap-4  flex-wrap">
+				<div className="flex flex-col gap-0.5">
+					<CardTitle className="text-xl">Backups</CardTitle>
+					<CardDescription>
+						Add backup to your database to save the data to a different
+						providers.
+					</CardDescription>
+				</div>
+
+				{postgres && postgres?.backups?.length > 0 && (
+					<AddBackup
+						databaseId={postgresId}
+						databaseType="postgres"
+						refetch={refetchPostgres}
+					/>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.length === 0 ? (
+					<div className="flex flex-col items-center gap-3">
+						<DatabaseBackup className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							To create a backup is required to set at least 1 provider. Please,
+							go to{" "}
+							<Link
+								href="/dashboard/settings/server"
+								className="text-foreground"
+							>
+								Settings
+							</Link>{" "}
+							to do so.
+						</span>
+					</div>
+				) : (
+					<div>
+						{postgres?.backups.length === 0 ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+								<DatabaseBackup className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									No backups configured
+								</span>
+								<AddBackup
+									databaseId={postgresId}
+									databaseType="postgres"
+									refetch={refetchPostgres}
+								/>
+							</div>
+						) : (
+							<div className="flex flex-col pt-2">
+								<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="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 flex-col gap-8">
+													<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>
+												<div className="flex flex-row gap-4">
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	type="button"
+																	variant="ghost"
+																	isLoading={isManualBackup}
+																	onClick={async () => {
+																		await manualBackup({
+																			backupId: backup.backupId as string,
+																		})
+																			.then(async () => {
+																				toast.success(
+																					"Manual Backup Successful",
+																				);
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error to Create the manual backup",
+																				);
+																			});
+																	}}
+																>
+																	<Play className="size-5  text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent>Run Manual Backup</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													<UpdateBackup
+														backupId={backup.backupId}
+														refetch={refetchPostgres}
+													/>
+													<DeleteBackup
+														backupId={backup.backupId}
+														refetch={refetchPostgres}
+													/>
+												</div>
+											</div>
+										</div>
+									))}
+								</div>
+							</div>
+						)}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};