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

apps/meteor/client/views/admin/moderation/MessageContextFooter.tsx

@@ -0,0 +1,40 @@
+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 useDeleteMessagesAction from './hooks/useDeleteMessagesAction';
+import useDismissUserAction from './hooks/useDismissUserAction';
+import useResetAvatarAction from './hooks/useResetAvatarAction';
+
+export type MessageContextFooterProps = { userId: string; deleted: boolean };
+
+const MessageContextFooter = ({ userId, deleted }: MessageContextFooterProps) => {
+	const { t } = useTranslation();
+
+	const dismissUserAction = useDismissUserAction(userId);
+	const deleteMessagesAction = useDeleteMessagesAction(userId);
+
+	return (
+		<ButtonGroup stretch>
+			<Button onClick={dismissUserAction.onClick}>{t('Moderation_Dismiss_all_reports')}</Button>
+			<Button onClick={deleteMessagesAction.onClick} secondary danger>
+				{t('Moderation_Delete_all_messages')}
+			</Button>
+
+			<Box flexGrow={0} marginInlineStart={8}>
+				<GenericMenu
+					large
+					title={t('More')}
+					items={[
+						{ ...useDeactivateUserAction(userId), ...(deleted && { disabled: true }) },
+						{ ...useResetAvatarAction(userId), ...(deleted && { disabled: true }) },
+					]}
+					placement='top-end'
+				/>
+			</Box>
+		</ButtonGroup>
+	);
+};
+
+export default MessageContextFooter;

apps/meteor/client/views/admin/moderation/MessageReportInfo.tsx

@@ -0,0 +1,70 @@
+import type { IModerationReport } from '@rocket.chat/core-typings';
+import { Box, Message } from '@rocket.chat/fuselage';
+import { useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import ReportReason from './helpers/ReportReason';
+
+export type MessageReportInfoProps = { msgId: string };
+
+const MessageReportInfo = ({ msgId }: MessageReportInfoProps) => {
+	const { t } = useTranslation();
+	const getReportsByMessage = useEndpoint('GET', `/v1/moderation.reports`);
+
+	const useRealName = useSetting('UI_Use_Real_Name', false);
+
+	const {
+		data: reportsByMessage,
+		isLoading: isLoadingReportsByMessage,
+		isSuccess: isSuccessReportsByMessage,
+		isError: isErrorReportsByMessage,
+	} = useQuery({
+		queryKey: ['moderation', 'msgReports', 'fetchReasons', { msgId }],
+		queryFn: async () => {
+			const reports = await getReportsByMessage({ msgId });
+			return reports;
+		},
+		meta: {
+			apiErrorToastMessage: true,
+		},
+	});
+
+	if (isLoadingReportsByMessage) {
+		return (
+			<Box display='flex' flexDirection='column' width='full' height='full' overflow='hidden'>
+				<Message>{t('Loading')}</Message>
+			</Box>
+		);
+	}
+
+	if (isErrorReportsByMessage) {
+		return (
+			<Box display='flex' flexDirection='column' width='full' height='full' overflow='hidden'>
+				<Message>{t('Error')}</Message>
+			</Box>
+		);
+	}
+
+	const { reports } = reportsByMessage as unknown as { reports: IModerationReport[] };
+
+	return (
+		<>
+			{isSuccessReportsByMessage && reportsByMessage?.reports && (
+				<Box display='flex' flexDirection='column' width='full' height='full' overflowX='hidden' overflowY='auto'>
+					{reports.map((report: IModerationReport, index: number) => (
+						<ReportReason
+							key={report._id}
+							ind={index + 1}
+							uinfo={useRealName ? report.reportedBy?.name : report.reportedBy?.username}
+							msg={report.description}
+							ts={new Date(report.ts)}
+						/>
+					))}
+				</Box>
+			)}
+		</>
+	);
+};
+
+export default MessageReportInfo;

apps/meteor/client/views/admin/moderation/ModConsoleReportDetails.tsx

@@ -0,0 +1,46 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { Tabs, TabsItem } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarClose, ContextualbarDialog, ContextualbarHeader, ContextualbarTitle } from '@rocket.chat/ui-client';
+import { useTranslation, useRouter, useRouteParameter } from '@rocket.chat/ui-contexts';
+import { useState } from 'react';
+
+import UserMessages from './UserMessages';
+import UserReportInfo from './UserReports/UserReportInfo';
+
+export type ModConsoleReportDetailsProps = {
+	userId: IUser['_id'];
+	default: string;
+	onRedirect: (mid: string) => void;
+};
+
+const ModConsoleReportDetails = ({ userId, default: defaultTab, onRedirect }: ModConsoleReportDetailsProps) => {
+	const t = useTranslation();
+	const [tab, setTab] = useState<string>(defaultTab);
+	const moderationRoute = useRouter();
+
+	const activeTab = useRouteParameter('tab');
+
+	const handleCloseContextualbar = useStableCallback(() => moderationRoute.navigate(`/admin/moderation/${activeTab}`, { replace: true }));
+
+	return (
+		<ContextualbarDialog onClose={handleCloseContextualbar}>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Reports')}</ContextualbarTitle>
+				<ContextualbarClose onClick={handleCloseContextualbar} />
+			</ContextualbarHeader>
+			<Tabs paddingBlockStart={8}>
+				<TabsItem selected={tab === 'messages'} onClick={() => setTab('messages')}>
+					{t('Messages')}
+				</TabsItem>
+				<TabsItem selected={tab === 'users'} onClick={() => setTab('users')}>
+					{t('User')}
+				</TabsItem>
+			</Tabs>
+			{tab === 'messages' && <UserMessages userId={userId} onRedirect={onRedirect} />}
+			{tab === 'users' && <UserReportInfo userId={userId} />}
+		</ContextualbarDialog>
+	);
+};
+
+export default ModConsoleReportDetails;

