// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
// SPDX-License-Identifier: Apache-2.0
import { Paper, ScrollArea, Tabs } from '@mantine/core';
import { Document, InfoBar, useMedplum } from '@medplum/react';
import type { JSX } from 'react';
import { useMemo } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router';
import { getProjectId } from '../utils';
const tabs = ['Details', 'Users', 'Patients', 'Clients', 'Bots', 'Secrets', 'Sites'];
export function ProjectPage(): JSX.Element {
const navigate = useNavigate();
const location = useLocation();
const currentTab = location.pathname.replace('/admin/', '') || tabs[0];
const medplum = useMedplum();
const projectId = getProjectId(medplum);
const result = useMemo(() => medplum.get('admin/projects/' + projectId).read(), [medplum, projectId]);
/**
* Handles a tab change event.
* @param newTabName - The new tab name.
*/
function onTabChange(newTabName: string | null): void {
navigate(`/admin/${newTabName}`)?.catch(console.error);
}
return (
<>
<Paper>
<InfoBar>
<InfoBar.Entry>
<InfoBar.Key>Project</InfoBar.Key>
<InfoBar.Value>{result.project.name}</InfoBar.Value>
</InfoBar.Entry>
</InfoBar>
<ScrollArea>
<Tabs value={currentTab.toLowerCase()} onChange={onTabChange}>
<Tabs.List style={{ whiteSpace: 'nowrap', flexWrap: 'nowrap' }}>
{tabs.map((t) => (
<Tabs.Tab key={t} value={t.toLowerCase()}>
{t}
</Tabs.Tab>
))}
</Tabs.List>
</Tabs>
</ScrollArea>
</Paper>
<Document>
<Outlet />
</Document>
</>
);
}
