portal-mojo 0.1.0

package/src/admin/identity/members/GroupMembersPanel.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCan, type Params } from '../../../client';
+import { Badge, Eyebrow, SecurityItem, fmt, modal } from '../../../ui';
+import { MemberDetail, type MemberNavigationCallbacks } from './MemberDetail';
+import { openMemberAdmissionDialog, type AdmissionGroup, type AdmissionMode } from './member-flows';
+import {
+    MEMBER_GROUP_READ_PERMISSIONS,
+    MEMBER_INVITE_PERMISSIONS,
+    MEMBER_SAVE_PERMISSIONS,
+    MEMBER_USER_DIRECTORY_PERMISSIONS,
+    MemberModel,
+    rawMemberGrants,
+    type MemberRow,
+} from './models';
+
+type StatusFilter = 'active' | 'inactive' | 'all';
+const PAGE_SIZE = 15;
+
+function paramsFor(groupId: number, search: string, status: StatusFilter, start: number): Params {
+    const params: Params = { group: groupId, size: PAGE_SIZE, start, sort: '-id' };
+    if (search) params.search = search;
+    if (status !== 'all') params.is_active = status === 'active';
+    return params;
+}
+
+function MemberItem({ member, onOpen }: { member: MemberRow; onOpen: () => void }) {
+    const user = member.user;
+    const grants = rawMemberGrants(member.permissions);
+    const role = typeof member.metadata?.role === 'string' && member.metadata.role.trim()
+        ? member.metadata.role : null;
+    const shown = grants.slice(0, 5);
+    return (
+        <div
+            className="ga-click-row" role="button" tabIndex={0}
+            onClick={onOpen}
+            onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    onOpen();
+                }
+            }}
+        >
+            <SecurityItem
+                icon="bi-person-circle"
+                title={user?.display_name || user?.email || user?.username || `User #${user?.id ?? '?'}`}
+                desc={`${user?.email ?? 'No email'} · Joined ${fmt.date(member.created)}`}
+            >
+                <span className="chip-row">
+                    {role && <Badge tone="primary">{role}</Badge>}
+                    {shown.map((grant) => <Badge key={grant} tone="info">{grant}</Badge>)}
+                    {grants.length > shown.length && <Badge tone="muted">+{grants.length - shown.length}</Badge>}
+                    <Badge tone={member.is_active ? 'success' : 'muted'}>{member.is_active ? 'Active' : 'Inactive'}</Badge>
+                </span>
+            </SecurityItem>
+        </div>
+    );
+}
+
+export interface GroupMembersPanelProps extends MemberNavigationCallbacks {
+    group: AdmissionGroup;
+}
+
+export function GroupMembersPanel({ group, onNavigateUser, onNavigateGroup }: GroupMembersPanelProps) {
+    const qc = useQueryClient();
+    const [search, setSearch] = useState('');
+    const [status, setStatus] = useState<StatusFilter>('active');
+    const [start, setStart] = useState(0);
+    useEffect(() => setStart(0), [search, status, group.id]);
+    const query = MemberModel.useList(paramsFor(group.id, search, status, start));
+    const { can: canInvite } = useCan(MEMBER_INVITE_PERMISSIONS);
+    const { can: canCreate } = useCan(MEMBER_SAVE_PERMISSIONS);
+    const { can: canReadUsers } = useCan(MEMBER_USER_DIRECTORY_PERMISSIONS);
+    const members = query.data?.rows ?? [];
+    const count = query.data?.count ?? 0;
+
+    const admit = (initialMode: AdmissionMode) => openMemberAdmissionDialog({
+        group,
+        initialMode,
+        canInvite,
+        canCreate,
+        canReadUsers,
+        queryClient: qc,
+    });
+    const openMember = (member: MemberRow) => {
+        void MemberModel.fetchOne(qc, member.id).catch(() => {});
+        void modal.detail((close) => (
+            <MemberDetail
+                id={member.id}
+                onClose={() => close(null)}
+                readPermissions={MEMBER_GROUP_READ_PERMISSIONS}
+                onNavigateUser={onNavigateUser}
+                onNavigateGroup={onNavigateGroup}
+            />
+        ));
+    };
+
+    return (
+        <>
+            <Eyebrow>Members</Eyebrow>
+            {(canInvite || (canCreate && canReadUsers)) && (
+                <div className="ga-toolbar">
+                    {canInvite && (
+                        <button className="btn btn-primary btn-compact" onClick={() => { void admit('invite'); }}>
+                            <i className="bi bi-envelope" /> Invite by email
+                        </button>
+                    )}
+                    {canCreate && canReadUsers && (
+                        <button className="btn btn-compact" onClick={() => { void admit('add'); }}>
+                            <i className="bi bi-person-plus" /> Add existing user
+                        </button>
+                    )}
+                </div>
+            )}
+            <div className="ga-filter-row">
+                <input
+                    className="input" type="search" placeholder="Search members…"
+                    value={search} onChange={(event) => setSearch(event.target.value)}
+                />
+                <select
+                    className="input input-compact" value={status} aria-label="Status filter"
+                    onChange={(event) => setStatus(event.target.value as StatusFilter)}
+                >
+                    <option value="active">Active</option>
+                    <option value="inactive">Inactive</option>
+                    <option value="all">All</option>
+                </select>
+            </div>
+            {query.isPending && <div className="skel skel-block" />}
+            {query.error && <p className="text-bad">{query.error.message}</p>}
+            {!query.isPending && !query.error && members.length === 0 && (
+                <p className="dim-italic">{search ? 'No members match this search.' : 'No members in this view.'}</p>
+            )}
+            {members.map((member) => <MemberItem key={member.id} member={member} onOpen={() => openMember(member)} />)}
+            {count > 0 && (
+                <div className="ga-toolbar" style={{ justifyContent: 'space-between' }}>
+                    <span className="dim">Showing {start + 1}–{Math.min(start + members.length, count)} of {count}</span>
+                    <span className="chip-row">
+                        <button className="btn btn-compact" disabled={start === 0} onClick={() => setStart(Math.max(0, start - PAGE_SIZE))}>Previous</button>
+                        <button className="btn btn-compact" disabled={start + members.length >= count} onClick={() => setStart(start + PAGE_SIZE)}>Next</button>
+                    </span>
+                </div>
+            )}
+        </>
+    );
+}

