@m5kdev/web-ui 0.1.3 → 0.1.5

package/dist/src/modules/auth/components/OrganizationMembersRoute.d.ts

@@ -0,0 +1,51 @@
+declare const ORGANIZATION_ROLES: readonly ["member", "admin", "owner"];
+export type OrganizationRole = (typeof ORGANIZATION_ROLES)[number];
+export type OrganizationMembersRouteLabels = {
+    loadError: string;
+    membersTitle: string;
+    membersNoActive: string;
+    membersManageOnly: string;
+    membersDescription: (organizationName: string) => string;
+    defaultOrganizationName: string;
+    loadMembersError: string;
+    loadInvitationsError: string;
+    roleUpdateSuccess: string;
+    roleUpdateError: string;
+    removeMemberSuccess: string;
+    removeMemberError: string;
+    emailRequired: string;
+    inviteSuccess: string;
+    inviteError: string;
+    cancelInvitationSuccess: string;
+    cancelInvitationError: string;
+    inviteLinkCopied: string;
+    copyInviteLinkError: string;
+    unknownName: string;
+    invitedUser: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    roleLabel: string;
+    inviteButton: string;
+    tableTitle: string;
+    columnName: string;
+    columnEmail: string;
+    columnRole: string;
+    columnStatus: string;
+    columnActions: string;
+    tableEmpty: string;
+    roleFor: (name: string) => string;
+    statusActive: string;
+    statusInvited: string;
+    removeMember: string;
+    copyInviteLink: string;
+    cancelInvitation: string;
+    roleUnknown: string;
+};
+export type OrganizationMembersRouteProps = {
+    managerRoles?: string[];
+    assignableRoles?: OrganizationRole[];
+    invitationAcceptPath?: string;
+    onInvalidateScopedQueries?: () => void | Promise<void>;
+};
+export declare function OrganizationMembersRoute({ managerRoles, assignableRoles, invitationAcceptPath, onInvalidateScopedQueries, }: OrganizationMembersRouteProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/auth/components/OrganizationMembersRoute.js

@@ -0,0 +1,359 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Chip, Input, Select, SelectItem, Spinner, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Copy, Trash2, UserPlus, Users } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+const ORGANIZATION_ROLES = ["member", "admin", "owner"];
+function isOrganizationRole(role) {
+    return ORGANIZATION_ROLES.includes(role);
+}
+function OrganizationStateCard({ title, message }) {
+    return (_jsx("div", { className: "p-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { className: "text-lg font-semibold", children: title }), _jsx(CardBody, { children: message })] }) }));
+}
+function useOrganizationAccess({ managerRoles, onInvalidateScopedQueries, }) {
+    const { data: session, registerSession } = useSession();
+    const queryClient = useQueryClient();
+    const activeOrganizationId = session?.session.activeOrganizationId ?? "";
+    const activeOrganizationRole = session?.session?.activeOrganizationRole ??
+        "";
+    const managerRoleSet = useMemo(() => new Set(managerRoles ?? ["admin", "owner"]), [managerRoles]);
+    const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
+    const refreshOrganizationQueries = useCallback(async () => {
+        await Promise.allSettled([
+            queryClient.invalidateQueries({ queryKey: ["auth-organization-list"] }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-details", activeOrganizationId],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-members", activeOrganizationId],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-invitations", activeOrganizationId],
+            }),
+        ]);
+        registerSession(() => {
+            void onInvalidateScopedQueries?.();
+        });
+    }, [activeOrganizationId, onInvalidateScopedQueries, queryClient, registerSession]);
+    return {
+        activeOrganizationId,
+        activeOrganizationRole,
+        canManageOrganization,
+        refreshOrganizationQueries,
+    };
+}
+function useOrganizationConfig({ assignableRoles, }) {
+    const { t } = useTranslation();
+    const translatedLabels = useMemo(() => ({
+        loadError: t("web-ui:organization.members.loadError"),
+        membersTitle: t("web-ui:organization.members.title"),
+        membersNoActive: t("web-ui:organization.members.noActive"),
+        membersManageOnly: t("web-ui:organization.members.manageOnly"),
+        membersDescription: (organizationName) => t("web-ui:organization.members.description", { name: organizationName }),
+        defaultOrganizationName: t("web-ui:organization.members.defaultName"),
+        loadMembersError: t("web-ui:organization.members.loadMembersError"),
+        loadInvitationsError: t("web-ui:organization.members.loadInvitationsError"),
+        roleUpdateSuccess: t("web-ui:organization.members.roleUpdateSuccess"),
+        roleUpdateError: t("web-ui:organization.members.roleUpdateError"),
+        removeMemberSuccess: t("web-ui:organization.members.removeMemberSuccess"),
+        removeMemberError: t("web-ui:organization.members.removeMemberError"),
+        emailRequired: t("web-ui:organization.members.emailRequired"),
+        inviteSuccess: t("web-ui:organization.members.inviteSuccess"),
+        inviteError: t("web-ui:organization.members.inviteError"),
+        cancelInvitationSuccess: t("web-ui:organization.members.cancelInvitationSuccess"),
+        cancelInvitationError: t("web-ui:organization.members.cancelInvitationError"),
+        inviteLinkCopied: t("web-ui:organization.members.inviteLinkCopied"),
+        copyInviteLinkError: t("web-ui:organization.members.copyInviteLinkError"),
+        unknownName: t("web-ui:organization.members.unknownName"),
+        invitedUser: t("web-ui:organization.members.invitedUser"),
+        emailLabel: t("web-ui:organization.members.emailLabel"),
+        emailPlaceholder: t("web-ui:organization.members.emailPlaceholder"),
+        roleLabel: t("web-ui:organization.members.roleLabel"),
+        inviteButton: t("web-ui:organization.members.inviteButton"),
+        tableTitle: t("web-ui:organization.members.tableTitle"),
+        columnName: t("web-ui:organization.members.columnName"),
+        columnEmail: t("web-ui:organization.members.columnEmail"),
+        columnRole: t("web-ui:organization.members.columnRole"),
+        columnStatus: t("web-ui:organization.members.columnStatus"),
+        columnActions: t("web-ui:organization.members.columnActions"),
+        tableEmpty: t("web-ui:organization.members.tableEmpty"),
+        roleFor: (name) => t("web-ui:organization.members.roleFor", { name }),
+        statusActive: t("web-ui:organization.members.statusActive"),
+        statusInvited: t("web-ui:organization.members.statusInvited"),
+        removeMember: t("web-ui:organization.members.removeMember"),
+        copyInviteLink: t("web-ui:organization.members.copyInviteLink"),
+        cancelInvitation: t("web-ui:organization.members.cancelInvitation"),
+        roleUnknown: t("web-ui:organization.members.roleUnknown"),
+    }), [t]);
+    const translatedRoleLabels = useMemo(() => ({
+        member: t("web-ui:organization.roles.member"),
+        admin: t("web-ui:organization.roles.admin"),
+        owner: t("web-ui:organization.roles.owner"),
+    }), [t]);
+    const resolvedAssignableRoles = useMemo(() => assignableRoles && assignableRoles.length > 0 ? assignableRoles : [...ORGANIZATION_ROLES], [assignableRoles]);
+    return {
+        resolvedLabels: translatedLabels,
+        resolvedRoleLabels: translatedRoleLabels,
+        resolvedAssignableRoles,
+    };
+}
+export function OrganizationMembersRoute({ managerRoles, assignableRoles, invitationAcceptPath, onInvalidateScopedQueries, }) {
+    const { resolvedLabels, resolvedRoleLabels, resolvedAssignableRoles } = useOrganizationConfig({
+        assignableRoles,
+    });
+    const { activeOrganizationId, activeOrganizationRole, canManageOrganization, refreshOrganizationQueries, } = useOrganizationAccess({ managerRoles, onInvalidateScopedQueries });
+    const [inviteEmail, setInviteEmail] = useState("");
+    const [inviteRole, setInviteRole] = useState(resolvedAssignableRoles[0] ?? "member");
+    const isMountedRef = useRef(true);
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const refreshOrganizationQueriesStable = useCallback(() => refreshOrganizationQueries(), [refreshOrganizationQueries]);
+    const updateRoleMutation = useMutation({
+        mutationFn: async ({ memberId, role, organizationId, }) => {
+            const { error } = await authClient.organization.updateMemberRole({
+                memberId,
+                role,
+                organizationId,
+            });
+            if (error)
+                throw new Error(error.message ?? resolvedLabels.roleUpdateError);
+        },
+        onSuccess: async () => {
+            await refreshOrganizationQueriesStable();
+            toast.success(resolvedLabels.roleUpdateSuccess);
+        },
+        onError: (error) => {
+            toast.error(error instanceof Error ? error.message : resolvedLabels.roleUpdateError);
+        },
+    });
+    const removeMemberMutation = useMutation({
+        mutationFn: async ({ memberId, organizationId, }) => {
+            const { error } = await authClient.organization.removeMember({
+                memberIdOrEmail: memberId,
+                organizationId,
+            });
+            if (error)
+                throw new Error(error.message ?? resolvedLabels.removeMemberError);
+        },
+        onSuccess: async () => {
+            await refreshOrganizationQueriesStable();
+            toast.success(resolvedLabels.removeMemberSuccess);
+        },
+        onError: (error) => {
+            toast.error(error instanceof Error ? error.message : resolvedLabels.removeMemberError);
+        },
+    });
+    const createInvitationMutation = useMutation({
+        mutationFn: async ({ email, role, organizationId, }) => {
+            const { error } = await authClient.organization.inviteMember({
+                organizationId,
+                email: email.trim(),
+                role,
+            });
+            if (error)
+                throw new Error(error.message ?? resolvedLabels.inviteError);
+        },
+        onSuccess: async () => {
+            await refreshOrganizationQueriesStable();
+            toast.success(resolvedLabels.inviteSuccess);
+            if (isMountedRef.current) {
+                setInviteEmail("");
+                setInviteRole(resolvedAssignableRoles[0] ?? "member");
+            }
+        },
+        onError: (error) => {
+            toast.error(error instanceof Error ? error.message : resolvedLabels.inviteError);
+        },
+    });
+    const cancelInvitationMutation = useMutation({
+        mutationFn: async ({ invitationId }) => {
+            const { error } = await authClient.organization.cancelInvitation({ invitationId });
+            if (error)
+                throw new Error(error.message ?? resolvedLabels.cancelInvitationError);
+        },
+        onSuccess: async () => {
+            await refreshOrganizationQueriesStable();
+            toast.success(resolvedLabels.cancelInvitationSuccess);
+        },
+        onError: (error) => {
+            toast.error(error instanceof Error ? error.message : resolvedLabels.cancelInvitationError);
+        },
+    });
+    const updatingMemberId = updateRoleMutation.isPending && updateRoleMutation.variables
+        ? updateRoleMutation.variables.memberId
+        : null;
+    const removingMemberId = removeMemberMutation.isPending && removeMemberMutation.variables
+        ? removeMemberMutation.variables.memberId
+        : null;
+    const cancelingInvitationId = cancelInvitationMutation.isPending && cancelInvitationMutation.variables
+        ? cancelInvitationMutation.variables.invitationId
+        : null;
+    useEffect(() => {
+        if (!resolvedAssignableRoles.includes(inviteRole)) {
+            setInviteRole(resolvedAssignableRoles[0] ?? "member");
+        }
+    }, [inviteRole, resolvedAssignableRoles]);
+    const organizationQuery = useQuery({
+        queryKey: ["auth-organization-details", activeOrganizationId],
+        enabled: Boolean(activeOrganizationId && canManageOrganization),
+        queryFn: async () => {
+            const { data, error } = await authClient.organization.getFullOrganization({
+                query: {
+                    organizationId: activeOrganizationId,
+                    membersLimit: 200,
+                },
+            });
+            if (error) {
+                throw new Error(error.message ?? resolvedLabels.loadError);
+            }
+            return data;
+        },
+    });
+    const membersQuery = useQuery({
+        queryKey: ["auth-organization-members", activeOrganizationId],
+        enabled: Boolean(activeOrganizationId && canManageOrganization),
+        queryFn: async () => {
+            const { data, error } = await authClient.organization.listMembers({
+                query: {
+                    organizationId: activeOrganizationId,
+                    limit: 200,
+                    offset: 0,
+                },
+            });
+            if (error) {
+                throw new Error(error.message ?? resolvedLabels.loadMembersError);
+            }
+            return (data?.members ??
+                []);
+        },
+    });
+    const invitationsQuery = useQuery({
+        queryKey: ["auth-organization-invitations", activeOrganizationId],
+        enabled: Boolean(activeOrganizationId && canManageOrganization),
+        queryFn: async () => {
+            const { data, error } = await authClient.organization.listInvitations({
+                query: {
+                    organizationId: activeOrganizationId,
+                },
+            });
+            if (error) {
+                throw new Error(error.message ?? resolvedLabels.loadInvitationsError);
+            }
+            return (data ?? []);
+        },
+    });
+    const members = membersQuery.data ?? [];
+    const invitations = invitationsQuery.data ?? [];
+    const rows = useMemo(() => {
+        const memberRows = members.map((member) => ({
+            kind: "member",
+            id: `member-${member.id}`,
+            displayName: member.user?.name || resolvedLabels.unknownName,
+            email: member.user?.email || "-",
+            role: member.role,
+            status: "active",
+            memberId: member.id,
+        }));
+        const invitationRows = invitations.map((invitation) => ({
+            kind: "invitation",
+            id: `invitation-${invitation.id}`,
+            displayName: resolvedLabels.invitedUser,
+            email: invitation.email,
+            role: invitation.role,
+            status: "invited",
+            invitationId: invitation.id,
+        }));
+        return [...memberRows, ...invitationRows].sort((left, right) => {
+            if (left.status === right.status) {
+                return left.email.localeCompare(right.email);
+            }
+            return left.status === "active" ? -1 : 1;
+        });
+    }, [invitations, members, resolvedLabels.invitedUser, resolvedLabels.unknownName]);
+    const onUpdateMemberRole = useCallback((memberId, role) => {
+        if (!canManageOrganization || !activeOrganizationId)
+            return;
+        updateRoleMutation.mutate({ memberId, role, organizationId: activeOrganizationId });
+    }, [canManageOrganization, activeOrganizationId, updateRoleMutation]);
+    const onRemoveMember = useCallback((memberId) => {
+        if (!canManageOrganization || !activeOrganizationId)
+            return;
+        removeMemberMutation.mutate({ memberId, organizationId: activeOrganizationId });
+    }, [canManageOrganization, activeOrganizationId, removeMemberMutation]);
+    const onCreateInvitation = useCallback(() => {
+        if (!canManageOrganization || !activeOrganizationId)
+            return;
+        if (!inviteEmail.trim()) {
+            toast.error(resolvedLabels.emailRequired);
+            return;
+        }
+        createInvitationMutation.mutate({
+            email: inviteEmail,
+            role: inviteRole,
+            organizationId: activeOrganizationId,
+        });
+    }, [
+        canManageOrganization,
+        activeOrganizationId,
+        inviteEmail,
+        inviteRole,
+        resolvedLabels.emailRequired,
+        createInvitationMutation,
+    ]);
+    const onCancelInvitation = useCallback((invitationId) => {
+        if (!canManageOrganization)
+            return;
+        cancelInvitationMutation.mutate({ invitationId });
+    }, [canManageOrganization, cancelInvitationMutation]);
+    const invitationLinkBase = useMemo(() => {
+        const invitationPath = invitationAcceptPath ?? "/organization/accept-invitation";
+        if (/^https?:\/\//i.test(invitationPath)) {
+            return `${invitationPath}?id=`;
+        }
+        return typeof window === "undefined"
+            ? `${invitationPath}?id=`
+            : `${window.location.origin}${invitationPath}?id=`;
+    }, [invitationAcceptPath]);
+    const onCopyInvitationLink = async (invitationId) => {
+        try {
+            await navigator.clipboard.writeText(`${invitationLinkBase}${invitationId}`);
+            toast.success(resolvedLabels.inviteLinkCopied);
+        }
+        catch {
+            toast.error(resolvedLabels.copyInviteLinkError);
+        }
+    };
+    const getRoleLabel = (role) => resolvedRoleLabels[role] ?? resolvedLabels.roleUnknown;
+    if (!activeOrganizationId) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.membersTitle, message: resolvedLabels.membersNoActive }));
+    }
+    if (!canManageOrganization) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.membersTitle, message: resolvedLabels.membersManageOnly }));
+    }
+    if (organizationQuery.isLoading || membersQuery.isLoading || invitationsQuery.isLoading) {
+        return (_jsx("div", { className: "p-6 flex justify-center", children: _jsx(Spinner, {}) }));
+    }
+    return (_jsx("div", { className: "p-6 space-y-6", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Users, { className: "h-4 w-4" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-lg font-semibold", children: resolvedLabels.membersTitle }), _jsx("p", { className: "text-sm text-default-500", children: resolvedLabels.membersDescription(organizationQuery.data?.name ?? resolvedLabels.defaultOrganizationName) })] })] }), _jsx(Chip, { variant: "flat", color: "primary", children: getRoleLabel(activeOrganizationRole || "member") })] }), _jsxs(CardBody, { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-[1fr_160px_auto]", children: [_jsx(Input, { type: "email", label: resolvedLabels.emailLabel, value: inviteEmail, onValueChange: setInviteEmail, placeholder: resolvedLabels.emailPlaceholder }), _jsx(Select, { label: resolvedLabels.roleLabel, selectedKeys: [inviteRole], disallowEmptySelection: true, onSelectionChange: (keys) => {
+                                        const role = Array.from(keys)[0];
+                                        if (role && isOrganizationRole(role) && resolvedAssignableRoles.includes(role)) {
+                                            setInviteRole(role);
+                                        }
+                                    }, children: resolvedAssignableRoles.map((role) => (_jsx(SelectItem, { children: getRoleLabel(role) }, role))) }), _jsx(Button, { color: "primary", startContent: _jsx(UserPlus, { className: "h-4 w-4" }), onPress: onCreateInvitation, isLoading: createInvitationMutation.isPending, children: resolvedLabels.inviteButton })] }), _jsxs(Table, { "aria-label": resolvedLabels.tableTitle, children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: resolvedLabels.columnName }), _jsx(TableColumn, { children: resolvedLabels.columnEmail }), _jsx(TableColumn, { children: resolvedLabels.columnRole }), _jsx(TableColumn, { children: resolvedLabels.columnStatus }), _jsx(TableColumn, { className: "text-right", children: resolvedLabels.columnActions })] }), _jsx(TableBody, { emptyContent: resolvedLabels.tableEmpty, children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.displayName }), _jsx(TableCell, { children: row.email }), _jsx(TableCell, { children: row.kind === "member" ? (_jsx(Select, { size: "sm", selectedKeys: [row.role], disallowEmptySelection: true, isDisabled: updatingMemberId === row.memberId, "aria-label": resolvedLabels.roleFor(row.displayName), onSelectionChange: (keys) => {
+                                                        const role = Array.from(keys)[0];
+                                                        if (role &&
+                                                            role !== row.role &&
+                                                            isOrganizationRole(role) &&
+                                                            resolvedAssignableRoles.includes(role)) {
+                                                            void onUpdateMemberRole(row.memberId, role);
+                                                        }
+                                                    }, children: resolvedAssignableRoles.map((role) => (_jsx(SelectItem, { children: getRoleLabel(role) }, role))) })) : (getRoleLabel(row.role)) }), _jsx(TableCell, { children: _jsx(Chip, { size: "sm", variant: "flat", color: row.status === "active" ? "success" : "warning", children: row.status === "active"
+                                                        ? resolvedLabels.statusActive
+                                                        : resolvedLabels.statusInvited }) }), _jsx(TableCell, { className: "text-right", children: row.kind === "member" ? (_jsx(Button, { size: "sm", color: "danger", variant: "light", isIconOnly: true, onPress: () => void onRemoveMember(row.memberId), isDisabled: removingMemberId === row.memberId, "aria-label": resolvedLabels.removeMember, children: _jsx(Trash2, { className: "h-4 w-4" }) })) : (_jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "light", isIconOnly: true, onPress: () => void onCopyInvitationLink(row.invitationId), "aria-label": resolvedLabels.copyInviteLink, children: _jsx(Copy, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", color: "danger", variant: "light", isIconOnly: true, onPress: () => void onCancelInvitation(row.invitationId), isDisabled: cancelingInvitationId === row.invitationId, "aria-label": resolvedLabels.cancelInvitation, children: _jsx(Trash2, { className: "h-4 w-4" }) })] })) })] }, row.id))) })] })] })] }) }));
+}

package/dist/src/modules/auth/components/OrganizationSettingsRoute.d.ts

@@ -0,0 +1,20 @@
+export type OrganizationSettingsRouteLabels = {
+    settingsTitle: string;
+    settingsDescription: string;
+    settingsNoActive: string;
+    settingsManageOnly: string;
+    formName: string;
+    formSlug: string;
+    formMetadata: string;
+    formMetadataInvalidJson: string;
+    formMetadataInvalid: string;
+    saveButton: string;
+    updateSuccess: string;
+    updateError: string;
+    loadError: string;
+};
+export type OrganizationSettingsRouteProps = {
+    managerRoles?: string[];
+    onInvalidateScopedQueries?: () => void | Promise<void>;
+};
+export declare function OrganizationSettingsRoute({ managerRoles, onInvalidateScopedQueries, }: OrganizationSettingsRouteProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/OrganizationSettingsRoute.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader, Chip, Input, Spinner, Textarea } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+function OrganizationStateCard({ title, message }) {
+    return (_jsx("div", { className: "p-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { className: "text-lg font-semibold", children: title }), _jsx(CardBody, { children: message })] }) }));
+}
+function useOrganizationAccess({ managerRoles, onInvalidateScopedQueries, }) {
+    const { data: session, registerSession } = useSession();
+    const queryClient = useQueryClient();
+    const activeOrganizationId = session?.session.activeOrganizationId ?? "";
+    const activeOrganizationRole = session?.session?.activeOrganizationRole ??
+        "";
+    const managerRoleSet = useMemo(() => new Set(managerRoles ?? ["admin", "owner"]), [managerRoles]);
+    const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
+    const refreshOrganizationQueries = useCallback(async () => {
+        await Promise.allSettled([
+            queryClient.invalidateQueries({ queryKey: ["auth-organization-list"] }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-details", activeOrganizationId],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-members", activeOrganizationId],
+            }),
+            queryClient.invalidateQueries({
+                queryKey: ["auth-organization-invitations", activeOrganizationId],
+            }),
+        ]);
+        registerSession(() => {
+            void onInvalidateScopedQueries?.();
+        });
+    }, [activeOrganizationId, onInvalidateScopedQueries, queryClient, registerSession]);
+    return {
+        activeOrganizationId,
+        activeOrganizationRole,
+        canManageOrganization,
+        refreshOrganizationQueries,
+    };
+}
+function useOrganizationConfig() {
+    const { t } = useTranslation();
+    const translatedLabels = useMemo(() => ({
+        settingsTitle: t("web-ui:organization.settings.title"),
+        settingsDescription: t("web-ui:organization.settings.description"),
+        settingsNoActive: t("web-ui:organization.settings.noActive"),
+        settingsManageOnly: t("web-ui:organization.settings.manageOnly"),
+        formName: t("web-ui:organization.settings.form.name"),
+        formSlug: t("web-ui:organization.settings.form.slug"),
+        formMetadata: t("web-ui:organization.settings.form.metadata"),
+        formMetadataInvalidJson: t("web-ui:organization.settings.form.metadataInvalidJson"),
+        formMetadataInvalid: t("web-ui:organization.settings.form.metadataInvalid"),
+        saveButton: t("web-ui:organization.settings.button.save"),
+        updateSuccess: t("web-ui:organization.settings.updateSuccess"),
+        updateError: t("web-ui:organization.settings.updateError"),
+        loadError: t("web-ui:organization.settings.loadError"),
+    }), [t]);
+    const translatedRoleLabels = useMemo(() => ({
+        member: t("web-ui:organization.roles.member"),
+        admin: t("web-ui:organization.roles.admin"),
+        owner: t("web-ui:organization.roles.owner"),
+    }), [t]);
+    return { resolvedLabels: translatedLabels, resolvedRoleLabels: translatedRoleLabels };
+}
+export function OrganizationSettingsRoute({ managerRoles, onInvalidateScopedQueries, }) {
+    const { resolvedLabels, resolvedRoleLabels } = useOrganizationConfig();
+    const { activeOrganizationId, activeOrganizationRole, canManageOrganization, refreshOrganizationQueries, } = useOrganizationAccess({ managerRoles, onInvalidateScopedQueries });
+    const [organizationName, setOrganizationName] = useState("");
+    const [organizationSlug, setOrganizationSlug] = useState("");
+    const [organizationMetadata, setOrganizationMetadata] = useState("{}");
+    const [isSavingOrganization, setIsSavingOrganization] = useState(false);
+    const organizationQuery = useQuery({
+        queryKey: ["auth-organization-details", activeOrganizationId],
+        enabled: Boolean(activeOrganizationId && canManageOrganization),
+        queryFn: async () => {
+            const { data, error } = await authClient.organization.getFullOrganization({
+                query: {
+                    organizationId: activeOrganizationId,
+                    membersLimit: 200,
+                },
+            });
+            if (error) {
+                throw new Error(error.message ?? resolvedLabels.loadError);
+            }
+            return data;
+        },
+    });
+    useEffect(() => {
+        const organization = organizationQuery.data;
+        if (!organization) {
+            return;
+        }
+        setOrganizationName(organization.name ?? "");
+        setOrganizationSlug(organization.slug ?? "");
+        setOrganizationMetadata(JSON.stringify(organization.metadata ?? {}, null, 2));
+    }, [organizationQuery.data]);
+    const onUpdateOrganization = async () => {
+        if (!canManageOrganization || !activeOrganizationId) {
+            return;
+        }
+        try {
+            setIsSavingOrganization(true);
+            let parsedMetadata;
+            try {
+                parsedMetadata = organizationMetadata.trim()
+                    ? JSON.parse(organizationMetadata)
+                    : {};
+            }
+            catch (parseError) {
+                const message = parseError instanceof SyntaxError
+                    ? resolvedLabels.formMetadataInvalidJson
+                    : parseError instanceof Error
+                        ? parseError.message
+                        : resolvedLabels.formMetadataInvalid;
+                throw new Error(message);
+            }
+            const { error } = await authClient.organization.update({
+                organizationId: activeOrganizationId,
+                data: {
+                    name: organizationName.trim(),
+                    slug: organizationSlug.trim(),
+                    metadata: parsedMetadata,
+                },
+            });
+            if (error) {
+                throw new Error(error.message ?? resolvedLabels.updateError);
+            }
+            await refreshOrganizationQueries();
+            toast.success(resolvedLabels.updateSuccess);
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : resolvedLabels.updateError);
+        }
+        finally {
+            setIsSavingOrganization(false);
+        }
+    };
+    if (!activeOrganizationId) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.settingsTitle, message: resolvedLabels.settingsNoActive }));
+    }
+    if (!canManageOrganization) {
+        return (_jsx(OrganizationStateCard, { title: resolvedLabels.settingsTitle, message: resolvedLabels.settingsManageOnly }));
+    }
+    if (organizationQuery.isLoading) {
+        return (_jsx("div", { className: "p-6 flex justify-center", children: _jsx(Spinner, {}) }));
+    }
+    return (_jsx("div", { className: "p-6", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-xl font-semibold", children: resolvedLabels.settingsTitle }), _jsx("p", { className: "text-sm text-default-500", children: resolvedLabels.settingsDescription })] }), _jsx(Chip, { variant: "flat", color: "primary", children: resolvedRoleLabels[activeOrganizationRole] ??
+                                activeOrganizationRole ??
+                                resolvedRoleLabels.member })] }), _jsxs(CardBody, { className: "grid gap-3", children: [_jsx(Input, { label: resolvedLabels.formName, value: organizationName, onValueChange: setOrganizationName }), _jsx(Input, { label: resolvedLabels.formSlug, value: organizationSlug, onValueChange: setOrganizationSlug }), _jsx(Textarea, { label: resolvedLabels.formMetadata, value: organizationMetadata, onValueChange: setOrganizationMetadata, minRows: 4 }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { color: "primary", isLoading: isSavingOrganization, onPress: onUpdateOrganization, children: resolvedLabels.saveButton }) })] })] }) }));
+}

package/dist/src/modules/auth/components/OrganizationSwitcher.d.ts

@@ -0,0 +1,7 @@
+export type OrganizationSwitcherProps = {
+    onInvalidateScopedQueries?: () => void | Promise<void>;
+    managerRoles?: string[];
+    managerPath?: string;
+    fallbackPath?: string;
+};
+export declare function OrganizationSwitcher({ onInvalidateScopedQueries, managerRoles, managerPath, fallbackPath, }: OrganizationSwitcherProps): import("react/jsx-runtime").JSX.Element;