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

src/components/wrappers/dashboard/projects/ProjectCard/ProjectDatabaseCard.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { ConnectionCircle } from "@/components/wrappers/common/connection-circle";
 import { formatDateLastContact } from "@/utils/date-formatting";
 import {Database} from "@/db/schema/06_database";
+import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
 
 export type projectDatabaseCardProps = {
     data: Database;
@@ -17,7 +18,7 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
     const { organizationSlug, data: database, extendedProps: extendedProps } = props;
 
     return (
-        <Link href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
+        <Link className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md" href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
             <DatabaseCard data={database} />
         </Link>
     );
@@ -31,15 +32,21 @@ export const DatabaseCard = (props: databaseCardProps) => {
     const { data: database } = props;
 
     return (
+
         <Card className="flex flex-row justify-between">
-            <div className="flex flex-row items-center gap-2">
+            <div className="flex items-center space-x-4 px-4">
                 <Image src="/PostgreSQL.png" alt="Database type Icon" width={60} height={60} className="object-cover ml-4" />
-                <div>
-                    <CardHeader>Name : {database.name}</CardHeader>
-                    <CardContent>Last contact: {formatDateLastContact(database.lastContact)}</CardContent>
+
+                <div className="justify-between">
+                    <div className="font-medium">Name: {database.name}</div>
+                    <div className="text-sm text-muted-foreground">Generated Id: {database.agentDatabaseId}</div>
+                    <div className="text-xs text-muted-foreground">
+                        Last contact: {formatDateLastContact(database.lastContact)}
+                    </div>
                 </div>
             </div>
-            <div className="mt-3 mr-3">
+
+            <div className="flex items-center px-4">
                 <ConnectionCircle date={database.lastContact} />
             </div>
         </Card>