package/src/admin/identity/members/MemberDetail.tsx

@@ -0,0 +1,226 @@
+import { useSyncExternalStore } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCan, type PermSpec } from '../../../client';
+import {
+    Badge, DetailView, Eyebrow, FlatRow, FormView, JsonBlock, MetricCard,
+    ModelTable, fmt, formModal, toast, type Column, type DetailMenuEntry,
+} from '../../../ui';
+import { LOGS_ADMIN_PERMISSIONS, LogModel, type LogRow } from '../../monitoring';
+import {
+    MEMBER_READ_PERMISSIONS,
+    MEMBER_SAVE_PERMISSIONS,
+    MemberModel,
+    effectiveMemberGrants,
+    getMemberPermissions,
+    ignoredMemberGrants,
+    memberPermissionFields,
+    memberPermissionsVersion,
+    rawMemberGrants,
+    subscribeMemberPermissions,
+    type MemberRow,
+} from './models';
+
+export interface MemberNavigationCallbacks {
+    onNavigateUser?: (id: number) => void;
+    onNavigateGroup?: (id: number) => void;
+}
+
+export interface MemberDetailProps extends MemberNavigationCallbacks {
+    id: number;
+    onClose: () => void;
+    /** Global Admin is system-pinned; fixed-group compositions pass their read gate. */
+    readPermissions?: PermSpec;
+}
+
+function AuditTable({ memberId }: { memberId: number }) {
+    const columns: Column<LogRow>[] = [
+        { key: 'created', label: 'Time', sortable: true, render: (row) => fmt.datetime(row.created) },
+        { key: 'level', label: 'Level', sortable: true, render: (row) => <Badge>{row.level}</Badge> },
+        { key: 'kind', label: 'Kind', sortable: false, render: (row) => row.kind ?? '—' },
+        { key: 'log', label: 'Event', sortable: false, render: (row) => row.log ?? '—' },
+    ];
+    return (
+        <ModelTable<LogRow>
+            model={LogModel}
+            title="Membership audit"
+            columns={columns}
+            searchable={false}
+            defaultParams={{ model_name: 'account.GroupMember', model_id: memberId, sort: '-created', size: 15 }}
+            defaultSort="-created"
+        />
+    );
+}
+
+function GrantSummary({ member }: { member: MemberRow }) {
+    const raw = rawMemberGrants(member.permissions);
+    const effective = effectiveMemberGrants(member.permissions);
+    const ignored = ignoredMemberGrants(member.permissions);
+    return (
+        <>
+            <Eyebrow>Effective membership grants</Eyebrow>
+            <div className="chip-row">
+                {effective.map((grant) => <Badge key={grant} tone="info">{grant}</Badge>)}
+            </div>
+            <Eyebrow>Raw stored grants</Eyebrow>
+            {raw.length > 0
+                ? <div className="chip-row">{raw.map((grant) => <Badge key={grant} tone={ignored.includes(grant) ? 'warning' : 'muted'}>{grant}</Badge>)}</div>
+                : <p className="dim">No raw grants are stored.</p>}
+            {ignored.length > 0 && (
+                <p className="dim">
+                    Ignored: <code>{ignored.join(', ')}</code>. Literal <code>sys.*</code> and stored <code>full_member</code> never grant member authority.
+                    <code> admin</code> remains a product-portal client compatibility wildcard, but django-mojo does not honor it server-side.
+                </p>
+            )}
+        </>
+    );
+}
+
+export function MemberDetail({
+    id, onClose, onNavigateUser, onNavigateGroup,
+    readPermissions = MEMBER_READ_PERMISSIONS,
+}: MemberDetailProps) {
+    const qc = useQueryClient();
+    const { can: canRead, isLoading: readLoading } = useCan(readPermissions);
+    const query = MemberModel.useOne(canRead ? id : null);
+    const save = MemberModel.useSave();
+    const resend = MemberModel.useAction('resend_invite');
+    const { can: canSave } = useCan(MEMBER_SAVE_PERMISSIONS);
+    useSyncExternalStore(subscribeMemberPermissions, memberPermissionsVersion, memberPermissionsVersion);
+
+    if (readLoading) return <div className="detail-loading"><span className="skel skel-block" /></div>;
+    if (!canRead) return <div className="modal-pad text-bad">Access denied</div>;
+    if (query.isPending) return <div className="detail-loading"><span className="skel skel-block" /></div>;
+    if (!query.data || query.error) return <div className="modal-pad text-bad">{query.error?.message ?? 'Membership not found'}</div>;
+    const member = query.data;
+    const userLabel = member.user?.display_name || member.user?.email || member.user?.username || 'Unknown user';
+    const groupLabel = member.group?.name || 'Unknown group';
+    const role = typeof member.metadata?.role === 'string' && member.metadata.role.trim()
+        ? member.metadata.role.trim() : 'Member';
+    const inviter = typeof member.metadata?.invited_by_name === 'string'
+        ? member.metadata.invited_by_name
+        : typeof member.metadata?.invited_by === 'string' || typeof member.metadata?.invited_by === 'number'
+            ? String(member.metadata.invited_by)
+            : null;
+    const raw = rawMemberGrants(member.permissions);
+    const catalog = getMemberPermissions();
+    const catalogNames = new Set(catalog.map((permission) => permission.name));
+    const deploymentOnly = raw.filter((name) => !catalogNames.has(name) && !ignoredMemberGrants(member.permissions).includes(name));
+
+    const editRole = async () => {
+        const values = await formModal({
+            title: 'Edit role label',
+            submitText: 'Update label',
+            fields: [{
+                name: 'role', type: 'text', label: 'Role label',
+                help: 'Presentation only. This label does not grant authorization.',
+            }],
+            initial: { role },
+        });
+        if (!values) return;
+        try {
+            await save.mutateAsync({ id: member.id, changes: { metadata: { role: String(values.role ?? '').trim() } } });
+            toast.success('Role label updated');
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Role update failed');
+        }
+    };
+
+    const setActive = async (next: boolean) => {
+        try {
+            await save.mutateAsync({ id: member.id, changes: { is_active: next } });
+            toast.success(next ? 'Membership activated' : 'Membership deactivated');
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Membership update failed');
+        }
+    };
+
+    const resendInvite = async () => {
+        try {
+            await resend.mutateAsync({ id: member.id });
+            toast.success('Invitation resent');
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Invitation resend failed');
+        }
+    };
+
+    const menu: DetailMenuEntry<MemberRow>[] = [
+        ...(onNavigateUser && member.user ? [{ label: 'View user', icon: 'bi-person', onSelect: () => onNavigateUser(member.user!.id) }] : []),
+        ...(onNavigateGroup && member.group ? [{ label: 'View group', icon: 'bi-people', onSelect: () => onNavigateGroup(member.group!.id) }] : []),
+        { divider: true as const },
+        { label: 'Edit role label', icon: 'bi-person-badge', permissions: MEMBER_SAVE_PERMISSIONS, onSelect: () => { void editRole(); } },
+        { label: 'Resend invitation', icon: 'bi-envelope-arrow-up', permissions: MEMBER_SAVE_PERMISSIONS, onSelect: () => { void resendInvite(); } },
+        {
+            label: member.is_active ? 'Deactivate membership' : 'Activate membership',
+            icon: member.is_active ? 'bi-toggle-off' : 'bi-toggle-on',
+            danger: member.is_active,
+            permissions: MEMBER_SAVE_PERMISSIONS,
+            onSelect: () => { void setActive(!member.is_active); },
+        },
+    ];
+
+    return (
+        <DetailView<MemberRow>
+            icon="bi-person-badge"
+            title={`${userLabel} in ${groupLabel}`}
+            subtitle={`${role} · joined ${fmt.relative(member.created)}`}
+            chips={[
+                ...(member.user?.email ? [{ icon: 'bi-envelope', text: member.user.email, tone: 'muted' as const }] : []),
+                ...(member.group?.kind ? [{ icon: 'bi-people', text: member.group.kind, tone: 'info' as const }] : []),
+                { icon: 'bi-person-badge', text: role, tone: 'primary' as const },
+                { text: `${effectiveMemberGrants(member.permissions).length} effective grants`, tone: 'muted' as const },
+            ]}
+            active={canSave ? { value: member.is_active, onChange: (next) => { void setActive(next); } } : undefined}
+            contextMenu={menu}
+            menuContext={member}
+            onClose={onClose}
+            sections={[
+                {
+                    key: 'Overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
+                        <>
+                            <div className="detail-kpi-grid">
+                                <MetricCard label="Role label" value={role} />
+                                <MetricCard label="Status" value={member.is_active ? 'Active' : 'Inactive'} />
+                                <MetricCard label="Joined" value={fmt.relative(member.created)} />
+                                <MetricCard label="Effective grants" value={effectiveMemberGrants(member.permissions).length} />
+                            </div>
+                            <Eyebrow>This membership</Eyebrow>
+                            <FlatRow label="User" action={member.user && onNavigateUser ? () => onNavigateUser(member.user!.id) : undefined} actionTitle="View user">{userLabel}</FlatRow>
+                            <FlatRow label="Email">{member.user?.email ?? '—'}</FlatRow>
+                            <FlatRow label="Group" action={member.group && onNavigateGroup ? () => onNavigateGroup(member.group!.id) : undefined} actionTitle="View group">{groupLabel}</FlatRow>
+                            <FlatRow label="Role label" action={canSave ? () => { void editRole(); } : undefined}>{role}</FlatRow>
+                            <FlatRow label="Joined">{fmt.datetime(member.created)}</FlatRow>
+                            <FlatRow label="Modified">{fmt.datetime(member.modified)}</FlatRow>
+                            {inviter && <FlatRow label="Invited by">{inviter}</FlatRow>}
+                            <GrantSummary member={member} />
+                        </>
+                    ),
+                },
+                {
+                    key: 'Permissions', label: 'Permissions', icon: 'bi-shield-lock', render: () => (
+                        <>
+                            <Eyebrow>Per-group authorization</Eyebrow>
+                            <p className="dim">Role labels are not authorization. Protected changes may be rejected by <code>MEMBER_PERMS_PROTECTION</code>; failed autosaves revert and show the server error.</p>
+                            {canSave
+                                ? <FormView model={MemberModel} row={member} fields={memberPermissionFields()} onSaved={() => { void MemberModel.invalidate(qc); }} />
+                                : <GrantSummary member={member} />}
+                            {deploymentOnly.length > 0 && (
+                                <p className="dim">Deployment-specific stored grants without registered editors remain read-only: <code>{deploymentOnly.join(', ')}</code>.</p>
+                            )}
+                        </>
+                    ),
+                },
+                { divider: 'Activity' },
+                {
+                    key: 'Audit', label: 'Audit', icon: 'bi-clock-history',
+                    permissions: LOGS_ADMIN_PERMISSIONS,
+                    render: () => <AuditTable memberId={member.id} />,
+                },
+                {
+                    key: 'Raw', label: 'Raw', icon: 'bi-braces', render: () => (
+                        <JsonBlock value={{ permissions: member.permissions, metadata: member.metadata }} label="Membership JSON" defaultOpen />
+                    ),
+                },
+            ]}
+        />
+    );
+}

