81f85aa82d
Migrate all page components from the @cameleer/design-system v0.0.3 example UI, replacing mock data with real backend API hooks. This brings richer visuals (KpiStrip, GroupCard, RouteFlow, ProcessorTimeline, DateRangePicker, expandable rows) while preserving all existing API integration, auth, and routing infrastructure. Pages migrated: Dashboard, RoutesMetrics, RouteDetail, ExchangeDetail, AgentHealth, AgentInstance, OidcConfig, AuditLog, RBAC (Users/Groups/Roles). Also enhanced LayoutShell CommandPalette with real search data from catalog. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
|
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' },
|
|
];
|
|
|
|
export default function RbacPage() {
|
|
const { data: stats } = useRbacStats();
|
|
const [tab, setTab] = useState('users');
|
|
|
|
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={setTab} />
|
|
<div className={styles.tabContent}>
|
|
{tab === 'users' && <UsersTab />}
|
|
{tab === 'groups' && <GroupsTab />}
|
|
{tab === 'roles' && <RolesTab />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|