upstream-rocketchat/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx

import type { SelectOption } from '@rocket.chat/fuselage';
import { Box, Select, Margins, Field, FieldLabel, FieldRow, Label, Option } from '@rocket.chat/fuselage';
import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
import { useMemo, useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';

import AgentOverview from './AgentOverview';
import DateRangePicker from './DateRangePicker';
import InterchangeableChart from './InterchangeableChart';
import Overview from './Overview';
import AutoCompleteDepartment from '../components/AutoCompleteDepartment';

const useOptions = (type: string): SelectOption[] => {
	const { t } = useTranslation();
	return useMemo(() => {
		if (type === 'Conversations') {
			return [
				['Total_conversations', t('Total_conversations')],
				['Avg_chat_duration', t('Avg_chat_duration')],
				['Total_messages', t('Total_messages')],
			];
		}
		return [
			['Avg_first_response_time', t('Avg_first_response_time')],
			['Best_first_response_time', t('Best_first_response_time')],
			['Avg_response_time', t('Avg_response_time')],
			['Avg_reaction_time', t('Avg_reaction_time')],
		];
	}, [t, type]);
};

const AnalyticsPage = () => {
	const { t } = useTranslation();
	const [type, setType] = useState('Conversations');
	const [department, setDepartment] = useState<string | null>(null);
	const [dateRange, setDateRange] = useState({ start: '', end: '' });
	const [chartName, setChartName] = useState<string | undefined>();

	const typeOptions: SelectOption[] = useMemo(
		() => [
			['Conversations', t('Conversations')],
			['Productivity', t('Productivity')],
		],
		[t],
	);

	const graphOptions: SelectOption[] = useOptions(type);

	useEffect(() => {
		setChartName(graphOptions[0][0]);
	}, [graphOptions]);

	return (
		<Page>
			<PageHeader title={t('Analytics')} />
			<PageScrollableContentWithShadow display='flex' flexDirection='column'>
				<Margins block={4}>
					<Box display='flex' marginInline='neg-x4' flexWrap='wrap' flexGrow={1}>
						<Box display='flex' flexWrap='wrap' flexGrow={1}>
							<Box display='flex' marginInline={4} flexDirection='column' flexGrow={1}>
								<Label marginBlock={4}>{t('Type')}</Label>
								<Select options={typeOptions} value={type} onChange={(value) => setType(String(value))} />
							</Box>
							<Box display='flex' marginInline={4} flexDirection='column' flexGrow={1}>
								<Label marginBlock={4}>{t('Departments')}</Label>
								<AutoCompleteDepartment
									value={department || undefined}
									onChange={setDepartment}
									onlyMyDepartments
									withTitle={false}
									renderItem={({ label, ...props }) => <Option {...props} label={<span style={{ whiteSpace: 'normal' }}>{label}</span>} />}
								/>
							</Box>
						</Box>
						<DateRangePicker flexGrow={1} marginInline={4} onChange={setDateRange} />
					</Box>
					<Box>
						<Overview type={type} dateRange={dateRange} departmentId={department || ''} />
					</Box>
					<Box display='flex'>
						<Margins inline={2}>
							<Field>
								<FieldLabel>{t('Chart')}</FieldLabel>
								<FieldRow>
									<Select options={graphOptions} value={chartName} onChange={(value) => setChartName(String(value))} />
								</FieldRow>
							</Field>
						</Margins>
					</Box>
					<Box display='flex' flexGrow={1} flexShrink={1}>
						<InterchangeableChart
							flexShrink={1}
							width='66%'
							height='100%'
							chartName={chartName || ''}
							departmentId={department || ''}
							dateRange={dateRange}
							alignSelf='stretch'
						/>
						<Box display='flex' width='33%' justifyContent='stretch' padding={10} marginInlineStart={4}>
							<AgentOverview type={chartName || ''} dateRange={dateRange} departmentId={department || ''} />
						</Box>
					</Box>
				</Margins>
			</PageScrollableContentWithShadow>
		</Page>
	);
};

export default AnalyticsPage;