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

apps/meteor/client/views/omnichannel/analytics/Overview.tsx

@@ -0,0 +1,80 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useEffect, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CounterItem from '../realTimeMonitoring/counter/CounterItem';
+import CounterRow from '../realTimeMonitoring/counter/CounterRow';
+
+const initialData: { title?: string; value: string | number }[] = Array.from({ length: 3 }).map(() => ({ title: undefined, value: '' }));
+
+const conversationsInitialData = [initialData, initialData];
+const productivityInitialData = [initialData];
+
+export type OverviewProps = { type: string; dateRange: { start: string; end: string }; departmentId: string };
+
+const Overview = ({ type, dateRange, departmentId }: OverviewProps) => {
+	const { t } = useTranslation();
+
+	const { start, end } = dateRange;
+
+	const params = useMemo(
+		() => ({
+			name: type,
+			from: start,
+			to: end,
+			...(departmentId && { departmentId }),
+		}),
+		[departmentId, end, start, type],
+	);
+
+	const loadData = useEndpoint('GET', '/v1/livechat/analytics/overview');
+
+	const [displayData, setDisplayData] = useState(conversationsInitialData);
+
+	useEffect(() => {
+		setDisplayData(type === 'Conversations' ? conversationsInitialData : productivityInitialData);
+	}, [type]);
+
+	useEffect(() => {
+		async function fetchData() {
+			if (!start || !end) {
+				return;
+			}
+
+			const value = await loadData(params);
+			if (!value) {
+				return;
+			}
+
+			if (value.length > 3) {
+				return setDisplayData([value.slice(0, 3), value.slice(3)]);
+			}
+
+			setDisplayData([value]);
+		}
+		fetchData();
+	}, [start, end, loadData, params]);
+
+	return (
+		<Box paddingBlock={28} flexDirection='column'>
+			{displayData.map((items = [], i) => (
+				<CounterRow key={i} border='0' paddingBlock='none'>
+					{items.map(({ title, value }, i) => (
+						<CounterItem
+							flexShrink={1}
+							paddingBlock={8}
+							flexBasis='100%'
+							key={i}
+							title={title ? t(title as TranslationKey) : <Skeleton width='x60' />}
+							count={value}
+						/>
+					))}
+				</CounterRow>
+			))}
+		</Box>
+	);
+};
+
+export default Overview;