upstream-rocketchat/apps/meteor/client/views/omnichannel/departments/DepartmentsPage.tsx

import { Tabs, TabsItem, Button } from '@rocket.chat/fuselage';
import { useStableCallback } from '@rocket.chat/fuselage-hooks';
import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
import { useRoute, useTranslation, useRouteParameter } from '@rocket.chat/ui-contexts';

import DepartmentsTable from './DepartmentsTable';
import EditDepartmentWithData from './EditDepartmentWithData';
import NewDepartment from './NewDepartment';

const DepartmentsPage = () => {
	const t = useTranslation();
	const departmentsRoute = useRoute('omnichannel-departments');

	const context = useRouteParameter('context');
	const id = useRouteParameter('id');

	const handleTabClick = useStableCallback((tab: undefined | 'archived') =>
		departmentsRoute.push(
			tab
				? {
						context: tab,
					}
				: {},
		),
	);

	const onAddNew = useStableCallback(() =>
		departmentsRoute.push({
			context: 'new',
		}),
	);

	if (context === 'new') {
		return <NewDepartment id={id} />;
	}

	if (context === 'edit') {
		return <EditDepartmentWithData id={id} title={t('Edit_Department')} />;
	}

	return (
		<Page flexDirection='row'>
			<Page>
				<PageHeader title={t('Departments')}>
					<Button onClick={onAddNew}>{t('Create_department')}</Button>
				</PageHeader>
				<Tabs>
					<TabsItem key='departments' selected={!context} onClick={() => handleTabClick(undefined)}>
						{t('All')}
					</TabsItem>
					<TabsItem key='archived' selected={context === 'archived'} onClick={() => handleTabClick('archived')}>
						{t('Archived')}
					</TabsItem>
				</Tabs>
				<PageContent>
					<DepartmentsTable archived={context === 'archived'} />
				</PageContent>
			</Page>
		</Page>
	);
};

export default DepartmentsPage;