Working on the hidde restore action if already a restauration is waiting.

app/(customer)/dashboard/layout.tsx

@@ -21,7 +21,6 @@ export default async function Layout({children}: { children: React.ReactNode })
     }
     if (!user) redirect('/login')
 
-
     return (
         <SidebarProvider>
             <div className="flex flex-col lg:flex-row w-full">

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

@@ -3,55 +3,54 @@ import {prisma} from "@/prisma";
 import {notFound} from "next/navigation";
 import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {BackupButton} from "@/components/wrappers/BackupButton/BackupButton";
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
 import {DatabaseTabs} from "@/components/wrappers/Dashboard/Projects/Database/DatabaseTabs";
-import {formatDateLastContact} from "@/utils/date-formatting";
+import {DatabaseKpi} from "@/components/wrappers/Dashboard/Projects/Database/DatabaseKpi";
 
 
 export default async function RoutePage(props: PageParams<{ databaseId: string }>) {
 
     const {databaseId} = await props.params
-
     const database = await prisma.database.findUnique({
         where: {
             id: databaseId,
         },
     })
-    console.log("database", database)
-
     if (!database) {
         notFound()
     }
 
+
     const backups = await prisma.backup.findMany({
         where: {
             databaseId: database.id
+        },
+        include:{
+            restaurations: {}
         }
     })
-    console.log(backups)
 
+    const restaurations = await prisma.restauration.findMany({
+        where: {
+            databaseId: databaseId,
+        }
+    })
+
+
+    const isAlreadyBackup = !!backups.find(backup => backup.status === "waiting");
+    const isAlreadyRestore = !!restaurations.find(restoration => restoration.status === "waiting");
     const totalBackups = await prisma.backup.count({
         where: {
             databaseId: databaseId,
         },
     });
-
     const successfulBackups = await prisma.backup.count({
         where: {
             databaseId: databaseId,
             status: 'success',
         },
     });
-
     const successRate = totalBackups > 0 ? (successfulBackups / totalBackups) * 100 : null
 
-    // const restaurations = await prisma.restauration.findMany({
-    //     where: {
-    //         databaseId: databaseId,
-    //     }
-    // })
-
-
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
@@ -59,39 +58,19 @@ export default async function RoutePage(props: PageParams<{ databaseId: string }
                     {database.name}
                 </PageTitle>
                 <PageActions className="justify-between">
-                    <BackupButton databaseId={databaseId} />
+                    <BackupButton disable={isAlreadyBackup} databaseId={databaseId}/>
                 </PageActions>
             </div>
             <PageDescription className="mt-5 sm:mt-0">{database.description}</PageDescription>
             <PageContent className="flex flex-col w-full h-full">
-                <div className="flex flex-col sm:flex-row sm:justify-between gap-8 mb-6">
-                    <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="font-bold text-xl">
-                            Backups
-                        </CardHeader>
-                        <CardContent></CardContent>
-                    </Card>
-                    <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="font-bold text-xl">
-                            Success rate
-                        </CardHeader>
-                        <CardContent>
-                            {successRate ?? "Unavailable for now."}
-                        </CardContent>
-                    </Card>
-                    <Card className="w-full sm:w-auto flex-1">
-                        <CardHeader className="font-bold text-xl">
-                            Last contact
-                        </CardHeader>
-                        <CardContent>
-                            {formatDateLastContact(database.lastContact)}
-                        </CardContent>
-                    </Card>
-                </div>
-
+                <DatabaseKpi
+                    successRate={successRate}
+                    database={database}
+                />
                 <DatabaseTabs
+                    isAlreadyRestore={isAlreadyRestore}
                     backups={backups}
-                    // restaurations={restaurations}
+                    restaurations={restaurations}
                 />
             </PageContent>
         </Page>

app/globals.css

@@ -16,77 +16,6 @@
     }
 }
 
-/*@layer base {*/
-/*  :root {*/
-/*    --background: 0 0% 100%;*/
-/*    --foreground: 0 0% 3.9%;*/
-/*    --card: 0 0% 100%;*/
-/*    --card-foreground: 0 0% 3.9%;*/
-/*    --popover: 0 0% 100%;*/
-/*    --popover-foreground: 0 0% 3.9%;*/
-/*    --primary: 0 0% 9%;*/
-/*    --primary-foreground: 0 0% 98%;*/
-/*    --secondary: 0 0% 96.1%;*/
-/*    --secondary-foreground: 0 0% 9%;*/
-/*    --muted: 0 0% 96.1%;*/
-/*    --muted-foreground: 0 0% 45.1%;*/
-/*    --accent: 0 0% 96.1%;*/
-/*    --accent-foreground: 0 0% 9%;*/
-/*    --destructive: 0 84.2% 60.2%;*/
-/*    --destructive-foreground: 0 0% 98%;*/
-/*    --border: 0 0% 89.8%;*/
-/*    --input: 0 0% 89.8%;*/
-/*    --ring: 0 0% 3.9%;*/
-/*    --chart-1: 12 76% 61%;*/
-/*    --chart-2: 173 58% 39%;*/
-/*    --chart-3: 197 37% 24%;*/
-/*    --chart-4: 43 74% 66%;*/
-/*    --chart-5: 27 87% 67%;*/
-/*    --radius: 0.5rem;*/
-/*    --sidebar-background: 0 0% 98%;*/
-/*    --sidebar-foreground: 240 5.3% 26.1%;*/
-/*    --sidebar-primary: 240 5.9% 10%;*/
-/*    --sidebar-primary-foreground: 0 0% 98%;*/
-/*    --sidebar-accent: 240 4.8% 95.9%;*/
-/*    --sidebar-accent-foreground: 240 5.9% 10%;*/
-/*    --sidebar-border: 220 13% 91%;*/
-/*    --sidebar-ring: 217.2 91.2% 59.8%;*/
-/*  }*/
-/*  .dark {*/
-/*    --background: 0 0% 3.9%;*/
-/*    --foreground: 0 0% 98%;*/
-/*    --card: 0 0% 3.9%;*/
-/*    --card-foreground: 0 0% 98%;*/
-/*    --popover: 0 0% 3.9%;*/
-/*    --popover-foreground: 0 0% 98%;*/
-/*    --primary: 0 0% 98%;*/
-/*    --primary-foreground: 0 0% 9%;*/
-/*    --secondary: 0 0% 14.9%;*/
-/*    --secondary-foreground: 0 0% 98%;*/
-/*    --muted: 0 0% 14.9%;*/
-/*    --muted-foreground: 0 0% 63.9%;*/
-/*    --accent: 0 0% 14.9%;*/
-/*    --accent-foreground: 0 0% 98%;*/
-/*    --destructive: 0 62.8% 30.6%;*/
-/*    --destructive-foreground: 0 0% 98%;*/
-/*    --border: 0 0% 14.9%;*/
-/*    --input: 0 0% 14.9%;*/
-/*    --ring: 0 0% 83.1%;*/
-/*    --chart-1: 220 70% 50%;*/
-/*    --chart-2: 160 60% 45%;*/
-/*    --chart-3: 30 80% 55%;*/
-/*    --chart-4: 280 65% 60%;*/
-/*    --chart-5: 340 75% 55%;*/
-/*    --sidebar-background: 240 5.9% 10%;*/
-/*    --sidebar-foreground: 240 4.8% 95.9%;*/
-/*    --sidebar-primary: 224.3 76.3% 48%;*/
-/*    --sidebar-primary-foreground: 0 0% 100%;*/
-/*    --sidebar-accent: 240 3.7% 15.9%;*/
-/*    --sidebar-accent-foreground: 240 4.8% 95.9%;*/
-/*    --sidebar-border: 240 3.7% 15.9%;*/
-/*    --sidebar-ring: 217.2 91.2% 59.8%;*/
-/*  }*/
-/*}*/
 
 
 @layer base {