apps/meteor/client/views/admin/moderation/ModerationConsoleActions.tsx

@@ -0,0 +1,46 @@
+// import { Menu, Option } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import type { ModerationConsoleRowProps } from './ModerationConsoleTableRow';
+import useDeactivateUserAction from './hooks/useDeactivateUserAction';
+import useDeleteMessagesAction from './hooks/useDeleteMessagesAction';
+import useDismissUserAction from './hooks/useDismissUserAction';
+import useResetAvatarAction from './hooks/useResetAvatarAction';
+
+const ModerationConsoleActions = ({ report, onClick }: Omit<ModerationConsoleRowProps, 'isDesktopOrLarger'>) => {
+	const { t } = useTranslation();
+	const { userId: uid, isUserDeleted } = report;
+
+	return (
+		<>
+			<GenericMenu
+				title={t('Options')}
+				detached
+				sections={[
+					{
+						items: [
+							{
+								id: 'seeReports',
+								content: t('Moderation_See_messages'),
+								icon: 'document-eye',
+								onClick: () => onClick(uid),
+							},
+						],
+					},
+					{
+						items: [
+							useDismissUserAction(uid),
+							useDeleteMessagesAction(uid),
+							{ ...useDeactivateUserAction(uid), ...(isUserDeleted && { disabled: true }) },
+							{ ...useResetAvatarAction(uid), ...(isUserDeleted && { disabled: true }) },
+						],
+					},
+				]}
+				placement='bottom-end'
+			/>
+		</>
+	);
+};
+
+export default ModerationConsoleActions;

apps/meteor/client/views/admin/moderation/ModerationConsolePage.tsx

