Working on bugs, add delete restore. Review the auth style. working on the RBAC.

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

@@ -24,8 +24,7 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
             databases: true
         }
     })
-    //
-    console.log(agent)
+
 
     if (!agent) {
         notFound()
@@ -33,6 +32,13 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
     //
     // const databaseId = 'db-123';
     //
+
+    console.log("agent",agent)
+
+
+
+
+
     // const totalBackupsResult = await db
     //     .select({ count: drizzleDb.schemas.backup.id })
     //     .from(drizzleDb.schemas.backup)
@@ -67,11 +73,6 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
                           href={`/dashboard/agents/${agent.id}/edit`}>
                         <GearIcon className="w-7 h-7"/>
                     </Link>
-                    {/*<AgentModalKey agent={agent}>*/}
-                    {/*    <Button variant="outline">*/}
-                    {/*        <KeyRound/>*/}
-                    {/*    </Button>*/}
-                    {/*</AgentModalKey>*/}
                 </PageTitle>
 
             </div>
@@ -80,9 +81,9 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
                 <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
+                            Databases
                         </CardHeader>
-                        <CardContent></CardContent>
+                        <CardContent>{agent.databases.length}</CardContent>
                     </Card>
                     <Card className="w-full sm:w-auto flex-1">
                         <CardHeader className="font-bold text-xl">
@@ -102,7 +103,7 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
                     </Card>
 
                 </div>
-                <Card className="w-full sm:w-auto flex-1">
+                <Card className="w-full sm:w-auto flex-1 mb-4">
                     <CardHeader className="font-bold text-xl">
                         Edge Key
                     </CardHeader>
@@ -110,7 +111,7 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
                         <AgentCardKey agent={agent}/>
                     </CardContent>
                 </Card>
-                <CardsWithPagination data={agent.databases} cardItem={DatabaseCard}/>
+                <CardsWithPagination cardsPerPage={2} data={agent.databases} cardItem={DatabaseCard}/>
             </PageContent>
         </Page>
     )

app/(customer)/dashboard/(organization)/home/page.tsx

@@ -1,20 +1,29 @@
 "use client";
 import { authClient } from "@/lib/auth/auth-client";
 import { PageParams } from "@/types/next";
+import {Page, PageHeader, PageTitle} from "@/features/layout/page";
 
 export default function RoutePage(props: PageParams<{}>) {
     const { data: activeOrganization } = authClient.useActiveOrganization();
 
     return (
-        <div className="flex flex-1 flex-col gap-4 p-4">
-            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div className="aspect-video rounded-xl bg-muted/50" />
-                <div className="aspect-video rounded-xl bg-muted/50" />
-                <div className="aspect-video rounded-xl bg-muted/50" />
+        <Page>
+            <PageHeader>
+                <PageTitle>Dashboard</PageTitle>
+            </PageHeader>
+
+            <div className="flex flex-1 flex-col gap-4">
+                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                    <div className="aspect-video rounded-xl bg-muted/50" />
+                    <div className="aspect-video rounded-xl bg-muted/50" />
+                    <div className="aspect-video rounded-xl bg-muted/50" />
+                </div>
+                {/*<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />*/}
+                {/*{JSON.stringify(activeOrganization)}*/}
+                {/*{activeOrganization?.name}*/}
             </div>
-            <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
-            {JSON.stringify(activeOrganization)}
-            {activeOrganization?.name}
-        </div>
+
+        </Page>
+
     );
 }

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

@@ -41,6 +41,7 @@ export default async function RoutePage(props: PageParams<{
 
     if (!proj) notFound();
 
+
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
@@ -62,6 +63,7 @@ export default async function RoutePage(props: PageParams<{
                     <CardsWithPagination
                         data={proj.databases}
                         organizationSlug={organization.slug}
+                        // @ts-ignore
                         cardItem={ProjectDatabaseCard}
                         cardsPerPage={4}
                         numberOfColumns={1}