package/src/admin/identity/members/MembersPage.tsx

@@ -0,0 +1,144 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useCan } from '../../../client';
+import {
+    Badge, ModelTable, fmt, formModal, modal,
+    type BatchAction, type Column, type FilterDef,
+} from '../../../ui';
+import { MemberDetail, type MemberNavigationCallbacks } from './MemberDetail';
+import { openMemberAdmissionDialog } from './member-flows';
+import {
+    MEMBER_INVITE_PERMISSIONS,
+    MEMBER_SAVE_PERMISSIONS,
+    MEMBER_USER_DIRECTORY_PERMISSIONS,
+    MemberModel,
+    rawMemberGrants,
+    type MemberRow,
+} from './models';
+
+const COLUMNS: Column<MemberRow>[] = [
+    {
+        key: 'user__display_name', label: 'Member', sortable: false, hideable: false, render: (member) => (
+            <div className="cell-user">
+                <span className="cell-avatar"><i className="bi bi-person" /></span>
+                <span>
+                    <span className="cell-name">{member.user?.display_name || member.user?.username || `User #${member.user?.id ?? '?'}`}</span>
+                    <span className="cell-sub">{member.user?.email ?? 'No linked email'}</span>
+                </span>
+            </div>
+        ),
+    },
+    {
+        key: 'group__name', label: 'Group', sortable: false, render: (member) => (
+            <span>{member.group?.name ?? 'Unknown group'}{member.group?.kind && <span className="cell-sub">{member.group.kind}</span>}</span>
+        ),
+    },
+    {
+        key: 'metadata__role', label: 'Role label', sortable: false, render: (member) => {
+            const role = typeof member.metadata?.role === 'string' ? member.metadata.role.trim() : '';
+            return role ? <Badge tone="primary">{role}</Badge> : <span className="dim">Member</span>;
+        },
+    },
+    { key: 'is_active', label: 'Status', sortable: true, render: (member) => <Badge>{member.is_active ? 'Active' : 'Inactive'}</Badge> },
+    {
+        key: 'permissions', label: 'Granted permissions', sortable: false, render: (member) => {
+            const grants = rawMemberGrants(member.permissions);
+            return grants.length > 0
+                ? <span className="chip-row">{grants.slice(0, 3).map((grant) => <Badge key={grant} tone="info">{grant}</Badge>)}{grants.length > 3 && <Badge tone="muted">+{grants.length - 3}</Badge>}</span>
+                : <span className="dim">None</span>;
+        },
+    },
+    { key: 'created', label: 'Joined', sortable: true, render: (member) => fmt.datetime(member.created) },
+    { key: 'modified', label: 'Modified', sortable: true, render: (member) => fmt.relative(member.modified) },
+];
+
+const FILTERS: FilterDef[] = [
+    { key: 'user__email', label: 'Email', type: 'text', lookup: 'icontains', placeholder: 'Contains…' },
+    { key: 'user__display_name', label: 'Display name', type: 'text', lookup: 'icontains', placeholder: 'Contains…' },
+    { key: 'group__name', label: 'Group name', type: 'text', lookup: 'icontains', placeholder: 'Contains…' },
+    { key: 'metadata__role', label: 'Role label', type: 'text', lookup: 'icontains', placeholder: 'Contains…' },
+    { key: 'is_active', label: 'Status', type: 'boolean', trueLabel: 'Active', falseLabel: 'Inactive' },
+    { key: 'created', label: 'Joined', type: 'daterange' },
+];
+
+export function MembersPage({ onNavigateUser, onNavigateGroup }: MemberNavigationCallbacks = {}) {
+    const qc = useQueryClient();
+    const save = MemberModel.useSave();
+    const { can: canSave } = useCan(MEMBER_SAVE_PERMISSIONS);
+    const { can: canInvite } = useCan(MEMBER_INVITE_PERMISSIONS);
+    const { can: canReadUsers } = useCan(MEMBER_USER_DIRECTORY_PERMISSIONS);
+
+    const batchActions: BatchAction<MemberRow>[] = canSave ? [
+        {
+            key: 'activate', label: 'Activate', icon: 'bi-check-circle',
+            run: (member) => save.mutateAsync({ id: member.id, changes: { is_active: true } }),
+        },
+        {
+            key: 'deactivate', label: 'Deactivate', icon: 'bi-x-circle', danger: true,
+            run: (member) => save.mutateAsync({ id: member.id, changes: { is_active: false } }),
+        },
+        {
+            key: 'role', label: 'Set role label', icon: 'bi-person-gear',
+            prepare: async () => {
+                const data = await formModal({
+                    title: 'Set role label',
+                    submitText: 'Apply to selected',
+                    fields: [{
+                        name: 'role', type: 'text', label: 'Role label',
+                        help: 'Display-only metadata; this does not change authorization.',
+                    }],
+                });
+                return data ? String(data.role ?? '').trim() : null;
+            },
+            run: (member, prepared) => save.mutateAsync({
+                id: member.id,
+                changes: { metadata: { role: String(prepared ?? '') } },
+            }),
+        },
+    ] : [];
+
+    const openMember = (member: MemberRow) => {
+        void MemberModel.fetchOne(qc, member.id).catch(() => {});
+        void modal.detail((close) => (
+            <MemberDetail
+                id={member.id}
+                onClose={() => close(null)}
+                onNavigateUser={onNavigateUser}
+                onNavigateGroup={onNavigateGroup}
+            />
+        ));
+    };
+
+    const admit = () => openMemberAdmissionDialog({
+        canInvite,
+        canCreate: canSave,
+        canReadUsers,
+        queryClient: qc,
+    });
+
+    return (
+        <ModelTable<MemberRow>
+            model={MemberModel}
+            eyebrow="Identity & Access"
+            title="Members"
+            columns={COLUMNS}
+            filters={FILTERS}
+            searchable
+            searchPlaceholder="Search name, email, or username…"
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'active', label: 'Active', params: { is_active: 'true' } },
+                { key: 'inactive', label: 'Inactive', params: { is_active: 'false' } },
+            ]}
+            defaultSort="-created"
+            selectable={canSave}
+            batchActions={batchActions}
+            columnChooser
+            persistState
+            persistKey="admin-members"
+            exportFormats={['csv', 'json']}
+            onRowClick={openMember}
+            addLabel="Add or invite member"
+            onAdd={canInvite || (canSave && canReadUsers) ? () => { void admit(); } : undefined}
+        />
+    );
+}

package/src/admin/identity/members/index.ts

@@ -0,0 +1,24 @@
+import type { AdminSection } from '../../index';
+import { MembersPage } from './MembersPage';
+import { MEMBER_READ_PERMISSIONS } from './models';
+
+export * from './models';
+export * from './member-flows';
+export * from './MemberDetail';
+export * from './GroupMembersPanel';
+export * from './MembersPage';
+
+export const MEMBERS_ADMIN_SECTION: AdminSection = {
+    id: 'members',
+    basePath: '',
+    title: 'Members',
+    icon: 'bi-person-badge',
+    navigationGroup: 'identity-access',
+    permissions: MEMBER_READ_PERMISSIONS,
+    routes: [{
+        path: 'members',
+        label: 'Members',
+        component: MembersPage,
+        permissions: MEMBER_READ_PERMISSIONS,
+    }],
+};