@@ -0,0 +1,63 @@
+import { Tabs, TabsItem } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useTranslation, useRouteParameter, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+
+import ModConsoleReportDetails from './ModConsoleReportDetails';
+import ModerationConsoleTable from './ModerationConsoleTable';
+import ModConsoleUsersTable from './UserReports/ModConsoleUsersTable';
+import { getPermaLink } from '../../../lib/getPermaLink';
+
+type TabType = 'users' | 'messages';
+
+export type ModerationConsolePageProps = {
+	tab: TabType;
+	onSelectTab?: (tab: TabType) => void;
+};
+
+const ModerationConsolePage = ({ tab = 'messages', onSelectTab }: ModerationConsolePageProps) => {
+	const t = useTranslation();
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleRedirect = useCallback(
+		async (mid: string) => {
+			try {
+				const permalink = await getPermaLink(mid);
+				window.open(permalink, '_self');
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		[dispatchToastMessage],
+	);
+
+	const handleTabClick = useCallback(
+		(tab: TabType): undefined | (() => void) => (onSelectTab ? (): void => onSelectTab(tab) : undefined),
+		[onSelectTab],
+	);
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Moderation')} />
+				<Tabs>
+					<TabsItem selected={tab === 'messages'} onClick={handleTabClick('messages')}>
+						{t('Reported_Messages')}
+					</TabsItem>
+					<TabsItem selected={tab === 'users'} onClick={handleTabClick('users')}>
+						{t('Reported_Users')}
+					</TabsItem>
+				</Tabs>
+				<PageContent>
+					{tab === 'messages' && <ModerationConsoleTable />}
+					{tab === 'users' && <ModConsoleUsersTable />}
+				</PageContent>
+			</Page>
+			{context === 'info' && id && <ModConsoleReportDetails userId={id} onRedirect={handleRedirect} default={tab} />}
+		</Page>
+	);
+};
+
+export default ModerationConsolePage;

apps/meteor/client/views/admin/moderation/ModerationConsoleRoute.tsx

@@ -0,0 +1,45 @@
+import { usePermission, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+
+import ModerationConsolePage from './ModerationConsolePage';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const MODERATION_VALID_TABS = ['users', 'messages'] as const;
+
+const isValidTab = (tab: string | undefined): tab is (typeof MODERATION_VALID_TABS)[number] => MODERATION_VALID_TABS.includes(tab as any);
+
+const ModerationRoute = () => {
+	const canViewModerationConsole = usePermission('view-moderation-console');
+	const router = useRouter();
+	const tab = useRouteParameter('tab');
+
+	useEffect(() => {
+		if (!isValidTab(tab)) {
+			router.navigate(
+				{
+					pattern: '/admin/moderation/:tab?/:context?/:id?',
+					params: { tab: 'messages' },
+				},
+				{ replace: true },
+			);
+		}
+	}, [tab, router]);
+
+	if (!canViewModerationConsole) {
+		return <NotAuthorizedPage />;
+	}
+
+	const onSelectTab = (tab: (typeof MODERATION_VALID_TABS)[number]) => {
+		router.navigate(
+			{
+				pattern: '/admin/moderation/:tab?/:context?/:id?',
+				params: { tab },
+			},
+			{ replace: true },
+		);
+	};
+
+	return <ModerationConsolePage tab={tab as (typeof MODERATION_VALID_TABS)[number]} onSelectTab={onSelectTab} />;
+};
+
+export default ModerationRoute;

apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx

@@ -0,0 +1,142 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { Pagination } 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 ModerationConsoleTableRow from './ModerationConsoleTableRow';
+import ModerationFilter from './helpers/ModerationFilter';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+// TODO: Missing error state
+const ModerationConsoleTable = () => {
+	const [text, setText] = useState('');
+	const router = useRouter();
+	const { t } = useTranslation();
+	const isDesktopOrLarger = useMediaQuery('(min-width: 1024px)');
+
+	const { sortBy, sortDirection, setSort } = useSort<'reports.ts' | 'reports.message.u.username' | 'reports.description' | '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,
+				...(end && { latest: `${new Date(end).toISOString().slice(0, 10)}T23:59:59.999Z` }),
+				...(start && { oldest: `${new Date(start).toISOString().slice(0, 10)}T00:00:00.000Z` }),
+			}),
+			[current, end, itemsPerPage, sortBy, sortDirection, start, text],
+		),
+		500,
+	);
+
+	const getReports = useEndpoint('GET', '/v1/moderation.reportsByUsers');
+
+	const { data, isLoading, isSuccess } = useQuery({
+		queryKey: ['moderation', 'msgReports', 'fetchAll', query],
+		queryFn: async () => getReports(query),
+		meta: {
+			apiErrorToastMessage: true,
+		},
+		placeholderData: keepPreviousData,
+	});
+
+	const handleClick = useStableCallback((id: IUser['_id']): void => {
+		router.navigate({
+			pattern: '/admin/moderation/:tab?/:context?/:id?',
+			params: {
+				tab: 'messages',
+				context: 'info',
+				id,
+			},
+		});
+	});
+
+	const headers = useMemo(
+		() => [
+			<GenericTableHeaderCell
+				key='name'
+				direction={sortDirection}
+				active={sortBy === 'reports.message.u.username'}
+				onClick={setSort}
+				sort='reports.message.u.username'
+			>
+				{t('User')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='room' direction={sortDirection}>
+				{t('Room')}
+			</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' />,
+		],
+		[sortDirection, sortBy, setSort, t],
+	);
+
+	return (
+		<>
+			<ModerationFilter text={text} setText={setText} setDateRange={setDateRange} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>{isLoading && <GenericTableLoadingTable headerCells={headers.length} />}</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data.reports.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.reports.map((report) => (
+								<ModerationConsoleTableRow
+									key={report.userId}
+									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 />}
+		</>
+	);
+};
+
+export default ModerationConsoleTable;

apps/meteor/client/views/admin/moderation/ModerationConsoleTableRow.tsx

@@ -0,0 +1,45 @@
+import type { IModerationAudit, IUser } from '@rocket.chat/core-typings';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+
+import ModerationConsoleActions from './ModerationConsoleActions';
+import UserColumn from './helpers/UserColumn';
+import { normalizeUsername } from '../../../../lib/utils/normalizeUsername';
+import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+
+export type ModerationConsoleRowProps = {
+	report: IModerationAudit;
+	onClick: (id: IUser['_id']) => void;
+	isDesktopOrLarger: boolean;
+};
+
+const ModerationConsoleTableRow = ({ report, onClick, isDesktopOrLarger }: ModerationConsoleRowProps) => {
+	const { userId: _id, rooms, name, count, ts } = report;
+	const username = report.username ? normalizeUsername(report.username) : undefined;
+
+	const roomNames = rooms.map((room) => {
+		if (room.t === 'd') {
+			return room.name || 'Private';
+		}
+		return room.fname || room.name;
+	});
+
+	const formatDateAndTime = useFormatDateAndTime();
+
+	const concatenatedRoomNames = roomNames.join(', ');
+
+	return (
+		<GenericTableRow key={_id} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action>
+			<GenericTableCell withTruncatedText>
+				<UserColumn username={username} name={name} fontSize='micro' size={isDesktopOrLarger ? 'x20' : 'x40'} />
+			</GenericTableCell>
+			<GenericTableCell withTruncatedText>{concatenatedRoomNames}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{formatDateAndTime(ts)}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{count}</GenericTableCell>
+			<GenericTableCell onClick={(e): void => e.stopPropagation()}>
+				<ModerationConsoleActions report={report} onClick={onClick} />
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default ModerationConsoleTableRow;

apps/meteor/client/views/admin/moderation/UserMessages.tsx

@@ -0,0 +1,90 @@
+import { Box, Callout, Message, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarFooter } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MessageContextFooter from './MessageContextFooter';
+import ContextMessage from './helpers/ContextMessage';
+import GenericNoResults from '../../../components/GenericNoResults';
+
+// TODO: We should use Contextualbar components here
+const UserMessages = ({ userId, onRedirect }: { userId: string; onRedirect: (mid: string) => void }) => {
+	const { t } = useTranslation();
+	const getUserMessages = useEndpoint('GET', '/v1/moderation.user.reportedMessages');
+
+	const {
+		data: report,
+		refetch: reloadUserMessages,
+		isLoading,
+		isSuccess,
+		isError,
+	} = useQuery({
+		queryKey: ['moderation', 'msgReports', 'fetchDetails', { userId }],
+		queryFn: async () => {
+			const messages = await getUserMessages({ userId });
+			return messages;
+		},
+		meta: {
+			apiErrorToastMessage: true,
+		},
+	});
+
+	const handleChange = useStableCallback(() => {
+		reloadUserMessages();
+	});
+
+	return (
+		<>
+			<Box display='flex' flexDirection='column' width='full' height='full' overflowY='auto' overflowX='hidden'>
+				{isLoading && <Message>{t('Loading')}</Message>}
+				{isSuccess && (
+					<Box padding={24}>
+						{report.messages.length > 0 && (
+							<Callout title={t('Moderation_Duplicate_messages')} type='warning' icon='warning'>
+								{t('Moderation_Duplicate_messages_warning')}
+							</Callout>
+						)}
+						{!report.user && (
+							<Callout marginBlockStart={8} type='warning' icon='warning'>
+								{t('Moderation_User_deleted_warning')}
+							</Callout>
+						)}
+					</Box>
+				)}
+				{isSuccess &&
+					report.messages.length > 0 &&
+					report.messages.map((message) => (
+						<Fragment key={message._id}>
+							<ContextMessage
+								message={message.message}
+								room={message.room}
+								onRedirect={onRedirect}
+								onChange={handleChange}
+								deleted={!report.user}
+							/>
+						</Fragment>
+					))}
+				{isSuccess && report.messages.length === 0 && <GenericNoResults title={t('No_message_reports')} icon='message' />}
+				{isError && (
+					<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={handleChange}>{t('Reload_page')}</StatesAction>
+						</StatesActions>
+					</Box>
+				)}
+			</Box>
+			{isSuccess && report.messages.length > 0 && (
+				<ContextualbarFooter>
+					<MessageContextFooter userId={userId} deleted={!report.user} />
+				</ContextualbarFooter>
+			)}
+		</>
+	);
+};
+
+export default UserMessages;

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;

apps/meteor/client/views/admin/moderation/helpers/ContextMessage.tsx

@@ -0,0 +1,124 @@
+import type { IMessage, MessageReport, MessageAttachment } from '@rocket.chat/core-typings';
+import { isE2EEMessage, isQuoteAttachment } from '@rocket.chat/core-typings';
+import {
+	Message,
+	MessageDivider,
+	MessageLeftContainer,
+	MessageContainer,
+	MessageHeader,
+	MessageTimestamp,
+	MessageRole,
+	MessageBody,
+	MessageName,
+	MessageToolbar,
+	MessageToolbarItem,
+	MessageToolbarWrapper,
+	MessageUsername,
+} from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import ReportReasonCollapsible from './ReportReasonCollapsible';
+import MessageContentBody from '../../../../components/message/MessageContentBody';
+import Attachments from '../../../../components/message/content/Attachments';
+import UiKitMessageBlock from '../../../../components/message/uikit/UiKitMessageBlock';
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+import { useFormatTime } from '../../../../hooks/useFormatTime';
+import { toPlainTextRoot } from '../../../../lib/toPlainTextRoot';
+import MessageReportInfo from '../MessageReportInfo';
+import useDeleteMessage from '../hooks/useDeleteMessage';
+import { useDismissMessageAction } from '../hooks/useDismissMessageAction';
+
+const ContextMessage = ({
+	message,
+	room,
+	deleted,
+	onRedirect,
+	onChange,
+}: {
+	message: any;
+	room: MessageReport['room'];
+	deleted: boolean;
+	onRedirect: (id: IMessage['_id']) => void;
+	onChange: () => void;
+}) => {
+	const { t } = useTranslation();
+
+	const isEncryptedMessage = isE2EEMessage(message);
+
+	const deleteMessage = useDeleteMessage(message._id, message.rid, onChange);
+	const dismissMsgReport = useDismissMessageAction(message._id);
+
+	const formatDateAndTime = useFormatDateAndTime();
+	const formatTime = useFormatTime();
+	const formatDate = useFormatDate();
+	const useRealName = useSetting('UI_Use_Real_Name', false);
+
+	const name = message.u.name || '';
+	const username = message.u.username || '';
+
+	const displayName = useUserDisplayName({ name, username });
+
+	const quotes = message?.attachments?.filter(isQuoteAttachment) || [];
+
+	const attachments = message?.attachments?.filter((attachment: MessageAttachment) => !isQuoteAttachment(attachment)) || [];
+
+	return (
+		<>
+			<MessageDivider>{formatDate(message._updatedAt)}</MessageDivider>
+			<Message>
+				<MessageLeftContainer>
+					<UserAvatar username={message.u.username} />
+				</MessageLeftContainer>
+				<MessageContainer>
+					<MessageHeader>
+						<MessageName>{displayName}</MessageName>
+						<>{useRealName && <MessageUsername>&nbsp;{`@${message.u.username}`}</MessageUsername>}</>
+						<MessageTimestamp title={formatDateAndTime(message._updatedAt)}>
+							{formatTime(message._updatedAt !== message.ts ? message._updatedAt : message.ts)}
+							{message._updatedAt !== message.ts && ` (${t('edited')})`}
+						</MessageTimestamp>
+						<MessageRole>{room.name || room.fname || 'DM'}</MessageRole>
+					</MessageHeader>
+					<MessageBody>
+						{!!quotes?.length && <Attachments attachments={quotes} />}
+						{!message.blocks?.length && !!message.md?.length ? (
+							<>
+								{(!isEncryptedMessage || message.e2e === 'done') && (
+									<MessageContentBody md={message.md} mentions={message.mentions} channels={message.channels} />
+								)}
+								{message.e2e === 'pending' && t('E2E_message_encrypted_placeholder')}
+							</>
+						) : (
+							!!message.msg && (
+								<MessageContentBody md={toPlainTextRoot(message.msg)} mentions={message.mentions} channels={message.channels} />
+							)
+						)}
+
+						{!!attachments && <Attachments id={message.files?.[0]?._id} attachments={attachments} />}
+						{message.blocks && <UiKitMessageBlock rid={message.rid} mid={message._id} blocks={message.blocks} />}
+					</MessageBody>
+					<ReportReasonCollapsible>
+						<MessageReportInfo msgId={message._id} />
+					</ReportReasonCollapsible>
+				</MessageContainer>
+				<MessageToolbarWrapper>
+					<MessageToolbar>
+						<MessageToolbarItem
+							icon='checkmark-circled'
+							title={t('Moderation_Dismiss_reports')}
+							onClick={() => dismissMsgReport.action()}
+						/>
+						<MessageToolbarItem icon='arrow-forward' title={t('Moderation_Go_to_message')} onClick={() => onRedirect(message._id)} />
+						<MessageToolbarItem disabled={deleted} icon='trash' title={t('Moderation_Delete_message')} onClick={() => deleteMessage()} />
+					</MessageToolbar>
+				</MessageToolbarWrapper>
+			</Message>
+		</>
+	);
+};
+
+export default ContextMessage;

apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx

@@ -0,0 +1,90 @@
+import { Select, Box, type SelectOption } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { subDays, subMonths, startOfMonth, endOfMonth, format } from 'date-fns';
+import type { Key } from 'react';
+import { useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type DateRangePickerProps = {
+	onChange(range: { start: string; end: string }): void;
+	defaultSelectedKey?: 'today' | 'yesterday' | 'thisWeek' | 'previousWeek' | 'thisMonth' | 'alldates';
+};
+
+const formatToDateInput = (date: Date) => format(date, 'yyyy-MM-dd');
+
+const getMonthRange = (monthsToSubtractFromToday: number) => {
+	const now = new Date();
+	const startDate = monthsToSubtractFromToday === 0 ? startOfMonth(now) : startOfMonth(subMonths(now, monthsToSubtractFromToday));
+	const endDate = monthsToSubtractFromToday === 0 ? now : endOfMonth(subMonths(now, monthsToSubtractFromToday));
+	return {
+		start: formatToDateInput(startDate),
+		end: formatToDateInput(endDate),
+	};
+};
+
+const getWeekRange = (daysToSubtractFromStart: number, daysToSubtractFromEnd: number) => {
+	const now = new Date();
+	return {
+		start: formatToDateInput(subDays(now, daysToSubtractFromStart)),
+		end: formatToDateInput(subDays(now, daysToSubtractFromEnd)),
+	};
+};
+
+const DateRangePicker = ({ onChange, defaultSelectedKey = 'alldates' }: DateRangePickerProps) => {
+	const { t } = useTranslation();
+
+	const handleRange = useStableCallback((range: { start: string; end: string }) => {
+		onChange(range);
+	});
+
+	const timeOptions = useMemo<SelectOption[]>(() => {
+		return [
+			['today', t('Today')],
+			['yesterday', t('Yesterday')],
+			['thisWeek', t('This_week')],
+			['previousWeek', t('Previous_week')],
+			['thisMonth', t('This_month')],
+			['alldates', t('All')],
+		].map(([value, label]) => [value, label] as SelectOption);
+	}, [t]);
+
+	const handleOptionClick = useStableCallback((action: Key) => {
+		switch (action) {
+			case 'today':
+				handleRange(getWeekRange(0, 0));
+				break;
+			case 'yesterday':
+				handleRange(getWeekRange(1, 1));
+				break;
+			case 'thisWeek':
+				handleRange(getWeekRange(7, 0));
+				break;
+			case 'previousWeek':
+				handleRange(getWeekRange(14, 7));
+				break;
+			case 'thisMonth':
+				handleRange(getMonthRange(0));
+				break;
+			case 'alldates':
+				handleRange({
+					start: '',
+					end: '',
+				});
+				break;
+			default:
+				break;
+		}
+	});
+
+	useEffect(() => {
+		handleOptionClick(defaultSelectedKey);
+	}, []);
+
+	return (
+		<Box flexGrow={0}>
+			<Select defaultSelectedKey={defaultSelectedKey} width='100%' options={timeOptions} onChange={handleOptionClick} />
+		</Box>
+	);
+};
+
+export default DateRangePicker;

apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx

@@ -0,0 +1,18 @@
+import DateRangePicker from './DateRangePicker';
+import FilterByText from '../../../../components/FilterByText';
+
+export type ModerationFilterProps = {
+	text: string;
+	setText: (text: string) => void;
+	setDateRange: (dateRange: { start: string; end: string }) => void;
+};
+
+const ModerationFilter = ({ text, setText, setDateRange }: ModerationFilterProps) => {
+	return (
+		<FilterByText shouldAutoFocus value={text} onChange={(event) => setText(event.target.value)}>
+			<DateRangePicker onChange={setDateRange} />
+		</FilterByText>
+	);
+};
+
+export default ModerationFilter;

apps/meteor/client/views/admin/moderation/helpers/ReportReason.tsx

@@ -0,0 +1,27 @@
+import { Box, Tag } from '@rocket.chat/fuselage';
+
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+
+export type ReportReasonProps = { ind: number; uinfo: string | undefined; msg: string; ts: Date };
+
+const ReportReason = ({ ind, uinfo, msg, ts }: ReportReasonProps) => {
+	const formatDate = useFormatDate();
+	return (
+		<Box display='flex' flexDirection='column' alignItems='flex-start' marginBlock={10}>
+			<Tag variant='danger'>Report #{ind}</Tag>
+			<Box wordBreak='break-word' marginBlock={5} fontSize='p2b'>
+				{msg}
+			</Box>
+			<Box>
+				<Box is='span' fontWeight='700' color='font-info' fontSize='micro'>
+					@{uinfo || 'rocket.cat'}
+				</Box>{' '}
+				<Box is='span' fontWeight='700' color='font-annotation' fontSize='micro'>
+					{formatDate(ts)}
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default ReportReason;

apps/meteor/client/views/admin/moderation/helpers/ReportReasonCollapsible.tsx

@@ -0,0 +1,26 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import { useToggle } from '@rocket.chat/fuselage-hooks';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type ReportReasonCollapsibleProps = { children: ReactNode };
+
+const ReportReasonCollapsible = ({ children }: ReportReasonCollapsibleProps) => {
+	const [isOpen, setIsOpen] = useToggle(false);
+	const { t } = useTranslation();
+
+	const toggle = () => setIsOpen((prev) => !prev);
+
+	return (
+		<>
+			<Box display='flex' flexDirection='row' justifyContent='space-between' alignItems='center'>
+				<Button small onClick={toggle} aria-expanded={isOpen} aria-controls='report-reasons'>
+					{isOpen ? t('Moderation_Hide_reports') : t('Moderation_Show_reports')}
+				</Button>
+			</Box>
+			{isOpen && children}
+		</>
+	);
+};
+
+export default ReportReasonCollapsible;

apps/meteor/client/views/admin/moderation/helpers/UserColumn.tsx

@@ -0,0 +1,42 @@
+import { Box } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type { ComponentProps } from 'react';
+
+export type UserColumnProps = {
+	name?: string;
+	username?: string;
+	isDesktopOrLarger?: boolean;
+	isProfile?: boolean;
+	size: ComponentProps<typeof UserAvatar>['size'];
+	fontSize?: string;
+};
+
+const UserColumn = ({ name, username, fontSize, size }: UserColumnProps) => {
+	return (
+		<Box display='flex' alignItems='center'>
+			{username && (
+				<Box>
+					<UserAvatar size={size} username={username} />
+				</Box>
+			)}
+			<Box display='flex' marginInline={8} withTruncatedText>
+				<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
+					<Box fontScale='p2m' color='default' withTruncatedText>
+						{name && username ? (
+							<>
+								{name}{' '}
+								<Box display='inline-flex' fontWeight={300} fontSize={fontSize}>
+									(@{username})
+								</Box>
+							</>
+						) : (
+							name || username
+						)}{' '}
+					</Box>
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default UserColumn;

apps/meteor/client/views/admin/moderation/hooks/useDeactivateUserAction.tsx

@@ -0,0 +1,82 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouteParameter, useRouter, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+const useDeactivateUserAction = (userId: string, isUserReport?: boolean): GenericMenuItemProps => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const deactiveUser = useEndpoint('POST', '/v1/users.setActiveStatus');
+	const deleteMessages = useEndpoint('POST', '/v1/moderation.user.deleteReportedMessages');
+	const dismissUserReports = useEndpoint('POST', '/v1/moderation.dismissUserReports');
+
+	const router = useRouter();
+
+	const tab = useRouteParameter('tab');
+
+	const handleDeactivateUser = useMutation({
+		mutationFn: deactiveUser,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_User_deactivated') });
+		},
+	});
+
+	const handleDeleteMessages = useMutation({
+		mutationFn: deleteMessages,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_Messages_deleted') });
+		},
+	});
+
+	const handleDismissUserReports = useMutation({
+		mutationFn: dismissUserReports,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_Reports_dismissed') });
+		},
+	});
+
+	const onDeactivateUser = async () => {
+		setModal();
+		!isUserReport && (await handleDeleteMessages.mutateAsync({ userId }));
+		await handleDeactivateUser.mutateAsync({ userId, activeStatus: false, confirmRelinquish: true });
+		await handleDismissUserReports.mutateAsync({ userId });
+		queryClient.invalidateQueries({ queryKey: ['moderation'] });
+		router.navigate(`/admin/moderation/${tab}`);
+	};
+
+	const confirmDeactivateUser = (): void => {
+		setModal(
+			<GenericModal
+				title={t('Moderation_Deactivate_User')}
+				confirmText={t('Moderation_Deactivate_User')}
+				variant='danger'
+				onConfirm={() => onDeactivateUser()}
+				onCancel={() => setModal()}
+			>
+				{t('Moderation_Are_you_sure_you_want_to_deactivate_this_user')}
+			</GenericModal>,
+		);
+	};
+
+	return {
+		id: 'deactiveUser',
+		content: t('Moderation_Deactivate_User'),
+		icon: 'ban',
+		onClick: () => confirmDeactivateUser(),
+	};
+};
+
+export default useDeactivateUserAction;

apps/meteor/client/views/admin/moderation/hooks/useDeleteMessage.tsx

@@ -0,0 +1,61 @@
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+const useDeleteMessage = (mid: string, rid: string, onChange: () => void) => {
+	const { t } = useTranslation();
+	const deleteMessage = useEndpoint('POST', '/v1/chat.delete');
+	const dismissMessage = useEndpoint('POST', '/v1/moderation.dismissReports');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const setModal = useSetModal();
+	const queryClient = useQueryClient();
+
+	const handleDeleteMessages = useMutation({
+		mutationFn: deleteMessage,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+			setModal();
+		},
+		onSuccess: async () => {
+			await handleDismissMessage.mutateAsync({ msgId: mid });
+		},
+	});
+
+	const handleDismissMessage = useMutation({
+		mutationFn: dismissMessage,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_Message_deleted') });
+		},
+		onSettled: () => {
+			onChange();
+			queryClient.invalidateQueries({ queryKey: ['moderation', 'msgReports'] });
+			setModal();
+		},
+	});
+
+	const onDeleteAll = async () => {
+		await handleDeleteMessages.mutateAsync({ msgId: mid, roomId: rid, asUser: true });
+	};
+
+	const confirmDeletMessage = (): void => {
+		setModal(
+			<GenericModal
+				confirmText={t('Moderation_Dismiss_and_delete')}
+				title={t('Moderation_Delete_this_message')}
+				variant='danger'
+				onConfirm={() => onDeleteAll()}
+				onCancel={() => setModal()}
+			>
+				{t('Moderation_Are_you_sure_you_want_to_delete_this_message')}
+			</GenericModal>,
+		);
+	};
+
+	return confirmDeletMessage;
+};
+
+export default useDeleteMessage;

apps/meteor/client/views/admin/moderation/hooks/useDeleteMessagesAction.tsx

@@ -0,0 +1,55 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouteParameter, useRouter, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+const useDeleteMessagesAction = (userId: string): GenericMenuItemProps => {
+	const { t } = useTranslation();
+	const deleteMessages = useEndpoint('POST', '/v1/moderation.user.deleteReportedMessages');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const setModal = useSetModal();
+	const router = useRouter();
+	const tab = useRouteParameter('tab');
+	const queryClient = useQueryClient();
+
+	const handleDeleteMessages = useMutation({
+		mutationFn: deleteMessages,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_Messages_deleted') });
+		},
+	});
+
+	const onDeleteAll = async () => {
+		await handleDeleteMessages.mutateAsync({ userId });
+		queryClient.invalidateQueries({ queryKey: ['moderation', 'msgReports', 'fetchAll'] });
+		setModal();
+		router.navigate(`/admin/moderation/${tab}`);
+	};
+
+	const confirmDeletMessages = (): void => {
+		setModal(
+			<GenericModal
+				confirmText={t('Moderation_Dismiss_and_delete')}
+				title={t('Moderation_Delete_all_messages')}
+				variant='danger'
+				onConfirm={() => onDeleteAll()}
+				onCancel={() => setModal()}
+			>
+				{t('Moderation_Are_you_sure_you_want_to_delete_all_reported_messages_from_this_user')}
+			</GenericModal>,
+		);
+	};
+
+	return {
+		id: 'deleteAll',
+		content: t('Moderation_Delete_all_messages'),
+		icon: 'trash',
+		onClick: () => confirmDeletMessages(),
+	};
+};
+
+export default useDeleteMessagesAction;

apps/meteor/client/views/admin/moderation/hooks/useDismissMessageAction.tsx

@@ -0,0 +1,47 @@
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+export const useDismissMessageAction = (msgId: string): { action: () => void } => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const dismissMessage = useEndpoint('POST', '/v1/moderation.dismissReports');
+
+	const handleDismissMessage = useMutation({
+		mutationFn: dismissMessage,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_Reports_dismissed') });
+		},
+	});
+
+	const onDismissMessage = async () => {
+		await handleDismissMessage.mutateAsync({ msgId });
+		queryClient.invalidateQueries({ queryKey: ['moderation', 'msgReports'] });
+		setModal();
+	};
+
+	const confirmDismissMessage = (): void => {
+		setModal(
+			<GenericModal
+				title={t('Moderation_Dismiss_reports')}
+				confirmText={t('Moderation_Dismiss_reports')}
+				variant='danger'
+				onConfirm={() => onDismissMessage()}
+				onCancel={() => setModal()}
+			>
+				{t('Moderation_Dismiss_reports_confirm')}
+			</GenericModal>,
+		);
+	};
+
+	return {
+		action: () => confirmDismissMessage(),
+	};
+};

