External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: organization settings page responsive on mobile.

Browse Source
This commit is contained in:
charlesgauthereau
2026-01-11 12:37:57 +01:00
parent a3a20bee4a
commit be8f3bd98c
8 changed files with 81 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(customer)/dashboard/(admin)/agents/[agentId]/page.tsx
+10 -4
View File
@@ -33,16 +33,22 @@ export default async function RoutePage(props: PageParams<{ agentId: string }>)
return ( return (
<Page> <Page>
<div className="justify-between gap-2 sm:flex"> <div className="justify-between gap-2 sm:flex">
<PageTitle className="flex items-center"> <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)} {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"})} <Link className={buttonVariants({variant: "outline"})}
href={`/dashboard/agents/${agent.id}/edit`}> href={`/dashboard/agents/${agent.id}/edit`}>
<GearIcon className="w-7 h-7"/> <GearIcon className="w-7 h-7"/>
</Link> </Link>
</PageTitle> </div>
<PageActions className="justify-between"> <div className="flex items-center gap-2">
<ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/> <ButtonDeleteAgent agentId={agentId} text={"Delete Agent"}/>
</PageActions> </div>
</div>
</PageTitle>
</div> </div>
{agent.description && ( {agent.description && (
app/(customer)/dashboard/(admin)/agents/page.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default async function RoutePage(props: PageParams<{}>) {
with: { with: {
databases: true databases: true
}, },
orderBy: (fields) => desc(fields.createdAt), orderBy: (fields) => desc(fields.lastContact),
}); });
app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx
-12
View File
@@ -78,18 +78,6 @@ export default async function RoutePage(props: PageParams<{
</div> </div>
)} )}
</PageTitle> </PageTitle>
</div> </div>
<PageContent className="flex flex-col w-full h-full"> <PageContent className="flex flex-col w-full h-full">
{proj.databases.length > 0 ? ( {proj.databases.length > 0 ? (
app/(customer)/dashboard/(organization)/settings/page.tsx
+17 -6
View File
@@ -11,6 +11,13 @@ import {Metadata} from "next";
import {OrganizationTabs} from "@/components/wrappers/dashboard/organization/tabs/organization-tabs"; import {OrganizationTabs} from "@/components/wrappers/dashboard/organization/tabs/organization-tabs";
import {getOrganizationChannels} from "@/db/services/notification-channel"; import {getOrganizationChannels} from "@/db/services/notification-channel";
import {computeOrganizationPermissions} from "@/lib/acl/organization-acl"; 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 = { export const metadata: Metadata = {
title: "Settings", title: "Settings",
@@ -26,25 +33,29 @@ export default async function RoutePage(props: PageParams<{ slug: string }>) {
} }
const notificationChannels = await getOrganizationChannels(organization.id) const notificationChannels = await getOrganizationChannels(organization.id)
const permissions = computeOrganizationPermissions(activeMember); const permissions = computeOrganizationPermissions(activeMember);
return ( return (
<Page> <Page>
<PageHeader> <PageHeader>
<PageTitle className="flex items-center"> <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 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" && ( {permissions.canManageSettings && organization.slug !== "default" && (
<EditButtonSettings/> <EditButtonSettings/>
)} )}
</PageTitle> </div>
<div className="flex items-center gap-2">
<PageActions>
{permissions.canManageDangerZone && organization.slug !== "default" && ( {permissions.canManageDangerZone && organization.slug !== "default" && (
<DeleteOrganizationButton organizationSlug={organization.slug}/> <DeleteOrganizationButton organizationSlug={organization.slug}/>
)} )}
</PageActions> </div>
</div>
</PageTitle>
</PageHeader> </PageHeader>
<PageContent> <PageContent>
<OrganizationTabs <OrganizationTabs
src/components/wrappers/dashboard/agent/agent-database-card.tsx
+2 -2
View File
@@ -10,9 +10,9 @@ export type agentDatabaseCardProps = {
export const AgentDatabaseCard = (props: agentDatabaseCardProps) => { export const AgentDatabaseCard = (props: agentDatabaseCardProps) => {
const {data: database} = props; 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) { /* if (!database.projectId) {
return <DatabaseCard data={database}/>; return <DatabaseCard data={database}/>;
} }
src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx
+3 -1
View File
@@ -6,6 +6,7 @@ import {useMutation} from "@tanstack/react-query";
import {useRouter} from "next/navigation"; import {useRouter} from "next/navigation";
import {toast} from "sonner"; import {toast} from "sonner";
import {deleteAgentAction} from "@/components/wrappers/dashboard/agent/button-delete-agent/delete-agent.action"; import {deleteAgentAction} from "@/components/wrappers/dashboard/agent/button-delete-agent/delete-agent.action";
import {useIsMobile} from "@/hooks/use-mobile";
export type ButtonDeleteAgentProps = { export type ButtonDeleteAgentProps = {
text?: string; text?: string;
@@ -14,6 +15,7 @@ export type ButtonDeleteAgentProps = {
export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => { export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => {
const router = useRouter(); const router = useRouter();
const isMobile = useIsMobile();
const mutation = useMutation({ const mutation = useMutation({
mutationFn: () => deleteAgentAction(props.agentId), 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." description="Are you sure you want to remove this agent? This action cannot be undone."
button={{ button={{
main: { main: {
text: props.text ? props.text : "", text: props.text ? !isMobile ? props.text: "" : "",
variant: "outline", variant: "outline",
icon: <Trash2 color="red"/>, icon: <Trash2 color="red"/>,
}, },
src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx
+3 -1
View File
@@ -6,6 +6,7 @@ import {useRouter} from "next/navigation";
import {toast} from "sonner"; import {toast} from "sonner";
import {authClient} from "@/lib/auth/auth-client"; import {authClient} from "@/lib/auth/auth-client";
import {Trash2} from "lucide-react"; import {Trash2} from "lucide-react";
import {useIsMobile} from "@/hooks/use-mobile";
export type DeleteOrganizationButtonProps = { export type DeleteOrganizationButtonProps = {
organizationSlug: string; organizationSlug: string;
@@ -13,6 +14,7 @@ export type DeleteOrganizationButtonProps = {
export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) => { export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) => {
const router = useRouter(); const router = useRouter();
const isMobile = useIsMobile();
const {data: organizations, refetch} = authClient.useListOrganizations(); const {data: organizations, refetch} = authClient.useListOrganizations();
const mutation = useMutation({ 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." description="Are you sure you want to remove this organization? This action cannot be undone."
button={{ button={{
main: { main: {
text: "Delete Organization", text: !isMobile ? "Delete Organization" : "",
variant: "outline", variant: "outline",
icon: <Trash2 color="red"/>, icon: <Trash2 color="red"/>,
}, },
src/components/wrappers/dashboard/projects/project-card/project-database-card.tsx
+25 -13
View File
@@ -19,7 +19,8 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
const {data: database, extendedProps: extendedProps} = props; const {data: database, extendedProps: extendedProps} = props;
return ( 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" <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}`}> href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
<DatabaseCard data={database}/> <DatabaseCard data={database}/>
</Link> </Link>
@@ -28,10 +29,11 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
export type databaseCardProps = { export type databaseCardProps = {
data: Database; data: Database;
withDetails?: boolean;
}; };
export const DatabaseCard = (props: databaseCardProps) => { export const DatabaseCard = (props: databaseCardProps) => {
const {data: database} = props; const {data: database, withDetails = true} = props;
const [isCopied, setIsCopied] = useState(false); const [isCopied, setIsCopied] = useState(false);
const handleCopy = (e: React.MouseEvent) => { const handleCopy = (e: React.MouseEvent) => {
@@ -43,9 +45,11 @@ export const DatabaseCard = (props: databaseCardProps) => {
}; };
return ( 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="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"> <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 <Image
src={`/images/${database.dbms}.png`} src={`/images/${database.dbms}.png`}
alt={`${database.dbms} icon`} alt={`${database.dbms} icon`}
@@ -67,9 +71,10 @@ export const DatabaseCard = (props: databaseCardProps) => {
</h3> </h3>
<div className="flex flex-col gap-2"> <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"> <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> </div>
<span className="font-mono text-[10px] font-bold truncate"> <span className="font-mono text-[10px] font-bold truncate">
{database.agentDatabaseId} {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" 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" 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> </button>
</div> </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"> <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> </div>
<span className="text-[10px] font-bold uppercase tracking-tight"> <span className="text-[10px] font-bold uppercase tracking-tight">
{formatDateLastContact(database.lastContact)} {formatDateLastContact(database.lastContact)}
@@ -93,13 +100,18 @@ export const DatabaseCard = (props: databaseCardProps) => {
</div> </div>
</div> </div>
{withDetails && (
<div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50"> <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> <span
<div className="flex items-center gap-1 text-muted-foreground group-hover:text-primary transition-colors"> 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>
<span className="text-[10px] font-bold uppercase tracking-widest group-hover:hidden">Details</span> <div
<ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" /> 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> </div>
)}
</Card> </Card>
); );
}; };