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

apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUserActions.tsx

@@ -0,0 +1,40 @@
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import type { ModConsoleUserRowProps } from './ModConsoleUserTableRow';
+import useDeactivateUserAction from '../hooks/useDeactivateUserAction';
+import useDismissUserAction from '../hooks/useDismissUserAction';
+import useResetAvatarAction from '../hooks/useResetAvatarAction';
+
+const ModConsoleUserActions = ({ report, onClick }: Omit<ModConsoleUserRowProps, 'isDesktopOrLarger'>) => {
+	const { t } = useTranslation();
+	const {
+		reportedUser: { _id: uid },
+	} = report;
+
+	return (
+		<>
+			<GenericMenu
+				title={t('Options')}
+				sections={[
+					{
+						items: [
+							{
+								id: 'seeReports',
+								content: t('Moderation_See_reports'),
+								icon: 'document-eye',
+								onClick: () => onClick(uid),
+							},
+						],
+					},
+					{
+						items: [useDismissUserAction(uid, true), useDeactivateUserAction(uid, true), useResetAvatarAction(uid)],
+					},
+				]}
+				placement='bottom-end'
+			/>
+		</>
+	);
+};
+
+export default ModConsoleUserActions;

apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUserTableRow.tsx

@@ -0,0 +1,38 @@
+import type { IUser, UserReport, Serialized } from '@rocket.chat/core-typings';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+
+import ModConsoleUserActions from './ModConsoleUserActions';
+import { normalizeUsername } from '../../../../../lib/utils/normalizeUsername';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+import UserColumn from '../helpers/UserColumn';
+
+export type ModConsoleUserRowProps = {
+	report: Serialized<Pick<UserReport, '_id' | 'reportedUser' | 'ts'> & { count: number }>;
+	onClick: (id: IUser['_id']) => void;
+	isDesktopOrLarger: boolean;
+};
+
+const ModConsoleUserTableRow = ({ report, onClick, isDesktopOrLarger }: ModConsoleUserRowProps) => {
+	const { reportedUser, count, ts } = report;
+	const { _id, name, createdAt, emails } = reportedUser;
+	const username = reportedUser.username ? normalizeUsername(reportedUser.username) : undefined;
+
+	const formatDateAndTime = useFormatDateAndTime();
+
+	return (
+		<GenericTableRow key={_id} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action>
+			<GenericTableCell withTruncatedText>
+				<UserColumn name={name} username={username} fontSize='micro' size={isDesktopOrLarger ? 'x20' : 'x40'} />
+			</GenericTableCell>
+			<GenericTableCell withTruncatedText>{formatDateAndTime(createdAt)}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{emails?.[0].address}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{formatDateAndTime(ts)}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{count}</GenericTableCell>
+			<GenericTableCell onClick={(e): void => e.stopPropagation()}>
+				<ModConsoleUserActions report={report} onClick={onClick} />
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default ModConsoleUserTableRow;

apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUsersTable.tsx

@@ -0,0 +1,151 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useMediaQuery, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableLoadingTable,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableHeader,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ModConsoleUserTableRow from './ModConsoleUserTableRow';
+import GenericNoResults from '../../../../components/GenericNoResults';
+import ModerationFilter from '../helpers/ModerationFilter';
+
+const ModConsoleUsersTable = () => {
+	const [text, setText] = useState('');
+	const router = useRouter();
+	const { t } = useTranslation();
+	const isDesktopOrLarger = useMediaQuery('(min-width: 1024px)');
+
+	const { sortBy, sortDirection, setSort } = useSort<
+		'reports.ts' | 'reports.reportedUser.username' | 'reports.reportedUser.createdAt' | 'count'
+	>('reports.ts');
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+
+	const [dateRange, setDateRange] = useState<{ start: string | null; end: string | null }>({
+		start: '',
+		end: '',
+	});
+	const { start, end } = dateRange;
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				selector: text,
+				sort: JSON.stringify({ [sortBy]: sortDirection === 'asc' ? 1 : -1 }),
+				count: itemsPerPage,
+				offset: current,
+				latest: end ? `${new Date(end).toISOString().slice(0, 10)}T23:59:59.999Z` : undefined,
+				oldest: start ? `${new Date(start).toISOString().slice(0, 10)}T00:00:00.000Z` : undefined,
+			}),
+			[current, end, itemsPerPage, sortBy, sortDirection, start, text],
+		),
+		500,
+	);
+
+	const getReports = useEndpoint('GET', '/v1/moderation.userReports');
+
+	const { data, isLoading, isSuccess, isError, refetch } = useQuery({
+		queryKey: ['moderation', 'userReports', 'fetchAll', query],
+		queryFn: () => getReports(query),
+		placeholderData: keepPreviousData,
+	});
+
+	const handleClick = useStableCallback((id: IUser['_id']): void => {
+		router.navigate({
+			pattern: '/admin/moderation/:tab?/:context?/:id?',
+			params: { tab: 'users', context: 'info', id },
+		});
+	});
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell
+				key='name'
+				direction={sortDirection}
+				active={sortBy === 'reports.reportedUser.username'}
+				onClick={setSort}
+				sort='reports.reportedUser.username'
+			>
+				{t('User')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				active={sortBy === 'reports.reportedUser.createdAt'}
+				onClick={setSort}
+				sort='reports.reportedUser.createdAt'
+				key='created'
+				direction={sortDirection}
+			>
+				{t('Created_at')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='email' direction={sortDirection}>
+				{t('Email')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='postdate' direction={sortDirection} active={sortBy === 'reports.ts'} onClick={setSort} sort='reports.ts'>
+				{t('Moderation_Report_date')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='reports' direction={sortDirection} active={sortBy === 'count'} onClick={setSort} sort='count'>
+				{t('Moderation_Reports')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='actions' width='x48' />
+		</>
+	);
+
+	return (
+		<>
+			<ModerationFilter text={text} setText={setText} setDateRange={setDateRange} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>{isLoading && <GenericTableLoadingTable headerCells={6} />}</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data.reports.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.reports.map((report) => (
+								<ModConsoleUserTableRow
+									key={report.reportedUser?._id}
+									report={report}
+									onClick={handleClick}
+									isDesktopOrLarger={isDesktopOrLarger}
+								/>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						current={current}
+						divider
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isSuccess && data.reports.length === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default ModConsoleUsersTable;

apps/meteor/client/views/admin/moderation/UserReports/UserContextFooter.tsx

@@ -0,0 +1,30 @@
+import { Button, ButtonGroup, Box } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import useDeactivateUserAction from '../hooks/useDeactivateUserAction';
+import useDismissUserAction from '../hooks/useDismissUserAction';
+import useResetAvatarAction from '../hooks/useResetAvatarAction';
+
+export type UserContextFooterProps = { userId: string; deleted: boolean };
+
+const UserContextFooter = ({ userId, deleted }: UserContextFooterProps) => {
+	const { t } = useTranslation();
+
+	const dismissUserAction = useDismissUserAction(userId, true);
+	const deactivateUserAction = useDeactivateUserAction(userId, true);
+
+	return (
+		<ButtonGroup stretch>
+			<Button onClick={dismissUserAction.onClick}>{t('Moderation_Dismiss_all_reports')}</Button>
+			<Button disabled={deleted} onClick={deactivateUserAction.onClick} secondary danger>
+				{t('Moderation_Deactivate_User')}
+			</Button>
+			<Box display='flex' flexGrow={0} marginInlineStart={8}>
+				<GenericMenu large title={t('More')} items={[{ ...useResetAvatarAction(userId), disabled: deleted }]} placement='top-end' />
+			</Box>
+		</ButtonGroup>
+	);
+};
+
+export default UserContextFooter;

apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx

@@ -0,0 +1,126 @@
+import {
+	Box,
+	Callout,
+	StatesAction,
+	StatesActions,
+	StatesIcon,
+	StatesTitle,
+	FieldGroup,
+	Field,
+	FieldLabel,
+	FieldRow,
+} from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import UserContextFooter from './UserContextFooter';
+import { normalizeUsername } from '../../../../../lib/utils/normalizeUsername';
+import GenericNoResults from '../../../../components/GenericNoResults';
+import { FormSkeleton } from '../../../../components/Skeleton';
+import { UserCardRole } from '../../../../components/UserCard';
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+import ReportReason from '../helpers/ReportReason';
+import UserColumn from '../helpers/UserColumn';
+
+export type UserReportInfoProps = { userId: string };
+
+const UserReportInfo = ({ userId }: UserReportInfoProps) => {
+	const { t } = useTranslation();
+	const getUserReports = useEndpoint('GET', '/v1/moderation.user.reportsByUserId');
+	const formatDateAndTime = useFormatDate();
+
+	const {
+		data: report,
+		refetch: reloadUsersReports,
+		isLoading,
+		isSuccess,
+		isError,
+		dataUpdatedAt,
+	} = useQuery({
+		queryKey: ['moderation', 'userReports', 'fetchDetails', userId],
+		queryFn: async () => getUserReports({ userId }),
+	});
+
+	const userProfile = useMemo(() => {
+		if (!report?.user) {
+			return null;
+		}
+
+		const { username, name } = report.user;
+		const normalizedUsername = username ? normalizeUsername(username) : undefined;
+		return <UserColumn key={dataUpdatedAt} username={normalizedUsername} name={name} fontSize='p2' size='x48' />;
+	}, [report?.user, dataUpdatedAt]);
+
+	const userEmails = useMemo(() => {
+		if (!report?.user?.emails) {
+			return [];
+		}
+		return report.user.emails.map((email) => email.address);
+	}, [report]);
+
+	if (isError) {
+		return (
+			<Box display='flex' flexDirection='column' alignItems='center' paddingBlock={20} color='default'>
+				<StatesIcon name='warning' variation='danger' />
+				<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+				<StatesActions>
+					<StatesAction onClick={() => reloadUsersReports()}>{t('Reload_page')}</StatesAction>
+				</StatesActions>
+			</Box>
+		);
+	}
+
+	if (isLoading) {
+		return <FormSkeleton />;
+	}
+
+	return (
+		<>
+			<ContextualbarScrollableContent>
+				{isSuccess && report.reports.length > 0 && (
+					<>
+						{report.user ? (
+							<FieldGroup>
+								<Field>{userProfile}</Field>
+								<Field>
+									<FieldLabel>{t('Roles')}</FieldLabel>
+									<FieldRow justifyContent='flex-start' spacing={1}>
+										{report.user.roles.map((role, index) => (
+											<UserCardRole key={index}>{role}</UserCardRole>
+										))}
+									</FieldRow>
+								</Field>
+								<Field>
+									<FieldLabel>{t('Email')}</FieldLabel>
+									<FieldRow>{userEmails.join(', ')}</FieldRow>
+								</Field>
+								<Field>
+									<FieldLabel>{t('Created_at')}</FieldLabel>
+									<FieldRow>{formatDateAndTime(report.user.createdAt)}</FieldRow>
+								</Field>
+							</FieldGroup>
+						) : (
+							<Callout marginBlockStart={8} type='warning' icon='warning'>
+								{t('Moderation_User_deleted_warning')}
+							</Callout>
+						)}
+						{report.reports.map((report, ind) => (
+							<ReportReason key={ind} ind={ind + 1} uinfo={report.reportedBy?.username} msg={report.description} ts={new Date(report.ts)} />
+						))}
+					</>
+				)}
+				{isSuccess && report.reports.length === 0 && <GenericNoResults title={t('No_user_reports')} icon='user' />}
+			</ContextualbarScrollableContent>
+			{isSuccess && report.reports.length > 0 && (
+				<ContextualbarFooter>
+					<UserContextFooter userId={userId} deleted={!report.user} />
+				</ContextualbarFooter>
+			)}
+		</>
+	);
+};
+
+export default UserReportInfo;