admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

improvement: sorts and filters updated for tasks feature.

Browse Source
This commit is contained in:
Admin
2026-07-13 13:22:38 +03:30
parent 4e6ed75844
commit 0d073f1ec0
16 changed files with 666 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/messages/en.json
View File

@@ -482,7 +482,14 @@
"filterStepCompleted": "Step completed",
"filterStepCompletedAll": "Any step",
"showCompleted": "Show completed",
"importantOnly": "Important only",
"importantOnly": "Important first",
"resetView": "Reset filters & sort",
"showInCase": "Show in case",
"showInCaseNotFound": "This task is not in the default in-progress list.",
"showInCaseError": "Could not locate this task in the list.",
"locatingCase": "Finding case in list…",
"taskCompletedToast": "Step completed — nice work!",
"taskCompletedFlash": "Done",
"filterSentFrom": "From",
"filterSentTo": "To",
"sortBy": "Sort by",

9
frontend/messages/fa.json
View File

@@ -483,7 +483,14 @@
"filterStepCompleted": "مرحله تکمیل‌شده",
"filterStepCompletedAll": "هر مرحله‌ای",
"showCompleted": "نمایش تکمیل‌شده‌ها",
"importantOnly": "فقط مهم‌ها",
"importantOnly": "مهم‌ها در ابتدا",
"resetView": "بازنشانی فیلترها و مرتب‌سازی",
"showInCase": "نمایش در پرونده",
"showInCaseNotFound": "این کار در فهرست پیش‌فرض در حال انجام نیست.",
"showInCaseError": "یافتن این کار در فهرست ممکن نشد.",
"locatingCase": "در حال یافتن پرونده در فهرست…",
"taskCompletedToast": "مرحله تکمیل شد — آفرین!",
"taskCompletedFlash": "انجام شد",
"filterSentFrom": "از",
"filterSentTo": "تا",
"sortBy": "مرتب‌سازی بر اساس",

9
frontend/messages/nl.json
View File

@@ -483,7 +483,14 @@
"filterStepCompleted": "Stap voltooid",
"filterStepCompletedAll": "Elke stap",
"showCompleted": "Voltooide tonen",
"importantOnly": "Alleen belangrijk",
"importantOnly": "Belangrijke cases eerst",
"resetView": "Filters en sortering resetten",
"showInCase": "In case tonen",
"showInCaseNotFound": "Deze taak staat niet in de standaardlijst met taken in uitvoering.",
"showInCaseError": "Kon deze taak niet in de lijst vinden.",
"locatingCase": "Case in lijst zoeken…",
"taskCompletedToast": "Stap voltooid — goed gedaan!",
"taskCompletedFlash": "Klaar",
"filterSentFrom": "Vanaf",
"filterSentTo": "Tot",
"sortBy": "Sorteren op",

51
frontend/src/components/lab/tasksViewDefaults.ts Normal file
View File

@@ -0,0 +1,51 @@
import type { LabTaskStatus, TaskSortField } from '@/types/cases';
export type TasksViewState = {
search: string;
clinicId: string;
statusFilter: LabTaskStatus | '';
stepCompleted: string;
sortBy: TaskSortField;
sortDir: 'asc' | 'desc';
importantOnly: boolean;
page: number;
highlightTaskId: string | null;
};
export const DEFAULT_TASKS_VIEW: TasksViewState = {
search: '',
clinicId: '',
statusFilter: 'IN_PROGRESS',
stepCompleted: '',
sortBy: 'date',
sortDir: 'desc',
importantOnly: false,
page: 1,
highlightTaskId: null,
};
export const TASK_COMPLETE_EXIT_MS = 550;
export function isDefaultTasksView(state: TasksViewState): boolean {
return (
state.search === DEFAULT_TASKS_VIEW.search &&
state.clinicId === DEFAULT_TASKS_VIEW.clinicId &&
state.statusFilter === DEFAULT_TASKS_VIEW.statusFilter &&
state.stepCompleted === DEFAULT_TASKS_VIEW.stepCompleted &&
state.sortBy === DEFAULT_TASKS_VIEW.sortBy &&
state.sortDir === DEFAULT_TASKS_VIEW.sortDir &&
state.importantOnly === DEFAULT_TASKS_VIEW.importantOnly &&
state.page === DEFAULT_TASKS_VIEW.page &&
state.highlightTaskId === DEFAULT_TASKS_VIEW.highlightTaskId
);
}
export function buildDefaultLocateParams(taskId: string, limit: number) {
return {
taskId,
limit,
sortBy: 'date' as const,
sortDir: 'desc' as const,
status: 'IN_PROGRESS' as const,
};
}