apps/meteor/client/views/admin/moderation/hooks/useDismissUserAction.tsx

@@ -0,0 +1,60 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouter, useSetModal, useToastMessageDispatch, useRouteParameter } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+const useDismissUserAction = (userId: string, isUserReport?: boolean): GenericMenuItemProps => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const moderationRoute = useRouter();
+	const tab = useRouteParameter('tab');
+	const queryClient = useQueryClient();
+
+	const dismissMsgReports = useEndpoint('POST', '/v1/moderation.dismissReports');
+
+	const dismissUserReports = useEndpoint('POST', '/v1/moderation.dismissUserReports');
+
+	const dismissUser = isUserReport ? dismissUserReports : dismissMsgReports;
+
+	const handleDismissUser = useMutation({
+		mutationFn: dismissUser,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_Reports_all_dismissed') });
+		},
+	});
+
+	const onDismissUser = async () => {
+		await handleDismissUser.mutateAsync({ userId });
+		queryClient.invalidateQueries({ queryKey: ['moderation', 'userReports'] });
+		setModal();
+		moderationRoute.navigate(`/admin/moderation/${tab}`, { replace: true });
+	};
+
+	const confirmDismissUser = (): void => {
+		setModal(
+			<GenericModal
+				title={t('Moderation_Dismiss_all_reports')}
+				confirmText={t('Moderation_Dismiss_all_reports')}
+				variant='danger'
+				onConfirm={() => onDismissUser()}
+				onCancel={() => setModal()}
+			>
+				{t('Moderation_Dismiss_all_reports_confirm')}
+			</GenericModal>,
+		);
+	};
+
+	return {
+		id: 'approve',
+		content: t('Moderation_Dismiss_reports'),
+		icon: 'circle-check',
+		onClick: () => confirmDismissUser(),
+	};
+};
+
+export default useDismissUserAction;

