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

apps/meteor/client/views/mediaCallHistory/CallHistoryPage.tsx

@@ -0,0 +1,233 @@
+import type { CallHistoryItem, Serialized } from '@rocket.chat/core-typings';
+import { Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useSort, usePagination, GenericTableLoadingRow } from '@rocket.chat/ui-client';
+import { useEndpoint, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { MediaCallHistoryTable, isCallHistoryUnknownContact, isCallHistoryInternalContact } from '@rocket.chat/ui-voip';
+import type { CallHistoryContact } from '@rocket.chat/ui-voip';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCallHistoryPageFilters } from './CallHistoryPageFilters';
+import CallHistoryPageLayout from './CallHistoryPageLayout';
+import CallHistoryRowExternalUser from './CallHistoryRowExternalUser';
+import CallHistoryRowInternalUser from './CallHistoryRowInternalUser';
+import CallHistoryRowUnknownUser from './CallHistoryRowUnknownUser';
+import MediaCallHistoryContextualbar from './MediaCallHistoryContextualbar';
+import { getExternalContact } from './MediaCallHistoryExternal';
+import GenericNoResults from '../../components/GenericNoResults';
+import UserInfoWithData from '../room/contextualBar/UserInfo/UserInfoWithData';
+
+const getSort = (sortBy: 'contact' | 'type' | 'status' | 'timestamp', sortDirection: 'asc' | 'desc') => {
+	const sortDirectionValue = sortDirection === 'asc' ? 1 : -1;
+	switch (sortBy) {
+		case 'type':
+			return { direction: sortDirectionValue, ts: -1 };
+		case 'status':
+			return { state: sortDirectionValue, ts: -1 };
+		case 'timestamp':
+			return { ts: sortDirectionValue };
+		case 'contact':
+			return { contactName: sortDirectionValue, contactUsername: sortDirectionValue, contactExtension: sortDirectionValue, ts: -1 };
+		default:
+			return { ts: -1 };
+	}
+};
+
+const getStateFilter = <T extends string[]>(states: T): T | [...T, 'error'] | undefined => {
+	if (states.length === 0) {
+		return undefined;
+	}
+	if (states.includes('failed')) {
+		return [...states, 'error'];
+	}
+	return states;
+};
+
+const getContact = (item: Serialized<CallHistoryItem>): CallHistoryContact => {
+	if (item.external) {
+		return getExternalContact(item);
+	}
+
+	if (!item.contactUsername || !item.contactName) {
+		return { unknown: true };
+	}
+
+	return { _id: item.contactId, username: item.contactUsername, name: item.contactName };
+};
+
+type DetailsTab = {
+	openTab: 'details';
+	rid: string;
+};
+
+type UserInfoTab = {
+	openTab: 'user-info';
+	rid: string;
+	userId: string;
+};
+
+type Tab = DetailsTab | UserInfoTab;
+
+const CallHistoryPage = () => {
+	const { t } = useTranslation();
+	const [tab, setTab] = useState<Tab | null>(null);
+	const sortProps = useSort<'contact' | 'type' | 'status' | 'timestamp'>('timestamp', 'desc');
+
+	const getCallHistory = useEndpoint('GET', '/v1/call-history.list');
+	const { setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+
+	const router = useRouter();
+	const historyId = useRouteParameter('historyId');
+
+	const filterProps = useCallHistoryPageFilters();
+
+	const { searchText, type, states } = filterProps;
+
+	const debouncedSearchText = useDebouncedValue(searchText, 400);
+
+	const onClickRow = useCallback(
+		(rid: string, _id: string) => {
+			router.navigate(`/call-history/details/${_id}`);
+			setTab({ openTab: 'details', rid });
+		},
+		[router],
+	);
+
+	const openUserInfo = useCallback(
+		(userId: string, rid: string) => {
+			setTab({ openTab: 'user-info', rid, userId });
+		},
+		[setTab],
+	);
+
+	const closeTab = useCallback(() => {
+		setTab(null);
+		router.navigate('/call-history');
+	}, [router]);
+
+	const handleBack = useCallback(() => {
+		if (historyId && tab?.rid) {
+			onClickRow(tab.rid, historyId);
+			return;
+		}
+		setTab(null);
+	}, [setTab, historyId, onClickRow, tab?.rid]);
+
+	const { data, isPending, error, refetch } = useQuery({
+		queryKey: [
+			'call-history',
+			'list',
+			sortProps.sortBy,
+			sortProps.sortDirection,
+			paginationProps.current,
+			paginationProps.itemsPerPage,
+			type,
+			states,
+			debouncedSearchText,
+		],
+		queryFn: () => {
+			const sort = getSort(sortProps.sortBy, sortProps.sortDirection);
+			const stateFilter = getStateFilter(states);
+
+			return getCallHistory({
+				count: paginationProps.itemsPerPage,
+				offset: paginationProps.current,
+				sort: JSON.stringify(sort),
+				...(type !== 'all' && { direction: type }),
+				...(stateFilter && { state: stateFilter }),
+				...(debouncedSearchText && { filter: debouncedSearchText }),
+			});
+		},
+	});
+
+	const tableData = useMemo(() => {
+		return data?.items.map((item) => {
+			return {
+				_id: item._id,
+				...('rid' in item && { rid: item.rid }),
+				contact: getContact(item),
+				...('messageId' in item && { messageId: item.messageId }),
+				type: item.direction,
+				status: item.state,
+				timestamp: item.ts,
+				duration: item.duration,
+			};
+		});
+	}, [data]);
+
+	const contextualBar = (() => {
+		if (tab?.openTab === 'user-info') {
+			return <UserInfoWithData rid={tab.rid} uid={tab.userId} onClose={closeTab} onClickBack={historyId ? handleBack : undefined} />;
+		}
+		if (tab?.openTab === 'details' && historyId) {
+			return <MediaCallHistoryContextualbar historyId={historyId} onClose={closeTab} messageRoomId={tab.rid} openUserInfo={openUserInfo} />;
+		}
+		return null;
+	})();
+
+	const pagination = (
+		<Pagination divider count={data?.total || 0} onSetItemsPerPage={setItemsPerPage} onSetCurrent={setCurrent} {...paginationProps} />
+	);
+
+	if (isPending) {
+		return (
+			<CallHistoryPageLayout filterProps={filterProps}>
+				<MediaCallHistoryTable sort={sortProps}>
+					<GenericTableLoadingRow cols={5} />
+					<GenericTableLoadingRow cols={5} />
+					<GenericTableLoadingRow cols={5} />
+					<GenericTableLoadingRow cols={5} />
+				</MediaCallHistoryTable>
+				{pagination}
+			</CallHistoryPageLayout>
+		);
+	}
+
+	if (error) {
+		return (
+			<CallHistoryPageLayout filterProps={filterProps}>
+				<GenericNoResults
+					icon='warning'
+					title={t('Something_went_wrong')}
+					description={t('Please_try_again')}
+					buttonTitle={t('Reload_page')}
+					buttonAction={() => refetch()}
+				/>
+			</CallHistoryPageLayout>
+		);
+	}
+
+	return (
+		<CallHistoryPageLayout filterProps={filterProps} contextualBar={contextualBar}>
+			{!tableData || (tableData.length === 0 && <GenericNoResults />)}
+			{tableData && tableData.length > 0 && (
+				<MediaCallHistoryTable sort={sortProps}>
+					{tableData.map((item) => {
+						if (isCallHistoryUnknownContact(item.contact)) {
+							return <CallHistoryRowUnknownUser key={item._id} {...item} contact={item.contact} onClick={() => onClickRow('', item._id)} />;
+						}
+						if (isCallHistoryInternalContact(item.contact)) {
+							return (
+								<CallHistoryRowInternalUser
+									key={item._id}
+									{...item}
+									contact={item.contact}
+									onClick={() => onClickRow(item.rid ?? '', item._id)}
+									rid={item.rid ?? ''}
+									onClickUserInfo={item.rid ? openUserInfo : undefined}
+								/>
+							);
+						}
+
+						return <CallHistoryRowExternalUser key={item._id} {...item} contact={item.contact} onClick={() => onClickRow('', item._id)} />;
+					})}
+				</MediaCallHistoryTable>
+			)}
+			{pagination}
+		</CallHistoryPageLayout>
+	);
+};
+
+export default CallHistoryPage;