feat: ✨ Fetch and show analytics reports object

Fetched the /v1/statistics endpoint and showed its result object in a new component called AnalyticsReports

apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx

@@ -0,0 +1,16 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { useAnalyticsObject } from './hooks/useAnalyticsObject';
+
+const AnalyticsReports = () => {
+	const analytics = useAnalyticsObject();
+
+	return (
+		<Box display='flex' flexDirection='column' padding={8} flexGrow={1} color='default' bg='neutral' borderRadius='x4' overflow='scroll'>
+			<pre>{JSON.stringify(analytics, null, '\t')}</pre>
+		</Box>
+	);
+};
+
+export default AnalyticsReports;

apps/meteor/client/views/admin/viewLogs/ViewLogsPage.tsx

@@ -4,6 +4,7 @@ import type { ReactElement } from 'react';
 import React, { useState } from 'react';
 
 import Page from '../../../components/Page';
+import AnalyticsReports from './AnalyticsReports';
 import ServerLogs from './ServerLogs';
 
 const ViewLogsPage = (): ReactElement => {
@@ -23,7 +24,7 @@ const ViewLogsPage = (): ReactElement => {
 						{t('Analytic_reports')}
 					</Tabs.Item>
 				</Tabs>
-				<ServerLogs />
+				{tab === 'Logs' ? <ServerLogs /> : <AnalyticsReports />}
 			</Page.Content>
 		</Page>
 	);

apps/meteor/client/views/admin/viewLogs/hooks/useAnalyticsObject.ts

@@ -0,0 +1,8 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+export const useAnalyticsObject = () => {
+	const getAnalytics = useEndpoint('GET', '/v1/statistics');
+
+	return useQuery(['analytics'], () => getAnalytics({}));
+};