apps/meteor/client/views/admin/moderation/hooks/useResetAvatarAction.tsx

@@ -0,0 +1,53 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+const useResetAvatarAction = (userId: string): GenericMenuItemProps => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const resetAvatar = useEndpoint('POST', '/v1/users.resetAvatar');
+
+	const handleResetAvatar = useMutation({
+		mutationFn: resetAvatar,
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Moderation_Avatar_reset_success') });
+		},
+	});
+
+	const onResetAvatar = async () => {
+		setModal();
+		await handleResetAvatar.mutateAsync({ userId });
+		queryClient.invalidateQueries({ queryKey: ['moderation'] });
+	};
+
+	const confirmResetAvatar = (): void => {
+		setModal(
+			<GenericModal
+				title={t('Moderation_Reset_user_avatar')}
+				confirmText={t('Reset')}
+				variant='danger'
+				onConfirm={() => onResetAvatar()}
+				onCancel={() => setModal()}
+			>
+				{t('Moderation_Are_you_sure_you_want_to_reset_the_avatar')}
+			</GenericModal>,
+		);
+	};
+
+	return {
+		id: 'resetAvatar',
+		content: t('Moderation_Reset_user_avatar'),
+		icon: 'reload',
+		onClick: () => confirmResetAvatar(),
+	};
+};
+
+export default useResetAvatarAction;