57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useLocation, useNavigate } from 'react-router';
|
|
import { StatCard, Tabs } from '@cameleer/design-system';
|
|
import { useRbacStats } from '../../api/queries/admin/rbac';
|
|
import styles from './UserManagement.module.css';
|
|
import UsersTab from './UsersTab';
|
|
import GroupsTab from './GroupsTab';
|
|
import RolesTab from './RolesTab';
|
|
|
|
const TABS = [
|
|
{ label: 'Users', value: 'users' },
|
|
{ label: 'Groups', value: 'groups' },
|
|
{ label: 'Roles', value: 'roles' },
|
|
];
|
|
|
|
const VALID_TABS = new Set(TABS.map((t) => t.value));
|
|
|
|
export default function RbacPage() {
|
|
const { data: stats } = useRbacStats();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const [tab, setTab] = useState('users');
|
|
const [highlightId, setHighlightId] = useState<string | null>(null);
|
|
|
|
// Read tab + highlight from location state (set by cmd-k navigation)
|
|
useEffect(() => {
|
|
const state = location.state as { tab?: string; highlight?: string } | null;
|
|
if (!state) return;
|
|
|
|
if (state.tab && VALID_TABS.has(state.tab)) {
|
|
setTab(state.tab);
|
|
}
|
|
if (state.highlight) {
|
|
setHighlightId(state.highlight);
|
|
}
|
|
|
|
// Consume the state so back-navigation doesn't re-trigger
|
|
navigate(location.pathname, { replace: true, state: null });
|
|
}, [location.state]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<div>
|
|
<div className={styles.statStrip}>
|
|
<StatCard label="Users" value={stats?.userCount ?? 0} />
|
|
<StatCard label="Groups" value={stats?.groupCount ?? 0} />
|
|
<StatCard label="Roles" value={stats?.roleCount ?? 0} />
|
|
</div>
|
|
<Tabs tabs={TABS} active={tab} onChange={(v) => { setTab(v); setHighlightId(null); }} />
|
|
<div className={styles.tabContent}>
|
|
{tab === 'users' && <UsersTab highlightId={highlightId} onHighlightConsumed={() => setHighlightId(null)} />}
|
|
{tab === 'groups' && <GroupsTab highlightId={highlightId} onHighlightConsumed={() => setHighlightId(null)} />}
|
|
{tab === 'roles' && <RolesTab highlightId={highlightId} onHighlightConsumed={() => setHighlightId(null)} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|