From 1e500f35834d693387fdacaeed2bdcd74027e21d Mon Sep 17 00:00:00 2001
From: charles-gauthereau <charles.gauthereau@soluce-technologies.com>
Date: Mon, 11 Nov 2024 15:33:21 +0100
Subject: [PATCH] Profile Page with update user information.

---
 .../dashboard/agents/[agentId]/page.tsx       | 81 ++++++-------------
 package.json                                  |  1 +
 2 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/app/(customer)/dashboard/agents/[agentId]/page.tsx b/app/(customer)/dashboard/agents/[agentId]/page.tsx
index 99586eb7..da0a3bf6 100644
--- a/app/(customer)/dashboard/agents/[agentId]/page.tsx
+++ b/app/(customer)/dashboard/agents/[agentId]/page.tsx
@@ -3,35 +3,46 @@ 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 {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
-import {StatusBadge} from "@/components/wrappers/status-badge";
+import {TablePagination} from "@/components/wrappers/table/table-pagination";
+import {columns} from "@/features/backup/columns";
+import {DataTableWithPagination} from "@/components/wrappers/table/data-table-with-pagination";
 
 
 export default async function RoutePage(props: PageParams<{}>) {
 
     const backups = [
-        {'id': 'backup-1', 'createdAt': '2023-11-27T11:26:54.870914Z', 'status': 'waiting'},
+        {'id': 'backup-1', 'createdAt': '2023-11-27T11:26:54.870914Z', 'status': 'pending'},
         {'id': 'backup-2', 'createdAt': '2023-12-03T11:26:54.870927Z', 'status': 'failed'},
         {'id': 'backup-3', 'createdAt': '2023-12-12T11:26:54.870937Z', 'status': 'success'},
-        {'id': 'backup-4', 'createdAt': '2023-11-23T11:26:54.870946Z', 'status': 'ongoing'},
-        {'id': 'backup-5', 'createdAt': '2023-12-09T11:26:54.870955Z', 'status': 'waiting'},
+        {'id': 'backup-4', 'createdAt': '2023-11-23T11:26:54.870946Z', 'status': 'processing'},
+        {'id': 'backup-5', 'createdAt': '2023-12-09T11:26:54.870955Z', 'status': 'pending'},
         {'id': 'backup-6', 'createdAt': '2023-11-29T11:26:54.870964Z', 'status': 'failed'},
         {'id': 'backup-7', 'createdAt': '2023-12-07T11:26:54.870973Z', 'status': 'success'},
-        {'id': 'backup-8', 'createdAt': '2023-11-18T11:26:54.870982Z', 'status': 'ongoing'},
-        {'id': 'backup-9', 'createdAt': '2023-12-01T11:26:54.870991Z', 'status': 'waiting'},
-        {'id': 'backup-10', 'createdAt': '2023-11-25T11:26:54.871000Z', 'status': 'failed'}
+        {'id': 'backup-8', 'createdAt': '2023-11-18T11:26:54.870982Z', 'status': 'processing'},
+        {'id': 'backup-9', 'createdAt': '2023-12-01T11:26:54.870991Z', 'status': 'pending'},
+        {'id': 'backup-10', 'createdAt': '2023-11-25T11:26:54.871000Z', 'status': 'failed'},
+        {'id': 'backup-1', 'createdAt': '2023-11-27T11:26:54.870914Z', 'status': 'pending'},
+        {'id': 'backup-2', 'createdAt': '2023-12-03T11:26:54.870927Z', 'status': 'failed'},
+        {'id': 'backup-3', 'createdAt': '2023-12-12T11:26:54.870937Z', 'status': 'success'},
+        {'id': 'backup-4', 'createdAt': '2023-11-23T11:26:54.870946Z', 'status': 'processing'},
+        {'id': 'backup-5', 'createdAt': '2023-12-09T11:26:54.870955Z', 'status': 'pending'},
+        {'id': 'backup-6', 'createdAt': '2023-11-29T11:26:54.870964Z', 'status': 'failed'},
+        {'id': 'backup-7', 'createdAt': '2023-12-07T11:26:54.870973Z', 'status': 'success'},
+        {'id': 'backup-8', 'createdAt': '2023-11-18T11:26:54.870982Z', 'status': 'processing'},
+        {'id': 'backup-9', 'createdAt': '2023-12-01T11:26:54.870991Z', 'status': 'pending'},
+        {'id': 'backup-11', 'createdAt': '2023-11-25T11:26:54.871000Z', 'status': 'failed'}
     ]
 
     const restores = [
-        {'id': 'restore-1', 'backupId': 'backup-1', 'createdAt': '2023-11-27T11:26:54.870914Z', 'status': 'waiting'},
+        {'id': 'restore-1', 'backupId': 'backup-1', 'createdAt': '2023-11-27T11:26:54.870914Z', 'status': 'pending'},
         {'id': 'restore-2', 'backupId': 'backup-2', 'createdAt': '2023-12-03T11:26:54.870927Z', 'status': 'failed'},
         {'id': 'restore-3', 'backupId': 'backup-3', 'createdAt': '2023-12-12T11:26:54.870937Z', 'status': 'success'},
-        {'id': 'restore-4', 'backupId': 'backup-4', 'createdAt': '2023-11-23T11:26:54.870946Z', 'status': 'ongoing'},
-        {'id': 'restore-5', 'backupId': 'backup-5', 'createdAt': '2023-12-09T11:26:54.870955Z', 'status': 'waiting'},
+        {'id': 'restore-4', 'backupId': 'backup-4', 'createdAt': '2023-11-23T11:26:54.870946Z', 'status': 'processing'},
+        {'id': 'restore-5', 'backupId': 'backup-5', 'createdAt': '2023-12-09T11:26:54.870955Z', 'status': 'pending'},
         {'id': 'restore-6', 'backupId': 'backup-6', 'createdAt': '2023-11-29T11:26:54.870964Z', 'status': 'failed'},
         {'id': 'restore-7', 'backupId': 'backup-7', 'createdAt': '2023-12-07T11:26:54.870973Z', 'status': 'success'},
-        {'id': 'restore-8', 'backupId': 'backup-8', 'createdAt': '2023-11-18T11:26:54.870982Z', 'status': 'ongoing'},
-        {'id': 'restore-9', 'backupId': 'backup-9', 'createdAt': '2023-12-01T11:26:54.870991Z', 'status': 'waiting'},
+        {'id': 'restore-8', 'backupId': 'backup-8', 'createdAt': '2023-11-18T11:26:54.870982Z', 'status': 'processing'},
+        {'id': 'restore-9', 'backupId': 'backup-9', 'createdAt': '2023-12-01T11:26:54.870991Z', 'status': 'pending'},
         {'id': 'restore-10', 'backupId': 'backup-10', 'createdAt': '2023-11-25T11:26:54.871000Z', 'status': 'failed'}
     ]
 
@@ -77,51 +88,11 @@ export default async function RoutePage(props: PageParams<{}>) {
                     </TabsList>
 
                     <TabsContent className="flex flex-col gap-6" value="backup">
-                        <Table>
-                            <TableHeader>
-                                <TableRow>
-                                    <TableHead>Reference</TableHead>
-                                    <TableHead>Date</TableHead>
-                                    <TableHead>Status</TableHead>
-                                    <TableHead></TableHead>
-                                </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                                {backups.map((backup) => (
-                                    <TableRow>
-                                        <TableCell>{backup.id}</TableCell>
-                                        <TableCell>{backup.createdAt}</TableCell>
-                                        <TableCell><StatusBadge status={backup.status}/></TableCell>
-                                        <TableCell></TableCell>
-                                    </TableRow>
-
-                                ))}
-                            </TableBody>
-                        </Table>
+                        <DataTableWithPagination columns={columns} data={backups}/>
                     </TabsContent>
 
                     <TabsContent className="flex flex-col gap-6" value="restore">
-                        <Table>
-                            <TableHeader>
-                                <TableRow>
-                                    <TableHead>Backup reference</TableHead>
-                                    <TableHead>Date</TableHead>
-                                    <TableHead>Status</TableHead>
-                                    <TableHead></TableHead>
-                                </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                                {restores.map((restore) => (
-                                    <TableRow>
-                                        <TableCell>{restore.backupId}</TableCell>
-                                        <TableCell>{restore.createdAt}</TableCell>
-                                        <TableCell><StatusBadge status={restore.status}/></TableCell>
-                                        <TableCell></TableCell>
-                                    </TableRow>
-
-                                ))}
-                            </TableBody>
-                        </Table>
+                        <DataTableWithPagination columns={columns} data={restores}/>
                     </TabsContent>
 
                 </Tabs>
diff --git a/package.json b/package.json
index 13aff3d0..cfceb8b8 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.59.18",
+    "@tanstack/react-table": "^8.20.5",
     "argon2": "^0.41.1",
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",