From be8f3bd98cb29039bc98b0283eb138cdaf2d38c2 Mon Sep 17 00:00:00 2001
From: charlesgauthereau <charles.gauthereau@soluce-technologies.com>
Date: Sun, 11 Jan 2026 12:37:57 +0100
Subject: [PATCH] fix: organization settings page responsive on mobile.

---
 .../(admin)/agents/[agentId]/page.tsx         | 24 +++++---
 .../dashboard/(admin)/agents/page.tsx         |  2 +-
 .../projects/[projectId]/page.tsx             | 12 ----
 .../(organization)/settings/page.tsx          | 35 ++++++++----
 .../dashboard/agent/agent-database-card.tsx   |  4 +-
 .../button-delete-agent.tsx                   |  4 +-
 .../delete-organization-button.tsx            |  4 +-
 .../project-card/project-database-card.tsx    | 56 +++++++++++--------
 8 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/app/(customer)/dashboard/(admin)/agents/[agentId]/page.tsx b/app/(customer)/dashboard/(admin)/agents/[agentId]/page.tsx
index 08484d53..19a978e6 100644
--- a/app/(customer)/dashboard/(admin)/agents/[agentId]/page.tsx
+++ b/app/(customer)/dashboard/(admin)/agents/[agentId]/page.tsx
@@ -33,16 +33,22 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
     return (
         <Page>
             <div className="justify-between gap-2 sm:flex">
-                <PageTitle className="flex items-center">
-                    {capitalizeFirstLetter(agent.name)}
-                    <Link className={buttonVariants({variant: "outline"})}
-                          href={`/dashboard/agents/${agent.id}/edit`}>
-                        <GearIcon className="w-7 h-7"/>
-                    </Link>
+                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full ">
+                    <div className="min-w-full md:min-w-fit ">
+                        {capitalizeFirstLetter(agent.name)}
+                    </div>
+                        <div className="flex items-center gap-2 md:justify-between w-full ">
+                            <div className="flex items-center gap-2">
+                                <Link className={buttonVariants({variant: "outline"})}
+                                      href={`/dashboard/agents/${agent.id}/edit`}>
+                                    <GearIcon className="w-7 h-7"/>
+                                </Link>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
+                            </div>
+                        </div>
                 </PageTitle>
-                <PageActions className="justify-between">
-                    <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
-                </PageActions>
             </div>
 
             {agent.description && (
diff --git a/app/(customer)/dashboard/(admin)/agents/page.tsx b/app/(customer)/dashboard/(admin)/agents/page.tsx
index 6864d1cc..230026a7 100644
--- a/app/(customer)/dashboard/(admin)/agents/page.tsx
+++ b/app/(customer)/dashboard/(admin)/agents/page.tsx
@@ -22,7 +22,7 @@ export default async function RoutePage(props: PageParams<{}>) {
         with: {
             databases: true
         },
-        orderBy: (fields) => desc(fields.createdAt),
+        orderBy: (fields) => desc(fields.lastContact),
     });
 
 
diff --git a/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx b/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx
index 284bf0d4..0798540e 100644
--- a/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx
+++ b/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx
@@ -78,18 +78,6 @@ export default async function RoutePage(props: PageParams<{
                         </div>
                     )}
                 </PageTitle>
-
-
-
-
-
-
-
-
-
-
-
-
             </div>
             <PageContent className="flex flex-col w-full h-full">
                 {proj.databases.length > 0 ? (
diff --git a/app/(customer)/dashboard/(organization)/settings/page.tsx b/app/(customer)/dashboard/(organization)/settings/page.tsx
index dc1ff52a..131e2d62 100644
--- a/app/(customer)/dashboard/(organization)/settings/page.tsx
+++ b/app/(customer)/dashboard/(organization)/settings/page.tsx
@@ -11,6 +11,13 @@ import {Metadata} from "next";
 import {OrganizationTabs} from "@/components/wrappers/dashboard/organization/tabs/organization-tabs";
 import {getOrganizationChannels} from "@/db/services/notification-channel";
 import {computeOrganizationPermissions} from "@/lib/acl/organization-acl";
+import {capitalizeFirstLetter} from "@/utils/text";
+import Link from "next/link";
+import {buttonVariants} from "@/components/ui/button";
+import {GearIcon} from "@radix-ui/react-icons";
+import {
+    ButtonDeleteProject
+} from "@/components/wrappers/dashboard/projects/button-delete-project/button-delete-project";
 
 export const metadata: Metadata = {
     title: "Settings",
@@ -26,25 +33,29 @@ export default async function RoutePage(props: PageParams<{ slug: string }>) {
     }
 
     const notificationChannels = await getOrganizationChannels(organization.id)
-
     const permissions = computeOrganizationPermissions(activeMember);
 
 
     return (
         <Page>
             <PageHeader>
-                <PageTitle className="flex items-center">
-                    Organization settings
-                    {permissions.canManageSettings && organization.slug !== "default" && (
-                        <EditButtonSettings/>
-                    )}
+                <PageTitle className="flex flex-col md:flex-row items-center justify-between w-full ">
+                    <div className="min-w-full md:min-w-fit ">
+                        Organization settings
+                    </div>
+                        <div className="flex items-center gap-2 md:justify-between w-full ">
+                            <div className="flex items-center gap-2">
+                                {permissions.canManageSettings && organization.slug !== "default" && (
+                                    <EditButtonSettings/>
+                                )}
+                            </div>
+                            <div className="flex items-center gap-2">
+                                {permissions.canManageDangerZone && organization.slug !== "default" && (
+                                    <DeleteOrganizationButton organizationSlug={organization.slug}/>
+                                )}
+                            </div>
+                        </div>
                 </PageTitle>
-
-                <PageActions>
-                    {permissions.canManageDangerZone && organization.slug !== "default" && (
-                        <DeleteOrganizationButton organizationSlug={organization.slug}/>
-                    )}
-                </PageActions>
             </PageHeader>
             <PageContent>
                 <OrganizationTabs
diff --git a/src/components/wrappers/dashboard/agent/agent-database-card.tsx b/src/components/wrappers/dashboard/agent/agent-database-card.tsx
index bfcdc638..a2392285 100644
--- a/src/components/wrappers/dashboard/agent/agent-database-card.tsx
+++ b/src/components/wrappers/dashboard/agent/agent-database-card.tsx
@@ -10,9 +10,9 @@ export type agentDatabaseCardProps = {
 export const AgentDatabaseCard = (props: agentDatabaseCardProps) => {
     const {data: database} = props;
 
-    return <DatabaseCard data={database}/>;
+    return <DatabaseCard withDetails={false} data={database}/>;
 
-    //todo: à remettre quand on aura fait l'impersonation des admins
+    //Todo: Add again when impersonation system will be implemented
    /* if (!database.projectId) {
          return <DatabaseCard data={database}/>;
     }
diff --git a/src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx b/src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx
index c7788bb3..0fccbd59 100644
--- a/src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx
+++ b/src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx
@@ -6,6 +6,7 @@ import {useMutation} from "@tanstack/react-query";
 import {useRouter} from "next/navigation";
 import {toast} from "sonner";
 import {deleteAgentAction} from "@/components/wrappers/dashboard/agent/button-delete-agent/delete-agent.action";
+import {useIsMobile} from "@/hooks/use-mobile";
 
 export type ButtonDeleteAgentProps = {
     text?: string;
@@ -14,6 +15,7 @@ export type ButtonDeleteAgentProps = {
 
 export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => {
     const router = useRouter();
+    const isMobile = useIsMobile();
 
     const mutation = useMutation({
         mutationFn: () => deleteAgentAction(props.agentId),
@@ -33,7 +35,7 @@ export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => {
             description="Are you sure you want to remove this agent? This action cannot be undone."
             button={{
                 main: {
-                    text: props.text ? props.text : "",
+                    text: props.text ? !isMobile ? props.text: "" : "",
                     variant: "outline",
                     icon: <Trash2 color="red"/>,
                 },
diff --git a/src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx b/src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx
index 3a7f3b54..6a5dc069 100644
--- a/src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx
+++ b/src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx
@@ -6,6 +6,7 @@ import {useRouter} from "next/navigation";
 import {toast} from "sonner";
 import {authClient} from "@/lib/auth/auth-client";
 import {Trash2} from "lucide-react";
+import {useIsMobile} from "@/hooks/use-mobile";
 
 export type DeleteOrganizationButtonProps = {
     organizationSlug: string;
@@ -13,6 +14,7 @@ export type DeleteOrganizationButtonProps = {
 
 export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) => {
     const router = useRouter();
+    const isMobile = useIsMobile();
     const {data: organizations, refetch} = authClient.useListOrganizations();
 
     const mutation = useMutation({
@@ -47,7 +49,7 @@ export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) =
             description="Are you sure you want to remove this organization? This action cannot be undone."
             button={{
                 main: {
-                    text: "Delete Organization",
+                    text: !isMobile ? "Delete Organization" : "",
                     variant: "outline",
                     icon: <Trash2 color="red"/>,
                 },
diff --git a/src/components/wrappers/dashboard/projects/project-card/project-database-card.tsx b/src/components/wrappers/dashboard/projects/project-card/project-database-card.tsx
index 8e8c1256..c7399e7c 100644
--- a/src/components/wrappers/dashboard/projects/project-card/project-database-card.tsx
+++ b/src/components/wrappers/dashboard/projects/project-card/project-database-card.tsx
@@ -19,8 +19,9 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
     const {data: database, extendedProps: extendedProps} = props;
 
     return (
-        <Link className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
-              href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
+        <Link
+            className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
+            href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
             <DatabaseCard data={database}/>
         </Link>
     );
@@ -28,10 +29,11 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
 
 export type databaseCardProps = {
     data: Database;
+    withDetails?: boolean;
 };
 
 export const DatabaseCard = (props: databaseCardProps) => {
-    const {data: database} = props;
+    const {data: database, withDetails = true} = props;
     const [isCopied, setIsCopied] = useState(false);
 
     const handleCopy = (e: React.MouseEvent) => {
@@ -43,13 +45,15 @@ export const DatabaseCard = (props: databaseCardProps) => {
     };
 
     return (
-        <Card className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
+        <Card
+            className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
             <div className="flex items-start justify-between mb-2">
-                <div className="relative w-12 h-12 p-2 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105">
-                    <Image 
-                        src={`/images/${database.dbms}.png`} 
+                <div
+                    className="relative w-12 h-12 p-2 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105">
+                    <Image
+                        src={`/images/${database.dbms}.png`}
                         alt={`${database.dbms} icon`}
-                        width={32} 
+                        width={32}
                         height={32}
                         className="object-contain w-full h-full"
                     />
@@ -60,16 +64,17 @@ export const DatabaseCard = (props: databaseCardProps) => {
                     </div>
                 </div>
             </div>
-            
+
             <div className="flex flex-col gap-2 flex-1">
                 <h3 className="text-lg font-black text-foreground group-hover:text-primary transition-colors truncate tracking-tight">
                     {database.name}
                 </h3>
-                
+
                 <div className="flex flex-col gap-2">
-                    <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
+                    <div
+                        className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                         <div className="p-1 bg-muted/50 rounded-lg">
-                            <Fingerprint className="w-3.5 h-3.5" />
+                            <Fingerprint className="w-3.5 h-3.5"/>
                         </div>
                         <span className="font-mono text-[10px] font-bold truncate">
                             {database.agentDatabaseId}
@@ -79,12 +84,14 @@ export const DatabaseCard = (props: databaseCardProps) => {
                             className="ml-1 p-0.5 hover:bg-muted rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 z-10"
                             title="Copy ID"
                         >
-                            {isCopied ? <Check className="w-2.5 h-2.5 text-green-500" /> : <Copy className="w-2.5 h-2.5" />}
+                            {isCopied ? <Check className="w-2.5 h-2.5 text-green-500"/> :
+                                <Copy className="w-2.5 h-2.5"/>}
                         </button>
                     </div>
-                    <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
+                    <div
+                        className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                         <div className="p-1 bg-muted/50 rounded-lg">
-                            <Activity className="w-3.5 h-3.5" />
+                            <Activity className="w-3.5 h-3.5"/>
                         </div>
                         <span className="text-[10px] font-bold uppercase tracking-tight">
                             {formatDateLastContact(database.lastContact)}
@@ -92,14 +99,19 @@ export const DatabaseCard = (props: databaseCardProps) => {
                     </div>
                 </div>
             </div>
-            
-            <div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50">
-                <span className="text-[10px] font-black uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-[-10px] group-hover:translate-x-0">Open</span>
-                <div className="flex items-center gap-1 text-muted-foreground group-hover:text-primary transition-colors">
-                    <span className="text-[10px] font-bold uppercase tracking-widest group-hover:hidden">Details</span>
-                    <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+
+            {withDetails && (
+                <div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50">
+                <span
+                    className="text-[10px] font-black uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-[-10px] group-hover:translate-x-0">Open</span>
+                    <div
+                        className="flex items-center gap-1 text-muted-foreground group-hover:text-primary transition-colors">
+                        <span
+                            className="text-[10px] font-bold uppercase tracking-widest group-hover:hidden">Details</span>
+                        <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform"/>
+                    </div>
                 </div>
-            </div>
+            )}
         </Card>
     );
 };