wrapping some components.

app/(customer)/dashboard/agents/[agentId]/page.tsx

@@ -3,12 +3,28 @@ import {Page, PageActions, PageContent, PageDescription, PageHeader, PageTitle}
 import {Button} from "@/components/ui/button";
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
 import {Card, CardContent, CardHeader} from "@/components/ui/card";
-import {TablePagination} from "@/components/wrappers/table/table-pagination";
+import {backupColumns} from "@/features/backup/columns";
-import {columns} from "@/features/backup/columns";
+import {restoreColumns} from "@/features/restore/columns";
 import {DataTableWithPagination} from "@/components/wrappers/table/data-table-with-pagination";
+import {prisma} from "@/prisma";
+import {GearIcon} from "@radix-ui/react-icons";
+import Link from "next/link";
 
 
-export default async function RoutePage(props: PageParams<{}>) {
+export default async function RoutePage(props: PageParams<{ agentId: string }>) {
+
+    // const agent = await prisma.agent.findUnique({
+    //     where: {
+    //         id: props.params.agentId,
+    //     },
+    // })
+
+    const agent = {
+        "id": props.params.agentId,
+        "name": "Agent 1",
+        "description": "My beautiful project!",
+        "lastContact": null,
+    }
 
     const backups = [
         {'id': 'backup-1', 'createdAt': '2023-11-27T11:26:54.870914Z', 'status': 'pending'},
@@ -46,58 +62,83 @@ export default async function RoutePage(props: PageParams<{}>) {
         {'id': 'restore-10', 'backupId': 'backup-10', 'createdAt': '2023-11-25T11:26:54.871000Z', 'status': 'failed'}
     ]
 
+    const databaseId = 'db-123';
+
+    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
+
+
     return (
         <Page>
             <PageHeader>
                 <PageTitle>
-                    Agent 1
+                    {agent.name}
+                    <Link href={`/dashboard/agents/${agent.id}/edit`}>
+                        <GearIcon className="w-7 h-7"/>
+                    </Link>
                 </PageTitle>
+
                 <PageActions>
                     <Button>Backup</Button>
                     <Button>Restore</Button>
                 </PageActions>
             </PageHeader>
 
-            <PageDescription>My beautiful project!</PageDescription>
+            <PageDescription>{agent.description}</PageDescription>
 
-            <PageContent>
+            <PageContent className="flex flex-col w-full h-full">
-                <div className="flex flex-row sm:justify-between gap-6 mb-8">
+                <div className="flex flex-row sm:justify-between gap-8 mb-6">
                     <Card className="w-full">
-                        <CardHeader>
+                        <CardHeader className="font-bold text-xl">
                             Backups
                         </CardHeader>
                         <CardContent></CardContent>
                     </Card>
                     <Card className="w-full">
-                        <CardHeader>
+                        <CardHeader className="font-bold text-xl">
                             Success rate
                         </CardHeader>
-                        <CardContent></CardContent>
+                        <CardContent>
+                            {successRate ?? "Unavailable for now."}
+                        </CardContent>
                     </Card>
                     <Card className="w-full">
-                        <CardHeader>
+                        <CardHeader className="font-bold text-xl">
                             Last contact
                         </CardHeader>
-                        <CardContent></CardContent>
+                        <CardContent>
+                            {agent.lastContact?.toDateString() ?? "Never connected"}
+                        </CardContent>
                     </Card>
                 </div>
-                <Tabs defaultValue="backup">
+                <Tabs className="flex flex-col flex-1" defaultValue="backup">
+
                     <TabsList className="grid w-full grid-cols-2">
                         <TabsTrigger value="backup">Backup</TabsTrigger>
-                        <TabsTrigger value="restore">Restore</TabsTrigger>
+                        <TabsTrigger value="restore">Backup</TabsTrigger>
                     </TabsList>
 
-                    <TabsContent className="flex flex-col gap-6" value="backup">
+                    <TabsContent className="h-full justify-between" value="backup">
-                        <DataTableWithPagination columns={columns} data={backups}/>
+                        <DataTableWithPagination columns={backupColumns} data={backups}/>
                     </TabsContent>
 
-                    <TabsContent className="flex flex-col gap-6" value="restore">
+                    <TabsContent className="h-full justify-between" value="restore">
-                        <DataTableWithPagination columns={columns} data={restores}/>
+                        <DataTableWithPagination columns={restoreColumns} data={restores}/>
                     </TabsContent>
-
                 </Tabs>
             </PageContent>
         </Page>
-    //     test
     )
 }

app/(customer)/dashboard/agents/page.tsx

@@ -36,7 +36,7 @@ export default async function RoutePage(props: PageParams<{}>) {
                 </PageActions>
             </PageHeader>
 
-            <PageContent>
+            <PageContent className="mt-10">
                 <CardsWithPagination
                     data={agents}
                     cardItem={AgentCard}

app/(customer)/dashboard/layout.tsx

@@ -17,7 +17,7 @@ export default async function Layout({children}: { children: React.ReactNode })
             <AppSidebar/>
             <SidebarInset>
                 <Header/>
-                <main>
+                <main className="h-full">
                     {children}
                 </main>
             </SidebarInset>

prisma/schema.prisma

@@ -61,35 +61,39 @@ model User {
   image         String?
   role          String?
   password      String?
+  authMethod    String?   @map("auth_method")
+  createdAt     DateTime  @default(now()) @map("created_at")
+  updatedAt     DateTime? @updatedAt @map("updated_at")
 
-  accounts   Account[]
+  accounts Account[]
-  sessions   Session[]
+  sessions Session[]
-  authMethod String?
-  createdAt  DateTime  @default(now()) @map("created_at")
-  updatedAt  DateTime? @updatedAt @map("updated_at")
 
   @@map("users")
 }
 
 model Agent {
-  id          String     @id @default(cuid())
+  id          String    @id @default(cuid())
-  slug        String     @unique
+  slug        String    @unique
   name        String
   description String?
-  lastContact DateTime?  @map("last_contact")
+  lastContact DateTime? @map("last_contact")
-  createdAt   DateTime   @default(now()) @map("created_at")
+  createdAt   DateTime  @default(now()) @map("created_at")
-  databases   Database[]
+
+  databases Database[]
 }
 
 model Database {
-  id      String @id @default(cuid())
+  id           String   @id @default(cuid())
-  agentId String @map("agent_id")
-  agent   Agent  @relation(fields: [agentId], references: [id], onDelete: Cascade)
-
   name         String
   description  String?
   backupPolicy String?  @map("backup_policy")
   createdAt    DateTime @default(now()) @map("created_at")
+
+  agentId String @map("agent_id")
+  agent   Agent  @relation(fields: [agentId], references: [id], onDelete: Cascade)
+
+  backups       Backup[]
+  restaurations Restauration[]
 }
 
 enum Status {
@@ -100,16 +104,25 @@ enum Status {
 }
 
 model Backup {
-  id         String   @id @default(cuid())
+  id        String   @id @default(cuid())
+  status    Status   @default(waiting)
+  file      String?
+  createdAt DateTime @default(now()) @map("created_at")
+
   databaseId String   @map("database_id")
-  status     Status   @default(waiting)
+  database   Database @relation(fields: [databaseId], references: [id], onDelete: Cascade)
-  file       String?
+
-  createdAt  DateTime @default(now()) @map("created_at")
+  restaurations Restauration[]
 }
 
-model Restore {
+model Restauration {
   id        String   @id @default(cuid())
-  backupId  String   @map("backup_id")
   status    Status   @default(waiting)
   createdAt DateTime @default(now()) @map("created_at")
+
+  backupId String @map("backup_id")
+  backup   Backup @relation(fields: [backupId], references: [id], onDelete: Cascade)
+
+  databaseId String?   @map("database_id")
+  database   Database? @relation(fields: [databaseId], references: [id], onDelete: Cascade)
 }

src/components/wrappers/cards-with-pagination.tsx

@@ -42,14 +42,14 @@ export const CardsWithPagination = (props: cardsWithPaginationProps) => {
 
 
     return (
-        <div className={cn("", className)}>
+        <div className={cn("flex flex-col h-full justify-between", className)}>
-            <div className={cn(`grid auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
+            <div className={cn(`grid h-max auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
                 {currentCards.map((card, key) => (
                     <CardItem key={key} {...card}/>
                 ))}
             </div>
             <PaginationNavigation
-                className="mt-8 justify-end"
+                className="justify-end"
                 totalPages={totalPages}
                 currentPage={currentPage}
                 goToPage={goToPage}

src/components/wrappers/pagination/pagination-navigation.tsx

@@ -25,7 +25,7 @@ export const PaginationNavigation = (props: paginationNavigationProps) => {
     const {className, totalPages, currentPage, goToPage, goToPrevPage, goToNextPage, maxVisiblePages = 3} = props
 
     return (
-        <Pagination className={cn("w-auto m-0", className)}>
+        <Pagination className={cn("", className)}>
             <PaginationContent>
                 <PaginationItem>
                     <PaginationPrevious onClick={goToPrevPage}/>

src/components/wrappers/table/data-table-with-pagination.tsx

@@ -30,9 +30,9 @@ export function DataTableWithPagination<TData, TValue>({columns, data}: DataTabl
     })
 
     return (
-        <div>
+        <div className="flex flex-col justify-between h-full">
             <DataTable table={table}/>
-            <TablePagination table={table}/>
+            <TablePagination table={table} pageSizeOptions={[5, 10, 20, 50, 100]}/>
         </div>
     )
 }

src/components/wrappers/table/table-pagination-size.tsx

@@ -1,3 +1,4 @@
+import {useEffect} from "react";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
 import {cn} from "@/lib/utils";
 
@@ -12,8 +13,12 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
 
     const {className, table, pageSizeOptions = [10, 20, 30, 40, 50]} = props
 
+    useEffect(() => {
+        table.setPageSize(Number(pageSizeOptions[0]))
+    }, []);
+
     return (
-        <div className={cn("flex items-center space-x-2", className)}>
+        <div className={cn("flex items-center justify-center space-x-2", className)}>
             <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
             <Select
                 value={`${table.getState().pagination.pageSize}`}

src/components/wrappers/table/table-pagination.tsx

@@ -8,16 +8,17 @@ interface tablePaginationProps {
     className?: string
     table: any
     maxVisiblePages?: number
+    pageSizeOptions?: number[]
 }
 
 export function TablePagination(props: tablePaginationProps) {
 
-    const {className, table, maxVisiblePages = 3} = props
+    const {className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50]} = props
 
     return (
-        <div className={cn("flex justify-between mt-8", className)}>
+        <div className={cn("flex mt-6", className)}>
-            <TablePaginationSize table={table}/>
+            <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions}/>
-            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages}/>
+            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end"/>
         </div>
     )
 }

src/features/backup/columns.tsx

@@ -18,7 +18,7 @@ export type Backup = {
     status: "pending" | "processing" | "success" | "failed"
 }
 
-export const columns: ColumnDef<Backup>[] = [
+export const backupColumns: ColumnDef<Backup>[] = [
     {
         accessorKey: "id",
         header: "Reference",
@@ -26,6 +26,9 @@ export const columns: ColumnDef<Backup>[] = [
     {
         accessorKey: "createdAt",
         header: "Created At",
+        cell: ({row}) => {
+            return new Date(row.getValue("createdAt")).toLocaleString("fr-FR");
+        },
     },
     {
         accessorKey: "status",

src/features/layout/page.tsx

@@ -1,36 +1,47 @@
-import {PropsWithChildren} from 'react';
 import {twx} from "@/lib/twx";
 import {cn} from "@/lib/utils";
 
-export const Page = ({children}: PropsWithChildren<{}>) => {
-    return (
-        <div className="flex flex-1 flex-col gap-4 px-10 py-6">{children}</div>
-    );
-};
 
+<<<<<<< HEAD
+export const Page = twx.div((props) => [
+    cn(`flex flex-col h-full px-10 py-6`, props.className),
+=======
 export const PageHeader = twx.div((props)=>[
     cn(`flex justify-between`, props.className),
 ])
 
 export const PageTitle = twx.h1((props)=>[
     cn(`text-3xl font-bold mb-6`, props.className),
+>>>>>>> origin/main
 ])
 
 
+export const PageHeader = twx.div((props) => [
+    cn(`flex justify-between`, props.className),
+])
 
-export const PageDescription = twx.h2((props)=>[
+
+export const PageTitle = twx.h1((props) => [
+    cn(`text-3xl font-bold mb-6 flex gap-4 items-center`, props.className),
+])
+
+
+export const PageDescription = twx.h2((props) => [
     cn(`text-s mb-6 text-gray-700`, props.className),
 ])
 
 
+<<<<<<< HEAD
+export const PageActions = twx.h1((props) => [
+    cn(`flex gap-4 h-fit`, props.className),
+])
+
+export const PageContent = twx.div((props) => [
+    cn(`h-full`, props.className),
+=======
 export const PageActions = twx.h1((props)=>[
     cn(`flex gap-4`, props.className),
+>>>>>>> origin/main
 ])
 
 
-export const PageContent = ({children}: PropsWithChildren<{}>) => {
-    return (
-        <div className="">{children}</div>
-    );
-};
-

src/features/restore/columns.tsx

@@ -18,7 +18,7 @@ export type Restore = {
     status: "pending" | "processing" | "success" | "failed"
 }
 
-export const columns: ColumnDef<Restore>[] = [
+export const restoreColumns: ColumnDef<Restore>[] = [
     {
         accessorKey: "id",
         header: "Reference",
@@ -26,6 +26,9 @@ export const columns: ColumnDef<Restore>[] = [
     {
         accessorKey: "createdAt",
         header: "Created At",
+        cell: ({row}) => {
+            return new Date(row.getValue("createdAt")).toLocaleString("fr-FR");
+        },
     },
     {
         accessorKey: "status",