diff --git a/frontend/src/components/tables/UsersTable.jsx b/frontend/src/components/tables/UsersTable.jsx index 467423dc..fb6fdb7c 100644 --- a/frontend/src/components/tables/UsersTable.jsx +++ b/frontend/src/components/tables/UsersTable.jsx @@ -2,6 +2,7 @@ import React, { useMemo, useCallback, useState } from 'react'; import API from '../../api'; import UserForm from '../forms/User'; import useUsersStore from '../../store/users'; +import useChannelsStore from '../../store/channels'; import useAuthStore from '../../store/auth'; import { USER_LEVELS, USER_LEVEL_LABELS } from '../../constants'; import useWarningsStore from '../../store/warnings'; @@ -26,6 +27,7 @@ import { UnstyledButton, LoadingOverlay, Stack, + Badge, } from '@mantine/core'; import { CustomTable, useTable } from './CustomTable'; import ConfirmationDialog from '../ConfirmationDialog'; @@ -83,6 +85,7 @@ const UsersTable = () => { * STORES */ const users = useUsersStore((s) => s.users); + const profiles = useChannelsStore((s) => s.profiles); const authUser = useAuthStore((s) => s.user); const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed); const suppressWarning = useWarningsStore((s) => s.suppressWarning); @@ -144,6 +147,15 @@ const UsersTable = () => { /** * useMemo */ + // Create a profile ID to name lookup map for efficient rendering + const profileIdToName = useMemo(() => { + const map = {}; + Object.values(profiles).forEach((profile) => { + map[profile.id] = profile.name; + }); + return map; + }, [profiles]); + const columns = useMemo( () => [ { @@ -265,6 +277,37 @@ const UsersTable = () => { ); }, }, + { + header: 'Channel Profiles', + accessorKey: 'channel_profiles', + grow: true, + cell: ({ getValue }) => { + const userProfiles = getValue() || []; + const profileNames = userProfiles + .map((id) => profileIdToName[id]) + .filter(Boolean); // Filter out any undefined values + return ( + + {profileNames.length > 0 ? ( + profileNames.map((name, index) => ( + + {name} + + )) + ) : ( + + All + + )} + + ); + }, + }, { id: 'actions', size: 80, @@ -280,7 +323,7 @@ const UsersTable = () => { ), }, ], - [theme, editUser, deleteUser, visiblePasswords, togglePasswordVisibility] + [theme, editUser, deleteUser, visiblePasswords, togglePasswordVisibility, profileIdToName] ); const closeUserForm = () => { @@ -319,6 +362,7 @@ const UsersTable = () => { user_level: renderHeaderCell, last_login: renderHeaderCell, date_joined: renderHeaderCell, + channel_profiles: renderHeaderCell, custom_properties: renderHeaderCell, }, }); @@ -333,7 +377,7 @@ const UsersTable = () => { minHeight: '100vh', }} > - +