- Added OTP login functionality in driver.mjs to handle user authentication with a fixed code in dev environment. - Enhanced RoleRoute component in App.tsx to support clinic-scoped doctor roles and permissions. - Updated ClinicDoctorsManager component to include pagination and search functionality for better user experience. - Refactored tests for ClinicDoctorsManager to cover new features and ensure proper API mocking. - Adjusted permissions in settingsMenu.ts and PracticeDomainSettingsPage.tsx to align with updated backend requirements. - Created RoleRoute.test.tsx to validate role-based access logic for different user scenarios.
471 lines
21 KiB
TypeScript
471 lines
21 KiB
TypeScript
import { useState, useMemo, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
TrashIcon, EnvelopeIcon, ArrowPathIcon, NoSymbolIcon, EyeIcon, ShieldCheckIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { toast } from 'sonner';
|
|
import { api } from '../lib/api';
|
|
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
|
import { formatNumber } from '../lib/utils';
|
|
import ConfirmDialog from './ui/ConfirmDialog';
|
|
import InviteDoctorModal from './ui/InviteDoctorModal';
|
|
import DoctorPermissionsModal from './ui/DoctorPermissionsModal';
|
|
import DataTable, { type Column } from './ui/DataTable';
|
|
import Pagination from './ui/Pagination';
|
|
|
|
const HUES_LIST = [256, 205, 162, 295, 272];
|
|
const PAGE_SIZE = 10;
|
|
|
|
export interface ClinicDoctorItem {
|
|
id: string; uuid: string; name: string;
|
|
gender: string | null; degree: string | null;
|
|
img: { url: string }[];
|
|
specialties: { id: string; name: string }[];
|
|
active: boolean;
|
|
}
|
|
|
|
export interface ClinicInvitation {
|
|
uuid: string;
|
|
mobile: string;
|
|
invited_name: string | null;
|
|
invited_specialty: string | null;
|
|
status: 'pending' | 'accepted' | 'rejected' | 'suspended' | 'removed';
|
|
token_used: boolean;
|
|
invited_at: number;
|
|
expires_at: number;
|
|
responded_at: number | null;
|
|
doctor: { uuid: string; name: string } | null;
|
|
}
|
|
|
|
/** یک ردیف از `GET /api/v1/admin/clinic/{uuid}/doctor-permissions`. */
|
|
interface DoctorPermissionRow {
|
|
doctor_uuid: string;
|
|
active: boolean;
|
|
permissions: { resources: Record<string, Record<string, boolean>> };
|
|
}
|
|
|
|
/** چند اکشن از کل اکشنهای تعریفشده به این پزشک داده شده. */
|
|
function grantedCount(row?: DoctorPermissionRow): { granted: number; total: number } {
|
|
const resources = row?.permissions?.resources ?? {};
|
|
let granted = 0;
|
|
let total = 0;
|
|
|
|
for (const actions of Object.values(resources)) {
|
|
for (const allowed of Object.values(actions)) {
|
|
total += 1;
|
|
if (allowed) granted += 1;
|
|
}
|
|
}
|
|
|
|
return { granted, total };
|
|
}
|
|
|
|
const INV_STATUS_MAP: Record<string, { label: string; cls: string }> = {
|
|
pending: { label: 'در انتظار', cls: 'amber' },
|
|
accepted: { label: 'پذیرفتهشده', cls: 'green' },
|
|
rejected: { label: 'رد شده', cls: 'gray' },
|
|
suspended: { label: 'تعلیق', cls: 'violet' },
|
|
removed: { label: 'حذفشده', cls: 'gray' },
|
|
};
|
|
|
|
/**
|
|
* ClinicDoctorsManager — self-contained management of a clinic's doctors and
|
|
* pending invitations (list, invite, resend, suspend, delete invitation, detach
|
|
* doctor). Reused by both the admin ClinicDetailPage and the clinic-owner
|
|
* settings tab (ClinicDoctorsPage). `readOnly` hides every mutating control.
|
|
* `canCreate`/`canUpdate`/`canDelete` allow a caller (e.g. a secretary-scoped
|
|
* page) to gate each action group; they default to `true` so unrestricted
|
|
* callers (owner/admin) are unaffected.
|
|
*/
|
|
export default function ClinicDoctorsManager({
|
|
clinicUuid,
|
|
readOnly = false,
|
|
canCreate = true,
|
|
canUpdate = true,
|
|
canDelete = true,
|
|
}: {
|
|
clinicUuid: string;
|
|
readOnly?: boolean;
|
|
canCreate?: boolean;
|
|
canUpdate?: boolean;
|
|
canDelete?: boolean;
|
|
}) {
|
|
const navigate = useNavigate();
|
|
const qc = useQueryClient();
|
|
|
|
const [doctorsTab, setDoctorsTab] = useState<'doctors' | 'invitations'>('doctors');
|
|
const [inviteOpen, setInviteOpen] = useState(false);
|
|
const [detachDoctorConfirm, setDetachDoctorConfirm] = useState<ClinicDoctorItem | null>(null);
|
|
const [permissionsFor, setPermissionsFor] = useState<ClinicDoctorItem | null>(null);
|
|
const [page, setPage] = useState(1);
|
|
const [search, setSearch] = useState('');
|
|
const [debouncedSearch, setDebouncedSearch] = useState('');
|
|
|
|
// فیلدِ جستجو محلی میماند و فقط مقدارِ آرامشده به کوئری میرود؛ وگرنه هر حرف یک
|
|
// درخواست به سرور میزند.
|
|
useEffect(() => {
|
|
const t = setTimeout(() => { setDebouncedSearch(search); setPage(1); }, 350);
|
|
return () => clearTimeout(t);
|
|
}, [search]);
|
|
|
|
/**
|
|
* صفحه و جستجو به سرور میروند.
|
|
*
|
|
* پیش از این هیچکدام فرستاده نمیشد و backend سقف پیشفرضِ ۱۰ را اعمال میکرد
|
|
* (`DoctorRepository::findByClinicWithFilters`)، پس کلینیکِ یازدهپزشکه بیهیچ نشانهای
|
|
* یک پزشک را گم میکرد.
|
|
*/
|
|
const doctorsQ = useQuery({
|
|
queryKey: ['clinic-doctors', clinicUuid, page, debouncedSearch],
|
|
queryFn: () => api.get<PaginatedResponse<ClinicDoctorItem>>(
|
|
`/api/v1/clinic/doctor-list/${clinicUuid}?page=${page}&limit=${PAGE_SIZE}`
|
|
+ (debouncedSearch ? `&name=${encodeURIComponent(debouncedSearch)}` : ''),
|
|
),
|
|
enabled: !!clinicUuid,
|
|
});
|
|
|
|
const invitationsQ = useQuery({
|
|
queryKey: ['clinic-invitations', clinicUuid],
|
|
queryFn: () => api.get<PaginatedResponse<ClinicInvitation>>(`/api/v1/admin/clinic/${clinicUuid}/invitations?limit=50`),
|
|
enabled: !!clinicUuid,
|
|
});
|
|
|
|
/**
|
|
* مجوزهای همهٔ پزشکان کلینیک با **یک** درخواست.
|
|
*
|
|
* اندپوینت تکپزشکی از قبل بود ولی برای فهرست یعنی N درخواست؛ نسخهٔ گروهی هم از قبل
|
|
* وجود داشت و فقط مصرف نمیشد.
|
|
*/
|
|
const permissionsQ = useQuery({
|
|
queryKey: ['clinic-doctor-permissions', clinicUuid],
|
|
queryFn: () => api.get<ApiResponse<DoctorPermissionRow[]>>(`/api/v1/admin/clinic/${clinicUuid}/doctor-permissions`),
|
|
enabled: !!clinicUuid && canUpdate,
|
|
});
|
|
|
|
const doctorList: ClinicDoctorItem[] = useMemo(() => {
|
|
const raw = doctorsQ.data?.data;
|
|
return (raw as any)?.data ?? raw ?? [];
|
|
}, [doctorsQ.data]);
|
|
|
|
const doctorTotal = doctorsQ.data?.meta?.totalRecords ?? doctorList.length;
|
|
|
|
const permissionByDoctor = useMemo(() => {
|
|
const rows = permissionsQ.data?.data ?? [];
|
|
return new Map((Array.isArray(rows) ? rows : []).map(r => [r.doctor_uuid, r]));
|
|
}, [permissionsQ.data]);
|
|
|
|
const invitationList: ClinicInvitation[] = invitationsQ.data?.data ?? [];
|
|
|
|
const resendInvMut = useMutation({
|
|
mutationFn: (invUuid: string) => api.post<ApiResponse<any>>(`/api/v1/admin/clinic/invitation/${invUuid}/resend`, {}),
|
|
onSuccess: () => { toast.success('پیامک مجدداً ارسال شد'); qc.invalidateQueries({ queryKey: ['clinic-invitations', clinicUuid] }); },
|
|
onError: (e: Error) => toast.error(e.message),
|
|
});
|
|
|
|
const changeInvStatusMut = useMutation({
|
|
mutationFn: ({ invUuid, status }: { invUuid: string; status: string }) =>
|
|
api.patch<ApiResponse<any>>(`/api/v1/admin/clinic/invitation/${invUuid}/status`, { status }),
|
|
onSuccess: (_d, v) => {
|
|
toast.success(v.status === 'pending' ? 'دعوتنامه فعال و پیامک مجدداً ارسال شد' : 'دعوتنامه تعلیق شد');
|
|
qc.invalidateQueries({ queryKey: ['clinic-invitations', clinicUuid] });
|
|
},
|
|
onError: (e: Error) => toast.error(e.message),
|
|
});
|
|
|
|
const deleteInvMut = useMutation({
|
|
mutationFn: (invUuid: string) => api.delete<ApiResponse<null>>(`/api/v1/admin/clinic/invitation/${invUuid}`),
|
|
onSuccess: () => { toast.success('دعوتنامه حذف شد'); qc.invalidateQueries({ queryKey: ['clinic-invitations', clinicUuid] }); },
|
|
onError: (e: Error) => toast.error(e.message),
|
|
});
|
|
|
|
/**
|
|
* ستونها دو «فعال بودن» را از هم جدا میکنند، چون دو چیز متفاوتاند و پیش از این
|
|
* یکی جای هر دو مینشست:
|
|
*
|
|
* • «دسترسی در کلینیک» → `ClinicDoctorPermission::active` — کلیدِ خودِ مالک کلینیک،
|
|
* و خاموشبودنش یعنی `can()` همهچیز را رد میکند.
|
|
* • «نوبتدهی آنلاین» → `Doctor::$activeDoctorAppointment && has_schedule` — حالِ
|
|
* پروفایلِ خودِ پزشک و ربطی به عضویتش ندارد.
|
|
*
|
|
* بجِ قبلی دومی را نشان میداد با متنِ «فعال/غیرفعال»، پس پزشکِ سالمِ بدون برنامهٔ
|
|
* هفتگی «غیرفعال» خوانده میشد و مالک ممکن بود بیدلیل جدایش کند.
|
|
*/
|
|
const doctorColumns: Column<ClinicDoctorItem>[] = useMemo(() => [
|
|
{
|
|
key: 'name',
|
|
header: 'پزشک',
|
|
render: (doc) => {
|
|
const dHue = HUES_LIST[(doc.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
|
|
const img = doc.img?.[0]?.url;
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
|
{img
|
|
? <img src={img} alt="" className="avatar sm" style={{ objectFit: 'cover', flexShrink: 0 }} />
|
|
: <div className="avatar sm" style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${dHue}), oklch(0.48 0.16 ${dHue}))`, flexShrink: 0 }}>{doc.name?.[0] ?? '?'}</div>
|
|
}
|
|
<div style={{ minWidth: 0 }}>
|
|
<div style={{ fontWeight: 600 }}>{doc.name}</div>
|
|
{doc.specialties?.length > 0 && (
|
|
<div className="muted" style={{ fontSize: 11 }}>{doc.specialties.map(s => s.name).join('، ')}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
// بج و شمارِ مجوز یک ستوناند نه دو: هر دو یک سؤال را جواب میدهند («این پزشک
|
|
// چقدر دسترسی دارد؟») و ستونِ کمتر یعنی جدولی که در موبایل هم جا میشود.
|
|
key: 'clinic_access',
|
|
header: 'دسترسی در کلینیک',
|
|
render: (doc) => {
|
|
// ردیفِ نبوده یعنی هنوز چیزی تنظیم نشده و پیشفرضها برقرارند.
|
|
const row = permissionByDoctor.get(doc.uuid);
|
|
const on = row?.active ?? true;
|
|
const { granted, total } = grantedCount(row);
|
|
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3 }}>
|
|
<span className={`badge ${on ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
|
|
<span className="bdot" />{on ? 'فعال' : 'غیرفعال'}
|
|
</span>
|
|
<span className="muted" style={{ fontSize: 11 }}>
|
|
{row ? `${formatNumber(granted)} از ${formatNumber(total)} مجوز` : 'پیشفرض'}
|
|
</span>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: 'online_booking',
|
|
header: 'نوبتدهی آنلاین',
|
|
render: (doc) => (
|
|
<span className={`badge ${doc.active ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
|
|
<span className="bdot" />{doc.active ? 'فعال' : 'غیرفعال'}
|
|
</span>
|
|
),
|
|
},
|
|
], [permissionByDoctor]);
|
|
|
|
const detachDoctorMut = useMutation({
|
|
mutationFn: (doctorUuid: string) =>
|
|
api.delete<ApiResponse<{ message: string }>>(`/api/v1/admin/clinic/${clinicUuid}/doctor/${doctorUuid}`),
|
|
onSuccess: () => {
|
|
toast.success('پزشک از کلینیک جدا شد');
|
|
qc.invalidateQueries({ queryKey: ['clinic-doctors', clinicUuid] });
|
|
qc.invalidateQueries({ queryKey: ['clinic-detail', clinicUuid] });
|
|
},
|
|
onError: (e: Error) => toast.error(e.message),
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="card card-pad">
|
|
{/* Card header */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
|
<div className="seg">
|
|
{/* شمارنده از meta میآید نه از طول آرایه؛ طول آرایه فقط صفحهٔ جاری است. */}
|
|
<button className={doctorsTab === 'doctors' ? 'active' : ''} onClick={() => setDoctorsTab('doctors')}>
|
|
پزشکان ({formatNumber(doctorTotal)})
|
|
</button>
|
|
<button className={doctorsTab === 'invitations' ? 'active' : ''} onClick={() => setDoctorsTab('invitations')}>
|
|
دعوتنامهها ({formatNumber(invitationList.length)})
|
|
</button>
|
|
</div>
|
|
{!readOnly && canCreate && (
|
|
<button className="btn primary sm" onClick={() => setInviteOpen(true)}>
|
|
<EnvelopeIcon style={{ width: 14, height: 14 }} /> دعوت پزشک
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Doctors tab */}
|
|
{doctorsTab === 'doctors' && (
|
|
doctorsQ.isError ? (
|
|
<div className="empty" style={{ padding: '20px 0' }}>
|
|
<p className="muted">فهرست پزشکان بارگذاری نشد</p>
|
|
<button className="btn secondary sm" onClick={() => doctorsQ.refetch()}>تلاش دوباره</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<DataTable<ClinicDoctorItem>
|
|
columns={doctorColumns}
|
|
data={doctorList}
|
|
loading={doctorsQ.isLoading}
|
|
searchValue={search}
|
|
onSearchChange={setSearch}
|
|
searchPlaceholder="جستجوی نام پزشک"
|
|
emptyMessage={debouncedSearch ? 'پزشکی با این نام پیدا نشد' : 'هیچ پزشکی به این کلینیک متصل نیست'}
|
|
actions={doc => (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<button
|
|
className="mini-btn"
|
|
title="مشاهده پروفایل"
|
|
aria-label={`مشاهده پروفایل ${doc.name}`}
|
|
onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}
|
|
>
|
|
<EyeIcon style={{ width: 14, height: 14 }} />
|
|
</button>
|
|
{!readOnly && canUpdate && (
|
|
<button
|
|
className="mini-btn"
|
|
title="مدیریت دسترسیها"
|
|
aria-label={`مدیریت دسترسیهای ${doc.name}`}
|
|
onClick={() => setPermissionsFor(doc)}
|
|
>
|
|
<ShieldCheckIcon style={{ width: 14, height: 14 }} />
|
|
</button>
|
|
)}
|
|
{!readOnly && canDelete && (
|
|
<button
|
|
className="mini-btn danger"
|
|
title="جداسازی از کلینیک"
|
|
aria-label={`جداسازی ${doc.name} از کلینیک`}
|
|
onClick={() => setDetachDoctorConfirm(doc)}
|
|
>
|
|
<TrashIcon style={{ width: 14, height: 14 }} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
/>
|
|
<Pagination
|
|
page={page}
|
|
total={doctorTotal}
|
|
limit={PAGE_SIZE}
|
|
onPageChange={setPage}
|
|
/>
|
|
</>
|
|
)
|
|
)}
|
|
|
|
{/* Invitations tab */}
|
|
{doctorsTab === 'invitations' && (
|
|
invitationsQ.isLoading ? (
|
|
<div className="empty" style={{ padding: '20px 0' }}>
|
|
<p className="muted">در حال بارگذاری…</p>
|
|
</div>
|
|
) : invitationsQ.isError ? (
|
|
<div className="empty" style={{ padding: '20px 0' }}>
|
|
<p className="muted">فهرست دعوتنامهها بارگذاری نشد</p>
|
|
<button className="btn secondary sm" onClick={() => invitationsQ.refetch()}>تلاش دوباره</button>
|
|
</div>
|
|
) : invitationList.length === 0 ? (
|
|
<div className="empty" style={{ padding: '20px 0' }}>
|
|
<EnvelopeIcon style={{ width: 30, height: 30 }} />
|
|
<p className="muted">هیچ دعوتنامهای ارسال نشده</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
{invitationList.map(inv => {
|
|
const statusInfo = INV_STATUS_MAP[inv.status] ?? { label: inv.status, cls: 'gray' };
|
|
const isExpired = !inv.token_used && inv.status === 'pending' && Date.now() / 1000 > inv.expires_at;
|
|
return (
|
|
<div key={inv.uuid} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 8, background: 'var(--surface-2, var(--bg))' }}>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontWeight: 600, fontSize: 13 }}>{inv.invited_name ?? inv.mobile}</div>
|
|
<div style={{ display: 'flex', gap: 6, marginTop: 3, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<span className="muted" style={{ fontSize: 11, direction: 'ltr' }}>{inv.mobile}</span>
|
|
{inv.invited_specialty && (
|
|
<span className="muted" style={{ fontSize: 11 }}>{inv.invited_specialty}</span>
|
|
)}
|
|
{inv.doctor && (
|
|
<button
|
|
className="badge blue"
|
|
style={{ fontSize: 11, cursor: 'pointer', border: 'none', background: 'none', padding: 0 }}
|
|
onClick={() => navigate(`/admin/doctors/${inv.doctor!.uuid}`)}
|
|
>
|
|
<span className="bdot" />{inv.doctor.name}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
|
|
<span className={`badge ${isExpired ? 'gray' : statusInfo.cls}`} style={{ fontSize: 11 }}>
|
|
<span className="bdot" />{isExpired ? 'منقضی' : statusInfo.label}
|
|
</span>
|
|
{!readOnly && (canUpdate || canDelete) && (
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
{canUpdate && inv.status === 'pending' && (
|
|
<button
|
|
className="mini-btn"
|
|
title="ارسال مجدد"
|
|
disabled={resendInvMut.isPending}
|
|
onClick={() => resendInvMut.mutate(inv.uuid)}
|
|
>
|
|
<ArrowPathIcon style={{ width: 13, height: 13 }} />
|
|
</button>
|
|
)}
|
|
{canUpdate && inv.status !== 'removed' && inv.status !== 'accepted' && (
|
|
<button
|
|
className="mini-btn"
|
|
title={inv.status === 'suspended' ? 'فعالسازی و ارسال مجدد پیامک' : 'تعلیق'}
|
|
disabled={changeInvStatusMut.isPending}
|
|
onClick={() => changeInvStatusMut.mutate({ invUuid: inv.uuid, status: inv.status === 'suspended' ? 'pending' : 'suspended' })}
|
|
>
|
|
<NoSymbolIcon style={{ width: 13, height: 13 }} />
|
|
</button>
|
|
)}
|
|
{canDelete && (
|
|
<button
|
|
className="mini-btn danger"
|
|
title="حذف"
|
|
disabled={deleteInvMut.isPending}
|
|
onClick={() => deleteInvMut.mutate(inv.uuid)}
|
|
>
|
|
<TrashIcon style={{ width: 13, height: 13 }} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
|
|
{/* Detach Doctor From Clinic Confirm */}
|
|
<ConfirmDialog
|
|
open={detachDoctorConfirm !== null}
|
|
title="جداسازی پزشک از کلینیک"
|
|
message={`آیا پزشک "${detachDoctorConfirm?.name ?? ''}" از این کلینیک جدا شود؟ این کار فقط ارتباط پزشک با این کلینیک را حذف میکند.`}
|
|
confirmLabel="جداسازی"
|
|
danger
|
|
loading={detachDoctorMut.isPending}
|
|
onConfirm={() => {
|
|
if (detachDoctorConfirm) detachDoctorMut.mutate(detachDoctorConfirm.uuid);
|
|
setDetachDoctorConfirm(null);
|
|
}}
|
|
onCancel={() => setDetachDoctorConfirm(null)}
|
|
/>
|
|
|
|
{/* Per-doctor clinic permissions */}
|
|
{permissionsFor && (
|
|
<DoctorPermissionsModal
|
|
clinicUuid={clinicUuid}
|
|
doctorUuid={permissionsFor.uuid}
|
|
doctorName={permissionsFor.name}
|
|
onClose={() => {
|
|
setPermissionsFor(null);
|
|
// ستون «دسترسی در کلینیک» و «مجوزها» باید تغییرِ همین مودال را نشان دهند.
|
|
qc.invalidateQueries({ queryKey: ['clinic-doctor-permissions', clinicUuid] });
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Invite doctor modal */}
|
|
{inviteOpen && clinicUuid && (
|
|
<InviteDoctorModal
|
|
clinicUuid={clinicUuid}
|
|
onClose={() => setInviteOpen(false)}
|
|
onInvited={() => { qc.invalidateQueries({ queryKey: ['clinic-invitations', clinicUuid] }); setDoctorsTab('invitations'); }}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|