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

apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx

@@ -0,0 +1,67 @@
+import { Box, Select, Label } from '@rocket.chat/fuselage';
+import { useStableCallback, useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import type { Dispatch, FormEvent, Key, SetStateAction } from 'react';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AutoCompleteAgent from '../components/AutoCompleteAgent';
+import AutoCompleteDepartment from '../components/AutoCompleteDepartment';
+
+export type QueueListFilterProps = {
+	setFilter: Dispatch<SetStateAction<any>>;
+};
+
+export const QueueListFilter = ({ setFilter, ...props }: QueueListFilterProps) => {
+	const { t } = useTranslation();
+
+	const statusOptions: [string, string][] = [
+		['online', t('Online')],
+		['offline', t('Include_Offline_Agents')],
+	];
+
+	const [servedBy, setServedBy] = useLocalStorage('servedBy', 'all');
+	const [status, setStatus] = useLocalStorage('status', 'online');
+	const [department, setDepartment] = useLocalStorage<string>('department', 'all');
+
+	const handleServedBy = useStableCallback((e: string) => setServedBy(e));
+	const handleStatus = useStableCallback((e: Key) => setStatus(e as string));
+	const handleDepartment = useStableCallback((e: string) => setDepartment(e));
+
+	const onSubmit = useStableCallback((e: FormEvent) => e.preventDefault());
+
+	useEffect(() => {
+		const filters = { status } as {
+			status: string;
+			servedBy?: string;
+			departmentId?: string;
+		};
+
+		if (servedBy !== 'all') {
+			filters.servedBy = servedBy;
+		}
+		if (department && department !== 'all') {
+			filters.departmentId = department;
+		}
+
+		setFilter(filters);
+	}, [setFilter, servedBy, status, department]);
+
+	return (
+		<Box marginBlock={16} is='form' onSubmit={onSubmit} display='flex' flexDirection='column' {...props}>
+			<Box display='flex' flexDirection='row' flexWrap='wrap' {...props}>
+				<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+					<Label marginBlock={4}>{t('Served_By')}</Label>
+					<AutoCompleteAgent haveAll value={servedBy} onChange={handleServedBy} />
+				</Box>
+				<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+					<Label marginBlock={4}>{t('Status')}</Label>
+					<Select options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')} />
+				</Box>
+				<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+					<Label marginBlock={4}>{t('Department')}</Label>
+					<AutoCompleteDepartment haveAll value={department} onChange={handleDepartment} onlyMyDepartments />
+				</Box>
+			</Box>
+		</Box>
+	);
+};

apps/meteor/client/views/omnichannel/queueList/QueueListPage.tsx

@@ -0,0 +1,19 @@
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import QueueListTable from './QueueListTable';
+
+const QueueListPage = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Page>
+			<PageHeader title={t('Livechat_Queue')} />
+			<PageContent>
+				<QueueListTable />
+			</PageContent>
+		</Page>
+	);
+};
+
+export default QueueListPage;

apps/meteor/client/views/omnichannel/queueList/QueueListTable.tsx

@@ -0,0 +1,165 @@
+import { UserStatus } from '@rocket.chat/core-typings';
+import { Box, Pagination } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableRow,
+	GenericTableCell,
+	GenericTableLoadingRow,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import { QueueListFilter } from './QueueListFilter';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+const QueueListTable = () => {
+	const t = useTranslation();
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'servedBy' | 'department' | 'total' | 'status'>('servedBy');
+
+	const [filters, setFilters] = useState<{
+		servedBy: string;
+		status: string;
+		departmentId: string;
+	}>({
+		servedBy: '',
+		status: '',
+		departmentId: '',
+	});
+
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const headers = (
+		<>
+			{mediaQuery && (
+				<GenericTableHeaderCell key='servedBy' direction={sortDirection} active={sortBy === 'servedBy'} onClick={setSort} sort='servedBy'>
+					{t('Served_By')}
+				</GenericTableHeaderCell>
+			)}
+			<GenericTableHeaderCell
+				key='department'
+				direction={sortDirection}
+				active={sortBy === 'department'}
+				onClick={setSort}
+				sort='department'
+			>
+				{t('Department')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='total' direction={sortDirection} active={sortBy === 'total'} onClick={setSort} sort='total'>
+				{t('Total')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='status' direction={sortDirection} active={sortBy === 'status'} onClick={setSort} sort='status'>
+				{t('Status')}
+			</GenericTableHeaderCell>
+		</>
+	);
+
+	const query = useMemo(() => {
+		const query: {
+			agentId?: string;
+			includeOfflineAgents?: 'true' | 'false';
+			departmentId?: string;
+			sort: string;
+			count: number;
+		} = {
+			sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+			...(itemsPerPage && { count: itemsPerPage }),
+			...(current && { offset: current }),
+		};
+
+		if (filters.status !== 'online') {
+			query.includeOfflineAgents = 'true';
+		}
+		if (filters.servedBy) {
+			query.agentId = filters.servedBy;
+		}
+		if (filters.departmentId) {
+			query.departmentId = filters.departmentId;
+		}
+
+		return query;
+	}, [sortBy, sortDirection, itemsPerPage, current, filters.status, filters.departmentId, filters.servedBy]);
+
+	const getUserStatus = (status?: string) => {
+		if (!status) {
+			return t('Offline');
+		}
+
+		switch (status) {
+			case UserStatus.ONLINE:
+				return t('Online');
+			case UserStatus.AWAY:
+				return t('Away');
+			case UserStatus.BUSY:
+				return t('Busy');
+			case UserStatus.OFFLINE:
+				return t('Offline');
+			default:
+				return status;
+		}
+	};
+
+	const getLivechatQueue = useEndpoint('GET', '/v1/livechat/queue');
+	const { data, isSuccess, isLoading } = useQuery({
+		queryKey: ['livechat-queue', query],
+		queryFn: async () => getLivechatQueue(query),
+	});
+
+	return (
+		<>
+			<QueueListFilter setFilter={setFilters} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingRow cols={4} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.queue.length === 0 && <GenericNoResults />}
+			{isSuccess && data?.queue.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.queue.map(({ user, department, chats }) => (
+								<GenericTableRow key={user._id} tabIndex={0}>
+									<GenericTableCell withTruncatedText>
+										<Box display='flex' alignItems='center' marginBlock='5px'>
+											<UserAvatar size={mediaQuery ? 'x28' : 'x40'} username={user.username} />
+											<Box display='flex' marginInline={8}>
+												{user.username}
+											</Box>
+										</Box>
+									</GenericTableCell>
+									<GenericTableCell withTruncatedText>{department ? department.name : ''}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{chats}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{getUserStatus(user?.status)}</GenericTableCell>
+								</GenericTableRow>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default QueueListTable;

apps/meteor/client/views/omnichannel/queueList/index.ts

@@ -0,0 +1 @@
+export { default } from './QueueListPage';