17
frontend/src/components/ui/lab/CasesPage.tsx
View File

@@ -17,6 +17,7 @@ import { casesApi } from '@/lib/api/cases';
import { tasksApi } from '@/lib/api/tasks';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
import { Badge } from '@/components/ui/shared/Badge';
import { Button } from '@/components/ui/shared/Button';
import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
@@ -216,6 +217,11 @@ export function CasesPage() {
try {
const response = await casesApi.setCaseImportant(selectedCaseId, isImportant);
setSelectedCase(response.data);
setCases((prev) =>
prev.map((item) =>
item.id === selectedCaseId ? { ...item, isImportant: response.data.isImportant } : item,
),
);
} catch (error: unknown) {
setSelectedCase(previousCase);
toast.showError(getUserFacingError(error, tErrors, t('errorUpdateTask')));
@@ -345,8 +351,15 @@ export function CasesPage() {
: 'border-border hover:border-primary/40'
}`}
>
<div className="font-medium text-text-primary">
{formatPatientName(item.patient)}
<div className="flex flex-wrap items-center gap-1.5">
<div className="font-medium text-text-primary">
{formatPatientName(item.patient)}
</div>
{item.isImportant ? (
<Badge variant="warning" fixedWidth={false}>
{t('importantLabel')}
</Badge>
) : null}
</div>
<div className="text-xs text-text-muted mt-0.5">
{item.patient.mobile}

49
frontend/src/components/ui/lab/TaskRow.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { MessageSquare } from 'lucide-react';
import { Check, FolderOpen, MessageSquare } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { Badge } from '@/components/ui/shared/Badge';
import { Button } from '@/components/ui/shared/Button';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
import {
@@ -21,6 +22,8 @@ interface TaskRowProps {
task: LabTaskListItem;
locale: string;
flatMode: boolean;
highlighted?: boolean;
exiting?: boolean;
canEdit: boolean;
statusOptions: { value: LabTaskStatus; label: string }[];
updatingTaskId: string | null;
@@ -29,6 +32,7 @@ interface TaskRowProps {
onStatusUpdate: (taskId: string, status: LabTaskStatus) => void;
onToggleComments: (taskId: string) => void;
onCommentError: (message: string) => void;
onShowInCase?: (task: LabTaskListItem) => void;
}
function formatPatientName(patient: { firstName: string; lastName: string }) {
@@ -39,6 +43,8 @@ export function TaskRow({
task,
locale,
flatMode,
highlighted = false,
exiting = false,
canEdit,
statusOptions,
updatingTaskId,
@@ -47,6 +53,7 @@ export function TaskRow({
onStatusUpdate,
onToggleComments,
onCommentError,
onShowInCase,
}: TaskRowProps) {
const t = useTranslations('tasks');
const taskDate = new Intl.DateTimeFormat(locale, {
@@ -55,8 +62,18 @@ export function TaskRow({
day: 'numeric',
}).format(new Date(task.createdAt));
const rowClassName = [
flatMode ? undefined : 'border-b border-border/40 last:border-b-0',
exiting ? 'task-row-complete-exit' : undefined,
!exiting && highlighted
? 'relative bg-primary/10 ring-2 ring-inset ring-primary/50 shadow-[0_0_16px_rgba(99,102,241,0.2)]'
: undefined,
]
.filter(Boolean)
.join(' ');
return (
<li className={flatMode ? undefined : 'border-b border-border/40 last:border-b-0'}>
<li id={`task-row-${task.id}`} className={rowClassName}>
<div
className={`flex flex-col gap-3 px-3 py-3 sm:grid sm:grid-cols-[minmax(0,1fr)_132px_auto] sm:items-center sm:gap-x-3 sm:gap-y-0.5 sm:py-2 ${
flatMode ? '' : 'ps-5'
@@ -67,7 +84,13 @@ export function TaskRow({
<p className="text-sm font-medium text-text-primary">
{task.stepOrder}. {task.stepLabel}
</p>
{flatMode && task.isImportant ? (
{exiting ? (
<span className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-700 dark:text-emerald-400">
<Check className="h-3.5 w-3.5" />
{t('taskCompletedFlash')}
</span>
) : null}
{flatMode && task.isImportant && !exiting ? (
<Badge variant="warning" fixedWidth={false}>
{t('importantBadge')}
</Badge>
@@ -94,7 +117,7 @@ export function TaskRow({
{canEdit ? (
<select
value={task.status}
disabled={updatingTaskId === task.id}
disabled={updatingTaskId === task.id || exiting}
onChange={(e) => onStatusUpdate(task.id, e.target.value as LabTaskStatus)}
className={`${FORM_SELECT_CLASS} w-full sm:max-w-[132px] font-medium`}
style={labTaskStatusSelectStyle(task.status)}
@@ -112,8 +135,20 @@ export function TaskRow({
)}
</div>
<div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end">
{canEdit ? (
<div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end flex-wrap">
{flatMode && onShowInCase && !exiting ? (
<Button
type="button"
variant="ghost"
size="sm"
className="text-xs px-2 py-1 h-auto"
onClick={() => onShowInCase(task)}
>
<FolderOpen className="h-3.5 w-3.5 me-1" />
{t('showInCase')}
</Button>
) : null}
{canEdit && !exiting ? (
<button
type="button"
onClick={() => onToggleComments(task.id)}
@@ -144,7 +179,7 @@ export function TaskRow({
</div>
</div>
{commentsOpen && canEdit ? (
{commentsOpen && canEdit && !exiting ? (
<div className="px-3 pb-3 border-t border-border/50">
<LabCaseCommentsPanel
caseId={task.labCaseId}

290
frontend/src/components/ui/lab/TasksPage.tsx
View File

@@ -3,12 +3,20 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { Checkbox } from '@/components/ui/shared/Checkbox';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
import { SearchBar } from '@/components/ui/shared/SearchBar';
import { TaskCaseGroupHeader } from '@/components/ui/lab/TaskCaseGroupHeader';
import { TaskProsthesisGroupHeader } from '@/components/ui/lab/TaskProsthesisGroupHeader';
import { TaskRow } from '@/components/ui/lab/TaskRow';
import { groupTasksForDisplay } from '@/components/lab/taskListGrouping';
import {
buildDefaultLocateParams,
DEFAULT_TASKS_VIEW,
isDefaultTasksView,
TASK_COMPLETE_EXIT_MS,
} from '@/components/lab/tasksViewDefaults';
import { scrollWithinMainScrollContainer } from '@/components/shared/scrollWithinMain';
import { getUserFacingError } from '@/components/shared/formatApiError';
import { canEditTasks, canViewTasks } from '@/components/shared/permissions';
import { useAuth } from '@/lib/hooks/useAuth';
@@ -31,7 +39,7 @@ export function TasksPage() {
const t = useTranslations('tasks');
const tErrors = useTranslations('errors');
const { currentOrganization, user, isAuthReady } = useAuth();
const { showError, setError, messages: toastMessages } = useToast();
const { showError, showSuccess, setError } = useToast();
const [tasks, setTasks] = useState<LabTaskListItem[]>([]);
const [pagination, setPagination] = useState<PaginatedLabTasks['pagination']>({
@@ -45,17 +53,25 @@ export function TasksPage() {
workflowSteps: [],
});
const [prosthesisCatalog, setProsthesisCatalog] = useState<ProsthesisCatalogEntry[]>([]);
const [page, setPage] = useState(1);
const [page, setPage] = useState(DEFAULT_TASKS_VIEW.page);
const [loading, setLoading] = useState(false);
const [locatingCase, setLocatingCase] = useState(false);
const [updatingTaskId, setUpdatingTaskId] = useState<string | null>(null);
const [exitingTaskIds, setExitingTaskIds] = useState<Set<string>>(() => new Set());
const [expandedCommentsTaskId, setExpandedCommentsTaskId] = useState<string | null>(null);
const [search, setSearch] = useState('');
const [clinicId, setClinicId] = useState('');
const [statusFilter, setStatusFilter] = useState<'' | LabTaskStatus>('IN_PROGRESS');
const [stepCompleted, setStepCompleted] = useState('');
const [sortBy, setSortBy] = useState<TaskSortField>('date');
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
const [search, setSearch] = useState(DEFAULT_TASKS_VIEW.search);
const [clinicId, setClinicId] = useState(DEFAULT_TASKS_VIEW.clinicId);
const [statusFilter, setStatusFilter] = useState<'' | LabTaskStatus>(
DEFAULT_TASKS_VIEW.statusFilter,
);
const [stepCompleted, setStepCompleted] = useState(DEFAULT_TASKS_VIEW.stepCompleted);
const [importantOnly, setImportantOnly] = useState(DEFAULT_TASKS_VIEW.importantOnly);
const [sortBy, setSortBy] = useState<TaskSortField>(DEFAULT_TASKS_VIEW.sortBy);
const [sortDir, setSortDir] = useState<'asc' | 'desc'>(DEFAULT_TASKS_VIEW.sortDir);
const [highlightTaskId, setHighlightTaskId] = useState<string | null>(
DEFAULT_TASKS_VIEW.highlightTaskId,
);
const canView = canViewTasks(currentOrganization);
const canEdit = canEditTasks(currentOrganization);
@@ -63,6 +79,7 @@ export function TasksPage() {
const tRef = useRef(t);
tRef.current = t;
const loadTasksRef = useRef<() => Promise<void>>(async () => {});
const statusOptions: { value: LabTaskStatus; label: string }[] = useMemo(
() => [
@@ -83,16 +100,41 @@ export function TasksPage() {
if (clinicId) params.clinicOrganizationId = clinicId;
if (statusFilter) params.status = statusFilter;
if (stepCompleted) params.stepCompleted = stepCompleted;
if (importantOnly) params.pinImportant = true;
return params;
}, [page, search, clinicId, statusFilter, stepCompleted, sortBy, sortDir]);
}, [page, search, clinicId, statusFilter, stepCompleted, importantOnly, sortBy, sortDir]);
const displayModel = useMemo(
() => groupTasksForDisplay(tasks, sortBy),
[tasks, sortBy],
);
const displayModel = useMemo(() => groupTasksForDisplay(tasks, sortBy), [tasks, sortBy]);
const groupingDisabled = sortBy !== 'date';
const viewState = useMemo(
() => ({
search,
clinicId,
statusFilter,
stepCompleted,
sortBy,
sortDir,
importantOnly,
page,
highlightTaskId,
}),
[
search,
clinicId,
statusFilter,
stepCompleted,
sortBy,
sortDir,
importantOnly,
page,
highlightTaskId,
],
);
const showReset = !isDefaultTasksView(viewState);
const loadTasks = useCallback(async () => {
setLoading(true);
setError('');
@@ -107,6 +149,8 @@ export function TasksPage() {
}
}, [listParams, showError, setError, tErrors]);
loadTasksRef.current = loadTasks;
useEffect(() => {
if (!canView) return;
const timeout = setTimeout(() => void loadTasks(), search ? 300 : 0);
@@ -129,6 +173,66 @@ export function TasksPage() {
})();
}, [canView]);
useEffect(() => {
if (!highlightTaskId || loading || locatingCase) return;
const frame = requestAnimationFrame(() => {
const el = document.getElementById(`task-row-${highlightTaskId}`);
scrollWithinMainScrollContainer(el, { padding: 24 });
});
return () => cancelAnimationFrame(frame);
}, [highlightTaskId, loading, locatingCase, tasks, displayModel]);
const clearFocus = useCallback(() => {
setHighlightTaskId(null);
}, []);
const resetView = useCallback(() => {
setSearch(DEFAULT_TASKS_VIEW.search);
setClinicId(DEFAULT_TASKS_VIEW.clinicId);
setStatusFilter(DEFAULT_TASKS_VIEW.statusFilter);
setStepCompleted(DEFAULT_TASKS_VIEW.stepCompleted);
setImportantOnly(DEFAULT_TASKS_VIEW.importantOnly);
setSortBy(DEFAULT_TASKS_VIEW.sortBy);
setSortDir(DEFAULT_TASKS_VIEW.sortDir);
setPage(DEFAULT_TASKS_VIEW.page);
setHighlightTaskId(DEFAULT_TASKS_VIEW.highlightTaskId);
setExpandedCommentsTaskId(null);
}, []);
const handleShowInCase = useCallback(
async (task: LabTaskListItem) => {
setLocatingCase(true);
setError('');
setSearch(DEFAULT_TASKS_VIEW.search);
setClinicId(DEFAULT_TASKS_VIEW.clinicId);
setStatusFilter(DEFAULT_TASKS_VIEW.statusFilter);
setStepCompleted(DEFAULT_TASKS_VIEW.stepCompleted);
setImportantOnly(DEFAULT_TASKS_VIEW.importantOnly);
setSortBy(DEFAULT_TASKS_VIEW.sortBy);
setSortDir(DEFAULT_TASKS_VIEW.sortDir);
setExpandedCommentsTaskId(null);
setHighlightTaskId(task.id);
try {
const response = await tasksApi.locatePage(buildDefaultLocateParams(task.id, PAGE_SIZE));
if (!response.data.found) {
showError(t('showInCaseNotFound'));
setHighlightTaskId(null);
setPage(1);
return;
}
setPage(response.data.page);
} catch (error: unknown) {
showError(getUserFacingError(error, tErrors, t('showInCaseError')));
setHighlightTaskId(null);
setPage(1);
} finally {
setLocatingCase(false);
}
},
[setError, showError, t, tErrors],
);
const handleStatusUpdate = useCallback(
async (taskId: string, status: LabTaskStatus) => {
if (!canEdit) return;
@@ -136,14 +240,34 @@ export function TasksPage() {
setError('');
try {
await tasksApi.updateStatus(taskId, status);
await loadTasks();
const willLeaveList = status === 'COMPLETED' && statusFilter === 'IN_PROGRESS';
if (willLeaveList) {
setTasks((prev) =>
prev.map((task) => (task.id === taskId ? { ...task, status: 'COMPLETED' } : task)),
);
setExitingTaskIds((prev) => new Set(prev).add(taskId));
showSuccess(t('taskCompletedToast'));
window.setTimeout(() => {
setExitingTaskIds((prev) => {
const next = new Set(prev);
next.delete(taskId);
return next;
});
void loadTasksRef.current();
}, TASK_COMPLETE_EXIT_MS);
} else {
await loadTasks();
}
} catch (error: unknown) {
showError(getUserFacingError(error, tErrors, t('errorUpdateTask')));
} finally {
setUpdatingTaskId(null);
}
},
[canEdit, loadTasks, setError, showError, t, tErrors],
[canEdit, loadTasks, setError, showError, showSuccess, statusFilter, t, tErrors],
);
const filterSelectClass = `${FORM_SELECT_CLASS} w-full rounded-md px-2 py-1.5 text-sm`;
@@ -165,6 +289,37 @@ export function TasksPage() {
}
}, [sortBy]);
const applyFilterChange = useCallback(
(apply: () => void) => {
apply();
setPage(1);
clearFocus();
},
[clearFocus],
);
const renderTaskRow = (task: LabTaskListItem, flatMode: boolean) => (
<TaskRow
key={task.id}
task={task}
locale={locale}
flatMode={flatMode}
highlighted={highlightTaskId === task.id}
exiting={exitingTaskIds.has(task.id)}
canEdit={canEdit}
statusOptions={statusOptions}
updatingTaskId={updatingTaskId}
commentsOpen={expandedCommentsTaskId === task.id}
prosthesisCatalog={prosthesisCatalog}
onStatusUpdate={(id, status) => void handleStatusUpdate(id, status)}
onToggleComments={(id) =>
setExpandedCommentsTaskId((prev) => (prev === id ? null : id))
}
onCommentError={showError}
onShowInCase={flatMode ? (row) => void handleShowInCase(row) : undefined}
/>
);
if (!isAuthReady) {
return <div className="text-sm text-text-muted">{t('loading')}</div>;
}
@@ -189,10 +344,7 @@ export function TasksPage() {
<SearchBar
embedded
value={search}
onChange={(v) => {
setSearch(v);
setPage(1);
}}
onChange={(v) => applyFilterChange(() => setSearch(v))}
placeholder={t('searchPlaceholder')}
/>
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
@@ -200,10 +352,7 @@ export function TasksPage() {
<span className="text-xs text-text-muted">{t('filterClinic')}</span>
<select
value={clinicId}
onChange={(e) => {
setClinicId(e.target.value);
setPage(1);
}}
onChange={(e) => applyFilterChange(() => setClinicId(e.target.value))}
className={filterSelectClass}
>
<option value="">{t('filterClinicAll')}</option>
@@ -218,28 +367,21 @@ export function TasksPage() {
<span className="text-xs text-text-muted">{t('filterStatus')}</span>
<select
value={statusFilter}
onChange={(e) => {
setStatusFilter(e.target.value as '' | LabTaskStatus);
setPage(1);
}}
onChange={(e) =>
applyFilterChange(() => setStatusFilter(e.target.value as '' | LabTaskStatus))
}
className={filterSelectClass}
>
<option value="IN_PROGRESS">{t('statusInProgress')}</option>
<option value="COMPLETED">{t('statusCompleted')}</option>
<option value="">{t('filterStatusAll')}</option>
{statusOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</label>
<label className="space-y-1">
<span className="text-xs text-text-muted">{t('filterStepCompleted')}</span>
<select
value={stepCompleted}
onChange={(e) => {
setStepCompleted(e.target.value);
setPage(1);
}}
onChange={(e) => applyFilterChange(() => setStepCompleted(e.target.value))}
className={filterSelectClass}
>
<option value="">{t('filterStepCompletedAll')}</option>
@@ -255,7 +397,10 @@ export function TasksPage() {
<div className="flex gap-1.5">
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as TaskSortField)}
onChange={(e) => {
setSortBy(e.target.value as TaskSortField);
clearFocus();
}}
className={`${filterSelectClass} min-w-0 flex-1`}
>
<option value="date">{t('sortDate')}</option>
@@ -276,14 +421,29 @@ export function TasksPage() {
</div>
</label>
</div>
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<Checkbox
checked={importantOnly}
onChange={(checked) => applyFilterChange(() => setImportantOnly(checked))}
label={t('importantOnly')}
className="text-xs [&_span:last-child]:text-xs"
/>
{showReset ? (
<Button type="button" variant="ghost" size="sm" onClick={resetView}>
{t('resetView')}
</Button>
) : null}
</div>
{groupingDisabled && sortHintKey ? (
<p className="text-[11px] text-text-muted">{t(sortHintKey)}</p>
) : null}
</section>
<section className="surface-card min-h-[280px]">
{loading && tasks.length === 0 ? (
<p className="p-3 text-sm text-text-muted">{t('loading')}</p>
{(loading || locatingCase) && tasks.length === 0 ? (
<p className="p-3 text-sm text-text-muted">
{locatingCase ? t('locatingCase') : t('loading')}
</p>
) : tasks.length === 0 ? (
<p className="p-3 text-sm text-text-muted">{t('emptyList')}</p>
) : displayModel.mode === 'grouped' ? (
@@ -301,24 +461,7 @@ export function TasksPage() {
prosthesisCatalog={prosthesisCatalog}
/>
<ul>
{prosthesisGroup.tasks.map((task) => (
<TaskRow
key={task.id}
task={task}
locale={locale}
flatMode={false}
canEdit={canEdit}
statusOptions={statusOptions}
updatingTaskId={updatingTaskId}
commentsOpen={expandedCommentsTaskId === task.id}
prosthesisCatalog={prosthesisCatalog}
onStatusUpdate={(id, status) => void handleStatusUpdate(id, status)}
onToggleComments={(id) =>
setExpandedCommentsTaskId((prev) => (prev === id ? null : id))
}
onCommentError={showError}
/>
))}
{prosthesisGroup.tasks.map((task) => renderTaskRow(task, false))}
</ul>
</div>
))}
@@ -327,29 +470,12 @@ export function TasksPage() {
</div>
) : (
<ul className="divide-y divide-border">
{displayModel.tasks.map((task) => (
<TaskRow
key={task.id}
task={task}
locale={locale}
flatMode
canEdit={canEdit}
statusOptions={statusOptions}
updatingTaskId={updatingTaskId}
commentsOpen={expandedCommentsTaskId === task.id}
prosthesisCatalog={prosthesisCatalog}
onStatusUpdate={(id, status) => void handleStatusUpdate(id, status)}
onToggleComments={(id) =>
setExpandedCommentsTaskId((prev) => (prev === id ? null : id))
}
onCommentError={showError}
/>
))}
{displayModel.tasks.map((task) => renderTaskRow(task, true))}
</ul>
)}
</section>
{pagination.totalPages > 1 && (
{pagination.totalPages > 1 ? (
<div className="flex items-center justify-between gap-3 flex-wrap">
<p className="text-sm text-text-muted">
{t('pageSummary', {
@@ -363,7 +489,10 @@ export function TasksPage() {
type="button"
variant="secondary"
disabled={page <= 1 || loading}
onClick={() => setPage((p) => Math.max(1, p - 1))}
onClick={() => {
setPage((p) => Math.max(1, p - 1));
clearFocus();
}}
>
←
</Button>
@@ -371,13 +500,16 @@ export function TasksPage() {
type="button"
variant="secondary"
disabled={page >= pagination.totalPages || loading}
onClick={() => setPage((p) => p + 1)}
onClick={() => {
setPage((p) => p + 1);
clearFocus();
}}
>
→
</Button>
</div>
</div>
)}
) : null}
</div>
);
}

9
frontend/src/lib/api/tasks.ts
View File

@@ -4,6 +4,8 @@ import type {
LabTaskListItem,
LabTaskStatus,
ListLabTasksParams,
LocateTaskPageParams,
LocateTaskPageResult,
PaginatedLabTasks,
TaskFilterOptions,
} from '@/types/cases';
@@ -21,6 +23,13 @@ export const tasksApi = {
return response.data;
},
locatePage: async (
params: LocateTaskPageParams,
): Promise<{ success: boolean; data: LocateTaskPageResult }> => {
const response = await apiClient.get('/tasks/locate-page', { params });
return response.data;
},
updateStatus: async (
taskId: string,
status: LabTaskStatus,

25
frontend/src/styles/globals.css
View File

@@ -309,4 +309,29 @@ select option {
.lucide {
color: var(--color-icon);
stroke: currentColor;
}
@keyframes task-row-complete-exit {
0% {
opacity: 1;
transform: translateX(0);
max-height: 9rem;
}
40% {
opacity: 1;
transform: translateX(0);
background-color: color-mix(in srgb, var(--color-badge-success-bg) 75%, transparent);
}
100% {
opacity: 0;
transform: translateX(0.75rem);
max-height: 0;
overflow: hidden;
}
}
.task-row-complete-exit {
animation: task-row-complete-exit 0.55s ease-in forwards;
pointer-events: none;
overflow: hidden;
}

22
frontend/src/types/cases.ts
View File

@@ -3,6 +3,7 @@ export type LabTaskStatus = 'IN_PROGRESS' | 'COMPLETED';
export interface LabCaseListItem {
id: string;
sentAt: string | null;
isImportant: boolean;
clinic: { id: string; name: string };
patient: {
id: string;
@@ -148,15 +149,36 @@ export interface ListLabTasksParams {
status?: LabTaskStatus;
completed?: boolean;
important?: boolean;
pinImportant?: boolean;
sentFrom?: string;
sentTo?: string;
stepCompleted?: string;
labCaseId?: string;
sortBy?: TaskSortField;
sortDir?: 'asc' | 'desc';
page?: number;
limit?: number;
}
export interface LocateTaskPageParams {
taskId: string;
q?: string;
clinicOrganizationId?: string;
status?: LabTaskStatus;
important?: boolean;
pinImportant?: boolean;
stepCompleted?: string;
sortBy?: TaskSortField;
sortDir?: 'asc' | 'desc';
limit?: number;
}
export interface LocateTaskPageResult {
page: number;
found: boolean;
labCaseId: string;
}
export interface LabTaskListItem {
id: string;
labCaseId: string;