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

apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.stories.tsx

@@ -0,0 +1,20 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import CounterContainer from './CounterContainer';
+
+export default {
+	component: CounterContainer,
+} satisfies Meta<typeof CounterContainer>;
+
+export const Default: StoryObj<typeof CounterContainer> = {
+	name: 'CounterContainer',
+
+	args: {
+		totals: [
+			{ title: 'Total_conversations', value: 10 },
+			{ title: 'Open_conversations', value: 10 },
+			{ title: 'Total_messages', value: 10 },
+			{ title: 'Total_visitors', value: 0 },
+		],
+	},
+};

apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.tsx

@@ -0,0 +1,29 @@
+import type { Box } from '@rocket.chat/fuselage';
+import { Skeleton } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CounterItem from './CounterItem';
+import CounterRow from './CounterRow';
+
+export type CounterContainerProps = {
+	totals: {
+		title: string;
+		value: number | string;
+	}[];
+} & Omit<ComponentPropsWithoutRef<typeof Box>, 'data'>;
+
+const CounterContainer = ({ totals, ...props }: CounterContainerProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<CounterRow {...props}>
+			{totals.map(({ title, value }, i) => (
+				<CounterItem key={i} title={title ? t(title as TranslationKey) : <Skeleton width='x60' />} count={value} />
+			))}
+		</CounterRow>
+	);
+};
+
+export default CounterContainer;

apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterItem.tsx

@@ -0,0 +1,23 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+const CounterItem = ({
+	title = '',
+	count = '-',
+	...props
+}: {
+	title: ReactNode;
+	count: string | number;
+	flexShrink?: number;
+	paddingBlock?: number;
+	flexBasis?: string;
+}) => (
+	<Box display='flex' flexDirection='column' justifyContent='space-between' alignItems='center' flexGrow={1} {...props}>
+		<Box fontScale='h4' textTransform='uppercase' color='hint' textAlign='center' paddingInline={8}>
+			{title}
+		</Box>
+		<Box fontScale='h2'>{count}</Box>
+	</Box>
+);
+
+export default CounterItem;

apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterRow.tsx

@@ -0,0 +1,36 @@
+import { Box, Divider } from '@rocket.chat/fuselage';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Fragment } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
+export type CounterRowProps = {
+	children?: ReactNode[];
+} & ComponentPropsWithoutRef<typeof Box>;
+
+const CounterRow = ({ children, ...props }: CounterRowProps) => (
+	<Box
+		paddingBlock={28}
+		paddingInline={20}
+		display='flex'
+		flexDirection='row'
+		justifyContent='space-around'
+		alignItems='center'
+		flexGrow={1}
+		{...props}
+	>
+		{children &&
+			flattenChildren(children).reduce(
+				(acc: ReactNode[], child, i) =>
+					children.length - 1 !== i
+						? [
+								...acc,
+								<Fragment key={i}>{child}</Fragment>,
+								<Divider key={(i + 1) * children.length} width='x2' margin='none' alignSelf='stretch' />,
+							]
+						: [...acc, child],
+				[],
+			)}
+	</Box>
+);
+
+export default CounterRow;