improvement: task assignment flow added. cases and tasks feature updated accordingly.

frontend/src/components/ui/lab/CasesPage.tsx

@@ -24,6 +24,7 @@ import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 import type {
+  AssignableTaskStaff,
   CasesFilterOptions,
   LabCaseDetail,
   LabCaseListItem,
@@ -67,6 +68,8 @@ export function CasesPage() {
   const [loadingList, setLoadingList] = useState(false);
   const [loadingDetail, setLoadingDetail] = useState(false);
   const [updatingImportant, setUpdatingImportant] = useState(false);
+  const [assignableStaff, setAssignableStaff] = useState<AssignableTaskStaff[]>([]);
+  const [assigningTaskId, setAssigningTaskId] = useState<string | null>(null);
   const [commentCount, setCommentCount] = useState(0);
 
   const canEdit = canEditCases(currentOrganization);
@@ -142,8 +145,11 @@ export function CasesPage() {
   useEffect(() => {
     void casesApi.listFilterOptions().then((r) => setFilterOptions(r.data)).catch(() => {});
     void treatmentCatalogApi.list().then((r) => setTreatmentCatalog(r.data)).catch(() => {});
+    if (canEdit) {
+      void casesApi.listAssignableStaff().then((r) => setAssignableStaff(r.data)).catch(() => {});
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only initial fetch
-  }, []);
+  }, [canEdit]);
 
   useEffect(() => {
     const caseIdFromUrl = searchParams.get('caseId');
@@ -206,6 +212,21 @@ export function CasesPage() {
     setPage(1);
   }
 
+  async function handleAssignTask(taskId: string, assigneeUserId: string | null) {
+    if (!selectedCaseId || !canEdit) return;
+
+    setAssigningTaskId(taskId);
+    toast.setError('');
+    try {
+      const response = await casesApi.assignTask(selectedCaseId, taskId, assigneeUserId);
+      setSelectedCase(response.data);
+    } catch (error: unknown) {
+      toast.showError(getUserFacingError(error, tErrors, t('errorAssignTask')));
+    } finally {
+      setAssigningTaskId(null);
+    }
+  }
+
   async function handleCaseImportantToggle(isImportant: boolean) {
     if (!selectedCaseId || !canEdit || !selectedCase) return;
 
@@ -439,6 +460,12 @@ export function CasesPage() {
               canEditImportant={canEdit}
               updatingImportant={updatingImportant}
               onImportantChange={(checked) => void handleCaseImportantToggle(checked)}
+              assignableStaff={assignableStaff}
+              canAssignTasks={canEdit}
+              assigningTaskId={assigningTaskId}
+              onAssignTask={(taskId, assigneeUserId) =>
+                void handleAssignTask(taskId, assigneeUserId)
+              }
               headerMetaLines={
                 <p className="text-sm text-text-muted">
                   {t('fromClinic', { name: selectedCase.clinic.name })}