refactor: Realtime Monitoring Counters to TS (#33166)

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

@@ -12,10 +12,10 @@ export const Default: ComponentStory<typeof CounterContainer> = (args) => <Count
 Default.storyName = 'CounterContainer';
 Default.args = {
 	initialData: [
-		{ title: 'total conversations', value: 10 },
-		{ title: 'open conversations', value: 10 },
-		{ title: 'total messages', value: 10 },
-		{ title: 'total visitors' },
+		{ title: 'Total_conversations', value: 10 },
+		{ title: 'Open_conversations', value: 10 },
+		{ title: 'Total_messages', value: 10 },
+		{ title: 'Total_visitors', value: 0 },
 	],
-	data: [],
+	data: { totalizers: [] },
 };

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

 import { Skeleton } from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useEffect, useState } from 'react';
 
@@ -6,10 +7,25 @@ import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
 import CounterItem from './CounterItem';
 import CounterRow from './CounterRow';
 
-const CounterContainer = ({ data, state, initialData, ...props }) => {
+type DataType = {
+	title: TranslationKey;
+	value: number;
+}[];
+
+type Totalizers = {
+	totalizers: DataType;
+};
+
+type CounterContainerProps = {
+	data: Totalizers;
+	state: AsyncStatePhase;
+	initialData: DataType;
+};
+
+const CounterContainer = ({ data, state, initialData, ...props }: CounterContainerProps) => {
 	const t = useTranslation();
 
-	const [displayData, setDisplayData] = useState(initialData);
+	const [displayData, setDisplayData] = useState<DataType>(initialData);
 
 	const { totalizers } = data || { totalizers: initialData };
 

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

 import { Box, Divider } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode } from 'react';
 import React, { Fragment } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 
-const CounterRow = ({ children, ...props }) => (
+type CounterRowProps = {
+	children: ReactNode[];
+} & ComponentProps<typeof Box>;
+
+const CounterRow = ({ children, ...props }: CounterRowProps) => (
 	<Box pb={28} pi={20} display='flex' flexDirection='row' justifyContent='space-around' alignItems='center' flexGrow={1} {...props}>
 		{children &&
-			flattenChildren(children).reduce((acc, child, i) => {
+			flattenChildren(children).reduce((acc: ReactNode[], child, i) => {
 				acc =
 					children.length - 1 !== i
 						? [