wrapping some components.

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

@@ -42,14 +42,14 @@ export const CardsWithPagination = (props: cardsWithPaginationProps) => {
 
 
     return (
-        <div className={cn("", className)}>
-            <div className={cn(`grid auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
+        <div className={cn("flex flex-col h-full justify-between", className)}>
+            <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)}>
-            <TablePaginationSize table={table}/>
-            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages}/>
+        <div className={cn("flex mt-6", className)}>
+            <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions}/>
+            <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",