improvement: lab/clinic commiunication flow completely overhauled. no more shit.
This commit is contained in:
@@ -1,379 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { getUserFacingError } from '@/components/shared/formatApiError';
|
||||
import { canEditCases } from '@/components/shared/permissions';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { useToast } from '@/lib/hooks/useToast';
|
||||
import { organizationApi } from '@/lib/api/organization';
|
||||
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
|
||||
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
|
||||
import { SearchBar } from '@/components/ui/shared/SearchBar';
|
||||
import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
|
||||
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
|
||||
import {
|
||||
formatCaseDateTime,
|
||||
formatPatientName,
|
||||
} from '@/components/lab/caseDetailUtils';
|
||||
import { treatmentsApi } from '@/lib/api/treatments';
|
||||
import { casesApi } from '@/lib/api/cases';
|
||||
import type { CounterpartItemDto } from '@/lib/api/organization';
|
||||
import type { LabCaseDetail, LabCaseListItem, LabTaskStatus } from '@/types/cases';
|
||||
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
interface ConnectionCaseHistoryContentProps {
|
||||
connection: CounterpartItemDto;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export function ConnectionCaseHistoryContent({
|
||||
connection,
|
||||
onBack,
|
||||
}: ConnectionCaseHistoryContentProps) {
|
||||
const t = useTranslations('organizations');
|
||||
const tErrors = useTranslations('errors');
|
||||
const tCases = useTranslations('cases');
|
||||
const tCommon = useTranslations('common');
|
||||
const { currentOrganization, user } = useAuth();
|
||||
const { showError, setError, messages: toastMessages } = useToast();
|
||||
|
||||
const [search, setSearch] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const [cases, setCases] = useState<LabCaseListItem[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
page: 1,
|
||||
limit: PAGE_SIZE,
|
||||
total: 0,
|
||||
totalPages: 1,
|
||||
});
|
||||
const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
|
||||
const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
|
||||
const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
|
||||
const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
|
||||
const [loadingList, setLoadingList] = useState(false);
|
||||
const [loadingDetail, setLoadingDetail] = useState(false);
|
||||
const [updatingImportant, setUpdatingImportant] = useState(false);
|
||||
const [commentCount, setCommentCount] = useState(0);
|
||||
|
||||
const locale = user?.language ?? 'en';
|
||||
const isClinic = currentOrganization?.type === 'CLINIC';
|
||||
const canEditImportant = !isClinic && canEditCases(currentOrganization);
|
||||
|
||||
const tRef = useRef(t);
|
||||
tRef.current = t;
|
||||
|
||||
const treatmentLabel = useCallback(
|
||||
(type: string) => treatmentTypeLabelFromCatalog(type, treatmentCatalog),
|
||||
[treatmentCatalog],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
void treatmentCatalogApi.list().then((r) => setTreatmentCatalog(r.data)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const statusOptions: { value: LabTaskStatus; label: string }[] = useMemo(
|
||||
() => [
|
||||
{ value: 'IN_PROGRESS', label: tCases('statusInProgress') },
|
||||
{ value: 'COMPLETED', label: tCases('statusCompleted') },
|
||||
],
|
||||
[tCases],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
void (async () => {
|
||||
setLoadingList(true);
|
||||
setError('');
|
||||
try {
|
||||
const response = await organizationApi.listConnectionCases(connection.id, {
|
||||
q: search.trim() || undefined,
|
||||
page,
|
||||
limit: PAGE_SIZE,
|
||||
});
|
||||
if (cancelled) return;
|
||||
setCases(response.data.items);
|
||||
setPagination(response.data.pagination);
|
||||
} catch (error: unknown) {
|
||||
if (cancelled) return;
|
||||
showError(getUserFacingError(error, tErrors, tRef.current('caseHistoryErrorLoadList')));
|
||||
} finally {
|
||||
if (!cancelled) setLoadingList(false);
|
||||
}
|
||||
})();
|
||||
}, search ? 300 : 0);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [search, page, connection.id, showError, setError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedCaseId) {
|
||||
setSelectedCase(null);
|
||||
setCommentCount(0);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
void organizationApi
|
||||
.listConnectionCaseComments(connection.id, selectedCaseId)
|
||||
.then((r) => {
|
||||
if (!cancelled) setCommentCount(r.data.length);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setCommentCount(0);
|
||||
});
|
||||
|
||||
void (async () => {
|
||||
setLoadingDetail(true);
|
||||
setError('');
|
||||
try {
|
||||
const response = await organizationApi.getConnectionCase(connection.id, selectedCaseId);
|
||||
if (cancelled) return;
|
||||
setSelectedCase(response.data);
|
||||
} catch (error: unknown) {
|
||||
if (cancelled) return;
|
||||
showError(getUserFacingError(error, tErrors, tRef.current('caseHistoryErrorLoadDetail')));
|
||||
setSelectedCase(null);
|
||||
} finally {
|
||||
if (!cancelled) setLoadingDetail(false);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [selectedCaseId, connection.id, showError, setError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedCaseId) {
|
||||
setMobileDetailOpen(false);
|
||||
}
|
||||
}, [selectedCaseId]);
|
||||
|
||||
function scrollToComments() {
|
||||
document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
const loadClinicAttachmentBlob = useCallback(
|
||||
(_caseId: string, attachmentId: string) => treatmentsApi.getAttachmentFileBlob(attachmentId),
|
||||
[],
|
||||
);
|
||||
|
||||
async function handleCaseImportantToggle(isImportant: boolean) {
|
||||
if (!selectedCaseId || !canEditImportant || !selectedCase) return;
|
||||
|
||||
const previousCase = selectedCase;
|
||||
setSelectedCase({ ...selectedCase, isImportant });
|
||||
|
||||
setUpdatingImportant(true);
|
||||
setError('');
|
||||
try {
|
||||
const response = await casesApi.setCaseImportant(selectedCaseId, isImportant);
|
||||
setSelectedCase(response.data);
|
||||
} catch (error: unknown) {
|
||||
setSelectedCase(previousCase);
|
||||
showError(getUserFacingError(error, tErrors, tCases('errorUpdateTask')));
|
||||
} finally {
|
||||
setUpdatingImportant(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="text-sm text-primary hover:opacity-90"
|
||||
>
|
||||
{t('caseHistoryBackToConnections')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">
|
||||
{t('caseHistoryTitle', { name: connection.organizationName })}
|
||||
</h1>
|
||||
<p className="text-sm text-text-secondary mt-1">
|
||||
{isClinic ? t('caseHistorySubtitleClinic') : t('caseHistorySubtitleLab')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
|
||||
<section
|
||||
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
|
||||
mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
|
||||
}`}
|
||||
>
|
||||
<SearchBar
|
||||
embedded
|
||||
value={search}
|
||||
onChange={(value) => {
|
||||
setSearch(value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder={tCases('searchPlaceholder')}
|
||||
/>
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
{loadingList ? (
|
||||
<p className="text-sm text-text-muted">{tCommon('loading')}</p>
|
||||
) : cases.length === 0 ? (
|
||||
<p className="text-sm text-text-muted">{t('caseHistoryEmpty')}</p>
|
||||
) : (
|
||||
<ul className="space-y-2 max-h-[55vh] overflow-y-auto pr-1">
|
||||
{cases.map((item) => {
|
||||
const isActive = item.id === selectedCaseId;
|
||||
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedCaseId(item.id);
|
||||
setMobileDetailOpen(true);
|
||||
}}
|
||||
className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
|
||||
isActive
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-primary/40'
|
||||
}`}
|
||||
>
|
||||
<div className="font-medium text-text-primary">
|
||||
{formatPatientName(item.patient)}
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-0.5">{item.patient.mobile}</div>
|
||||
{!isClinic ? (
|
||||
<div className="text-xs text-text-muted mt-0.5">{item.clinic.name}</div>
|
||||
) : null}
|
||||
<div className="text-xs text-text-muted mt-1">
|
||||
{formatCaseDateTime(item.sentAt, locale)}
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-1 truncate">
|
||||
{item.treatmentType ? treatmentLabel(item.treatmentType) : '—'}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<CaseTaskProgressBar
|
||||
completed={item.taskProgress.completed}
|
||||
total={item.taskProgress.total}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{pagination.totalPages > 1 ? (
|
||||
<div className="flex items-center justify-between gap-2 pt-2 border-t border-border">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page <= 1 || loadingList}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
{tCases('prevPage')}
|
||||
</Button>
|
||||
<span className="text-xs text-text-muted text-center">
|
||||
{tCases('pageSummary', {
|
||||
page: pagination.page,
|
||||
totalPages: pagination.totalPages,
|
||||
total: pagination.total,
|
||||
})}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page >= pagination.totalPages || loadingList}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
{tCases('nextPage')}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
|
||||
selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
|
||||
}`}
|
||||
>
|
||||
{mobileDetailOpen && selectedCaseId ? (
|
||||
<MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
|
||||
) : null}
|
||||
{!selectedCaseId ? (
|
||||
<p className="text-sm text-text-muted">{tCases('selectCaseHint')}</p>
|
||||
) : loadingDetail || !selectedCase ? (
|
||||
<p className="text-sm text-text-muted">{tCommon('loading')}</p>
|
||||
) : (
|
||||
<CaseDetailPanel
|
||||
labCase={selectedCase}
|
||||
locale={locale}
|
||||
treatmentLabel={treatmentLabel}
|
||||
statusOptions={statusOptions}
|
||||
loadAttachmentBlob={loadClinicAttachmentBlob}
|
||||
showCommentsButton={isClinic}
|
||||
commentCount={commentCount}
|
||||
onCommentsClick={scrollToComments}
|
||||
canEditImportant={canEditImportant}
|
||||
updatingImportant={updatingImportant}
|
||||
onImportantChange={(checked) => void handleCaseImportantToggle(checked)}
|
||||
headerMetaLines={
|
||||
!isClinic ? (
|
||||
<p className="text-sm text-text-muted">
|
||||
{tCases('fromClinic', { name: selectedCase.clinic.name })}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-text-muted">
|
||||
{t('caseHistorySentToLab', { name: connection.organizationName })}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
commentsSection={
|
||||
isClinic && selectedCaseId ? (
|
||||
<section id="case-comments" className="scroll-mt-4 border-t border-border pt-4">
|
||||
<LabCaseCommentsPanel
|
||||
caseId={selectedCaseId}
|
||||
canPost
|
||||
canToggleVisibility={false}
|
||||
loadComments={async () => {
|
||||
const r = await organizationApi.listConnectionCaseComments(
|
||||
connection.id,
|
||||
selectedCaseId,
|
||||
);
|
||||
setCommentCount(r.data.length);
|
||||
return r.data;
|
||||
}}
|
||||
onPost={async (body) => {
|
||||
const r = await organizationApi.addConnectionCaseComment(
|
||||
connection.id,
|
||||
selectedCaseId,
|
||||
body,
|
||||
);
|
||||
setCommentCount((n) => n + 1);
|
||||
return r.data;
|
||||
}}
|
||||
onError={showError}
|
||||
/>
|
||||
</section>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { Check, History, Trash2, UserPlus, X } from 'lucide-react';
|
||||
import { Check, Trash2, UserPlus, X } from 'lucide-react';
|
||||
import type {
|
||||
CounterpartItemDto,
|
||||
CounterpartSearchResultDto,
|
||||
@@ -33,7 +33,6 @@ type OrganizationConnectionsMobileListProps = {
|
||||
getInvitationTarget: (row: CounterpartItemDto) => InvitationLinkTarget | null;
|
||||
onCopyInvitation: (row: CounterpartItemDto) => void;
|
||||
onRespond: (rowId: string, action: 'ACCEPT' | 'REJECT') => void;
|
||||
onViewCaseHistory: (row: CounterpartItemDto) => void;
|
||||
onDeleteConnection: (rowId: string) => void;
|
||||
onSendConnectionRequest: (orgId: string) => void;
|
||||
onToggleInviteForm: () => void;
|
||||
@@ -52,7 +51,6 @@ type OrganizationConnectionsMobileListProps = {
|
||||
sendRequest: string;
|
||||
acceptRequest: string;
|
||||
declineRequest: string;
|
||||
viewCaseHistory: string;
|
||||
removeConnection: string;
|
||||
statusToday: string;
|
||||
statusFound: string;
|
||||
@@ -79,7 +77,6 @@ export function OrganizationConnectionsMobileList({
|
||||
getInvitationTarget,
|
||||
onCopyInvitation,
|
||||
onRespond,
|
||||
onViewCaseHistory,
|
||||
onDeleteConnection,
|
||||
onSendConnectionRequest,
|
||||
onToggleInviteForm,
|
||||
@@ -158,27 +155,16 @@ export function OrganizationConnectionsMobileList({
|
||||
</>
|
||||
) : null}
|
||||
{row.status === 'ACTIVE' ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
|
||||
onClick={() => onViewCaseHistory(row)}
|
||||
aria-label={labels.viewCaseHistory}
|
||||
title={labels.viewCaseHistory}
|
||||
>
|
||||
<History className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
|
||||
disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
|
||||
onClick={() => onDeleteConnection(row.id)}
|
||||
aria-label={labels.removeConnection}
|
||||
title={labels.removeConnection}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
|
||||
disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
|
||||
onClick={() => onDeleteConnection(row.id)}
|
||||
aria-label={labels.removeConnection}
|
||||
title={labels.removeConnection}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useToast } from '@/lib/hooks/useToast';
|
||||
import { Check, History, Trash2, UserPlus, X } from 'lucide-react';
|
||||
import { Check, Trash2, UserPlus, X } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { notifyPendingConnectionsChanged } from '@/lib/hooks/usePendingConnectionsCount';
|
||||
import { useOrganizationInviteLinkCopy } from '@/lib/hooks/useOrganizationInviteLinkCopy';
|
||||
@@ -18,7 +18,6 @@ import { invitationTargetFromConnectionRow } from '@/components/invitations/orga
|
||||
import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
|
||||
import { OrganizationConnectionsMobileList } from '@/components/ui/organizations/OrganizationConnectionsMobileList';
|
||||
import { InvitationHistoryDialog } from '@/components/ui/organizations/InvitationHistoryDialog';
|
||||
import { ConnectionCaseHistoryContent } from '@/components/ui/organizations/ConnectionCaseHistoryContent';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Badge } from '@/components/ui/shared/Badge';
|
||||
import { organizationConnectionStatusVariant } from '@/components/organizations/connectionStatusVariant';
|
||||
@@ -92,10 +91,6 @@ export function OrganizationsPage() {
|
||||
const [historyOpen, setHistoryOpen] = useState(false);
|
||||
const [historyLoading, setHistoryLoading] = useState(false);
|
||||
const [historyItems, setHistoryItems] = useState<OrganizationInvitationHistoryItemDto[]>([]);
|
||||
const [caseHistoryConnection, setCaseHistoryConnection] = useState<CounterpartItemDto | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const {
|
||||
copiedId,
|
||||
copyingInvitationId,
|
||||
@@ -317,15 +312,6 @@ export function OrganizationsPage() {
|
||||
return <p className="text-sm text-text-secondary">{t('loadingOrganization')}</p>;
|
||||
}
|
||||
|
||||
if (caseHistoryConnection) {
|
||||
return (
|
||||
<ConnectionCaseHistoryContent
|
||||
connection={caseHistoryConnection}
|
||||
onBack={() => setCaseHistoryConnection(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
|
||||
@@ -375,7 +361,6 @@ export function OrganizationsPage() {
|
||||
getInvitationTarget={(row) => invitationTargetFromConnectionRow(row, currentOrganization.id)}
|
||||
onCopyInvitation={(row) => void handleCopyInvitationFromRow(row)}
|
||||
onRespond={(rowId, action) => void respondToPendingConnection(rowId, action)}
|
||||
onViewCaseHistory={setCaseHistoryConnection}
|
||||
onDeleteConnection={(rowId) => void deleteConnection(rowId)}
|
||||
onSendConnectionRequest={(orgId) => void submitConnectionRequest(orgId)}
|
||||
onToggleInviteForm={() => setShowInviteForm((v) => !v)}
|
||||
@@ -394,7 +379,6 @@ export function OrganizationsPage() {
|
||||
sendRequest: t('sendRequest'),
|
||||
acceptRequest: t('acceptRequest'),
|
||||
declineRequest: t('declineRequest'),
|
||||
viewCaseHistory: t('viewCaseHistory'),
|
||||
removeConnection: t('removeConnection'),
|
||||
statusToday: t('statusToday'),
|
||||
statusFound: t('statusFound'),
|
||||
@@ -498,15 +482,6 @@ export function OrganizationsPage() {
|
||||
)}
|
||||
{row.status === 'ACTIVE' && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
|
||||
onClick={() => setCaseHistoryConnection(row)}
|
||||
aria-label={t('viewCaseHistory')}
|
||||
title={t('viewCaseHistory')}
|
||||
>
|
||||
<History className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
|
||||
|
||||
Reference in New Issue
Block a user