snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/omnichannel/managers/AddManager.tsx

@@ -0,0 +1,54 @@
+import { Button, Box, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { UserAutoComplete } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useEndpointMutation } from '../../../hooks/useEndpointMutation';
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
+const AddManager = () => {
+	const { t } = useTranslation();
+	const [username, setUsername] = useState('');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const usernameFieldId = useId();
+
+	const queryClient = useQueryClient();
+
+	const { mutateAsync: saveAction } = useEndpointMutation('POST', '/v1/livechat/users/manager', {
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.managers() });
+			setUsername('');
+			dispatchToastMessage({ type: 'success', message: t('Manager_added') });
+		},
+	});
+
+	const handleSave = useStableCallback(async () => {
+		await saveAction({ username });
+	});
+
+	const handleChange = (value: unknown): void => {
+		if (typeof value === 'string') {
+			setUsername(value);
+		}
+	};
+
+	return (
+		<Box display='flex' alignItems='center'>
+			<Field>
+				<FieldLabel htmlFor={usernameFieldId}>{t('Username')}</FieldLabel>
+				<FieldRow>
+					<UserAutoComplete id={usernameFieldId} value={username} onChange={handleChange} />
+					<Button disabled={!username} onClick={handleSave} marginInlineStart={8} primary>
+						{t('Add_manager')}
+					</Button>
+				</FieldRow>
+			</Field>
+		</Box>
+	);
+};
+
+export default AddManager;

apps/meteor/client/views/omnichannel/managers/ManagersRoute.tsx

@@ -0,0 +1,28 @@
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import ManagersTable from './ManagersTable';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const ManagersRoute = () => {
+	const { t } = useTranslation();
+	const canViewManagers = usePermission('manage-livechat-managers');
+
+	if (!canViewManagers) {
+		return <NotAuthorizedPage />;
+	}
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Managers')} />
+				<PageContent>
+					<ManagersTable />
+				</PageContent>
+			</Page>
+		</Page>
+	);
+};
+
+export default ManagersRoute;

apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx

@@ -0,0 +1,151 @@
+import { Box, Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	GenericTableRow,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { hashKey, useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import AddManager from './AddManager';
+import RemoveManagerButton from './RemoveManagerButton';
+import FilterByText from '../../../components/FilterByText';
+import GenericError from '../../../components/GenericError';
+import GenericNoResults from '../../../components/GenericNoResults/GenericNoResults';
+import { links } from '../../../lib/links';
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
+const ManagersTable = () => {
+	const t = useTranslation();
+
+	const [text, setText] = useState('');
+
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address'>('name');
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				text,
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				count: itemsPerPage,
+				offset: current,
+			}),
+			[text, sortBy, sortDirection, itemsPerPage, current],
+		),
+		500,
+	);
+
+	const getManagers = useEndpoint('GET', '/v1/livechat/users/manager');
+	const { data, isLoading, isSuccess, isError, refetch } = useQuery({
+		queryKey: omnichannelQueryKeys.managers(query),
+		queryFn: async () => getManagers(query),
+	});
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='username' direction={sortDirection} active={sortBy === 'username'} onClick={setSort} sort='username'>
+				{t('Username')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='email'
+				direction={sortDirection}
+				active={sortBy === 'emails.address'}
+				onClick={setSort}
+				sort='emails.address'
+			>
+				{t('Email')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='remove' width='x60'>
+				{t('Remove')}
+			</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			<AddManager />
+			{((isSuccess && data?.users.length > 0) || queryHasChanged) && (
+				<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			)}
+			{isLoading && (
+				<GenericTable aria-busy={isLoading} aria-label={t('Managers')}>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={4} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data.users.length === 0 && (
+				<GenericNoResults
+					icon='shield'
+					title={t('No_managers_yet')}
+					description={t('No_managers_yet_description')}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_managers')}
+				/>
+			)}
+			{isSuccess && data.users.length > 0 && (
+				<>
+					<GenericTable aria-busy={isLoading} aria-label={t('Managers')}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.users.map((user) => (
+								<GenericTableRow key={user._id} tabIndex={0}>
+									<GenericTableCell withTruncatedText>
+										<Box display='flex' alignItems='center'>
+											<UserAvatar size='x28' username={user.username || ''} etag={user.avatarETag} />
+											<Box display='flex' withTruncatedText marginInline={8}>
+												<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
+													<Box fontScale='p2m' withTruncatedText color='default'>
+														{user.name || user.username}
+													</Box>
+												</Box>
+											</Box>
+										</Box>
+									</GenericTableCell>
+									<GenericTableCell>
+										<Box fontScale='p2m' withTruncatedText color='hint'>
+											{user.username}
+										</Box>
+										<Box marginInline={4} />
+									</GenericTableCell>
+									<GenericTableCell withTruncatedText>{user.emails?.length && user.emails[0].address}</GenericTableCell>
+									<RemoveManagerButton _id={user._id} />
+								</GenericTableRow>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isError && <GenericError buttonAction={refetch} />}
+		</>
+	);
+};
+
+export default ManagersTable;

apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx

@@ -0,0 +1,59 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal, GenericTableCell } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import type { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useEndpointMutation } from '../../../hooks/useEndpointMutation';
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
+export type RemoveManagerButtonProps = { _id: string };
+
+const RemoveManagerButton = ({ _id }: RemoveManagerButtonProps) => {
+	const { t } = useTranslation();
+	const queryClient = useQueryClient();
+	const { mutateAsync: deleteAction } = useEndpointMutation('DELETE', '/v1/livechat/users/manager/:_id', {
+		keys: { _id },
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.managers() });
+		},
+	});
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleRemoveClick = useStableCallback(async () => {
+		await deleteAction();
+	});
+	const handleDelete = useStableCallback((e: MouseEvent) => {
+		e.stopPropagation();
+		const onDeleteManager = async (): Promise<void> => {
+			try {
+				await handleRemoveClick();
+				dispatchToastMessage({ type: 'success', message: t('Manager_removed') });
+			} catch (error: unknown) {
+				(typeof error === 'string' || error instanceof Error) && dispatchToastMessage({ type: 'error', message: error });
+			}
+			setModal();
+		};
+
+		setModal(
+			<GenericModal
+				variant='danger'
+				onConfirm={onDeleteManager}
+				onCancel={(): void => setModal()}
+				onClose={(): void => setModal()}
+				confirmText={t('Delete')}
+			/>,
+		);
+	});
+
+	return (
+		<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
+			<IconButton small icon='trash' title={t('Remove')} onClick={handleDelete} />
+		</GenericTableCell>
+	);
+};
+
+export default RemoveManagerButton;