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

apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx

@@ -0,0 +1,134 @@
+import { Icon, Margins, Pagination, Skeleton, Table, TableBody, TableCell, TableHead, TableRow, Tile } from '@rocket.chat/fuselage';
+import { format } from 'date-fns';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useChannelsList } from './useChannelsList';
+import DownloadDataButton from '../../../../components/dashboards/DownloadDataButton';
+import PeriodSelector from '../../../../components/dashboards/PeriodSelector';
+import { usePeriodSelectorState } from '../../../../components/dashboards/usePeriodSelectorState';
+import Growth from '../../../../components/dataView/Growth';
+import EngagementDashboardCardFilter from '../EngagementDashboardCardFilter';
+
+const ChannelsOverview = () => {
+	const [period, periodSelectorProps] = usePeriodSelectorState('last 7 days', 'last 30 days', 'last 90 days');
+
+	const { t } = useTranslation();
+
+	const [current, setCurrent] = useState(0);
+	const [itemsPerPage, setItemsPerPage] = useState<25 | 50 | 100>(25);
+
+	const { data } = useChannelsList({
+		period,
+		offset: current,
+		count: itemsPerPage,
+	});
+
+	const channels = useMemo(() => {
+		if (!data) {
+			return;
+		}
+
+		return data?.channels?.map(({ room: { t, name, usernames, ts, _updatedAt }, messages, diffFromLastWeek }) => ({
+			t,
+			name: name || usernames?.join(' × '),
+			createdAt: ts,
+			updatedAt: _updatedAt,
+			messagesCount: messages,
+			messagesVariation: diffFromLastWeek,
+		}));
+	}, [data]);
+
+	return (
+		<>
+			<EngagementDashboardCardFilter>
+				<PeriodSelector {...periodSelectorProps} />
+				<DownloadDataButton
+					attachmentName={`Channels_start_${data?.start}_end_${data?.end}`}
+					headers={['Room type', 'Name', 'Messages', 'Last Update Date', 'Creation Date']}
+					dataAvailable={!!data}
+					dataExtractor={(): unknown[][] | undefined =>
+						data?.channels?.map(({ room: { t, name, usernames, ts, _updatedAt }, messages }) => [
+							t,
+							name || usernames?.join(' × '),
+							messages,
+							_updatedAt,
+							ts,
+						])
+					}
+				/>
+			</EngagementDashboardCardFilter>
+			<div>
+				{channels && !channels.length && (
+					<Tile fontScale='p1' color='hint' style={{ textAlign: 'center' }}>
+						{t('No_data_found')}
+					</Tile>
+				)}
+				{(!channels || channels.length) && (
+					<Table>
+						<TableHead>
+							<TableRow>
+								<TableCell>#</TableCell>
+								<TableCell>{t('Channel')}</TableCell>
+								<TableCell>{t('Created')}</TableCell>
+								<TableCell>{t('Last_active')}</TableCell>
+								<TableCell>{t('Messages_sent')}</TableCell>
+							</TableRow>
+						</TableHead>
+						<TableBody>
+							{channels?.map(({ t, name, createdAt, updatedAt, messagesCount, messagesVariation }, i) => (
+								<TableRow key={i}>
+									<TableCell>{i + 1}.</TableCell>
+									<TableCell>
+										<Margins inlineEnd={4}>
+											{(t === 'd' && <Icon name='at' />) || (t === 'p' && <Icon name='lock' />) || (t === 'c' && <Icon name='hashtag' />)}
+										</Margins>
+										{name}
+									</TableCell>
+									<TableCell>{format(new Date(createdAt ?? new Date()), 'P')}</TableCell>
+									<TableCell>{format(new Date(updatedAt ?? new Date()), 'P')}</TableCell>
+									<TableCell>
+										{messagesCount} <Growth>{messagesVariation}</Growth>
+									</TableCell>
+								</TableRow>
+							))}
+							{!channels &&
+								Array.from({ length: 5 }, (_, i) => (
+									<TableRow key={i}>
+										<TableCell>
+											<Skeleton width='100%' />
+										</TableCell>
+										<TableCell>
+											<Skeleton width='100%' />
+										</TableCell>
+										<TableCell>
+											<Skeleton width='100%' />
+										</TableCell>
+										<TableCell>
+											<Skeleton width='100%' />
+										</TableCell>
+										<TableCell>
+											<Skeleton width='100%' />
+										</TableCell>
+									</TableRow>
+								))}
+						</TableBody>
+					</Table>
+				)}
+				<Pagination
+					current={current}
+					itemsPerPage={itemsPerPage}
+					itemsPerPageLabel={(): string => t('Items_per_page:')}
+					showingResultsLabel={({ count, current, itemsPerPage }): string =>
+						t('Showing_results_of', { from: current + 1, to: Math.min(current + itemsPerPage, count), total: count })
+					}
+					count={data?.total || 0}
+					onSetItemsPerPage={setItemsPerPage}
+					onSetCurrent={setCurrent}
+				/>
+			</div>
+		</>
+	);
+};
+
+export default ChannelsOverview;