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

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx

@@ -0,0 +1,49 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon';
+import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+
+type DevicesRowProps = {
+	_id: string;
+	deviceName?: string;
+	deviceType?: string;
+	deviceOSName?: string;
+	loginAt: string;
+	current?: boolean;
+};
+
+const DeviceManagementAccountRow = ({ _id, deviceName, deviceType = 'browser', deviceOSName, loginAt, current }: DevicesRowProps) => {
+	const { t } = useTranslation();
+	const formatDateAndTime = useFormatDateAndTime();
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const handleDeviceLogout = useDeviceLogout(_id, '/v1/sessions/logout.me', current);
+
+	return (
+		<GenericTableRow key={_id} aria-label={_id}>
+			<GenericTableCell>
+				<Box display='flex' alignItems='center'>
+					<DeviceIcon deviceType={deviceType} />
+					{deviceName && (
+						<Box withTruncatedText>
+							{deviceName}
+							{current && ` (${t('current')})`}
+						</Box>
+					)}
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell>{deviceOSName || ''}</GenericTableCell>
+			<GenericTableCell>{formatDateAndTime(loginAt)}</GenericTableCell>
+			{mediaQuery && <GenericTableCell>{_id}</GenericTableCell>}
+			<GenericTableCell align='end'>
+				<Button onClick={() => handleDeviceLogout()}>{t('Logout')}</Button>
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default DeviceManagementAccountRow;

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx

@@ -0,0 +1,81 @@
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableHeaderCell, usePagination, useSort } 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 DeviceManagementAccountRow from './DeviceManagementAccountRow';
+import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
+import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
+
+const sortMapping = {
+	client: 'device.name',
+	os: 'device.os.name',
+	loginAt: 'loginAt',
+};
+
+const DeviceManagementAccountTable = () => {
+	const { t } = useTranslation();
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'client' | 'os' | 'loginAt'>('loginAt');
+
+	const query = useMemo(
+		() => ({
+			sort: JSON.stringify({ [sortMapping[sortBy]]: sortDirection === 'asc' ? 1 : -1 }),
+			count: itemsPerPage,
+			offset: current,
+		}),
+		[itemsPerPage, current, sortBy, sortDirection],
+	);
+
+	const listSessions = useEndpoint('GET', '/v1/sessions/list');
+	const queryResult = useQuery({
+		queryKey: deviceManagementQueryKeys.userSessions(query),
+		queryFn: () => listSessions(query),
+	});
+
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const headers = useMemo(
+		() => [
+			<GenericTableHeaderCell key='client' direction={sortDirection} active={sortBy === 'client'} onClick={setSort} sort='client'>
+				{t('Client')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='os' direction={sortDirection} active={sortBy === 'os'} onClick={setSort} sort='os'>
+				{t('OS')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='loginAt' direction={sortDirection} active={sortBy === 'loginAt'} onClick={setSort} sort='loginAt'>
+				{t('Last_login')}
+			</GenericTableHeaderCell>,
+			mediaQuery && <GenericTableHeaderCell key='_id'>{t('Device_ID')}</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='logout' />,
+		],
+		[t, mediaQuery, sortDirection, sortBy, setSort],
+	);
+
+	return (
+		<DeviceManagementTable
+			{...queryResult}
+			headers={headers}
+			renderRow={(session) => (
+				<DeviceManagementAccountRow
+					key={session._id}
+					_id={session._id}
+					deviceName={session.device?.name}
+					deviceType={session.device?.type}
+					deviceOSName={session.device?.os.name}
+					loginAt={session.loginAt}
+					current={session.current}
+				/>
+			)}
+			current={current}
+			itemsPerPage={itemsPerPage}
+			setCurrent={setCurrent}
+			setItemsPerPage={setItemsPerPage}
+			paginationProps={paginationProps}
+		/>
+	);
+};
+
+export default DeviceManagementAccountTable;

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/index.ts

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