73 lines
3.4 KiB
TypeScript
73 lines
3.4 KiB
TypeScript
import type {DoctorTeamInfo, OutletContextType} from "~/utils/models.ts";
|
|
import {ActionIcon, Card, Group, Table, Text, Tooltip} from "@mantine/core";
|
|
import HistoryIcon from "mdi-react/HistoryIcon";
|
|
import {iconMStyle, marginRound} from "~/styles.ts";
|
|
import EyeIcon from "mdi-react/EyeIcon";
|
|
import {useOutletContext} from "react-router";
|
|
import {DashboardPageType} from "~/utils/hms_enums.ts";
|
|
import {confirmViewTeamMembers} from "~/components/subs/confirms.tsx";
|
|
import {ResponsiveTableContainer} from "~/components/subs/ResponsiveTableContainer.tsx";
|
|
|
|
|
|
export default function({doctorTeams}: {doctorTeams: DoctorTeamInfo[]}) {
|
|
const { changePage } = useOutletContext<OutletContextType>();
|
|
|
|
const handleViewTeamMembers = (team: DoctorTeamInfo) => {
|
|
confirmViewTeamMembers(team)
|
|
}
|
|
|
|
const teamRows = doctorTeams.map((team) => (
|
|
<Table.Tr key={team.id}>
|
|
<Table.Td>{team.id}</Table.Td>
|
|
<Table.Td>{team.department.replace(/_/g, ' ')}</Table.Td>
|
|
<Table.Td>
|
|
{team.members.find(m => m.id === team.consultant_id)
|
|
? `${team.members.find(m => m.id === team.consultant_id)?.title || ''} ${team.members.find(m => m.id === team.consultant_id)?.name || ''}`
|
|
: `ID: ${team.consultant_id}`}
|
|
</Table.Td>
|
|
<Table.Td>{team.members.length}</Table.Td>
|
|
<Table.Td>{team.is_admin_team ? 'Yes' : 'No'}</Table.Td>
|
|
<Table.Td>
|
|
<Group>
|
|
<Tooltip label="Treatment Record" withArrow>
|
|
<ActionIcon onClick={() => changePage(DashboardPageType.TreatmentRecord, `/dashboard/treatment_record/t${team.id}`)}>
|
|
<HistoryIcon style={iconMStyle}/>
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
<ActionIcon onClick={() => handleViewTeamMembers(team)}>
|
|
<EyeIcon style={iconMStyle}/>
|
|
</ActionIcon>
|
|
</Group>
|
|
</Table.Td>
|
|
</Table.Tr>
|
|
));
|
|
|
|
return(
|
|
<Card padding="lg" radius="md" withBorder>
|
|
<Text size="lg" fw={700} mb="md">My Medical Teams</Text>
|
|
<Card.Section withBorder>
|
|
<Group style={marginRound}>
|
|
{doctorTeams.length > 0 ? (
|
|
<ResponsiveTableContainer minWidth={600}>
|
|
<Table striped highlightOnHover withColumnBorders withTableBorder>
|
|
<Table.Thead>
|
|
<Table.Tr>
|
|
<Table.Th>Team ID</Table.Th>
|
|
<Table.Th>Department</Table.Th>
|
|
<Table.Th>Consultant</Table.Th>
|
|
<Table.Th>Members Count</Table.Th>
|
|
<Table.Th>Admin Team</Table.Th>
|
|
<Table.Th>Operations</Table.Th>
|
|
</Table.Tr>
|
|
</Table.Thead>
|
|
<Table.Tbody>{teamRows}</Table.Tbody>
|
|
</Table>
|
|
</ResponsiveTableContainer>
|
|
) : (
|
|
<Text c="dimmed">You are not a member of any medical team.</Text>
|
|
)}
|
|
</Group>
|
|
</Card.Section>
|
|
</Card>
|
|
)
|
|
} |